@clef-sh/ui 0.1.20 → 0.1.21

package/src/client/screens/BackendScreen.tsx

@@ -1,8 +1,7 @@
 import React, { useState, useEffect } from "react";
-import { theme } from "../theme";
 import { apiFetch } from "../api";
-import { TopBar } from "../components/TopBar";
 import { Button } from "../components/Button";
+import { Toolbar } from "../primitives";
 import type {
   ClefManifest,
   BackendType,
@@ -57,22 +56,26 @@ const KEY_PLACEHOLDERS: Record<string, string> = {
 };
 
 const ALL_BACKENDS: BackendType[] = ["age", "awskms", "gcpkms", "azurekv", "pgp", "hsm"];
+
+const TEXT_INPUT_BASE =
+  "w-full box-border rounded-md border border-edge bg-ink-850 px-3 py-2 font-mono text-[12px] text-bone outline-none focus-visible:border-gold-500 placeholder:text-ash-dim";
+
+const SELECT_CLASSES =
+  "w-full rounded-md border border-edge bg-ink-850 px-2.5 py-1.5 font-sans text-[13px] text-bone cursor-pointer outline-none focus-visible:border-gold-500";
+
 export function BackendScreen({ manifest, setView, reloadManifest }: BackendScreenProps) {
   const [step, setStep] = useState<1 | 2 | 3 | 4>(1);
   const [config, setConfig] = useState<BackendConfigResponse | null>(null);
 
-  // Step 1 state
   const [targetBackend, setTargetBackend] = useState<BackendType>("age");
   const [targetKey, setTargetKey] = useState("");
   const [scope, setScope] = useState<"all" | "single">("all");
   const [selectedEnv, setSelectedEnv] = useState("");
 
-  // Step 2 state
   const [previewResult, setPreviewResult] = useState<MigrationResponse | null>(null);
   const [needsConfirmation, setNeedsConfirmation] = useState(false);
   const [confirmed, setConfirmed] = useState(false);
 
-  // Step 3/4 state
   const [applyResult, setApplyResult] = useState<MigrationResponse | null>(null);
 
   const [loading, setLoading] = useState(false);
@@ -197,61 +200,43 @@ export function BackendScreen({ manifest, setView, reloadManifest }: BackendScre
       .length ?? 0;
 
   return (
-    <div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }}>
-      <TopBar title="Backend" subtitle="clef migrate-backend — change encryption backend" />
+    <div className="flex flex-1 flex-col overflow-hidden">
+      <Toolbar>
+        <div>
+          <Toolbar.Title>Backend</Toolbar.Title>
+          <Toolbar.Subtitle>clef migrate-backend — change encryption backend</Toolbar.Subtitle>
+        </div>
+      </Toolbar>
 
-      <div style={{ flex: 1, overflow: "auto", padding: 24 }}>
-        <div style={{ maxWidth: 620, margin: "0 auto" }}>
+      <div className="flex-1 overflow-auto p-6">
+        <div className="mx-auto max-w-[620px]">
           {/* Step indicator */}
-          <div
-            style={{
-              display: "flex",
-              alignItems: "center",
-              gap: 0,
-              marginBottom: 32,
-            }}
-          >
+          <div className="mb-8 flex items-center">
             {([1, 2, 3, 4] as const).map((s, i) => (
               <React.Fragment key={s}>
-                <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+                <div className="flex items-center gap-2">
                   <div
-                    style={{
-                      width: 24,
-                      height: 24,
-                      borderRadius: "50%",
-                      background: step >= s ? theme.accent : theme.surface,
-                      border: `1px solid ${step >= s ? theme.accent : theme.border}`,
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      fontFamily: theme.mono,
-                      fontSize: 11,
-                      fontWeight: 700,
-                      color: step >= s ? "#000" : theme.textDim,
-                    }}
+                    className={`flex h-6 w-6 items-center justify-center rounded-full font-mono text-[11px] font-bold ${
+                      step >= s
+                        ? "bg-gold-500 border border-gold-500 text-ink-950"
+                        : "bg-ink-850 border border-edge text-ash-dim"
+                    }`}
                   >
                     {s}
                   </div>
                   <span
-                    style={{
-                      fontFamily: theme.sans,
-                      fontSize: 12,
-                      color: step >= s ? theme.text : theme.textDim,
-                      fontWeight: step === s ? 600 : 400,
-                    }}
+                    className={`font-sans text-[12px] ${
+                      step >= s ? "text-bone" : "text-ash-dim"
+                    } ${step === s ? "font-semibold" : "font-normal"}`}
                   >
                     {s === 1 ? "Configure" : s === 2 ? "Preview" : s === 3 ? "Migrate" : "Done"}
                   </span>
                 </div>
                 {i < 3 && (
                   <div
-                    style={{
-                      flex: 1,
-                      height: 1,
-                      background: step > s ? theme.accent : theme.border,
-                      margin: "0 12px",
-                      minWidth: 20,
-                    }}
+                    className={`mx-3 h-px min-w-[20px] flex-1 ${
+                      step > s ? "bg-gold-500" : "bg-edge"
+                    }`}
                   />
                 )}
               </React.Fragment>
@@ -259,18 +244,7 @@ export function BackendScreen({ manifest, setView, reloadManifest }: BackendScre
           </div>
 
           {error && (
-            <div
-              style={{
-                background: theme.redDim,
-                border: `1px solid ${theme.red}44`,
-                borderRadius: 8,
-                padding: "12px 16px",
-                marginBottom: 16,
-                fontFamily: theme.sans,
-                fontSize: 13,
-                color: theme.red,
-              }}
-            >
+            <div className="mb-4 rounded-lg border border-stop-500/30 bg-stop-500/10 px-4 py-3 font-sans text-[13px] text-stop-500">
               {error}
             </div>
           )}
@@ -278,50 +252,27 @@ export function BackendScreen({ manifest, setView, reloadManifest }: BackendScre
           {/* ── Step 1: Configure ─────────────────────────────────────── */}
           {step === 1 && (
             <div>
-              {/* Current config */}
               {config && (
-                <div style={{ marginBottom: 24 }}>
+                <div className="mb-6">
                   <Label>Current Configuration</Label>
-                  <div
-                    style={{
-                      background: theme.surface,
-                      border: `1px solid ${theme.border}`,
-                      borderRadius: 8,
-                      padding: 14,
-                    }}
-                  >
-                    <div
-                      style={{
-                        fontFamily: theme.mono,
-                        fontSize: 12,
-                        color: theme.text,
-                        marginBottom: 8,
-                      }}
-                    >
+                  <div className="rounded-lg border border-edge bg-ink-850 p-3.5">
+                    <div className="mb-2 font-mono text-[12px] text-bone">
                       Default backend:{" "}
-                      <span style={{ color: theme.accent, fontWeight: 600 }}>
+                      <span className="font-semibold text-gold-500">
                         {BACKEND_LABELS[config.global.default_backend]}
                       </span>
                     </div>
                     {config.environments.map((env) => (
                       <div
                         key={env.name}
-                        style={{
-                          display: "flex",
-                          alignItems: "center",
-                          gap: 8,
-                          fontFamily: theme.mono,
-                          fontSize: 11,
-                          color: theme.textMuted,
-                          marginBottom: 2,
-                        }}
+                        className="mb-px flex items-center gap-2 font-mono text-[11px] text-ash"
                       >
                         <span>
-                          {env.protected ? "\uD83D\uDD12 " : ""}
+                          {env.protected ? "🔒 " : ""}
                           {env.name}
                         </span>
-                        <span style={{ color: theme.textDim }}>{"\u2192"}</span>
-                        <span style={{ color: env.hasOverride ? theme.yellow : theme.textMuted }}>
+                        <span className="text-ash-dim">→</span>
+                        <span className={env.hasOverride ? "text-warn-500" : "text-ash"}>
                           {BACKEND_LABELS[env.effective.backend]}
                           {env.hasOverride ? " (override)" : ""}
                         </span>
@@ -331,22 +282,15 @@ export function BackendScreen({ manifest, setView, reloadManifest }: BackendScre
                 </div>
               )}
 
-              {/* Target backend */}
-              <div style={{ marginBottom: 20 }}>
+              <div className="mb-5">
                 <Label>Target Backend</Label>
-                <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+                <div className="flex flex-col gap-1.5">
                   {ALL_BACKENDS.map((b) => (
                     <label
                       key={b}
-                      style={{
-                        display: "flex",
-                        alignItems: "center",
-                        gap: 8,
-                        cursor: "pointer",
-                        fontFamily: theme.sans,
-                        fontSize: 13,
-                        color: targetBackend === b ? theme.text : theme.textMuted,
-                      }}
+                      className={`flex cursor-pointer items-center gap-2 font-sans text-[13px] ${
+                        targetBackend === b ? "text-bone" : "text-ash"
+                      }`}
                     >
                       <input
                         type="radio"
@@ -357,7 +301,7 @@ export function BackendScreen({ manifest, setView, reloadManifest }: BackendScre
                           setTargetBackend(b);
                           setTargetKey("");
                         }}
-                        style={{ accentColor: theme.accent }}
+                        className="accent-gold-500"
                         data-testid={`backend-radio-${b}`}
                       />
                       {BACKEND_LABELS[b]}
@@ -366,9 +310,8 @@ export function BackendScreen({ manifest, setView, reloadManifest }: BackendScre
                 </div>
               </div>
 
-              {/* Key input (non-age) */}
               {targetBackend !== "age" && (
-                <div style={{ marginBottom: 20 }}>
+                <div className="mb-5">
                   <Label>Key Identifier</Label>
                   <input
                     type="text"
@@ -376,63 +319,39 @@ export function BackendScreen({ manifest, setView, reloadManifest }: BackendScre
                     onChange={(e) => setTargetKey(e.target.value)}
                     placeholder={KEY_PLACEHOLDERS[targetBackend]}
                     data-testid="backend-key-input"
-                    style={{
-                      width: "100%",
-                      background: theme.surface,
-                      border: `1px solid ${theme.border}`,
-                      borderRadius: 6,
-                      padding: "8px 12px",
-                      fontFamily: theme.mono,
-                      fontSize: 12,
-                      color: theme.text,
-                      outline: "none",
-                      boxSizing: "border-box",
-                    }}
+                    className={TEXT_INPUT_BASE}
                   />
                 </div>
               )}
 
-              {/* Scope */}
-              <div style={{ marginBottom: 24 }}>
+              <div className="mb-6">
                 <Label>Scope</Label>
-                <div style={{ display: "flex", gap: 16, marginBottom: 8 }}>
+                <div className="mb-2 flex gap-4">
                   <label
-                    style={{
-                      display: "flex",
-                      alignItems: "center",
-                      gap: 6,
-                      cursor: "pointer",
-                      fontFamily: theme.sans,
-                      fontSize: 13,
-                      color: scope === "all" ? theme.text : theme.textMuted,
-                    }}
+                    className={`flex cursor-pointer items-center gap-1.5 font-sans text-[13px] ${
+                      scope === "all" ? "text-bone" : "text-ash"
+                    }`}
                   >
                     <input
                       type="radio"
                       name="scope"
                       checked={scope === "all"}
                       onChange={() => setScope("all")}
-                      style={{ accentColor: theme.accent }}
+                      className="accent-gold-500"
                     />
                     All environments
                   </label>
                   <label
-                    style={{
-                      display: "flex",
-                      alignItems: "center",
-                      gap: 6,
-                      cursor: "pointer",
-                      fontFamily: theme.sans,
-                      fontSize: 13,
-                      color: scope === "single" ? theme.text : theme.textMuted,
-                    }}
+                    className={`flex cursor-pointer items-center gap-1.5 font-sans text-[13px] ${
+                      scope === "single" ? "text-bone" : "text-ash"
+                    }`}
                   >
                     <input
                       type="radio"
                       name="scope"
                       checked={scope === "single"}
                       onChange={() => setScope("single")}
-                      style={{ accentColor: theme.accent }}
+                      className="accent-gold-500"
                     />
                     Single environment
                   </label>
@@ -442,18 +361,7 @@ export function BackendScreen({ manifest, setView, reloadManifest }: BackendScre
                     value={selectedEnv}
                     onChange={(e) => setSelectedEnv(e.target.value)}
                     data-testid="env-select"
-                    style={{
-                      width: "100%",
-                      background: theme.surface,
-                      border: `1px solid ${theme.border}`,
-                      borderRadius: 6,
-                      padding: "7px 10px",
-                      fontFamily: theme.sans,
-                      fontSize: 13,
-                      color: theme.text,
-                      outline: "none",
-                      cursor: "pointer",
-                    }}
+                    className={SELECT_CLASSES}
                   >
                     {environments.map((env) => (
                       <option key={env.name} value={env.name}>
@@ -465,43 +373,17 @@ export function BackendScreen({ manifest, setView, reloadManifest }: BackendScre
                 )}
               </div>
 
-              {/* Protected env confirmation */}
               {needsConfirmation && (
-                <div
-                  style={{
-                    background: theme.yellowDim,
-                    border: `1px solid ${theme.yellow}44`,
-                    borderRadius: 8,
-                    padding: "12px 16px",
-                    marginBottom: 16,
-                  }}
-                >
-                  <div
-                    style={{
-                      fontFamily: theme.sans,
-                      fontSize: 13,
-                      color: theme.yellow,
-                      marginBottom: 8,
-                    }}
-                  >
+                <div className="mb-4 rounded-lg border border-warn-500/30 bg-warn-500/10 px-4 py-3">
+                  <div className="mb-2 font-sans text-[13px] text-warn-500">
                     This migration affects protected environments.
                   </div>
-                  <label
-                    style={{
-                      display: "flex",
-                      alignItems: "center",
-                      gap: 8,
-                      cursor: "pointer",
-                      fontFamily: theme.sans,
-                      fontSize: 12,
-                      color: theme.text,
-                    }}
-                  >
+                  <label className="flex cursor-pointer items-center gap-2 font-sans text-[12px] text-bone">
                     <input
                       type="checkbox"
                       checked={confirmed}
                       onChange={(e) => setConfirmed(e.target.checked)}
-                      style={{ accentColor: theme.yellow }}
+                      className="accent-warn-500"
                       data-testid="protected-confirm"
                     />
                     I understand and want to proceed
@@ -526,76 +408,51 @@ export function BackendScreen({ manifest, setView, reloadManifest }: BackendScre
           {/* ── Step 2: Preview ───────────────────────────────────────── */}
           {step === 2 && previewResult && (
             <div>
-              <div
-                style={{
-                  fontFamily: theme.sans,
-                  fontSize: 13,
-                  color: theme.textMuted,
-                  marginBottom: 20,
-                }}
-              >
+              <div className="mb-5 font-sans text-[13px] text-ash">
                 Migrating to{" "}
-                <span style={{ color: theme.accent, fontWeight: 600 }}>
-                  {BACKEND_LABELS[targetBackend]}
-                </span>
+                <span className="font-semibold text-gold-500">{BACKEND_LABELS[targetBackend]}</span>
                 {scope === "single" ? ` (${selectedEnv} only)` : " (all environments)"}
               </div>
 
-              {/* Events / files to migrate */}
               {previewResult.events.filter((e) => e.type === "info").length > 0 && (
-                <div style={{ marginBottom: 16 }}>
-                  <SectionLabel color={theme.green}>
+                <div className="mb-4">
+                  <SectionLabel toneClass="text-go-500">
                     Files to migrate ({previewResult.events.filter((e) => e.type === "info").length}
                     )
                   </SectionLabel>
                   {previewResult.events
                     .filter((e) => e.type === "info")
                     .map((e, i) => (
-                      <FileRow key={i} icon={"\u2192"} iconColor={theme.green} label={e.message} />
+                      <FileRow key={i} icon="→" iconClass="text-go-500" label={e.message} />
                     ))}
                 </div>
               )}
 
-              {/* Skipped files */}
               {previewResult.events.filter((e) => e.type === "skip").length > 0 && (
-                <div style={{ marginBottom: 16 }}>
-                  <SectionLabel color={theme.textDim}>
+                <div className="mb-4">
+                  <SectionLabel toneClass="text-ash-dim">
                     Already on target (
                     {previewResult.events.filter((e) => e.type === "skip").length})
                   </SectionLabel>
                   {previewResult.events
                     .filter((e) => e.type === "skip")
                     .map((e, i) => (
-                      <FileRow
-                        key={i}
-                        icon={"\u21B7"}
-                        iconColor={theme.textDim}
-                        label={e.message}
-                      />
+                      <FileRow key={i} icon="↷" iconClass="text-ash-dim" label={e.message} />
                     ))}
                 </div>
               )}
 
-              {/* Warnings */}
               {previewResult.result.warnings.length > 0 && (
-                <div style={{ marginBottom: 16 }}>
+                <div className="mb-4">
                   {previewResult.result.warnings.map((w, i) => (
-                    <div
-                      key={i}
-                      style={{
-                        fontFamily: theme.mono,
-                        fontSize: 11,
-                        color: theme.yellow,
-                        marginBottom: 4,
-                      }}
-                    >
-                      {"\u26A0"} {w}
+                    <div key={i} className="mb-1 font-mono text-[11px] text-warn-500">
+                      ⚠ {w}
                     </div>
                   ))}
                 </div>
               )}
 
-              <div style={{ display: "flex", gap: 10, marginTop: 24 }}>
+              <div className="mt-6 flex gap-2.5">
                 <Button variant="ghost" onClick={handleReset}>
                   Back
                 </Button>
@@ -613,115 +470,46 @@ export function BackendScreen({ manifest, setView, reloadManifest }: BackendScre
 
           {/* ── Step 3: Executing ─────────────────────────────────────── */}
           {step === 3 && (
-            <div
-              style={{
-                display: "flex",
-                flexDirection: "column",
-                alignItems: "center",
-                paddingTop: 40,
-              }}
-            >
-              <div
-                style={{
-                  width: 40,
-                  height: 40,
-                  border: `3px solid ${theme.border}`,
-                  borderTopColor: theme.accent,
-                  borderRadius: "50%",
-                  animation: "spin 1s linear infinite",
-                  marginBottom: 16,
-                }}
-              />
-              <div
-                style={{
-                  fontFamily: theme.sans,
-                  fontSize: 14,
-                  color: theme.textMuted,
-                }}
-              >
+            <div className="flex flex-col items-center pt-10">
+              <div className="mb-4 h-10 w-10 animate-spin rounded-full border-[3px] border-edge border-t-gold-500" />
+              <div className="font-sans text-[14px] text-ash">
                 Migrating... this may take a moment
               </div>
-              <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
             </div>
           )}
 
           {/* ── Step 4: Result ────────────────────────────────────────── */}
           {step === 4 && applyResult && (
             <div>
-              <div
-                style={{
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "center",
-                  paddingTop: 20,
-                  paddingBottom: 32,
-                }}
-              >
+              <div className="flex flex-col items-center pt-5 pb-8">
                 <div
-                  style={{
-                    width: 56,
-                    height: 56,
-                    borderRadius: "50%",
-                    background: applyResult.result.rolledBack ? theme.redDim : theme.greenDim,
-                    border: `1px solid ${applyResult.result.rolledBack ? theme.red + "44" : theme.green + "44"}`,
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    fontSize: 24,
-                    color: applyResult.result.rolledBack ? theme.red : theme.green,
-                    marginBottom: 16,
-                  }}
+                  className={`mb-4 flex h-14 w-14 items-center justify-center rounded-full text-[24px] ${
+                    applyResult.result.rolledBack
+                      ? "border border-stop-500/30 bg-stop-500/10 text-stop-500"
+                      : "border border-go-500/30 bg-go-500/10 text-go-500"
+                  }`}
                 >
-                  {applyResult.result.rolledBack ? "\u26A0" : "\u2713"}
+                  {applyResult.result.rolledBack ? "⚠" : "✓"}
                 </div>
-
                 <div
-                  style={{
-                    fontFamily: theme.sans,
-                    fontWeight: 600,
-                    fontSize: 16,
-                    color: applyResult.result.rolledBack ? theme.red : theme.green,
-                    marginBottom: 8,
-                  }}
+                  className={`mb-2 font-sans text-[16px] font-semibold ${
+                    applyResult.result.rolledBack ? "text-stop-500" : "text-go-500"
+                  }`}
                 >
                   {applyResult.result.rolledBack ? "Migration failed" : "Migration complete"}
                 </div>
-
                 {applyResult.result.rolledBack && applyResult.result.error && (
-                  <div
-                    style={{
-                      fontFamily: theme.mono,
-                      fontSize: 12,
-                      color: theme.red,
-                      marginBottom: 8,
-                      textAlign: "center",
-                    }}
-                  >
+                  <div className="mb-2 text-center font-mono text-[12px] text-stop-500">
                     {applyResult.result.error}
                   </div>
                 )}
-
                 {applyResult.result.rolledBack && (
-                  <div
-                    style={{
-                      fontFamily: theme.sans,
-                      fontSize: 12,
-                      color: theme.textMuted,
-                      marginBottom: 8,
-                    }}
-                  >
+                  <div className="mb-2 font-sans text-[12px] text-ash">
                     All changes have been rolled back.
                   </div>
                 )}
-
                 {!applyResult.result.rolledBack && (
-                  <div
-                    style={{
-                      fontFamily: theme.mono,
-                      fontSize: 12,
-                      color: theme.textMuted,
-                    }}
-                  >
+                  <div className="font-mono text-[12px] text-ash">
                     {applyResult.result.migratedFiles.length} migrated,{" "}
                     {applyResult.result.skippedFiles.length} skipped,{" "}
                     {applyResult.result.verifiedFiles.length} verified
@@ -729,44 +517,24 @@ export function BackendScreen({ manifest, setView, reloadManifest }: BackendScre
                 )}
               </div>
 
-              {/* Warnings */}
               {applyResult.result.warnings.length > 0 && (
-                <div style={{ marginBottom: 16 }}>
+                <div className="mb-4">
                   {applyResult.result.warnings.map((w, i) => (
-                    <div
-                      key={i}
-                      style={{
-                        fontFamily: theme.mono,
-                        fontSize: 11,
-                        color: theme.yellow,
-                        marginBottom: 4,
-                      }}
-                    >
-                      {"\u26A0"} {w}
+                    <div key={i} className="mb-1 font-mono text-[11px] text-warn-500">
+                      ⚠ {w}
                     </div>
                   ))}
                 </div>
               )}
 
               {!applyResult.result.rolledBack && (
-                <div
-                  style={{
-                    background: theme.surface,
-                    border: `1px solid ${theme.border}`,
-                    borderRadius: 6,
-                    padding: "10px 14px",
-                    marginBottom: 24,
-                    fontFamily: theme.mono,
-                    fontSize: 11,
-                    color: theme.textMuted,
-                  }}
-                >
-                  git add clef.yaml .sops.yaml secrets/ && git commit -m "chore: migrate backend to{" "}
-                  {targetBackend}"
+                <div className="mb-6 rounded-md border border-edge bg-ink-850 px-3.5 py-2.5 font-mono text-[11px] text-ash">
+                  git add clef.yaml .sops.yaml secrets/ &amp;&amp; git commit -m "chore: migrate
+                  backend to {targetBackend}"
                 </div>
               )}
 
-              <div style={{ display: "flex", gap: 10 }}>
+              <div className="flex gap-2.5">
                 <Button variant="primary" onClick={() => setView("matrix")}>
                   View in Matrix
                 </Button>
@@ -784,54 +552,27 @@ export function BackendScreen({ manifest, setView, reloadManifest }: BackendScre
 
 function Label({ children }: { children: React.ReactNode }) {
   return (
-    <div
-      style={{
-        fontFamily: theme.sans,
-        fontSize: 12,
-        fontWeight: 600,
-        color: theme.textMuted,
-        marginBottom: 8,
-        letterSpacing: "0.05em",
-        textTransform: "uppercase",
-      }}
-    >
+    <div className="mb-2 font-sans text-[12px] font-semibold uppercase tracking-[0.05em] text-ash">
       {children}
     </div>
   );
 }
 
-function SectionLabel({ children, color }: { children: React.ReactNode; color: string }) {
+function SectionLabel({ children, toneClass }: { children: React.ReactNode; toneClass: string }) {
   return (
     <div
-      style={{
-        fontFamily: theme.sans,
-        fontSize: 11,
-        fontWeight: 600,
-        color,
-        letterSpacing: "0.06em",
-        textTransform: "uppercase",
-        marginBottom: 8,
-      }}
+      className={`mb-2 font-sans text-[11px] font-semibold uppercase tracking-[0.06em] ${toneClass}`}
     >
       {children}
     </div>
   );
 }
 
-function FileRow({ icon, iconColor, label }: { icon: string; iconColor: string; label: string }) {
+function FileRow({ icon, iconClass, label }: { icon: string; iconClass: string; label: string }) {
   return (
-    <div
-      style={{
-        display: "flex",
-        alignItems: "center",
-        gap: 10,
-        padding: "5px 10px",
-        borderRadius: 6,
-        marginBottom: 3,
-      }}
-    >
-      <span style={{ color: iconColor, fontFamily: theme.mono, fontSize: 13 }}>{icon}</span>
-      <span style={{ fontFamily: theme.mono, fontSize: 12, color: theme.text }}>{label}</span>
+    <div className="mb-px flex items-center gap-2.5 rounded-md px-2.5 py-1">
+      <span className={`font-mono text-[13px] ${iconClass}`}>{icon}</span>
+      <span className="font-mono text-[12px] text-bone">{label}</span>
     </div>
   );
 }