Fix the page links

WordPress · Sep 20, 2024 · 9ee8226 · 9ee8226
1 parent 5e195f5
commit 9ee8226
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 9 deletions.
diff --git a/frontend/src/components/VHeader/VHeaderInternal.vue b/frontend/src/components/VHeader/VHeaderInternal.vue
@@ -139,7 +139,7 @@ watch(route, () => {
                 variant="transparent-tx"
                 size="large"
                 :icon-props="{ name: 'close' }"
-                class="focus-visible:ring-bg-complementary text-white focus-slim-tx hover:bg-tertiary"
+                class="text-white focus-slim-tx hover:bg-tertiary"
                 :label="$t('modal.closePagesMenu')"
                 @click="closePageMenu"
               />
@@ -150,15 +150,12 @@ watch(route, () => {
               <VPageLinks
                 mode="dark"
                 class="mt-3 flex flex-col items-end gap-y-6"
-                nav-link-classes="text-white text-3xl focus-visible:ring-bg-complementary"
+                nav-link-classes="text-white text-3xl focus-visible:outline-yellow-3"
                 :is-in-modal="true"
                 @close="closePageMenu"
               />
             </nav>
-            <VWordPressLink
-              class="focus-visible:ring-bg-complementary mt-auto focus-visible:ring-offset-0"
-              mode="dark"
-            />
+            <VWordPressLink class="mt-auto" mode="dark" />
           </template>
         </VModalContent>
       </template>

diff --git a/frontend/src/components/VHeader/VPageLinks.vue b/frontend/src/components/VHeader/VPageLinks.vue
@@ -77,10 +77,10 @@ const externalIconSize = computed(() => (props.isInModal ? 6 : 4))
   <ul v-else>
     <li v-for="page in allPages" :key="page.id">
       <VLink
-        class="flex flex-row rounded-sm hover:underline focus-visible:outline-none focus-visible:ring focus-visible:ring-offset-tx disabled:text-disabled"
+        class="flex flex-row rounded-sm hover:underline disabled:text-disabled"
         :class="[
           { 'font-semibold': currentPage === page.id },
-          { 'focus-visible:ring-border-focus text-default': mode === 'light' },
+          { 'text-default': mode === 'light' },
           navLinkClasses,
         ]"
         :href="page.link"

diff --git a/frontend/src/components/VHeader/VWordPressLink.vue b/frontend/src/components/VHeader/VWordPressLink.vue
@@ -14,7 +14,12 @@ withDefaults(
   <VLink
     href="https://wordpress.org"
     :aria-label="$t('footer.wordpressAffiliation', { wordpress: 'WordPress' })"
-    class="text-default hover:no-underline"
+    class="hover:no-underline"
+    :class="
+      mode === 'dark'
+        ? 'text-white focus-visible:outline-yellow-3'
+        : 'text-default'
+    "
   >
     <i18n-t
       scope="global"