Change "Clear All' to a html button

Author: kuzdogan

app/components/verification/RecentVerifications.tsx

@@ -113,71 +113,72 @@ export default function RecentVerifications({ className = "" }: RecentVerificati
             </div>
           )}
           {jobs.length > 0 && (
-            <div
+            <button
+              type="button"
               onClick={handleClearAll}
-              className="flex items-center space-x-1 text-sm text-gray-500 hover:text-red-600"
+              className="flex items-center space-x-1 text-sm text-gray-500 hover:text-red-600 focus:outline-none"
             >
               <IoTrashOutline className="w-4 h-4" />
               <span>Clear All</span>
-            </div>
+            </button>
           )}
         </div>
       </div>
 
       <div className="overflow-x-auto">
         <table className="w-full min-w-[600px]">
-        <thead>
-          <tr className="border-b border-gray-300">
-            <th className="py-2 text-left text-sm font-medium text-gray-900">Date</th>
-            <th className="py-2 px-4 text-left text-sm font-medium text-gray-900">Job ID</th>
-            <th className="py-2 px-4 text-left text-sm font-medium text-gray-900">Chain</th>
-            <th className="py-2 px-4 text-left text-sm font-medium text-gray-900">Address</th>
-            <th className="py-2 text-left text-sm font-medium text-gray-900">Status</th>
-          </tr>
-        </thead>
-        <tbody>
-          {displayedJobs.map((job) => (
-            <tr key={job.verificationId} className="border-b border-gray-200 hover:bg-gray-100">
-              <td className="py-2 text-sm text-gray-700">
-                <div>
-                  <div className="text-[0.65rem] text-gray-500">
-                    {new Date(job.submittedAt).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })} (
-                    {Intl.DateTimeFormat().resolvedOptions().timeZone})
+          <thead>
+            <tr className="border-b border-gray-300">
+              <th className="py-2 text-left text-sm font-medium text-gray-900">Date</th>
+              <th className="py-2 px-4 text-left text-sm font-medium text-gray-900">Job ID</th>
+              <th className="py-2 px-4 text-left text-sm font-medium text-gray-900">Chain</th>
+              <th className="py-2 px-4 text-left text-sm font-medium text-gray-900">Address</th>
+              <th className="py-2 text-left text-sm font-medium text-gray-900">Status</th>
+            </tr>
+          </thead>
+          <tbody>
+            {displayedJobs.map((job) => (
+              <tr key={job.verificationId} className="border-b border-gray-200 hover:bg-gray-100">
+                <td className="py-2 text-sm text-gray-700">
+                  <div>
+                    <div className="text-[0.65rem] text-gray-500">
+                      {new Date(job.submittedAt).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })} (
+                      {Intl.DateTimeFormat().resolvedOptions().timeZone})
+                    </div>
+                    <div>{new Date(job.submittedAt).toISOString().split("T")[0]}</div>
                   </div>
-                  <div>{new Date(job.submittedAt).toISOString().split("T")[0]}</div>
-                </div>
-              </td>
-              <td className="py-2 px-4 text-sm">
-                <a
-                  href={`/jobs/${job.verificationId}`}
-                  className="font-mono text-cerulean-blue-600 hover:text-cerulean-blue-800 hover:bg-cerulean-blue-50 focus:outline-none text-left underline"
-                  title={job.verificationId}
-                >
-                  {truncateJobId(job.verificationId)}
-                </a>
-              </td>
-              <td className="py-2 px-4 text-sm text-gray-600 break-words">
-                {job.contract
-                  ? `${getChainName(chains, parseInt(job.contract.chainId))} (${job.contract.chainId})`
-                  : "-"}
-              </td>
-              <td className="py-2 px-4 text-sm font-mono text-gray-600">
-                {job.contract?.address ? (
-                  <span data-tooltip-id="address-tooltip" data-tooltip-content={job.contract.address}>
-                    {truncateAddress(job.contract.address)}
+                </td>
+                <td className="py-2 px-4 text-sm">
+                  <a
+                    href={`/jobs/${job.verificationId}`}
+                    className="font-mono text-cerulean-blue-600 hover:text-cerulean-blue-800 hover:bg-cerulean-blue-50 focus:outline-none text-left underline"
+                    title={job.verificationId}
+                  >
+                    {truncateJobId(job.verificationId)}
+                  </a>
+                </td>
+                <td className="py-2 px-4 text-sm text-gray-600 break-words">
+                  {job.contract
+                    ? `${getChainName(chains, parseInt(job.contract.chainId))} (${job.contract.chainId})`
+                    : "-"}
+                </td>
+                <td className="py-2 px-4 text-sm font-mono text-gray-600">
+                  {job.contract?.address ? (
+                    <span data-tooltip-id="address-tooltip" data-tooltip-content={job.contract.address}>
+                      {truncateAddress(job.contract.address)}
+                    </span>
+                  ) : (
+                    "-"
+                  )}
+                </td>
+                <td className="py-2 text-sm">
+                  <span className={`px-2 py-1 rounded text-xs font-medium ${getStatusColor(job)}`}>
+                    {getStatusText(job)}
                   </span>
-                ) : (
-                  "-"
-                )}
-              </td>
-              <td className="py-2 text-sm">
-                <span className={`px-2 py-1 rounded text-xs font-medium ${getStatusColor(job)}`}>
-                  {getStatusText(job)}
-                </span>
-              </td>
-            </tr>
-          ))}
-        </tbody>
+                </td>
+              </tr>
+            ))}
+          </tbody>
         </table>
       </div>