fix: update ui

components/MyPages/Blocks/Overview/Friend/friend.module.css

@@ -9,11 +9,13 @@
 .header {
   display: flex;
   flex-direction: column;
+  gap: var(--Spacing-x1);
 }
 
 .levelLabel {
   position: relative;
   transform: rotate(-13deg) translate(0px, -15px);
+  margin-left: -35px;
 }
 
 .name {
@@ -39,17 +41,6 @@
   padding: var(--Spacing-x1) var(--Spacing-x2);
 }
 
-.membershipId {
-  color: var(--Scandic-Brand-Pale-Peach);
-  /* TODO: Not yet exported by the design team, change to variable l8r */
-  font-family: var(--ff-fira-mono, "fira mono");
-  font-size: 14px;
-  font-weight: 400;
-  letter-spacing: 0.168px;
-  line-height: 140%;
-  margin: 0;
-}
-
 @media screen and (min-width: 768px) {
   .membershipContainer {
     grid-template-columns: auto auto;

components/MyPages/Blocks/Overview/Friend/index.tsx

@@ -1,6 +1,7 @@
 import { membershipLevels } from "@/constants/membershipLevels"
 
 import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import { getIntl } from "@/i18n"
 import { getMembership } from "@/utils/user"
@@ -35,12 +36,10 @@ export default async function Friend({ user }: UserProps) {
           {user.name}
         </Title>
         <div className={styles.membershipContainer}>
-          <p className={styles.membershipId}>
-            {formatMessage({ id: "Membership ID" })}:
-          </p>
-          <p className={styles.membershipId}>
+          <Caption color="pale">
+            {formatMessage({ id: "Membership ID" })}:{" "}
             {membership ? membership.membershipNumber : "N/A"}
-          </p>
+          </Caption>
         </div>
       </div>
     </section>