From 485fddfa3d7c00b1cb3d9a5c9123b26a949ca105 Mon Sep 17 00:00:00 2001
From: Christian Andolf <christian.andolf@scandichotels.com>
Date: Fri, 9 May 2025 09:54:55 +0200
Subject: [PATCH 1/2] fix: make sure of design system button and inherent
 typography props

---
 .../MyPages/DigitalTeamMemberCard/Client.tsx  | 46 +++++++++++--------
 .../MyPages/DigitalTeamMemberCard/Content.tsx | 20 ++++----
 .../digitalTeamMemberCard.module.css          | 18 +-------
 3 files changed, 36 insertions(+), 48 deletions(-)

diff --git a/apps/scandic-web/components/MyPages/DigitalTeamMemberCard/Client.tsx b/apps/scandic-web/components/MyPages/DigitalTeamMemberCard/Client.tsx
index 0cf6ccb21..9c7b1bfb8 100644
--- a/apps/scandic-web/components/MyPages/DigitalTeamMemberCard/Client.tsx
+++ b/apps/scandic-web/components/MyPages/DigitalTeamMemberCard/Client.tsx
@@ -1,9 +1,9 @@
 "use client"
 
 import { useState } from "react"
-import { Button } from "react-aria-components"
 import { useIntl } from "react-intl"
 
