feat(SW-572): Added support for logged in and logged out variants of the top link inside the header

components/Header/HeaderLink/headerLink.module.css

@@ -2,5 +2,16 @@
   display: flex;
   align-items: center;
   gap: var(--Spacing-x1);
-  font-size: var(--typography-Caption-Regular-fontSize);
+}
+
+.headerLink:hover {
+  color: var(--Base-Text-High-contrast);
+}
+
+.headerLink .icon * {
+  fill: var(--Base-Text-Medium-contrast);
+}
+
+.headerLink:hover .icon * {
+  fill: var(--Base-Text-High-contrast);
 }

components/Header/HeaderLink/index.tsx

@@ -1,4 +1,7 @@
-import Link from "@/components/TempDesignSystem/Link"
+import Link from "next/link"
+
+import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
 
 import styles from "./headerLink.module.css"
 
@@ -6,16 +9,19 @@ import type { HeaderLinkProps } from "@/types/components/header/headerLink"
 
 export default function HeaderLink({
   children,
-  className,
-  ...props
+  href,
+  iconName,
+  iconSize = 20,
 }: HeaderLinkProps) {
+  const Icon = getIconByIconName(iconName)
   return (
-    <Link
-      color="burgundy"
-      className={`${styles.headerLink} ${className}`}
-      {...props}
-    >
-      {children}
-    </Link>
+    <Caption type="regular" color="textMediumContrast" asChild>
+      <Link href={href} className={styles.headerLink}>
+        {Icon ? (
+          <Icon className={styles.icon} width={iconSize} height={iconSize} />
+        ) : null}
+        {children}
+      </Link>
+    </Caption>
   )
 }