Merged in feat/best-friend-hero (pull request #338)

Feat(SW-170): Update overview hero

Approved-by: Christel Westerberg

components/MyPages/Blocks/Overview/Buttons/CopyButton.tsx

@@ -1,25 +1,27 @@
 "use client"
 
-import Image from "@/components/Image"
+import CopyIcon from "@/components/Icons/Copy"
 import Button from "@/components/TempDesignSystem/Button"
-import { getMembership } from "@/utils/user"
 
-import type { User } from "@/types/user"
+import styles from "./copybutton.module.css"
 
-export default function CopyButton({ memberships }: Pick<User, "memberships">) {
+import type { CopyButtonProps } from "@/types/components/myPages/membership"
+
+export default function CopyButton({ membershipNumber }: CopyButtonProps) {
   function handleCopy() {
-    const membership = getMembership(memberships)
-    console.log(`COPIED! (${membership ? membership.membershipNumber : "N/A"})`)
+    navigator.clipboard.writeText(membershipNumber)
   }
 
   return (
-    <Button onClick={handleCopy} type="button" variant="icon">
-      <Image
-        alt="Copy Icon"
-        height={20}
-        src="/_static/icons/copy.svg"
-        width={20}
-      />
+    <Button
+      onClick={handleCopy}
+      className={styles.button}
+      type="button"
+      variant="icon"
+      size="small"
+      intent="tertiary"
+    >
+      <CopyIcon color="pale" />
     </Button>
   )
 }

components/MyPages/Blocks/Overview/Buttons/copybutton.module.css

@@ -0,0 +1,5 @@
+.button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}