@chrysb/alphaclaw 0.2.3 → 0.3.0

package/lib/public/js/components/google.js

@@ -65,13 +65,13 @@ export function Google({ gatewayStatus }) {
   useEffect(() => {
     const handler = async (e) => {
       if (e.data?.google === "success") {
-        showToast("✓ Google account connected", "green");
+        showToast("✓ Google account connected", "success");
         setApiStatus({});
         await refresh();
       } else if (e.data?.google === "error") {
         showToast(
           "✗ Google auth failed: " + (e.data.message || "unknown"),
-          "red",
+          "error",
         );
       }
     };
@@ -111,7 +111,7 @@ export function Google({ gatewayStatus }) {
       });
       setApiStatus({});
       setScopes(getDefaultScopes());
-      showToast("Google account disconnected", "green");
+      showToast("Google account disconnected", "success");
     } else {
       alert("Failed to disconnect: " + (data.error || "unknown"));
     }
@@ -155,7 +155,7 @@ export function Google({ gatewayStatus }) {
                 ${isAuthed &&
                 html`<button
                   onclick=${handleCheckApis}
-                  class="text-xs text-gray-500 hover:text-gray-300"
+                  class="text-xs px-2 py-1 rounded-lg ac-btn-ghost"
                 >
                   ↻ Check APIs
                 </button>`}
@@ -166,26 +166,26 @@ export function Google({ gatewayStatus }) {
                 apiStatus=${isAuthed ? apiStatus : {}}
                 loading=${isAuthed && checkingApis}
               />
-              <div class="flex justify-between items-center pt-1">
-                <div class="flex items-center gap-2">
+              <div class="pt-1 space-y-2 sm:space-y-0 sm:flex sm:justify-between sm:items-center">
+                <div class="grid grid-cols-2 gap-2 w-full sm:w-auto sm:flex sm:items-center">
                   <button
                     onclick=${() => startAuth(email)}
                     disabled=${isAuthed && !scopesChanged}
-                    class="text-xs font-medium px-3 py-1.5 rounded-lg ac-btn-cyan"
+                    class="w-full sm:w-auto text-xs font-medium px-3 py-1.5 rounded-lg ac-btn-cyan"
                   >
                     ${isAuthed ? "Update Permissions" : "Sign in with Google"}
                   </button>
                   <button
                     type="button"
                     onclick=${() => setModalOpen(true)}
-                    class="text-xs font-medium px-3 py-1.5 rounded-lg border border-border text-gray-300 hover:border-gray-500"
+                    class="w-full sm:w-auto text-xs font-medium px-3 py-1.5 rounded-lg ac-btn-secondary"
                   >
                     Edit credentials
                   </button>
                 </div>
                 <button
                   onclick=${() => setDisconnectDialogOpen(true)}
-                  class="text-xs text-red-400/60 hover:text-red-400"
+                  class="text-xs px-2 py-1 rounded-lg ac-btn-ghost w-full sm:w-auto"
                 >
                   Disconnect
                 </button>

package/lib/public/js/components/icons.js

@@ -21,3 +21,22 @@ export const ChevronDownIcon = ({ className = "" }) => html`
     />
   </svg>
 `;
+
+export const CloseIcon = ({ className = "" }) => html`
+  <svg
+    class=${className}
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    aria-hidden="true"
+  >
+    <path
+      d="M4 4L12 12M12 4L4 12"
+      stroke="currentColor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+`;

package/lib/public/js/components/info-tooltip.js

@@ -0,0 +1,18 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+
+const html = htm.bind(h);
+
+export const InfoTooltip = ({ text = "", widthClass = "w-64" }) => html`
+  <span class="relative group inline-flex items-center cursor-default select-none">
+    <span
+      class="inline-flex h-4 w-4 items-center justify-center rounded-full border border-gray-500 text-[10px] text-gray-400 cursor-default"
+      aria-label=${text}
+      >?</span
+    >
+    <span
+      class=${`pointer-events-none absolute left-1/2 top-full z-10 mt-2 hidden -translate-x-1/2 rounded-md border border-border bg-modal px-2 py-1 text-[11px] text-gray-300 shadow-lg group-hover:block ${widthClass}`}
+      >${text}</span
+    >
+  </span>
+`;

package/lib/public/js/components/loading-spinner.js

@@ -0,0 +1,32 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+
+const html = htm.bind(h);
+
+export const LoadingSpinner = ({
+  className = "h-4 w-4",
+  ariaHidden = true,
+  style = "",
+}) => html`
+  <svg
+    class=${`ac-spinner ${className}`.trim()}
+    viewBox="0 0 24 24"
+    fill="none"
+    aria-hidden=${ariaHidden ? "true" : "false"}
+    style=${style}
+  >
+    <circle
+      class="opacity-25"
+      cx="12"
+      cy="12"
+      r="10"
+      stroke="currentColor"
+      stroke-width="4"
+    />
+    <path
+      class="opacity-75"
+      fill="currentColor"
+      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+    />
+  </svg>
+`;

package/lib/public/js/components/modal-shell.js

@@ -0,0 +1,42 @@
+import { h } from "https://esm.sh/preact";
+import { useEffect } from "https://esm.sh/preact/hooks";
+import { createPortal } from "https://esm.sh/preact/compat";
+import htm from "https://esm.sh/htm";
+
+const html = htm.bind(h);
+
+export const ModalShell = ({
+  visible = false,
+  onClose = () => {},
+  closeOnOverlayClick = true,
+  closeOnEscape = true,
+  panelClassName = "bg-modal border border-border rounded-xl p-5 max-w-md w-full space-y-3",
+  children = null,
+}) => {
+  useEffect(() => {
+    if (!visible || !closeOnEscape) return;
+
+    const handleKeydown = (event) => {
+      if (event.key === "Escape") onClose?.();
+    };
+
+    window.addEventListener("keydown", handleKeydown);
+    return () => window.removeEventListener("keydown", handleKeydown);
+  }, [visible, closeOnEscape, onClose]);
+
+  if (!visible) return null;
+
+  return createPortal(
+    html`
+      <div
+        class="fixed inset-0 bg-black/70 flex items-center justify-center p-4 z-50"
+        onclick=${(event) => {
+          if (closeOnOverlayClick && event.target === event.currentTarget) onClose?.();
+        }}
+      >
+        <div class=${panelClassName}>${children}</div>
+      </div>
+    `,
+    document.body,
+  );
+};

package/lib/public/js/components/models.js

@@ -14,6 +14,8 @@ import {
 import { showToast } from "./toast.js";
 import { Badge } from "./badge.js";
 import { SecretInput } from "./secret-input.js";
+import { LoadingSpinner } from "./loading-spinner.js";
+import { ActionButton } from "./action-button.js";
 import {
   getModelProvider,
   getAuthProviderFromModelProvider,
@@ -87,7 +89,7 @@ export const Models = () => {
       };
     } catch (err) {
       setModelsError("Failed to load model settings");
-      showToast(`Failed to load model settings: ${err.message}`, "red");
+      showToast(`Failed to load model settings: ${err.message}`, "error");
     } finally {
       setReady(true);
       setModelsLoading(false);
@@ -123,10 +125,10 @@ export const Models = () => {
   useEffect(() => {
     const onMessage = async (e) => {
       if (e.data?.codex === "success") {
-        showToast("Codex connected", "green");
+        showToast("Codex connected", "success");
         await refreshCodexConnection();
       } else if (e.data?.codex === "error") {
-        showToast(`Codex auth failed: ${e.data.message || "unknown error"}`, "red");
+        showToast(`Codex auth failed: ${e.data.message || "unknown error"}`, "error");
       }
     };
     window.addEventListener("message", onMessage);
@@ -145,7 +147,7 @@ export const Models = () => {
     if (savingChanges) return;
     if (!modelDirty && !aiCredentialsDirty) return;
     if (modelDirty && !hasSelectedProviderAuth) {
-      showToast("Add credentials for the selected model provider before saving model changes", "red");
+      showToast("Add credentials for the selected model provider before saving model changes", "error");
       return;
     }
     setSavingChanges(true);
@@ -176,10 +178,10 @@ export const Models = () => {
         kModelsTabCache = { ...(kModelsTabCache || {}), selectedModel: targetModel, savedModel: targetModel };
       }
 
-      showToast("Changes saved", "green");
+      showToast("Changes saved", "success");
       await refresh();
     } catch (err) {
-      showToast(err.message || "Failed to save changes", "red");
+      showToast(err.message || "Failed to save changes", "error");
     } finally {
       setSavingChanges(false);
     }
@@ -214,12 +216,12 @@ export const Models = () => {
       const result = await exchangeCodexOAuth(codexManualInput.trim());
       if (!result.ok) throw new Error(result.error || "Codex OAuth exchange failed");
       setCodexManualInput("");
-      showToast("Codex connected", "green");
+      showToast("Codex connected", "success");
       setCodexAuthStarted(false);
       setCodexAuthWaiting(false);
       await refreshCodexConnection();
     } catch (err) {
-      showToast(err.message || "Codex OAuth exchange failed", "red");
+      showToast(err.message || "Codex OAuth exchange failed", "error");
     } finally {
       setCodexExchanging(false);
     }
@@ -228,10 +230,10 @@ export const Models = () => {
   const handleCodexDisconnect = async () => {
     const result = await disconnectCodex();
     if (!result.ok) {
-      showToast(result.error || "Failed to disconnect Codex", "red");
+      showToast(result.error || "Failed to disconnect Codex", "error");
       return;
     }
-    showToast("Codex disconnected", "green");
+    showToast("Codex disconnected", "success");
     setCodexAuthStarted(false);
     setCodexAuthWaiting(false);
     setCodexManualInput("");
@@ -305,13 +307,13 @@ export const Models = () => {
                 <div class="flex gap-2">
                   <button
                     onclick=${startCodexAuth}
-                    class="text-xs font-medium px-3 py-1.5 rounded-lg border border-border text-gray-300 hover:border-gray-500"
+                    class="text-xs font-medium px-3 py-1.5 rounded-lg ac-btn-secondary"
                   >
                     Reconnect Codex
                   </button>
                   <button
                     onclick=${handleCodexDisconnect}
-                    class="text-xs font-medium px-3 py-1.5 rounded-lg border border-border text-gray-300 hover:border-gray-500"
+                    class="text-xs font-medium px-3 py-1.5 rounded-lg ac-btn-ghost"
                   >
                     Disconnect
                   </button>
@@ -335,7 +337,7 @@ export const Models = () => {
                   </p>
                   <button
                     onclick=${startCodexAuth}
-                    class="text-xs font-medium px-3 py-1.5 rounded-lg border border-border text-gray-300 hover:border-gray-500 shrink-0"
+                    class="text-xs font-medium px-3 py-1.5 rounded-lg ac-btn-secondary shrink-0"
                   >
                     Restart
                   </button>
@@ -355,13 +357,16 @@ export const Models = () => {
                   placeholder="http://localhost:1455/auth/callback?code=...&state=..."
                   class="w-full bg-black/30 border border-border rounded-lg px-3 py-2 text-xs text-gray-200 outline-none focus:border-gray-500"
                 />
-                <button
-                  onclick=${completeCodexAuth}
+                <${ActionButton}
+                  onClick=${completeCodexAuth}
                   disabled=${!codexManualInput.trim() || codexExchanging}
-                  class="text-xs font-medium px-3 py-1.5 rounded-lg ac-btn-cyan"
-                >
-                  ${codexExchanging ? "Completing..." : "Complete Codex OAuth"}
-                </button>
+                  loading=${codexExchanging}
+                  tone="primary"
+                  size="sm"
+                  idleLabel="Complete Codex OAuth"
+                  loadingLabel="Completing..."
+                  className="text-xs font-medium px-3 py-1.5"
+                />
               `
             : null}
         </div>
@@ -373,10 +378,7 @@ export const Models = () => {
     return html`
       <div class="bg-surface border border-border rounded-xl p-4">
         <div class="flex items-center gap-2 text-sm text-gray-400">
-          <svg class="animate-spin h-4 w-4" viewBox="0 0 24 24" fill="none">
-            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
-            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
-          </svg>
+          <${LoadingSpinner} className="h-4 w-4" />
           Loading model settings...
         </div>
       </div>
@@ -440,13 +442,16 @@ export const Models = () => {
         )}
       </div>
 
-      <button
-        onclick=${saveChanges}
+      <${ActionButton}
+        onClick=${saveChanges}
         disabled=${!canSaveChanges}
-        class="w-full text-sm font-medium px-4 py-2.5 rounded-xl transition-all ac-btn-cyan"
-      >
-        ${savingChanges ? "Saving..." : "Save changes"}
-      </button>
+        loading=${savingChanges}
+        tone="primary"
+        size="md"
+        idleLabel="Save changes"
+        loadingLabel="Saving..."
+        className="w-full py-2.5 transition-all"
+      />
       ${modelDirty && !hasSelectedProviderAuth
         ? html`
             <p class="text-xs text-yellow-500">

package/lib/public/js/components/onboarding/welcome-form-step.js

@@ -2,6 +2,8 @@ import { h } from "https://esm.sh/preact";
 import { useEffect, useState } from "https://esm.sh/preact/hooks";
 import htm from "https://esm.sh/htm";
 import { SecretInput } from "../secret-input.js";
+import { ActionButton } from "../action-button.js";
+import { Badge } from "../badge.js";
 import { isValidGithubRepoInput } from "./welcome-config.js";
 
 const html = htm.bind(h);
@@ -41,6 +43,8 @@ export const WelcomeFormStep = ({
   handleSubmit,
 }) => {
   const [repoTouched, setRepoTouched] = useState(false);
+  const [showOptionalOpenai, setShowOptionalOpenai] = useState(false);
+  const [showOptionalGemini, setShowOptionalGemini] = useState(false);
 
   useEffect(() => {
     if (activeGroup.id !== "github") {
@@ -48,6 +52,13 @@ export const WelcomeFormStep = ({
     }
   }, [activeGroup.id]);
 
+  useEffect(() => {
+    if (step === totalGroups - 1) {
+      setShowOptionalOpenai(!vals.OPENAI_API_KEY);
+      setShowOptionalGemini(!vals.GEMINI_API_KEY);
+    }
+  }, [step === totalGroups - 1]);
+
   return html`
     <div class="flex items-center justify-between">
       <div>
@@ -113,30 +124,30 @@ export const WelcomeFormStep = ({
           ${codexLoading
             ? html`<span class="text-xs text-gray-500">Checking...</span>`
             : codexStatus.connected
-              ? html`<span class="text-xs text-green-400">Connected</span>`
-              : html`<span class="text-xs text-yellow-400"
-                  >Not connected</span
-                >`}
+              ? html`<${Badge} tone="success">Connected</${Badge}>`
+              : html`<${Badge} tone="warning">Not connected</${Badge}>`}
         </div>
         <div class="flex gap-2">
-          <button
-            type="button"
-            onclick=${startCodexAuth}
-            class="text-xs font-medium px-3 py-1.5 rounded-lg ${codexStatus.connected
-              ? "border border-border text-gray-300 hover:border-gray-500"
-              : "ac-btn-cyan"}"
-          >
-            ${codexStatus.connected ? "Reconnect Codex" : "Connect Codex OAuth"}
-          </button>
+          <${ActionButton}
+            onClick=${startCodexAuth}
+            tone=${codexStatus.connected || codexAuthStarted
+              ? "neutral"
+              : "primary"}
+            size="sm"
+            idleLabel=${codexStatus.connected
+              ? "Reconnect Codex"
+              : "Connect Codex OAuth"}
+            className="font-medium"
+          />
           ${codexStatus.connected &&
           html`
-            <button
-              type="button"
-              onclick=${handleCodexDisconnect}
-              class="text-xs font-medium px-3 py-1.5 rounded-lg border border-border text-gray-300 hover:border-gray-500"
-            >
-              Disconnect
-            </button>
+            <${ActionButton}
+              onClick=${handleCodexDisconnect}
+              tone="ghost"
+              size="sm"
+              idleLabel="Disconnect"
+              className="font-medium"
+            />
           `}
         </div>
         ${!codexStatus.connected &&
@@ -158,14 +169,16 @@ export const WelcomeFormStep = ({
               placeholder="http://localhost:1455/auth/callback?code=...&state=..."
               class="w-full bg-black/30 border border-border rounded-lg px-3 py-2 text-xs text-gray-200 outline-none focus:border-gray-500"
             />
-            <button
-              type="button"
-              onclick=${completeCodexAuth}
+            <${ActionButton}
+              onClick=${completeCodexAuth}
               disabled=${!codexManualInput.trim() || codexExchanging}
-              class="text-xs font-medium px-3 py-1.5 rounded-lg ac-btn-cyan"
-            >
-              ${codexExchanging ? "Completing..." : "Complete Codex OAuth"}
-            </button>
+              loading=${codexExchanging}
+              tone="primary"
+              size="sm"
+              idleLabel="Complete Codex OAuth"
+              loadingLabel="Completing..."
+              className="font-medium"
+            />
           </div>
         `}
       </div>
@@ -211,9 +224,9 @@ export const WelcomeFormStep = ({
           ${error}
         </div>`
       : null}
-    ${step === totalGroups - 1 && (!vals.OPENAI_API_KEY || !vals.GEMINI_API_KEY)
+    ${step === totalGroups - 1 && (showOptionalOpenai || showOptionalGemini)
       ? html`
-          ${!vals.OPENAI_API_KEY
+          ${showOptionalOpenai
             ? html`<div class="space-y-1">
                 <label class="text-xs font-medium text-gray-400"
                   >OpenAI API Key</label
@@ -237,7 +250,7 @@ export const WelcomeFormStep = ({
                 </p>
               </div>`
             : null}
-          ${!vals.GEMINI_API_KEY
+          ${showOptionalGemini
             ? html`<div class="space-y-1">
                 <label class="text-xs font-medium text-gray-400"
                   >Gemini API Key</label
@@ -270,7 +283,7 @@ export const WelcomeFormStep = ({
             ${step > 0
               ? html`<button
                   onclick=${goBack}
-                  class="w-full text-sm font-medium px-4 py-2 rounded-xl transition-all border border-border text-gray-300 hover:border-gray-500"
+                  class="w-full text-sm font-medium px-4 py-2 rounded-xl transition-all ac-btn-secondary"
                 >
                   Back
                 </button>`
@@ -289,7 +302,7 @@ export const WelcomeFormStep = ({
             ${step > 0
               ? html`<button
                   onclick=${goBack}
-                  class="w-full text-sm font-medium px-4 py-2 rounded-xl transition-all border border-border text-gray-300 hover:border-gray-500"
+                  class="w-full text-sm font-medium px-4 py-2 rounded-xl transition-all ac-btn-secondary"
                 >
                   Back
                 </button>`

package/lib/public/js/components/onboarding/welcome-pairing-step.js

@@ -54,14 +54,14 @@ const PairingRow = ({ pairing, onApprove, onReject }) => {
         <button
           onclick=${handleApprove}
           disabled=${!!busyAction}
-          class="ac-btn-green text-xs font-medium px-3 py-1.5 rounded-lg ${busyAction ? "opacity-60 cursor-not-allowed" : ""}"
+          class="ac-btn-green text-xs font-medium px-3 py-1.5 rounded-lg ${busyAction ? "opacity-50 cursor-not-allowed" : ""}"
         >
           ${busyAction === "approve" ? "Approving..." : "Approve"}
         </button>
         <button
           onclick=${handleReject}
           disabled=${!!busyAction}
-          class="bg-gray-800 text-gray-300 text-xs px-3 py-1.5 rounded-lg hover:bg-gray-700 ${busyAction ? "opacity-60 cursor-not-allowed" : ""}"
+          class="ac-btn-secondary text-xs font-medium px-3 py-1.5 rounded-lg ${busyAction ? "opacity-50 cursor-not-allowed" : ""}"
         >
           ${busyAction === "reject" ? "Rejecting..." : "Reject"}
         </button>

package/lib/public/js/components/onboarding/welcome-setup-step.js

@@ -1,6 +1,7 @@
 import { h } from "https://esm.sh/preact";
 import { useEffect, useState } from "https://esm.sh/preact/hooks";
 import htm from "https://esm.sh/htm";
+import { LoadingSpinner } from "../loading-spinner.js";
 
 const html = htm.bind(h);
 const kSetupTips = [
@@ -56,8 +57,8 @@ export const WelcomeSetupStep = ({ error, loading, onRetry, onBack }) => {
         <button
           onclick=${onBack}
           disabled=${loading}
-          class="w-full text-sm font-medium px-4 py-3 rounded-xl transition-all border border-border text-gray-300 hover:border-gray-500 ${loading
-            ? "opacity-60 cursor-not-allowed"
+          class="w-full text-sm font-medium px-4 py-3 rounded-xl transition-all ac-btn-secondary ${loading
+            ? "opacity-50 cursor-not-allowed"
             : ""}"
         >
           Back
@@ -65,9 +66,9 @@ export const WelcomeSetupStep = ({ error, loading, onRetry, onBack }) => {
         <button
           onclick=${onRetry}
           disabled=${loading}
-          class="w-full text-sm font-medium px-4 py-3 rounded-xl transition-all ${loading
-            ? "bg-gray-800 text-gray-500 cursor-not-allowed"
-            : "bg-white text-black hover:opacity-85"}"
+          class="w-full text-sm font-medium px-4 py-3 rounded-xl transition-all ac-btn-cyan ${loading
+            ? "opacity-50 cursor-not-allowed"
+            : ""}"
         >
           ${loading ? "Retrying..." : "Retry"}
         </button>
@@ -82,25 +83,7 @@ export const WelcomeSetupStep = ({ error, loading, onRetry, onBack }) => {
       <div
         class="flex-1 flex flex-col items-center justify-center text-center gap-4"
       >
-        <svg
-          class="animate-spin h-8 w-8 text-white"
-          viewBox="0 0 24 24"
-          fill="none"
-        >
-          <circle
-            class="opacity-25"
-            cx="12"
-            cy="12"
-            r="10"
-            stroke="currentColor"
-            stroke-width="4"
-          />
-          <path
-            class="opacity-75"
-            fill="currentColor"
-            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-          />
-        </svg>
+        <${LoadingSpinner} className="h-8 w-8 text-white" />
         <h3 class="text-lg font-semibold text-white">
           Initializing OpenClaw...
         </h3>

package/lib/public/js/components/page-header.js

@@ -0,0 +1,13 @@
+import { h } from "https://esm.sh/preact";
+import htm from "https://esm.sh/htm";
+
+const html = htm.bind(h);
+
+export const PageHeader = ({ title = "", actions = null, leading = null }) => html`
+  <div class="flex items-center justify-between gap-3">
+    <div>
+      ${leading || html`<h2 class="font-semibold text-base">${title}</h2>`}
+    </div>
+    <div class="flex items-center gap-2">${actions}</div>
+  </div>
+`;

package/lib/public/js/components/pairings.js

@@ -1,6 +1,7 @@
 import { h } from 'https://esm.sh/preact';
 import { useState } from 'https://esm.sh/preact/hooks';
 import htm from 'https://esm.sh/htm';
+import { ActionButton } from './action-button.js';
 const html = htm.bind(h);
 
 const PairingRow = ({ p, onApprove, onReject }) => {
@@ -37,8 +38,20 @@ const PairingRow = ({ p, onApprove, onReject }) => {
     <div class="bg-black/30 rounded-lg p-3 mb-2">
       <div class="font-medium text-sm mb-2">${label} · <code class="text-gray-400">${p.code || p.id || '?'}</code></div>
       <div class="flex gap-2">
-        <button onclick=${() => handle("approve")} class="ac-btn-green text-xs font-medium px-3 py-1.5 rounded-lg">Approve</button>
-        <button onclick=${() => handle("reject")} class="bg-gray-800 text-gray-300 text-xs px-3 py-1.5 rounded-lg hover:bg-gray-700">Reject</button>
+        <${ActionButton}
+          onClick=${() => handle("approve")}
+          tone="success"
+          size="sm"
+          idleLabel="Approve"
+          className="font-medium px-3 py-1.5"
+        />
+        <${ActionButton}
+          onClick=${() => handle("reject")}
+          tone="secondary"
+          size="sm"
+          idleLabel="Reject"
+          className="font-medium px-3 py-1.5"
+        />
       </div>
     </div>`;
 };