fix(LOY-243): adjust font-sizes in text and gap on container

apps/scandic-web/components/MyPages/Profile/ChangeNameDisclaimer/index.tsx

@@ -15,7 +15,7 @@ export default function ChangeNameDisclaimer() {
   return (
     <div className={styles.changeNameDisclaimer}>
       <MaterialIcon icon="info" />
-      <Typography variant="Body/Paragraph/mdRegular">
+      <Typography variant="Body/Supporting text (caption)/smRegular">
         <p>
           {intl.formatMessage(
             {
@@ -25,24 +25,28 @@ export default function ChangeNameDisclaimer() {
             {
               phone([str]) {
                 return (
-                  <Link
-                    href={`tel:${str.replaceAll(" ", "")}`}
-                    textDecoration="underline"
-                    weight="bold"
-                  >
-                    {str}
-                  </Link>
+                  <Typography variant="Body/Supporting text (caption)/smBold">
+                    <Link
+                      href={`tel:${str.replaceAll(" ", "")}`}
+                      textDecoration="underline"
+                      size="none"
+                    >
+                      {str}
+                    </Link>
+                  </Typography>
                 )
               },
               email(str) {
                 return (
-                  <Link
-                    href={`mailto:${str}`}
-                    textDecoration="underline"
-                    weight="bold"
-                  >
-                    {str}
-                  </Link>
+                  <Typography variant="Body/Supporting text (caption)/smBold">
+                    <Link
+                      href={`mailto:${str}`}
+                      textDecoration="underline"
+                      size="none"
+                    >
+                      {str}
+                    </Link>
+                  </Typography>
                 )
               },
             }

apps/scandic-web/components/MyPages/Profile/profile.module.css

@@ -2,7 +2,7 @@
   background-color: var(--Main-Grey-White);
   border-radius: var(--Corner-radius-lg);
   display: grid;
-  gap: var(--Space-x3);
+  gap: var(--Space-x4);
   padding: var(--Space-x2) var(--Space-x2) var(--Space-x4);
 }
 
@@ -47,6 +47,7 @@
 
   .container {
     padding: var(--Space-x3) var(--Space-x3) var(--Space-x4);
+    gap: var(--Space-x3);
   }
 }
 

apps/scandic-web/components/TempDesignSystem/Link/variants.ts

@@ -19,6 +19,7 @@ export const linkVariants = cva(styles.link, {
       small: styles.small,
       regular: styles.regular,
       tiny: styles.tiny,
+      none: "",
     },
     textDecoration: {
       underline: styles.underline,