From 6904de933209aa97a2cf4e156e093c0a8880b1dd Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Wed, 26 Aug 2026 16:33:32 -0500
Subject: [PATCH] button consistency

---
 web/public/locales/en/views/setup.json      |  4 +-
 web/src/components/setup/SetupAccount.tsx   | 70 +++++++++------------
 web/src/components/setup/SetupDetector.tsx  |  6 +-
 web/src/components/setup/SetupHwAccel.tsx   |  2 +-
 web/src/components/setup/SetupRecording.tsx |  2 +-
 web/src/pages/SetupWizard.tsx               |  2 +-
 6 files changed, 36 insertions(+), 50 deletions(-)

diff --git a/web/public/locales/en/views/setup.json b/web/public/locales/en/views/setup.json
index 8eb2d40a34..00992397cf 100644
--- a/web/public/locales/en/views/setup.json
+++ b/web/public/locales/en/views/setup.json
@@ -18,11 +18,9 @@
     "account": {
       "title": "Secure your account",
       "descriptionSignedIn": "You're signed in as {{username}} using the temporary password from the Frigate logs. Set one you'll remember.",
-      "descriptionAnonymous": "This port doesn't require a login. Set a password for the admin account so you can sign in on the secured port.",
+      "descriptionAnonymous": "You're accessing Frigate on a port that doesn't require a login. Set a password for the admin account so you can sign in on the secured port.",
       "passwordSet": "Password set",
       "changePassword": "Change password",
-      "usersTitle": "Other users",
-      "usersDescription": "Add accounts for anyone else who needs access. Roles can be changed later in Settings.",
       "addUser": "Add user",
       "usersFailed": "Could not load the user list. You can still set the admin password.",
       "userFailed": "Failed to add the user. Please try again."
diff --git a/web/src/components/setup/SetupAccount.tsx b/web/src/components/setup/SetupAccount.tsx
index 2573b523d9..b4c6a8ecfd 100644
--- a/web/src/components/setup/SetupAccount.tsx
+++ b/web/src/components/setup/SetupAccount.tsx
@@ -107,57 +107,49 @@ export default function SetupAccount({
         </p>
       </div>
 
-      <div className="flex items-center justify-between rounded-md border p-4">
-        <div className="flex flex-col gap-1">
-          <span className="text-sm font-medium">{adminUsername}</span>
-          {passwordSet && (
-            <span className="flex items-center gap-2 text-xs text-muted-foreground">
-              <FaCircleCheck className="size-3 text-success" />
-              {t("setupWizard.account.passwordSet")}
-            </span>
-          )}
-        </div>
-        <Button
-          type="button"
-          variant="select"
-          onClick={() => setShowPassword(true)}
-        >
-          {t("setupWizard.account.changePassword")}
-        </Button>
-      </div>
-
       <div className="flex flex-col gap-2">
-        <div>
-          <h3 className="text-sm font-medium">
-            {t("setupWizard.account.usersTitle")}
-          </h3>
-          <p className="text-xs text-muted-foreground">
-            {t("setupWizard.account.usersDescription")}
-          </p>
+        <div className="flex items-center justify-between rounded-md border p-3">
+          <div className="flex flex-col gap-1">
+            <span className="text-sm font-medium">{adminUsername}</span>
+            {passwordSet && (
+              <span className="flex items-center gap-2 text-xs text-muted-foreground">
+                <FaCircleCheck className="size-3 text-success" />
+                {t("setupWizard.account.passwordSet")}
+              </span>
+            )}
+          </div>
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => setShowPassword(true)}
+          >
+            {t("setupWizard.account.changePassword")}
+          </Button>
         </div>
 
-        {isLoading && <ActivityIndicator />}
-
-        {usersError && (
-          <p className="rounded-md bg-muted p-3 text-xs text-muted-foreground">
-            {t("setupWizard.account.usersFailed")}
-          </p>
-        )}
-
         {otherUsers.map((user) => (
           <div
             key={user.username}
             className="flex items-center justify-between rounded-md border p-3"
           >
-            <span className="text-sm">{user.username}</span>
+            <span className="text-sm font-medium">{user.username}</span>
             <span className="text-xs text-muted-foreground">{user.role}</span>
           </div>
         ))}
+      </div>
 
+      {isLoading && <ActivityIndicator />}
+
+      {usersError && (
+        <p className="rounded-md bg-muted p-3 text-xs text-muted-foreground">
+          {t("setupWizard.account.usersFailed")}
+        </p>
+      )}
+
+      <div className="flex flex-col items-center gap-3 py-4">
         <Button
-          type="button"
-          variant="outline"
-          className="self-start"
+          variant="select"
+          className="w-full"
           onClick={() => setShowCreate(true)}
         >
           {t("setupWizard.account.addUser")}
@@ -169,7 +161,7 @@ export default function SetupAccount({
           {t("setupWizard.actions.back")}
         </Button>
         <div className="flex flex-1 justify-end gap-3">
-          <Button type="button" variant="outline" onClick={onSkip}>
+          <Button type="button" onClick={onSkip}>
             {t("setupWizard.actions.skip")}
           </Button>
           <Button type="button" variant="select" onClick={onNext}>
diff --git a/web/src/components/setup/SetupDetector.tsx b/web/src/components/setup/SetupDetector.tsx
index a3710baa91..15f24cdf11 100644
--- a/web/src/components/setup/SetupDetector.tsx
+++ b/web/src/components/setup/SetupDetector.tsx
@@ -251,11 +251,7 @@ export default function SetupDetector({
           {t("setupWizard.actions.back")}
         </Button>
         <div className="flex flex-1 justify-end gap-3">
-          <Button
-            type="button"
-            variant="outline"
-            onClick={() => onSkip(selected.key)}
-          >
+          <Button type="button" onClick={() => onSkip(selected.key)}>
             {t("setupWizard.actions.skip")}
           </Button>
           <Button
diff --git a/web/src/components/setup/SetupHwAccel.tsx b/web/src/components/setup/SetupHwAccel.tsx
index f0775292f4..a003ab2488 100644
--- a/web/src/components/setup/SetupHwAccel.tsx
+++ b/web/src/components/setup/SetupHwAccel.tsx
@@ -238,7 +238,7 @@ export default function SetupHwAccel({
           {t("setupWizard.actions.back")}
         </Button>
         <div className="flex flex-1 justify-end gap-3">
-          <Button type="button" variant="outline" onClick={onSkip}>
+          <Button type="button" onClick={onSkip}>
             {t("setupWizard.actions.skip")}
           </Button>
           <Button
diff --git a/web/src/components/setup/SetupRecording.tsx b/web/src/components/setup/SetupRecording.tsx
index dc234df5ca..2927b6be7d 100644
--- a/web/src/components/setup/SetupRecording.tsx
+++ b/web/src/components/setup/SetupRecording.tsx
@@ -169,7 +169,7 @@ export default function SetupRecording({
           {t("setupWizard.actions.back")}
         </Button>
         <div className="flex flex-1 justify-end gap-3">
-          <Button type="button" variant="outline" onClick={onSkip}>
+          <Button type="button" onClick={onSkip}>
             {t("setupWizard.actions.skip")}
           </Button>
           <Button
diff --git a/web/src/pages/SetupWizard.tsx b/web/src/pages/SetupWizard.tsx
index 3743313d37..cc76572aa7 100644
--- a/web/src/pages/SetupWizard.tsx
+++ b/web/src/pages/SetupWizard.tsx
@@ -266,7 +266,7 @@ export default function SetupWizard() {
         {isDark ? <LuSun className="size-4" /> : <LuMoon className="size-4" />}
       </Button>
 
-      <Card className="w-full max-w-lg">
+      <Card className="w-full max-w-lg bg-background_alt">
         <CardContent className="p-6">
           <StepIndicator
             steps={stepLabels}