chore: adjust ConfirmationModal component styling

src/components/modal/ConfirmationModal.tsx

@@ -35,29 +35,29 @@ const iconConfig = {
   info: {
     icon: 'material-symbols:info-outline-rounded',
     iconClassName: 'text-info-content',
-    bgClassName: 'bg-info',
+    innerRingClassName: 'bg-info',
-    outerRingClassName: 'bg-info/20',
+    middleRingClassName: 'bg-info/12',
-    borderClassName: 'border-info',
+    outerRingClassName: 'border-info/12 bg-info/8',
   },
   success: {
     icon: 'heroicons:check',
     iconClassName: 'text-white',
-    bgClassName: 'bg-[#00D390]',
+    innerRingClassName: 'bg-success',
-    outerRingClassName: 'bg-[#00D3901F]',
+    middleRingClassName: 'bg-success/12',
-    borderClassName: 'border-[#CCF7EB]',
+    outerRingClassName: 'border-success/12 bg-success/8',
   },
   error: {
-    icon: 'solar:danger-triangle-linear',
+    icon: 'heroicons:exclamation-triangle',
     iconClassName: 'text-error-content',
-    bgClassName: 'bg-[#f03338]',
+    innerRingClassName: 'bg-error',
-    outerRingClassName: 'bg-[#f3cdcd]',
+    middleRingClassName: 'bg-error/12',
-    borderClassName: 'border-[#fff0ef]',
+    outerRingClassName: 'border-error/12 bg-error/8',
   },
 } as const;
 
 const ConfirmationModalIcon = ({
   type,
-  size = 24,
+  size = 16,
 }: {
   type: 'info' | 'success' | 'error';
   size?: number;
@@ -65,28 +65,22 @@ const ConfirmationModalIcon = ({
   const config = iconConfig[type];
 
   return (
-    <div className='flex items-center justify-center p-2'>
+    <div
-      <div
+      className={cn('rounded-full border p-[5px]', config.outerRingClassName)}
-        className={cn(
+    >
-          'rounded-full border-4 p-1',
+      <div className={cn('rounded-full p-2', config.middleRingClassName)}>
-          config.outerRingClassName,
+        <div
-          config.borderClassName
+          className={cn(
-        )}
+            'rounded-full p-1 flex items-center justify-center',
-      >
+            config.innerRingClassName
-        <div className={cn('rounded-full p-1', config.outerRingClassName)}>
+          )}
-          <div
+        >
-            className={cn(
+          <Icon
-              'rounded-full p-3 flex items-center justify-center',
+            icon={config.icon}
-              config.bgClassName
+            width={size}
-            )}
+            height={size}
-          >
+            className={config.iconClassName}
-            <Icon
+          />
-              icon={config.icon}
-              width={size}
-              height={size}
-              className={config.iconClassName}
-            />
-          </div>
         </div>
       </div>
     </div>
@@ -103,7 +97,7 @@ const ConfirmationModal = ({
   secondaryButton,
   className,
   children,
-  iconSize = 32,
+  iconSize = 16,
   iconPosition = 'center',
 }: ConfirmationModalProps) => {
   const [isPrimaryButtonLoading, setIsPrimaryButtonLoading] = useState(false);
@@ -123,7 +117,14 @@ const ConfirmationModal = ({
   };
 
   return (
-    <Modal ref={ref} closeOnBackdrop={closeOnBackdrop} className={className}>
+    <Modal
+      ref={ref}
+      closeOnBackdrop={closeOnBackdrop}
+      className={{
+        ...className,
+        modalBox: cn('rounded-xl p-4', className?.modalBox),
+      }}
+    >
       <div className='w-full flex flex-col gap-4'>
         {iconPosition === 'center' ? (
           <>
@@ -143,7 +144,7 @@ const ConfirmationModal = ({
           </>
         ) : (
           <div
-            className={cn('flex flex-row items-center gap-4', {
+            className={cn('flex flex-row items-center gap-3', {
               'flex-row': iconPosition === 'left',
               'flex-row-reverse': iconPosition === 'right',
             })}
@@ -153,12 +154,12 @@ const ConfirmationModal = ({
             </div>
 
             <div className='flex flex-col gap-1'>
-              <p className='font-medium'>
+              <p className='text-sm font-semibold'>
                 {text ?? 'Apakah anda yakin ingin melakukan hal ini?'}
               </p>
 
               {subtitleText && (
-                <p className='text-sm text-gray-400'>{subtitleText}</p>
+                <p className='text-xs text-base-content/50'>{subtitleText}</p>
               )}
             </div>
           </div>
@@ -166,7 +167,7 @@ const ConfirmationModal = ({
 
         {children && <div className='w-full'>{children}</div>}
 
-        <div className='w-full flex flex-row gap-2'>
+        <div className='w-full grid grid-cols-2 gap-3'>
           {secondaryButton && secondaryButton.text && (
             <Button
               {...secondaryButton}
@@ -179,7 +180,10 @@ const ConfirmationModal = ({
                   : isPrimaryButtonLoading
               }
               onClick={closeModalHandler}
-              className='grow'
+              className={cn(
+                'p-2 rounded-xl text-sm',
+                secondaryButton?.className
+              )}
             >
               {secondaryButton?.text ?? 'Tidak'}
             </Button>
@@ -200,7 +204,7 @@ const ConfirmationModal = ({
                   ? primaryButton?.isLoading
                   : isPrimaryButtonLoading
               }
-              className='grow'
+              className={cn('p-2 rounded-xl text-sm', primaryButton?.className)}
             >
               {primaryButton?.text ?? 'Ya'}
             </Button>