🎨 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',
-      'p-6',
+      'items-end',
+      '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: [
-      'absolute',
-      'right-6',
-      'top-5',
-      'sm:right-10',
-      'sm:top-[38px]',
-      'z-[1]',
+    close: ['absolute', 'right-4', 'top-2', 'sm:right-6', 'sm:top-3', 'z-[1]'],
+    header: [
+      'flex',
+      'flex-col',
+      'gap-4',
+      'items-start',
+      '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: ['text-lg', 'sm:text-xl', 'text-text-em-high'],
-    headerDescription: ['text-sm', 'text-text-em-low'],
-    footer: ['flex', 'justify-end', 'gap-3', 'sm:gap-4', 'px-6', 'sm:px-10'],
+    headerTitle: [
+      'text-base',
+      'sm:text-lg',
+      '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]',
-      'rounded-xl',
-      'bg-surface-base',
-      'border',
-      'border-border-base',
-      'text-text-em-high',
+      'sm:max-w-[562px]',
+      'rounded-2xl',
+      'bg-base-bg',
+      'shadow-card',
+      'text-elements-high-em',
     ],
-    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,6 +24,7 @@ export const ModalHeader = ({
   const { header, headerDescription, headerTitle } = modalTheme();
 
   return (
+    <>
       <div
         className={header({
           className,
@@ -48,5 +50,7 @@ export const ModalHeader = ({
           </Description>
         )}
       </div>
+      <WavyBorder className="-mt-0.5" variant="stroke" />
+    </>
   );
 };