feat(SW-184): implementing mobile design

components/Header/MainMenu/MyPagesMenu/index.tsx

@@ -35,7 +35,9 @@ export default function MyPagesMenu({ navigation, user }: MyPagesMenuProps) {
     <div className={styles.myPagesMenu}>
       <MainMenuButton className={styles.button} onClick={toggleMyPagesMenu}>
         <Avatar initials={getInitials(user.firstName, user.lastName)} />
-        {intl.formatMessage({ id: "Hi" })} {user.firstName}!
+        <span className={styles.userName}>
+          {intl.formatMessage({ id: "Hi" })} {user.firstName}!
+        </span>
         <ChevronDownIcon
           className={`${styles.chevron} ${isMyPagesMenuOpen ? styles.isExpanded : ""}`}
           color="red"
@@ -98,9 +100,15 @@ export default function MyPagesMenu({ navigation, user }: MyPagesMenuProps) {
       </nav>
     </div>
   ) : (
-    <Link href={myPages[lang]} className={styles.link}>
+    <Link
+      href={myPages[lang]}
+      className={styles.loginLink}
+      aria-label={intl.formatMessage({ id: "Log in/Join" })}
+    >
       <Avatar />
-      {intl.formatMessage({ id: "Log in/Join" })}
+      <span className={styles.userName}>
+        {intl.formatMessage({ id: "Log in/Join" })}
+      </span>
     </Link>
   )
 }