feat: improve styles

Author: aon

packages/auth-server/components/account-recovery/passkey-generation-flow/Root.vue

@@ -25,10 +25,7 @@
       :new-passkey="newPasskey!"
       @back="currentStep--"
     />
-    <Step4
-      v-if="relativeStep === 4"
-      @back="currentStep--"
-    />
+    <Step4 v-if="relativeStep === 4" />
   </div>
 </template>
 
@@ -64,13 +61,10 @@ watchEffect(() => {
       stepTitle.value = "Recovery Started";
       break;
     case 3:
-      stepTitle.value = "Confirm Recovery";
+      stepTitle.value = isConfirmLater.value ? "Save Recovery URL" : "Confirm Recovery";
       break;
     case 4:
-      stepTitle.value = isConfirmLater.value ? "Save Recovery URL" : "Connect Guardian Account";
-      break;
-    case 5:
-      stepTitle.value = "Guardian Confirmed";
+      stepTitle.value = "Recovery Completed";
       break;
   }
 });

packages/auth-server/pages/recovery/guardian/(actions)/confirm-recovery.vue

@@ -65,27 +65,29 @@
           </account-recovery-confirm-action-card>
 
           <template v-if="selectedGuardian && !recoveryCompleted">
+            <div class="flex gap-4 mt-3">
+              <ZkButton
+                v-if="selectedGuardianInfo?.isSsoAccount || isConnectedWalletGuardian"
+                type="primary"
+                class="w-full max-w-56"
+                :loading="initRecoveryInProgress || getConfigurableAccountInProgress"
+                @click="handleConfirmRecovery"
+              >
+                Confirm Recovery
+              </ZkButton>
+              <CommonConnectButton
+                v-if="!selectedGuardianInfo?.isSsoAccount"
+                type="primary"
+                class="w-full max-w-56"
+                :disabled="initRecoveryInProgress || getConfigurableAccountInProgress"
+              />
+            </div>
             <p
               v-if="!selectedGuardianInfo?.isSsoAccount && accountData.isConnected && !isConnectedWalletGuardian"
-              class="text-center text-error-500 dark:text-error-400 mt-4"
+              class="text-error-500 dark:text-error-400"
             >
               Please connect with the guardian wallet address ({{ shortenAddress(selectedGuardian) }})
             </p>
-            <ZkButton
-              v-if="selectedGuardianInfo?.isSsoAccount || isConnectedWalletGuardian"
-              type="primary"
-              class="w-full max-w-56"
-              :loading="initRecoveryInProgress || getConfigurableAccountInProgress"
-              @click="handleConfirmRecovery"
-            >
-              Confirm Recovery
-            </ZkButton>
-            <CommonConnectButton
-              v-if="!selectedGuardianInfo?.isSsoAccount"
-              type="primary"
-              class="w-full max-w-56"
-              :disabled="initRecoveryInProgress || getConfigurableAccountInProgress"
-            />
           </template>
 
           <account-recovery-confirm-action-card