[6.x] 2fa design tweaks (#12899)

JayGeorge · web-flow · commit 86859affaa90 · 2025-10-28T13:08:11.000-04:00
diff --git a/packages/ui/src/Dropdown/Item.vue b/packages/ui/src/Dropdown/Item.vue
@@ -55,7 +55,7 @@ const iconClasses = cva({
         <div v-if="icon" class="flex size-6 items-center justify-center p-1">
             <Icon :name="icon" :class="iconClasses" />
         </div>
-        <div class="col-start-2 ps-2">
+        <div class="col-start-2 px-2">
             <slot v-if="hasDefaultSlot" />
             <template v-else>{{ text }}</template>
         </div>
diff --git a/resources/js/components/two-factor/Setup.vue b/resources/js/components/two-factor/Setup.vue
@@ -62,9 +62,9 @@ function complete() {
                 <div>
                     <ui-description class="mb-6">{{ __('statamic::messages.two_factor_setup_instructions') }}</ui-description>
 
-                    <div class="flex justify-center space-x-6">
+                    <div class="flex space-x-6">
                         <div class="bg-white" v-html="qrCode"></div>
-                        <div class="space-y-6">
+                        <div class="space-y-6 w-full">
                             <ui-field :label="__('Setup Key')">
                                 <ui-input copyable readonly :value="secretKey" />
                             </ui-field>
diff --git a/resources/js/components/two-factor/TwoFactor.vue b/resources/js/components/two-factor/TwoFactor.vue
@@ -75,7 +75,7 @@ function disable() {
         </template>
         <template v-if="!isSetup">
             <div>
-                <p class="mb-4 text-sm text-gray">{{ __('statamic::messages.two_factor_enable_introduction') }}</p>
+                <p class="mb-4 text-sm text-gray-500 dark:text-gray-400">{{ __('statamic::messages.two_factor_enable_introduction') }}</p>
 
                 <div class="flex space-x-2">
                     <Button @click="openSetupModal">
@@ -86,7 +86,7 @@ function disable() {
         </template>
 
         <template v-else>
-            <p class="mb-4 text-sm text-gray">{{ __('statamic::messages.two_factor_enabled') }}</p>
+            <p class="mb-4 text-sm text-gray-500 dark:text-gray-400">{{ __('statamic::messages.two_factor_enabled') }}</p>
 
             <div class="flex items-center space-x-4">
                 <Button @click="openRecoveryCodesModal">
diff --git a/src/Actions/DisableTwoFactorAuthentication.php b/src/Actions/DisableTwoFactorAuthentication.php
@@ -7,6 +7,7 @@
 class DisableTwoFactorAuthentication extends Action
 {
     protected $dangerous = true;
+    protected $icon = 'padlock-unlocked';
 
     public function requiresElevatedSession(): bool
     {

Original file line number	Diff line number	Diff line change
`@@ -7,6 +7,7 @@`
`7`	`7`	`class DisableTwoFactorAuthentication extends Action`
`8`	`8`	`{`
`9`	`9`	`protected $dangerous = true;`
	`10`	`+ protected $icon = 'padlock-unlocked';`
`10`	`11`
`11`	`12`	`public function requiresElevatedSession(): bool`
`12`	`13`	`{`