Refatoring modal

Add theme prop

src/components/ui/modal/modal.tsx

@@ -13,6 +13,11 @@ const messages = defineMessages({
   confirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
 });
 
+const themes = {
+  normal: 'bg-white p-6 shadow-xl',
+  transparent: 'bg-transparent p-0 shadow-none',
+};
+
 const widths = {
   xs: 'max-w-xs',
   sm: 'max-w-sm',
@@ -45,12 +50,8 @@ interface IModal {
   confirmationFullWidth?: boolean;
   /** Callback when the modal is closed. */
   onClose?: () => void;
-  /** Sets whether the modal will have a custom padding different from the default one. */
+  /** Theme for the modal. */
-  padding?: string;
+  theme?: keyof typeof themes;
-  /** Sets whether the modal will have a custom shadow different from the default one. */
-  shadow?: string;
-  /** Sets whether the modal will have a custom background different from the default one. */
-  background?: string;
   /** Callback when the secondary action is chosen. */
   secondaryAction?: (event?: React.MouseEvent<HTMLButtonElement>) => void;
   /** Secondary button text. */
@@ -79,9 +80,7 @@ const Modal = React.forwardRef<HTMLDivElement, IModal>(({
   confirmationTheme,
   confirmationFullWidth,
   onClose,
-  padding = 'p-6',
+  theme = 'normal',
-  shadow = 'shadow-xl',
-  background = 'bg-white',
   secondaryAction,
   secondaryDisabled = false,
   secondaryText,
@@ -104,7 +103,7 @@ const Modal = React.forwardRef<HTMLDivElement, IModal>(({
     <div
       ref={ref}
       data-testid='modal'
-      className={clsx(className, 'pointer-events-auto mx-auto block w-full rounded-2xl text-start align-middle text-gray-900 transition-all black:bg-black dark:bg-primary-900 dark:text-gray-100', padding, background, shadow , widths[width])}
+      className={clsx(className, 'pointer-events-auto mx-auto block w-full rounded-2xl text-start align-middle text-gray-900 transition-all black:bg-black dark:bg-primary-900 dark:text-gray-100', widths[width], themes[theme])}
     >
       <div className='w-full justify-between sm:flex sm:items-start'>
         <div className='w-full'>

src/features/ui/components/modals/onboarding-flow-modal/onboarding-flow-modal.tsx

@@ -75,7 +75,7 @@ const OnboardingFlowModal: React.FC<IOnboardingFlowModal> = ({ onClose }) => {
 
   return (
     <Stack space={4} className='w-full'>
-      <Modal width='2xl' onClose={handleComplete} padding='p-0' background='bg-transparent' shadow='shadow-none'>
+      <Modal width='2xl' onClose={handleComplete} theme='transparent'>
         <Stack space={4}>
           <ReactSwipeableViews animateHeight index={currentStep} onChangeIndex={handleSwipe}>
             {steps.map((step, i) => (