feat(WEB-162): final design for my profile page

components/TempDesignSystem/Divider/divider.module.css

@@ -16,3 +16,11 @@
 .peach {
   border-bottom-color: var(--Theme-Primary-Light-On-Surface-Divider);
 }
+
+.opacity100 {
+  opacity: 1;
+}
+
+.opacity8 {
+  opacity: 0.08;
+}

components/TempDesignSystem/Divider/index.tsx

@@ -2,7 +2,12 @@ import { dividerVariants } from "./variants"
 
 import type { DividerProps } from "./divider"
 
-export default function Divider({ className, color, variant }: DividerProps) {
-  const classNames = dividerVariants({ className, color, variant })
+export default function Divider({
+  className,
+  color,
+  opacity,
+  variant,
+}: DividerProps) {
+  const classNames = dividerVariants({ className, color, opacity, variant })
   return <div className={classNames} />
 }

components/TempDesignSystem/Divider/variants.ts

@@ -8,6 +8,10 @@ export const dividerVariants = cva(styles.divider, {
       burgundy: styles.burgundy,
       peach: styles.peach,
     },
+    opacity: {
+      100: styles.opacity100,
+      8: styles.opacity8,
+    },
     variant: {
       default: styles.default,
       dotted: styles.dotted,
@@ -15,6 +19,7 @@ export const dividerVariants = cva(styles.divider, {
   },
   defaultVariants: {
     color: "burgundy",
+    opacity: 100,
     variant: "default",
   },
 })