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

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>