refactor: replace buttons in account menu

Author: essenmitsosse

app/components/Header/AccountMenu.client.vue

@@ -142,12 +142,12 @@ function openAuthModal() {
           <!-- Connected accounts section -->
           <div v-if="hasAnyConnection" class="py-1">
             <!-- npm CLI connection -->
-            <button
+            <ButtonBase
               v-if="isNpmConnected && npmUser"
-              type="button"
               role="menuitem"
-              class="w-full px-3 py-2.5 flex items-center gap-3 hover:bg-bg-muted transition-colors text-start rounded-md"
+              class="w-full text-start gap-x-3 border-none"
               @click="openConnectorModal"
+              out
             >
               <img
                 v-if="npmAvatar"
@@ -182,14 +182,13 @@ function openAuthModal() {
                   })
                 }}
               </span>
-            </button>
+            </ButtonBase>
 
             <!-- Atmosphere connection -->
-            <button
+            <ButtonBase
               v-if="atprotoUser"
-              type="button"
               role="menuitem"
-              class="w-full px-3 py-2.5 flex items-center gap-3 hover:bg-bg-muted transition-colors text-start rounded-md"
+              class="w-full text-start gap-x-3 border-none"
               @click="openAuthModal"
             >
               <img
@@ -212,7 +211,7 @@ function openAuthModal() {
                 >
                 <span class="text-xs text-fg-subtle">{{ $t('account_menu.atmosphere') }}</span>
               </span>
-            </button>
+            </ButtonBase>
           </div>
 
           <!-- Divider (only if we have connections AND options to connect) -->
@@ -223,11 +222,10 @@ function openAuthModal() {
 
           <!-- Connect options -->
           <div v-if="!isNpmConnected || !atprotoUser" class="py-1">
-            <button
+            <ButtonBase
               v-if="!isNpmConnected"
-              type="button"
               role="menuitem"
-              class="w-full px-3 py-2.5 flex items-center gap-3 hover:bg-bg-muted transition-colors text-start rounded-md"
+              class="w-full text-start gap-x-3 border-none"
               @click="openConnectorModal"
             >
               <span class="w-8 h-8 rounded-full bg-bg-muted flex items-center justify-center">
@@ -248,13 +246,12 @@ function openAuthModal() {
                 </span>
                 <span class="text-xs text-fg-subtle">{{ $t('account_menu.npm_cli_desc') }}</span>
               </span>
-            </button>
+            </ButtonBase>
 
-            <button
+            <ButtonBase
               v-if="!atprotoUser"
-              type="button"
               role="menuitem"
-              class="w-full px-3 py-2.5 flex items-center gap-3 hover:bg-bg-muted transition-colors text-start rounded-md"
+              class="w-full text-start gap-x-3 border-none"
               @click="openAuthModal"
             >
               <span class="w-8 h-8 rounded-full bg-bg-muted flex items-center justify-center">
@@ -266,7 +263,7 @@ function openAuthModal() {
                 </span>
                 <span class="text-xs text-fg-subtle">{{ $t('account_menu.atmosphere_desc') }}</span>
               </span>
-            </button>
+            </ButtonBase>
           </div>
         </div>
       </div>

app/components/Header/AuthModal.client.vue

@@ -64,12 +64,9 @@ watch(handleInput, newHandleInput => {
           </p>
         </div>
       </div>
-      <button
-        class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-accent/70"
-        @click="logout"
-      >
+      <ButtonBase class="w-full" @click="logout">
         {{ $t('auth.modal.disconnect') }}
-      </button>
+      </ButtonBase>
     </div>
 
     <!-- Disconnected state -->

app/components/Header/ConnectorModal.vue

@@ -80,13 +80,9 @@ function handleDisconnect() {
         {{ $t('connector.modal.connected_hint') }}
       </div>
 
-      <button
-        type="button"
-        class="w-full px-4 py-2 font-mono text-sm text-fg-muted bg-bg-subtle border border-border rounded-md transition-colors duration-200 hover:text-fg hover:border-border-hover focus-visible:outline-accent/70"
-        @click="handleDisconnect"
-      >
+      <ButtonBase type="button" class="w-full" @click="handleDisconnect">
         {{ $t('connector.modal.disconnect') }}
-      </button>
+      </ButtonBase>
     </div>
 
     <!-- Disconnected state -->