From 9ee8226698c89b0be82e7524ecd6a578de67920a Mon Sep 17 00:00:00 2001
From: Olga Bulat <obulat@gmail.com>
Date: Thu, 19 Sep 2024 21:00:25 +0300
Subject: [PATCH] Fix the page links

---
 frontend/src/components/VHeader/VHeaderInternal.vue | 9 +++------
 frontend/src/components/VHeader/VPageLinks.vue      | 4 ++--
 frontend/src/components/VHeader/VWordPressLink.vue  | 7 ++++++-
 3 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/VHeader/VHeaderInternal.vue b/frontend/src/components/VHeader/VHeaderInternal.vue
index 2c191b03708..f13449907c7 100644
--- 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
index 2b8462e37c8..0c5ca8a4984 100644
--- 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
index 7e7f9114c58..bb44b26e1bc 100644
--- 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"