Merged in feat/LOY-311-New-Avatar-Component (pull request #2694)

Feat(LOY-311) Create avatar design system component

* feat(LOY-311): Creat & use New Avatar Design System Component

* refactor(LOY-311): replace avatar used in app header with design system component

* fix(LOY-311): use correct space vars


Approved-by: Erik Tiekstra

apps/scandic-web/components/MyPages/CopyMembershipIdButton/copyMembershipIdButton.module.css

@@ -0,0 +1,11 @@
+.container {
+  display: flex;
+  align-items: center;
+  gap: var(--Space-x1);
+  color: var(--Scandic-Red-100);
+}
+
+.copyButton {
+  min-width: auto;
+  padding: var(--Space-x05);
+}

apps/scandic-web/components/MyPages/CopyMembershipIdButton/index.tsx

@@ -0,0 +1,56 @@
+"use client"
+
+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"
+
+import { toast } from "@/components/TempDesignSystem/Toasts"
+
+import styles from "./copyMembershipIdButton.module.css"
+
+interface CopyMembershipIdButtonProps {
+  membershipNumber: string
+}
+
+export default function CopyMembershipIdButton({
+  membershipNumber,
+}: CopyMembershipIdButtonProps) {
+  const intl = useIntl()
+
+  function handleCopy() {
+    try {
+      navigator.clipboard.writeText(membershipNumber)
+      toast.success(
+        intl.formatMessage({
+          defaultMessage: "Membership ID copied to clipboard",
+        })
+      )
+    } catch {
+      toast.error(
+        intl.formatMessage({
+          defaultMessage: "Failed to copy",
+        })
+      )
+    }
+  }
+
+  return (
+    <div className={styles.container}>
+      <Typography variant="Body/Supporting text (caption)/smBold">
+        <code data-hj-suppress className={styles.membershipCode}>
+          {membershipNumber}
+        </code>
+      </Typography>
+      <Button
+        onClick={handleCopy}
+        className={styles.copyButton}
+        variant="Text"
+        size="Small"
+      >
+        <MaterialIcon icon="content_copy" color="CurrentColor" />
+      </Button>
+    </div>
+  )
+}