border for secondary buttons

Author: jellydeck

app/components/AppHeader.vue

@@ -151,7 +151,7 @@ onKeyStroke(
       </div>
 
       <!-- End: Desktop nav items + Mobile menu button -->
-      <div class="hidden sm:flex flex-shrink-0">
+      <div class="hidden sm:flex flex-shrink-0 space-x-0.5 md:space-x-2">
         <!-- Desktop: Compare link -->
         <LinkBase
           class="border-none"

app/components/Button/Base.vue

@@ -48,12 +48,11 @@ defineExpose({
     :aria-keyshortcuts="keyshortcut"
   >
     <span
-      class="group cursor-pointer inline-flex gap-x-1.5 relative items-center justify-center rounded-md active:scale-[0.98] font-mono border border-solid transition-[background-color,color,border,outline] duration-200 transition-[border-radius_100ms] after:(content-[''] absolute inset--0.5 rounded-md) outline-transparent group-focus-visible:(outline-2 outline-accent outline-offset-2)"
+      class="group cursor-pointer inline-flex gap-x-1.5 relative items-center justify-center rounded-md active:scale-[0.98] font-mono border border-solid border-border transition-[background-color,color,border,outline] duration-200 transition-[border-radius_100ms] after:(content-[''] absolute inset--0.5 rounded-md) outline-transparent group-focus-visible:(outline-2 outline-accent outline-offset-2)"
       :class="{
         'text-sm px-4 py-2': size === 'medium',
         'text-xs px-2 py-0.5': size === 'small',
-        'text-fg bg-transparent border-transparent hover:(bg-fg/10 border-fg/10)':
-          variant === 'secondary',
+        'text-fg bg-bg hover:(bg-fg/10 border-fg/10)': variant === 'secondary',
         'text-bg bg-fg border-fg hover:(bg-fg/80 rounded-xl) active:rounded-xl':
           variant === 'primary',
         'opacity-40 cursor-not-allowed border-transparent': disabled,

app/components/Link/Base.vue

@@ -75,18 +75,17 @@ const isButtonMedium = computed(() => props.size === 'medium' && props.variant !
   </span>
   <NuxtLink
     v-else
-    class="group inline-flex gap-x-1 items-center justify-center rounded-sm outline-transparent active:scale-[0.98] focus-visible:(outline-2 outline-accent)"
+    class="group inline-flex gap-x-1 items-center justify-center rounded-sm outline-transparent active:scale-[0.98] focus-visible:(outline-2 outline-offset-2 outline-accent)"
     :class="[
       {
         'underline-offset-[0.2rem] underline decoration-1 decoration-fg/30':
           !isLinkAnchor && isLink,
         'font-mono text-fg hover:(decoration-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200':
           isLink,
-        'font-mono border border-solid border-transparent rounded-md transition-all duration-200':
-          isButton,
+        'border border-solid border-border rounded-md transition-all duration-200': isButton,
         'text-sm px-4 py-2': isButtonMedium,
         'text-xs px-2 py-0.5': isButtonSmall,
-        'text-fg bg-transparent hover:(bg-fg/10 border-fg/10)': variant === 'button-secondary',
+        'text-fg bg-bg hover:(bg-fg/10 border-fg/10)': variant === 'button-secondary',
         'text-bg bg-fg border-fg hover:(bg-fg/80)': variant === 'button-primary',
       },
       props.class,