Merged in feat/mypages-mobile-dropdown (pull request #256)

Feat/mypages mobile dropdown

Approved-by: Michael Zetterberg

components/MyPages/Avatar/avatar.module.css

@@ -0,0 +1,27 @@
+.avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: middle;
+  overflow: hidden;
+  cursor: pointer;
+  width: 35px;
+  height: 35px;
+  border-radius: 100%;
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+.avatarInitialsText {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--Theme-Primary-Dark-Surface-Normal);
+  color: var(--Theme-Primary-Dark-On-Surface-Text);
+  font-size: var(--typography-Caption-Bold-fontSize);
+  font-family: var(--typography-Body-Regular-fontFamily);
+  font-weight: var(--typography-Caption-Bold-fontWeight);
+  line-height: 150%;
+  letter-spacing: 0.096px;
+}

components/MyPages/Avatar/index.tsx

@@ -0,0 +1,20 @@
+import { getInitials } from "@/utils/user"
+
+import styles from "./avatar.module.css"
+
+import { User } from "@/types/user"
+
+export default function Avatar({
+  firstName,
+  lastName,
+}: {
+  firstName: User["firstName"]
+  lastName: User["lastName"]
+}) {
+  const initials = getInitials(firstName, lastName)
+  return (
+    <span className={styles.avatar}>
+      <span className={styles.avatarInitialsText}>{initials}</span>
+    </span>
+  )
+}