fix: more various dark mode fixes (#5850)

- fixed active nav item colour to be scaled on theme colour when nav is collapsed
- fixed internal border colours in node overview card to match other border colours
- actually call function to set initial dark mode state instead of passing to state directly
- deleted random empty table header in KVM ram resources card
- fixed background colour of read-only text inputs (thanks @tobiasdemendonca!)
- fixed background colour of boot architectures table in subnet boot arch form
- changed secondary row colour to use muted text css variable for better contrast in dark mode
- use vanilla variable for link colour for visited links to prevent colour change
- modified `u-text--light` to use muted text vanilla colour variable
- upgraded maas-react-components to 2.0.2

Author: ndv99

package.json

@@ -46,7 +46,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@canonical/maas-react-components": "2.0.1",
+    "@canonical/maas-react-components": "2.0.2",
     "@canonical/macaroon-bakery": "1.3.2",
     "@canonical/react-components": "3.6.0",
     "@redux-devtools/extension": "3.3.0",

src/app/base/hooks/useDarkMode/useDarkMode.ts

@@ -18,7 +18,7 @@ const getInitialDarkMode = (): boolean => {
 };
 
 const useDarkMode = (): [boolean, () => void] => {
-  const [isDarkMode, setIsDarkMode] = useState<boolean>(getInitialDarkMode);
+  const [isDarkMode, setIsDarkMode] = useState<boolean>(getInitialDarkMode());
 
   useEffect(() => {
     // Apply or remove the dark mode class on the body

src/app/kvm/components/RamResources/RamResources.tsx

@@ -100,7 +100,6 @@ const RamResources = ({
         >
           <thead>
             <tr>
-              <th></th>
               <th className="u-align--right u-text--light u-truncate">
                 Allocated
                 <span className="u-nudge-right--small">

src/app/networks/views/Subnets/views/SubnetDetails/components/EditBootArchitectures/BootArchitecturesTable/_index.scss

@@ -22,16 +22,4 @@
       width: 20%;
     }
   }
-
-  .boot-architectures-table__row {
-    background-color: $color-x-light;
-
-    &:hover {
-      background-color: $color-light;
-
-      &.is-selected {
-        background-color: color.scale($color-link, $alpha: -85%);
-      }
-    }
-  }
 }

src/scss/_patterns_double-row.scss

@@ -30,7 +30,7 @@
 
   .p-double-row__secondary-row {
     @extend %small-text;
-    color: $color-mid-dark;
+    color: var(--vf-color-text-muted);
     margin-bottom: 0;
   }
 

src/scss/_patterns_forms.scss

@@ -46,10 +46,9 @@
     }
   }
 
-  // Override Vanilla's default light text for readonly textareas and make text
-  // small. Used for displaying very long strings, e.g. certificates.
+  // Make text small for readonly text areas.
+  // Used for displaying very long strings, e.g. certificates.
   .p-textarea--readonly {
-    color: $color-dark !important;
     font-size: #{map.get($font-sizes, small)}rem;
   }
 

src/scss/_patterns_links.scss

@@ -1,7 +1,7 @@
 @mixin maas-links {
   // Keep normal link colour even when visited
   a:visited {
-    color: $color-link;
+    color: var(--vf-color-link-default);
 
     // Keep contextual menu link color even when visited
     &.p-contextual-menu__link {
@@ -15,9 +15,4 @@
     background-color: $color-x-light;
     padding: $sph--large;
   }
-
-  // TODO: remove once https://github.com/canonical/vanilla-framework/issues/4368 is released
-  a.is-on-dark {
-    color: #3097ff;
-  }
 }

src/scss/_patterns_navigation.scss

@@ -1,3 +1,4 @@
+@use "sass:color";
 //Local overrides to the navigation pattern
 @mixin maas-navigation {
   $breakpoint-hardware-menu: 1200px;
@@ -19,4 +20,52 @@
       display: none;
     }
   }
+
+  $nav-theme-colors: (
+    "default": $colors--dark-theme--background-default,
+    "bark": #585841,
+    "sage": #4e5f51,
+    "olive": #3d5f11,
+    "viridian": #025a3d,
+    "prussian_green": #225d5c,
+    "blue": #0060bf,
+    "purple": #7764d8,
+    "magenta": #974097,
+    "red": #a71b33,
+  );
+  @each $name, $color in $nav-theme-colors {
+    .is-maas-#{$name} {
+      background-color: $color !important;
+    }
+  }
+
+  @each $name, $color in $nav-theme-colors {
+    .is-maas-#{$name}--accent {
+      background-color: color.scale($color, $lightness: 5%) !important;
+    }
+
+    .is-maas-#{$name}  {
+      .p-side-navigation__link:hover, [aria-current=page].p-side-navigation__link, .p-button--base:hover {
+        background-color: color.scale($color, $lightness: 8%) !important;
+      }
+
+      @media (min-width: $breakpoint-small) {
+        .p-side-navigation__item.has-active-child {
+          background-color: color.scale($color, $lightness: 8%);
+        }
+      } 
+
+      @media (min-width: $application-layout--breakpoint-side-nav-expanded) {
+        .p-side-navigation__item.has-active-child {
+          background-color: transparent;
+        }
+      }
+    }
+
+    .is-maas-#{$name}--accent {
+      .p-side-navigation__link:hover, [aria-current=page].p-side-navigation__link {
+        background-color: color.scale($color, $lightness: 12%) !important;
+      }
+    }
+  }
 }

src/scss/_pseudo-border.scss

@@ -6,7 +6,7 @@
 
   &::after,
   &::before {
-    background-color: $color-mid-light;
+    background-color: var(--vf-color-border-default);
     content: "";
     position: absolute;
   }

src/scss/_utilities.scss

@@ -235,7 +235,7 @@
   }
 
   .u-text--light {
-    color: $color-mid-dark !important;
+    color: var(--vf-color-text-muted);
   }
 
   .u-upper-case--first:first-letter {
@@ -267,41 +267,4 @@
   .u-width--full {
     width: 100% !important;
   }
-
-  $nav-theme-colors: (
-    "default": $colors--dark-theme--background-default,
-    "bark": #585841,
-    "sage": #4e5f51,
-    "olive": #3d5f11,
-    "viridian": #025a3d,
-    "prussian_green": #225d5c,
-    "blue": #0060bf,
-    "purple": #7764d8,
-    "magenta": #974097,
-    "red": #a71b33,
-  );
-  @each $name, $color in $nav-theme-colors {
-    .is-maas-#{$name} {
-      background-color: $color !important;
-    }
-  }
-
-  @each $name, $color in $nav-theme-colors {
-    .is-maas-#{$name}--accent {
-      background-color: color.scale($color, $lightness: 5%) !important;
-    }
-
-    .is-maas-#{$name}  {
-      .p-side-navigation__link:hover, [aria-current=page].p-side-navigation__link, .p-button--base:hover {
-        background-color: color.scale($color, $lightness: 8%) !important;
-      }
-    }
-
-    .is-maas-#{$name}--accent {
-      .p-side-navigation__link:hover, [aria-current=page].p-side-navigation__link {
-        background-color: color.scale($color, $lightness: 12%) !important;
-      }
-    }
-
-  }
 }