chore: hotfixes on styles

Author: ovflowd

components/Common/Banner/index.module.css

@@ -18,13 +18,13 @@
   a {
     @apply w-fit
       underline
-      decoration-white-opaque;
+      decoration-white/50;
   }
 
   svg {
     @apply h-4
       w-4
-      text-white-opaque;
+      text-white/50;
   }
 }
 

components/Common/Button/index.module.css

@@ -33,7 +33,6 @@
   &.secondary {
     @apply rounded-lg
      text-neutral-800
-     disabled:opacity-50
      dark:text-neutral-200/100;
 
     &:hover {
@@ -44,7 +43,8 @@
     }
 
     &:disabled {
-      @apply bg-neutral-100/0;
+      @apply bg-neutral-100/0
+        opacity-50;
     }
 
     &:focus {

components/Common/MetaBar/index.module.css

@@ -38,9 +38,12 @@
       @apply font-semibold
         text-neutral-900
         underline
-        hover:text-neutral-800
-        dark:text-white
-        dark:hover:text-neutral-200;
+        dark:text-white;
+
+      &:hover {
+        @apply text-neutral-800
+          dark:text-neutral-200;
+      }
     }
 
     ol {

components/Common/Pagination/PaginationListItem/index.module.css

@@ -10,9 +10,12 @@
     px-3
     py-2.5
     text-neutral-800
-    hover:bg-neutral-100
     aria-current:bg-green-600
     aria-current:text-white
-    dark:text-neutral-200
-    hover:dark:bg-neutral-900;
+    dark:text-neutral-200;
+
+  &:hover {
+    @apply bg-neutral-100
+      dark:bg-neutral-900;
+  }
 }

components/Common/ProgressionSidebar/ProgressionSidebarItem/index.module.css

@@ -9,9 +9,12 @@ a.item {
     text-sm
     font-regular
     text-neutral-800
-    hover:text-neutral-900
-    dark:text-neutral-200
-    dark:hover:text-white;
+    dark:text-neutral-200;
+
+  &:hover {
+    @apply text-neutral-900
+      dark:text-white;
+  }
 
   svg {
     @apply flex-shrink-0

components/withNavBar.tsx

@@ -18,15 +18,15 @@ const WithNavBar: FC = () => {
 
   const locale = useLocale();
 
-  const toggleCurrnetTheme = () =>
+  const toggleCurrentTheme = () =>
     setTheme(resolvedTheme === 'dark' ? 'light' : 'dark');
 
   return (
     <>
       <WithBanner section="index" />
 
       <NavBar
-        onThemeTogglerClick={toggleCurrnetTheme}
+        onThemeTogglerClick={toggleCurrentTheme}
         languages={{
           currentLanguage: locale,
           availableLanguages: availableLocales,

navigation.json

@@ -1,7 +1,7 @@
 {
   "topNavigation": {
     "learn": {
-      "link": "/learn/getting-started/introduction-to-nodejs",
+      "link": "/learn",
       "label": "components.header.links.learn"
     },
     "about": {