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

components/Header/MainMenu/Avatar/avatar.module.css

@@ -6,11 +6,9 @@
   border-radius: var(--Corner-radius-Rounded);
   width: 2rem;
   height: 2rem;
-  background-color: var(--Main-Grey-40);
+  background-color: var(--UI-Grey-40);
 }
 
 .initials {
-  font-size: 0.75rem;
-  color: var(--Base-Text-Inverted);
   background-color: var(--Base-Icon-Low-contrast);
 }

components/Header/MainMenu/Avatar/index.tsx

@@ -1,5 +1,6 @@
 import { PersonIcon } from "@/components/Icons"
 import Image from "@/components/Image"
+import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 
 import styles from "./avatar.module.css"
 
@@ -13,7 +14,11 @@ export default function Avatar({ image, initials }: AvatarProps) {
     element = <Image src={image.src} alt={image.alt} width={28} height={28} />
   } else if (initials) {
     classNames.push(styles.initials)
-    element = <span>{initials}</span>
+    element = (
+      <Footnote type="label" color="white" textTransform="uppercase" asChild>
+        <span>{initials}</span>
+      </Footnote>
+    )
   }
   return <span className={classNames.join(" ")}>{element}</span>
 }