button consistency

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."

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>
+        <div className="flex items-center justify-between rounded-md border p-3">
-          <h3 className="text-sm font-medium">
+          <div className="flex flex-col gap-1">
-            {t("setupWizard.account.usersTitle")}
+            <span className="text-sm font-medium">{adminUsername}</span>
-          </h3>
+            {passwordSet && (
-          <p className="text-xs text-muted-foreground">
+              <span className="flex items-center gap-2 text-xs text-muted-foreground">
-            {t("setupWizard.account.usersDescription")}
+                <FaCircleCheck className="size-3 text-success" />
-          </p>
+                {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="select"
-          variant="outline"
+          className="w-full"
-          className="self-start"
           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}>

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
+          <Button type="button" onClick={() => onSkip(selected.key)}>
-            type="button"
-            variant="outline"
-            onClick={() => onSkip(selected.key)}
-          >
             {t("setupWizard.actions.skip")}
           </Button>
           <Button

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

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

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}