feat: continued improvements

src/ui/ssh/dialogs/OPKSSHDialog.tsx

@@ -28,6 +28,7 @@ export function OPKSSHDialog({
   backgroundColor,
 }: OPKSSHDialogProps) {
   const { t } = useTranslation();
+
   if (!isOpen) return null;
 
   return (
@@ -36,30 +37,34 @@ export function OPKSSHDialog({
         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-xl w-full mx-4 relative z-10 animate-in fade-in zoom-in-95 duration-200">
-        <div className="mb-4 flex items-center gap-2">
-          <Shield className="w-5 h-5 text-primary" />
-          <h3 className="text-lg font-semibold">
-            {t("terminal.opksshAuthRequired")}
-          </h3>
+      <div className="bg-card border border-border w-full max-w-md 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="size-4 text-accent-brand" />
+            <h3 className="text-xs font-bold uppercase tracking-widest">
+              {t("terminal.opksshAuthRequired")}
+            </h3>
+          </div>
+          {stage === "chooser" && (
+            <p className="text-[10px] font-bold uppercase tracking-tight text-muted-foreground mt-1">
+              {t("terminal.opksshAuthDescription")}
+            </p>
+          )}
         </div>
-
-        <div className="space-y-4">
+        <div className="p-4 flex flex-col gap-4">
           {stage === "chooser" && (
             <>
-              <p className="text-muted-foreground">
-                {t("terminal.opksshAuthDescription")}
-              </p>
               {providers && providers.length > 0 && onSelectProvider ? (
-                <div className="space-y-2">
+                <div className="flex flex-col gap-2">
                   {providers.map((provider) => (
                     <Button
                       key={provider.alias}
                       type="button"
+                      variant="outline"
                       onClick={() => onSelectProvider(provider.alias)}
-                      className="w-full flex items-center justify-center gap-2"
+                      className="border-accent-brand/40 text-accent-brand hover:bg-accent-brand/10 rounded-none text-[10px] font-bold uppercase tracking-widest w-full flex items-center gap-2"
                     >
-                      <ExternalLink className="w-4 h-4" />
+                      <ExternalLink className="size-3.5" />
                       {t("terminal.opksshSignInWith", {
                         provider:
                           provider.alias.charAt(0).toUpperCase() +
@@ -67,61 +72,74 @@ export function OPKSSHDialog({
                       })}
                     </Button>
                   ))}
-                  <Button
-                    type="button"
-                    variant="outline"
-                    className="w-full"
-                    onClick={onCancel}
-                  >
-                    {t("common.cancel")}
-                  </Button>
                 </div>
               ) : authUrl ? (
-                <div>
-                  <div className="flex gap-2 pt-2">
-                    <Button
-                      type="button"
-                      onClick={onOpenUrl}
-                      className="flex-1 flex items-center justify-center gap-2"
-                    >
-                      <ExternalLink className="w-4 h-4" />
-                      {t("terminal.opksshOpenBrowser")}
-                    </Button>
-                    <Button type="button" variant="outline" onClick={onCancel}>
-                      {t("common.cancel")}
-                    </Button>
-                  </div>
-                </div>
+                <Button
+                  type="button"
+                  variant="outline"
+                  onClick={onOpenUrl}
+                  className="border-accent-brand/40 text-accent-brand hover:bg-accent-brand/10 rounded-none text-[10px] font-bold uppercase tracking-widest w-full flex items-center gap-2"
+                >
+                  <ExternalLink className="size-3.5" />
+                  {t("terminal.opksshOpenBrowser")}
+                </Button>
               ) : null}
+              <div className="flex justify-end">
+                <Button
+                  type="button"
+                  variant="ghost"
+                  onClick={onCancel}
+                  className="rounded-none text-[10px] font-bold uppercase tracking-widest"
+                >
+                  {t("common.cancel")}
+                </Button>
+              </div>
             </>
           )}
 
           {(stage === "waiting" || stage === "authenticating") && (
-            <div className="flex items-center gap-3 py-4">
-              <Loader2 className="w-5 h-5 animate-spin text-primary" />
-              <p className="text-muted-foreground">
-                {stage === "waiting"
-                  ? t("terminal.opksshWaitingForAuth")
-                  : t("terminal.opksshAuthenticating")}
-              </p>
-            </div>
+            <>
+              <div className="flex items-center gap-3 py-2">
+                <Loader2 className="size-4 animate-spin text-accent-brand shrink-0" />
+                <p className="text-xs text-muted-foreground">
+                  {stage === "waiting"
+                    ? t("terminal.opksshWaitingForAuth")
+                    : t("terminal.opksshAuthenticating")}
+                </p>
+              </div>
+              <div className="flex justify-end">
+                <Button
+                  type="button"
+                  variant="ghost"
+                  onClick={onCancel}
+                  className="rounded-none text-[10px] font-bold uppercase tracking-widest"
+                >
+                  {t("common.cancel")}
+                </Button>
+              </div>
+            </>
           )}
 
           {stage === "error" && error && (
             <>
-              <div className="flex items-start gap-3 p-4 bg-destructive/10 border border-destructive/20 rounded-md">
-                <AlertCircle className="w-5 h-5 text-destructive flex-shrink-0 mt-0.5" />
-                <div className="flex-1">
-                  <p className="text-sm font-medium text-destructive">
+              <div className="flex items-start gap-3 p-3 border border-destructive/20 bg-destructive/10">
+                <AlertCircle className="size-4 text-destructive shrink-0 mt-0.5" />
+                <div className="flex-1 min-w-0">
+                  <p className="text-[10px] font-bold uppercase tracking-widest text-destructive">
                     {t("common.error")}
                   </p>
-                  <p className="text-sm text-destructive/90 mt-1 whitespace-pre-wrap break-words">
+                  <p className="text-xs text-destructive/90 mt-1 whitespace-pre-wrap break-words">
                     {error}
                   </p>
                 </div>
               </div>
-              <div className="flex justify-end pt-2">
-                <Button type="button" variant="outline" onClick={onCancel}>
+              <div className="flex justify-end">
+                <Button
+                  type="button"
+                  variant="ghost"
+                  onClick={onCancel}
+                  className="rounded-none text-[10px] font-bold uppercase tracking-widest"
+                >
                   {t("common.close")}
                 </Button>
               </div>