refactor: use buttons and links components in account menu (#1451)

Author: essenmitsosse

app/components/AppHeader.vue

@@ -107,7 +107,7 @@ const mobileLinks = computed<NavigationConfigWithGroups>(() => [
         target: '_blank',
         type: 'link',
         external: true,
-        iconClass: 'i-simple-icons:bluesky',
+        iconClass: 'i-carbon:logo-bluesky',
       },
       {
         name: 'Chat',

app/components/CallToAction.vue

@@ -19,7 +19,7 @@ const socialLinks = computed(() => [
   {
     id: 'bluesky',
     href: 'https://social.npmx.dev',
-    icon: 'i-simple-icons:bluesky',
+    icon: 'i-carbon:logo-bluesky',
     titleKey: $t('about.get_involved.follow.title'),
     descriptionKey: $t('about.get_involved.follow.description'),
     ctaKey: $t('about.get_involved.follow.cta'),

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 -->
@@ -111,19 +108,13 @@ watch(handleInput, newHandleInput => {
                 <span class="font-bold">npmx.dev</span>
               </template>
               <template #atproto>
-                <a :href="atprotoLink" target="_blank" class="text-blue-400 hover:underline">
-                  AT Protocol
-                </a>
+                <LinkBase :to="atprotoLink"> AT Protocol </LinkBase>
               </template>
               <template #bluesky>
-                <a href="https://bsky.app" target="_blank" class="text-blue-400 hover:underline">
-                  Bluesky
-                </a>
+                <LinkBase to="https://bsky.app"> Bluesky </LinkBase>
               </template>
               <template #tangled>
-                <a href="https://tangled.org" target="_blank" class="text-blue-400 hover:underline">
-                  Tangled
-                </a>
+                <LinkBase to="https://tangled.org"> Tangled </LinkBase>
               </template>
             </i18n-t>
           </div>
@@ -133,18 +124,17 @@ watch(handleInput, newHandleInput => {
       <ButtonBase type="submit" variant="primary" :disabled="!handleInput.trim()" class="w-full">
         {{ $t('auth.modal.connect') }}
       </ButtonBase>
-      <ButtonBase type="button" variant="primary" class="w-full" @click="handleCreateAccount">
+      <ButtonBase type="button" class="w-full" @click="handleCreateAccount">
         {{ $t('auth.modal.create_account') }}
       </ButtonBase>
       <hr class="color-border" />
-      <ButtonBase type="button" variant="primary" class="w-full" @click="handleBlueskySignIn" block>
+      <ButtonBase
+        type="button"
+        class="w-full"
+        @click="handleBlueskySignIn"
+        classicon="i-carbon:logo-bluesky"
+      >
         {{ $t('auth.modal.connect_bluesky') }}
-        <svg fill="none" viewBox="0 0 64 57" width="20" style="width: 20px">
-          <path
-            fill="#0F73FF"
-            d="M13.873 3.805C21.21 9.332 29.103 20.537 32 26.55v15.882c0-.338-.13.044-.41.867-1.512 4.456-7.418 21.847-20.923 7.944-7.111-7.32-3.819-14.64 9.125-16.85-7.405 1.264-15.73-.825-18.014-9.015C1.12 23.022 0 8.51 0 6.55 0-3.268 8.579-.182 13.873 3.805ZM50.127 3.805C42.79 9.332 34.897 20.537 32 26.55v15.882c0-.338.13.044.41.867 1.512 4.456 7.418 21.847 20.923 7.944 7.111-7.32 3.819-14.64-9.125-16.85 7.405 1.264 15.73-.825 18.014-9.015C62.88 23.022 64 8.51 64 6.55c0-9.818-8.578-6.732-13.873-2.745Z"
-          ></path>
-        </svg>
       </ButtonBase>
     </form>
   </Modal>

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 -->
@@ -100,14 +96,11 @@ function handleDisconnect() {
           <p class="text-sm text-fg-muted">
             <i18n-t keypath="connector.modal.contributor_notice" scope="global">
               <template #link>
-                <a
-                  href="https://github.com/npmx-dev/npmx.dev/blob/main/CONTRIBUTING.md#local-connector-cli"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  class="text-blue-400 hover:underline"
+                <LinkBase
+                  to="https://github.com/npmx-dev/npmx.dev/blob/main/CONTRIBUTING.md#local-connector-cli"
                 >
                   {{ $t('connector.modal.contributor_link') }}
-                </a>
+                </LinkBase>
               </template>
             </i18n-t>
           </p>
@@ -124,15 +117,12 @@ function handleDisconnect() {
       >
         <span class="text-fg-subtle">$</span>
         <span class="text-fg-subtle ms-2">pnpm npmx-connector</span>
-        <button
-          type="button"
+        <ButtonBase
           :aria-label="copied ? $t('connector.modal.copied') : $t('connector.modal.copy_command')"
-          class="ms-auto text-fg-subtle p-1.5 -m-1.5 hover:text-fg transition-colors duration-200 focus-visible:outline-accent/70 rounded"
           @click="copy('pnpm npmx-connector')"
-        >
-          <span v-if="!copied" class="i-carbon:copy block w-5 h-5" aria-hidden="true" />
-          <span v-else class="i-carbon:checkmark block w-5 h-5 text-green-500" aria-hidden="true" />
-        </button>
+          class="ms-auto"
+          :classicon="copied ? 'i-carbon:checkmark text-green-500' : 'i-carbon:copy'"
+        />
       </div>
 
       <!-- TODO: Uncomment when npmx-connector is published to npm