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

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