fix(SW-812): styling fixes for the header and related components

components/LanguageSwitcher/languageSwitcher.module.css

@@ -1,25 +1,38 @@
 .button {
+  --language-switcher-color: var(--Base-Text-Medium-contrast);
+  --language-switcher-hover-color: var(--Base-Text-High-contrast);
+
   background-color: transparent;
-  font-family: var(--typography-Caption-Regular-fontFamily);
-  font-size: var(--typography-Caption-Regular-fontSize);
   border-width: 0;
   padding: 0;
   cursor: pointer;
   display: grid;
   grid-template-columns: repeat(2, max-content) 1fr;
-  gap: var(--Spacing-x1);
   align-items: center;
   width: 100%;
+  color: var(--language-switcher-color);
 }
 
-.burgundy .button {
-  color: var(--Base-Text-High-contrast);
+.button * {
+  fill: var(--language-switcher-color);
+}
+.button:hover {
+  color: var(--language-switcher-hover-color);
+}
+.button:hover * {
+  fill: var(--language-switcher-hover-color);
 }
 
-.pale .button {
-  color: var(--Primary-Dark-On-Surface-Text);
+.buttonText {
+  color: inherit !important;
+  margin-left: var(--Spacing-x1);
+  margin-right: var(--Spacing-x-quarter);
 }
 
+.footer .button {
+  --language-switcher-color: var(--Primary-Dark-On-Surface-Text);
+  --language-switcher-hover-color: var(--Primary-Dark-On-Surface-Text);
+}
 .chevron {
   justify-self: end;
   transition: transform 0.3s;
@@ -36,19 +49,19 @@
   z-index: var(--menu-overlay-z-index);
 }
 
-.top .dropdown {
+.header .dropdown {
   right: -100vw;
   top: var(--main-menu-mobile-height);
   bottom: 0;
   transition: right 0.3s;
 }
 
-.top .dropdown.isExpanded {
+.header .dropdown.isExpanded {
   display: block;
   right: 0;
 }
 
-.bottom .dropdown {
+.footer .dropdown {
   transition: transform 0.3s;
   width: 100%;
   height: 100vh;
@@ -57,7 +70,7 @@
   transform: translateY(100%);
 }
 
-.bottom .dropdown.isExpanded {
+.footer .dropdown.isExpanded {
   transform: translateY(0);
 }
 
@@ -70,39 +83,37 @@
     position: absolute;
     background-color: var(--Base-Surface-Primary-light-Normal);
     border-radius: var(--Corner-radius-Large);
-    box-shadow: 0px 0px 14px 6px #0000001a;
+    box-shadow: 0 0 14px 6px rgba(0, 0, 0, 0.1);
     display: none;
     min-width: 12.5rem;
     z-index: 1;
   }
-  .top .dropdown {
+  .header .dropdown {
     top: 2.25rem;
     bottom: auto;
   }
 
-  .top .dropdown::before {
+  .header .dropdown::before {
     top: -1.25rem;
     transform: rotate(180deg);
   }
 
-  .bottom .dropdown {
+  .footer .dropdown {
     transition: none;
     height: auto;
     left: -100%;
     bottom: 2.25rem;
   }
 
-  .bottom .dropdown.isExpanded {
+  .footer .dropdown.isExpanded {
     display: block;
   }
 
-  .bottom .dropdown::before {
+  .footer .dropdown::before {
     top: 100%;
   }
 
   .button {
     grid-template-columns: repeat(3, max-content);
-    font-size: var(--typography-Body-Bold-fontSize);
-    font-family: var(--typography-Body-Bold-fontFamily);
   }
 }