+import { Button } from "@scandic-hotels/design-system/Button"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
@@ -42,16 +42,19 @@ export default function DigitalTeamMemberCardClient({
 
   return (
     <>
-      <Button className={styles.button} onPress={() => onToggle(true)}>
-        <Typography variant="Body/Paragraph/mdBold">
-          <span className={styles.text}>
-            {/* @ts-expect-error Icon is supported in font, just not in React Material Symbols package */}
-            <MaterialIcon icon="id_card" size={24} color="CurrentColor" />
-            {intl.formatMessage({
-              defaultMessage: "Show Team Member Card",
-            })}
-          </span>
-        </Typography>
+      <Button
+        className={styles.button}
+        onPress={() => onToggle(true)}
+        variant="Tertiary"
+        typography="Body/Paragraph/mdBold"
+      >
+        <span className={styles.text}>
+          {/* @ts-expect-error Icon is supported in font, just not in React Material Symbols package */}
+          <MaterialIcon icon="id_card" size={24} color="CurrentColor" />
+          {intl.formatMessage({
+            defaultMessage: "Show Team Member Card",
+          })}
+        </span>
       </Button>
       <Modal onToggle={onToggle} isOpen={isOpen} className={styles.modal}>
         <Typography variant="Title/xs">
@@ -71,15 +74,18 @@ export default function DigitalTeamMemberCardClient({
           </p>
         </Typography>
         {/* TODO: Add missing link to benefits page */}
-        <ButtonLink href="#" target="_blank" variant="Tertiary">
-          <Typography variant="Body/Supporting text (caption)/smBold">
-            <span className={styles.link}>
-              {intl.formatMessage({
-                defaultMessage: "Check out all your benefits",
-              })}
-              <MaterialIcon icon="open_in_new" size={20} color="CurrentColor" />
-            </span>
-          </Typography>
+        <ButtonLink
+          href="#"
+          target="_blank"
+          variant="Tertiary"
+          typography="Body/Supporting text (caption)/smBold"
+        >
+          <span className={styles.link}>
+            {intl.formatMessage({
+              defaultMessage: "Check out all your benefits",
+            })}
+            <MaterialIcon icon="open_in_new" size={20} color="CurrentColor" />
+          </span>
         </ButtonLink>
       </Modal>
     </>
diff --git a/apps/scandic-web/components/MyPages/DigitalTeamMemberCard/Content.tsx b/apps/scandic-web/components/MyPages/DigitalTeamMemberCard/Content.tsx
index 0b880784d..8954995d9 100644
--- a/apps/scandic-web/components/MyPages/DigitalTeamMemberCard/Content.tsx
+++ b/apps/scandic-web/components/MyPages/DigitalTeamMemberCard/Content.tsx
@@ -133,18 +133,16 @@ export default function DigitalTeamMemberCardContent({
       <div className={styles.card} ref={cardRef} style={renderSkew()}>
         <div className={styles.shimmer} style={renderShimmer()} />
         <div className={styles.content}>
-          <div className={styles.top}>
-            <Typography variant="Tag/sm">
+          <Typography variant="Tag/sm">
+            <div className={styles.top}>
               <span>
                 {intl.formatMessage({ defaultMessage: "Team Member" })}
               </span>
-            </Typography>
-            <Typography variant="Tag/sm">
               {/* TODO: Should display country of employment */}
               {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
               <span>SWE</span>
-            </Typography>
-          </div>
+            </div>
+          </Typography>
           <div className={styles.middle}>
             <div className={styles.employeeNumber}>
               <Typography variant="Title/sm">
@@ -174,21 +172,19 @@ export default function DigitalTeamMemberCardContent({
               </div>
             </Typography>
           </div>
-          <div className={styles.bottom}>
-            <Typography variant="Tag/sm">
+          <Typography variant="Tag/sm">
+            <div className={styles.bottom}>
               <span>
                 {/* TODO: Should display department of employment */}
                 {/* eslint-disable formatjs/no-literal-string-in-jsx */}
                 Haymarket by Scandic
                 {/* eslint-enable */}
               </span>
-            </Typography>
-            <Typography variant="Tag/sm">
               {/* TODO: Should display current state of employment */}
               {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
               <span>Employee</span>
-            </Typography>
-          </div>
+            </div>
+          </Typography>
         </div>
       </div>
     </div>
diff --git a/apps/scandic-web/components/MyPages/DigitalTeamMemberCard/digitalTeamMemberCard.module.css b/apps/scandic-web/components/MyPages/DigitalTeamMemberCard/digitalTeamMemberCard.module.css
index 6ed99cff0..6fac9ed0d 100644
--- a/apps/scandic-web/components/MyPages/DigitalTeamMemberCard/digitalTeamMemberCard.module.css
+++ b/apps/scandic-web/components/MyPages/DigitalTeamMemberCard/digitalTeamMemberCard.module.css
@@ -1,24 +1,10 @@
 .button {
-  padding: var(--Space-x2) var(--Space-x15);
   border-radius: var(--Corner-radius-md);
-  border: 0;
-  cursor: pointer;
-  background: var(--Surface-Brand-Primary-1-OnSurface-Default);
   color: var(--Text-Brand-OnPrimary-3-Accent);
 
   &:focus,
-  &:hover {
-    background:
-      linear-gradient(
-        0deg,
-        rgb(255 255 255 / 10%) 0%,
-        rgb(255 255 255 / 10%) 100%
-      ),
-      var(--Surface-Brand-Primary-1-OnSurface-Default);
-  }
-  &:disabled {
-    background: var(--Surface-UI-Fill-Disabled);
-    color: var(--Text-Interactive-Disabled);
+  &:not(:disabled):hover {
+    color: var(--Text-Brand-OnPrimary-3-Accent);
   }
 }
 

From 2b32a9c1ff3cc0f0297ff06eb474025aa5892ecc Mon Sep 17 00:00:00 2001
From: Christian Andolf <christian.andolf@scandichotels.com>
Date: Fri, 9 May 2025 09:57:55 +0200
Subject: [PATCH 2/2] chore: rename functions to make more sense

---
 .../components/MyPages/DigitalTeamMemberCard/Content.tsx  | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/scandic-web/components/MyPages/DigitalTeamMemberCard/Content.tsx b/apps/scandic-web/components/MyPages/DigitalTeamMemberCard/Content.tsx
index 8954995d9..d182b91e4 100644
--- a/apps/scandic-web/components/MyPages/DigitalTeamMemberCard/Content.tsx
+++ b/apps/scandic-web/components/MyPages/DigitalTeamMemberCard/Content.tsx
@@ -87,7 +87,7 @@ export default function DigitalTeamMemberCardContent({
     }
   }
 
-  function renderShimmer(): CSSProperties {
+  function getShimmerStyle(): CSSProperties {
     const { x, y } = coords
     const oppositeX = 100 - (x / rect.width) * 100
     const oppositeY = 100 - (y / rect.height) * 100
@@ -97,7 +97,7 @@ export default function DigitalTeamMemberCardContent({
     }
   }
 
-  function renderSkew(): CSSProperties {
+  function getSkewStyle(): CSSProperties {
     const { x, y } = coords
     const centerX = rect.width / 2
     const centerY = rect.height / 2
@@ -130,8 +130,8 @@ export default function DigitalTeamMemberCardContent({
       onTouchMove={onInteractionMove}
       onTouchEnd={handleInteractionEnd}
     >
-      <div className={styles.card} ref={cardRef} style={renderSkew()}>
-        <div className={styles.shimmer} style={renderShimmer()} />
+      <div className={styles.card} ref={cardRef} style={getSkewStyle()}>
+        <div className={styles.shimmer} style={getShimmerStyle()} />
         <div className={styles.content}>
           <Typography variant="Tag/sm">
             <div className={styles.top}>