fix: inconsistent popover button focus outline

Author: snax4a

src/components/navigation/DesktopNavigation.tsx

@@ -45,12 +45,10 @@ function FeatureItems() {
     <Popover className='relative'>
       {({ open }) => (
         <>
-          {/* There is a bug with Popover component that triggers :focus-visible on mouse interactions */}
-          {/* TODO: We should change the focus state to ring when it gets fixed to stay consistent with other elements */}
           <Popover.Button
             className={clsx(
               open ? 'text-gray-900' : 'text-gray-500',
-              'group inline-flex items-center rounded-md text-base font-medium hover:text-gray-900 focus:outline-none focus-visible:text-secondary'
+              'group inline-flex items-center rounded-md text-base font-medium hover:text-gray-900 focus:outline-offset-4 focus:outline-focus [&:not(:focus-visible)]:focus:outline-none'
             )}
           >
             <span className='whitespace-nowrap'>Funkcje aplikacji</span>
@@ -142,7 +140,7 @@ function NavigationItems() {
             <Popover.Button
               className={clsx(
                 open ? 'text-gray-900' : 'text-gray-500',
-                'group inline-flex items-center rounded-md text-base font-medium hover:text-gray-900 focus:outline-none focus-visible:text-secondary'
+                'group inline-flex items-center rounded-md text-base font-medium hover:text-gray-900 focus:outline-offset-4 focus:outline-focus [&:not(:focus-visible)]:focus:outline-none'
               )}
             >
               <span>Więcej</span>

src/styles/globals.css

@@ -6,6 +6,7 @@
   /* #region  /**=========== Colors =========== */
   --color-primary: 17 20 45; /* #11142d */
   --color-secondary: 108 93 211; /* #6C5DD3 */
+  --color-focus: rgb(59 130 246 / 0.5); /* #3b82f680 */
   --tw-color-primary-50: 245 243 255;
   --tw-color-primary-100: 237 233 254;
   --tw-color-primary-200: 221 214 254;

tailwind.config.js

@@ -13,6 +13,7 @@ module.exports = {
       colors: {
         primary: 'rgb(var(--color-primary) / <alpha-value>)',
         secondary: 'rgb(var(--color-secondary) / <alpha-value>)',
+        focus: 'var(--color-focus)',
         dark: '#222222',
       },
       borderRadius: {