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

components/LanguageSwitcher/LanguageSwitcherContainer/index.tsx

@@ -34,7 +34,7 @@ export default function LanguageSwitcherContainer({
             className={styles.backButton}
             onClick={() => toggleDropdown(position)}
           >
-            <ChevronLeftIcon color="red" />
+            <ChevronLeftIcon color="red" height={20} width={20} />
             <Subtitle type="one" asChild>
               <span>
                 {intl.formatMessage({

components/LanguageSwitcher/LanguageSwitcherContent/languageSwitcherContent.module.css

@@ -34,7 +34,7 @@
 .link.active,
 .link:hover {
   background-color: var(--Base-Surface-Primary-light-Hover-alt);
-  font-weight: var(--typography-Body-Bold-fontWeight);
+  font-weight: 500; /* Should be fixed when variables starts working: var(--typography-Body-Bold-fontWeight); */
 }
 
 @media screen and (min-width: 768px) {

components/LanguageSwitcher/index.tsx

@@ -6,12 +6,12 @@ import { useIntl } from "react-intl"
 import { languages } from "@/constants/languages"
 import useDropdownStore from "@/stores/main-menu"
 
-import { ChevronDownIcon, GlobeIcon } from "@/components/Icons"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
+import { ChevronDownSmallIcon, GlobeIcon } from "@/components/Icons"
 import useClickOutside from "@/hooks/useClickOutside"
 import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
 import useLang from "@/hooks/useLang"
 
+import Caption from "../TempDesignSystem/Text/Caption"
 import LanguageSwitcherContainer from "./LanguageSwitcherContainer"
 import LanguageSwitcherContent from "./LanguageSwitcherContent"
 import { languageSwitcherVariants } from "./variants"
@@ -41,7 +41,6 @@ export default function LanguageSwitcher({
   const isHeader = !isFooter
 
   const position = isFooter ? "footer" : "header"
-  const color = isFooter ? "pale" : "burgundy"
 
   const dropdownType = {
     footer: DropdownTypeEnum.FooterLanguageSwitcher,
@@ -74,7 +73,7 @@ export default function LanguageSwitcher({
     () => toggleDropdown(dropdownType)
   )
 
-  const classNames = languageSwitcherVariants({ color, position })
+  const classNames = languageSwitcherVariants({ position })
 
   return (
     <div className={classNames} ref={languageSwitcherRef}>
@@ -88,15 +87,14 @@ export default function LanguageSwitcher({
         })}
         onClick={handleClick}
       >
-        <GlobeIcon width={20} height={20} color={color} />
-        <Caption type="regular" color={color}>
-          {languages[currentLanguage]}
+        <GlobeIcon width={20} height={20} />
+        <Caption className={styles.buttonText} type="regular" asChild>
+          <span>{languages[currentLanguage]}</span>
         </Caption>
-        <ChevronDownIcon
+        <ChevronDownSmallIcon
           className={`${styles.chevron} ${isLanguageSwitcherOpen ? styles.isExpanded : ""}`}
           width={20}
           height={20}
-          color={color}
         />
       </button>
 

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);
   }
 }

components/LanguageSwitcher/variants.ts

@@ -4,17 +4,12 @@ import styles from "./languageSwitcher.module.css"
 
 export const languageSwitcherVariants = cva(styles.languageSwitcher, {
   variants: {
-    color: {
-      burgundy: styles.burgundy,
-      pale: styles.pale,
-    },
     position: {
-      header: styles.top,
-      footer: styles.bottom,
+      header: styles.header,
+      footer: styles.footer,
     },
     defaultVariants: {
-      color: "burgundy",
-      position: "top",
+      position: "header",
     },
   },
 })