🎨 style: adjust modal theme and add wavy border on the header

packages/frontend/src/components/shared/Modal/Modal.theme.ts

@@ -7,30 +7,40 @@ export const modalTheme = tv({
       'z-modal',
       'fixed',
       'inset-0',
-      'bg-bg-base/90',
+      'bg-black/80',
       'backdrop-blur-sm',
       'overflow-y-auto',
       'flex',
       'justify-center',
-      'items-center',
+      'items-end',
-      'p-6',
+      'sm:items-center',
+      'p-0',
       'sm:p-10',
       'data-[state=closed]:animate-[dialog-overlay-hide_200ms]',
       'data-[state=open]:animate-[dialog-overlay-show_200ms]',
       'data-[state=closed]:hidden', // Fix overlay not close when modal is closed
     ],
-    close: [
+    close: ['absolute', 'right-4', 'top-2', 'sm:right-6', 'sm:top-3', 'z-[1]'],
-      'absolute',
+    header: [
-      'right-6',
+      'flex',
-      'top-5',
+      'flex-col',
-      'sm:right-10',
+      'gap-4',
-      'sm:top-[38px]',
+      'items-start',
-      'z-[1]',
+      'px-4',
+      'py-4',
+      'sm:px-6',
+      'sm:py-5',
+      'bg-base-bg-alternate',
     ],
-    header: ['flex', 'flex-col', 'gap-2', 'items-start', 'px-6', 'sm:px-10'],
+    headerTitle: [
-    headerTitle: ['text-lg', 'sm:text-xl', 'text-text-em-high'],
+      'text-base',
-    headerDescription: ['text-sm', 'text-text-em-low'],
+      'sm:text-lg',
-    footer: ['flex', 'justify-end', 'gap-3', 'sm:gap-4', 'px-6', 'sm:px-10'],
+      'tracking-[0.011em]',
+      'sm:tracking-normal',
+      'text-elements-high-em',
+    ],
+    headerDescription: ['text-sm', 'text-elements-low-em'],
+    footer: ['flex', 'gap-3', 'px-4', 'pb-4', 'pt-7', 'sm:pb-6', 'sm:px-6'],
     content: [
       'h-fit',
       'sm:min-h-0',
@@ -38,19 +48,15 @@ export const modalTheme = tv({
       'relative',
       'flex',
       'flex-col',
-      'gap-y-8',
-      'py-6',
-      'sm:py-10',
       'overflow-hidden',
       'w-full',
-      'max-w-[560px]',
+      'sm:max-w-[562px]',
-      'rounded-xl',
+      'rounded-2xl',
-      'bg-surface-base',
+      'bg-base-bg',
-      'border',
+      'shadow-card',
-      'border-border-base',
+      'text-elements-high-em',
-      'text-text-em-high',
     ],
-    body: ['flex-1', 'px-6', 'sm:px-10'],
+    body: ['flex-1', 'px-4', 'pt-4', 'sm:pt-6', 'sm:px-6'],
   },
   variants: {
     fullPage: {

packages/frontend/src/components/shared/Modal/ModalHeader/ModalHeader.tsx

@@ -4,6 +4,7 @@ import { Description, Title } from '@radix-ui/react-dialog';
 import type { ComponentPropsWithoutRef, PropsWithChildren } from 'react';
 import { Heading } from 'components/shared/Heading';
 import { modalTheme } from 'components/shared/Modal/Modal.theme';
+import { WavyBorder } from 'components/shared/WavyBorder';
 
 type ModalHeaderProps = ComponentPropsWithoutRef<'div'> & {
   className?: string;
@@ -23,30 +24,33 @@ export const ModalHeader = ({
   const { header, headerDescription, headerTitle } = modalTheme();
 
   return (
-    <div
+    <>
-      className={header({
+      <div
-        className,
+        className={header({
-      })}
+          className,
-      {...props}
+        })}
-    >
+        {...props}
-      <Title asChild>
+      >
-        <Heading
+        <Title asChild>
-          {...headingProps}
+          <Heading
-          className={headerTitle({ className: headingProps?.className })}
+            {...headingProps}
-        >
+            className={headerTitle({ className: headingProps?.className })}
-          {children}
+          >
-        </Heading>
+            {children}
-      </Title>
+          </Heading>
-      {description && (
+        </Title>
-        <Description
+        {description && (
-          {...descriptionProps}
+          <Description
-          className={headerDescription({
+            {...descriptionProps}
-            className: descriptionProps?.className,
+            className={headerDescription({
-          })}
+              className: descriptionProps?.className,
-        >
+            })}
-          {description}
+          >
-        </Description>
+            {description}
-      )}
+          </Description>
-    </div>
+        )}
+      </div>
+      <WavyBorder className="-mt-0.5" variant="stroke" />
+    </>
   );
 };