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

components/Header/TopMenu/index.tsx

@@ -2,6 +2,8 @@ import { getHeader, getLanguageSwitcher } from "@/lib/trpc/memoizedRequests"
 
 import { GiftIcon, SearchIcon } from "@/components/Icons"
 import LanguageSwitcher from "@/components/LanguageSwitcher"
+import Link from "@/components/TempDesignSystem/Link"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
 import { getIntl } from "@/i18n"
 
 import HeaderLink from "../HeaderLink"
@@ -23,20 +25,27 @@ export default async function TopMenu() {
     <div className={styles.topMenu}>
       <div className={styles.content}>
         {header.data.topLink.link ? (
-          <HeaderLink
-            className={styles.topLink}
-            href={header.data.topLink.link.url}
-          >
-            <GiftIcon width={20} height={20} color="burgundy" />
-            {header.data.topLink.title}
-          </HeaderLink>
+          <Caption type="regular" color="textMediumContrast" asChild>
+            <Link
+              href={header.data.topLink.link.url}
+              color="peach80"
+              variant="icon"
+            >
+              <GiftIcon width={20} height={20} />
+              {header.data.topLink.title}
+            </Link>
+          </Caption>
         ) : null}
         <div className={styles.options}>
           <LanguageSwitcher type="desktopHeader" urls={languages.urls} />
-          <HeaderLink href="#">
-            <SearchIcon width={20} height={20} color="burgundy" />
-            {intl.formatMessage({ id: "Find booking" })}
-          </HeaderLink>
+
+          <Caption type="regular" color="textMediumContrast" asChild>
+            <Link href="#" color="peach80" variant="icon">
+              <SearchIcon width={20} height={20} />
+              {intl.formatMessage({ id: "Find booking" })}
+            </Link>
+          </Caption>
+          <HeaderLink href="#"></HeaderLink>
         </div>
       </div>
     </div>

components/Header/TopMenu/topMenu.module.css

@@ -2,7 +2,6 @@
   display: none;
   background-color: var(--Base-Surface-Subtle-Normal);
   padding: var(--Spacing-x2);
-  border-bottom: 1px solid var(--Base-Border-Subtle);
 }
 
 .content {