v2.3.0

src/ui/ssh/dialogs/TOTPDialog.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { Button } from "@/components/button.tsx";
 import { Input } from "@/components/input.tsx";
-import { Label } from "@/components/label.tsx";
 import { Shield } from "lucide-react";
 import { useTranslation } from "react-i18next";
 
@@ -23,59 +22,62 @@ export function TOTPDialog({
 
   if (!isOpen) return null;
 
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const input = e.currentTarget.elements.namedItem(
+      "totpCode",
+    ) as HTMLInputElement;
+    if (input?.value.trim()) {
+      onSubmit(input.value.trim());
+    }
+  };
+
   return (
     <div className="absolute inset-0 flex items-center justify-center z-500 animate-in fade-in duration-200">
       <div
         className="absolute inset-0 bg-canvas rounded-md"
         style={{ backgroundColor: backgroundColor || undefined }}
       />
-      <div className="bg-elevated border-2 border-edge rounded-lg p-6 max-w-md w-full mx-4 relative z-10 animate-in fade-in zoom-in-95 duration-200">
-        <div className="mb-4">
+      <div className="bg-card border border-border w-full max-w-sm mx-4 relative z-10 animate-in fade-in zoom-in-95 duration-200">
+        <div className="p-4 border-b border-border">
           <div className="flex items-center gap-2">
-            <Shield className="w-5 h-5 text-primary" />
-            <h3 className="text-lg font-semibold">
+            <Shield className="size-4 text-accent-brand" />
+            <h3 className="text-xs font-bold uppercase tracking-widest">
               {t("terminal.totpRequired")}
             </h3>
           </div>
+          <p className="text-[10px] font-bold uppercase tracking-tight text-muted-foreground mt-1">
+            {t("terminal.totpCodeLabel")}
+          </p>
         </div>
-        <form
-          onSubmit={(e) => {
-            e.preventDefault();
-            const input = e.currentTarget.elements.namedItem(
-              "totpCode",
-            ) as HTMLInputElement;
-            if (input && input.value.trim()) {
-              onSubmit(input.value.trim());
-            }
-          }}
-          className="space-y-4"
-        >
-          <div>
-            <Label htmlFor="totpCode">{t("terminal.totpCodeLabel")}</Label>
-            <Input
-              id="totpCode"
-              name="totpCode"
-              type="text"
-              autoFocus
-              maxLength={6}
-              pattern="[0-9]*"
-              inputMode="numeric"
-              placeholder="000000"
-              className="text-center text-lg tracking-widest mt-1.5"
-            />
-          </div>
-          <div className="flex gap-2">
-            <Button type="submit" className="flex-1">
-              {t("terminal.totpVerify")}
-            </Button>
+        <form onSubmit={handleSubmit} className="p-4 flex flex-col gap-4">
+          <Input
+            id="totpCode"
+            name="totpCode"
+            type="text"
+            autoFocus
+            maxLength={6}
+            pattern="[0-9]*"
+            inputMode="numeric"
+            placeholder="000000"
+            className="rounded-none bg-muted/50 border-border text-center text-sm tracking-widest"
+          />
+          <div className="flex justify-end gap-2">
             <Button
               type="button"
-              variant="outline"
+              variant="ghost"
               onClick={onCancel}
-              className="flex-1"
+              className="rounded-none text-[10px] font-bold uppercase tracking-widest"
             >
               {t("common.cancel")}
             </Button>
+            <Button
+              type="submit"
+              variant="outline"
+              className="border-accent-brand/40 text-accent-brand hover:bg-accent-brand/10 rounded-none text-[10px] font-bold uppercase tracking-widest"
+            >
+              {t("terminal.totpVerify")}
+            </Button>
           </div>
         </form>
       </div>