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,7 +107,8 @@ export default function SetupAccount({
         </p>
       </div>
 
-      <div className="flex items-center justify-between rounded-md border p-4">
+      <div className="flex flex-col gap-2">
+        <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 && (
@@ -119,21 +120,22 @@ export default function SetupAccount({
           </div>
           <Button
             type="button"
-          variant="select"
+            variant="outline"
             onClick={() => setShowPassword(true)}
           >
             {t("setupWizard.account.changePassword")}
           </Button>
         </div>
 
-      <div className="flex flex-col gap-2">
+        {otherUsers.map((user) => (
-        <div>
+          <div
-          <h3 className="text-sm font-medium">
+            key={user.username}
-            {t("setupWizard.account.usersTitle")}
+            className="flex items-center justify-between rounded-md border p-3"
-          </h3>
+          >
-          <p className="text-xs text-muted-foreground">
+            <span className="text-sm font-medium">{user.username}</span>
-            {t("setupWizard.account.usersDescription")}
+            <span className="text-xs text-muted-foreground">{user.role}</span>
-          </p>
+          </div>
+        ))}
       </div>
 
       {isLoading && <ActivityIndicator />}
@@ -144,20 +146,10 @@ export default function SetupAccount({
         </p>
       )}
 
-        {otherUsers.map((user) => (
+      <div className="flex flex-col items-center gap-3 py-4">
-          <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-xs text-muted-foreground">{user.role}</span>
-          </div>
-        ))}
-
         <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}