refactor(FE-438): Refactor ConfirmationModal icon and update usages

src/components/modal/ConfirmationModal.tsx

@@ -31,6 +31,68 @@ export interface ConfirmationModalProps {
   iconPosition?: IconPosition;
 }
 
+const iconConfig = {
+  info: {
+    icon: 'material-symbols:info-outline-rounded',
+    iconClassName: 'text-info-content',
+    bgClassName: 'bg-info',
+    outerRingClassName: 'bg-info/20',
+    borderClassName: 'border-info',
+  },
+  success: {
+    icon: 'heroicons:check',
+    iconClassName: 'text-white',
+    bgClassName: 'bg-[#00D390]',
+    outerRingClassName: 'bg-[#00D3901F]',
+    borderClassName: 'border-[#CCF7EB]',
+  },
+  error: {
+    icon: 'solar:danger-triangle-linear',
+    iconClassName: 'text-error-content',
+    bgClassName: 'bg-[#f03338]',
+    outerRingClassName: 'bg-[#f3cdcd]',
+    borderClassName: 'border-[#fff0ef]',
+  },
+} as const;
+
+const ConfirmationModalIcon = ({
+  type,
+  size = 24,
+}: {
+  type: 'info' | 'success' | 'error';
+  size?: number;
+}) => {
+  const config = iconConfig[type];
+
+  return (
+    <div className='flex items-center justify-center p-2'>
+      <div
+        className={cn(
+          'rounded-full border-4 p-1',
+          config.outerRingClassName,
+          config.borderClassName
+        )}
+      >
+        <div className={cn('rounded-full p-1', config.outerRingClassName)}>
+          <div
+            className={cn(
+              'rounded-full p-3 flex items-center justify-center',
+              config.bgClassName
+            )}
+          >
+            <Icon
+              icon={config.icon}
+              width={size}
+              height={size}
+              className={config.iconClassName}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
 const ConfirmationModal = ({
   ref,
   type = 'info',
@@ -41,7 +103,7 @@ const ConfirmationModal = ({
   secondaryButton,
   className,
   children,
-  iconSize = 64,
+  iconSize = 32,
   iconPosition = 'center',
 }: ConfirmationModalProps) => {
   const [isPrimaryButtonLoading, setIsPrimaryButtonLoading] = useState(false);
@@ -65,42 +127,8 @@ const ConfirmationModal = ({
       <div className='w-full flex flex-col gap-4'>
         {iconPosition === 'center' ? (
           <>
-            <div
+            <div className='w-fit mx-auto'>
-              className={cn(
+              <ConfirmationModalIcon type={type} size={iconSize} />
-                'w-fit p-4 mx-auto flex flex-row justify-center items-center rounded-full',
-                {
-                  'bg-error': type === 'error',
-                  'bg-info': type === 'info',
-                  'bg-success': type === 'success',
-                }
-              )}
-            >
-              {type === 'info' && (
-                <Icon
-                  icon='material-symbols:info-outline-rounded'
-                  width={iconSize}
-                  height={iconSize}
-                  className='text-info-content'
-                />
-              )}
-
-              {type === 'success' && (
-                <Icon
-                  icon='qlementine-icons:success-12'
-                  width={iconSize}
-                  height={iconSize}
-                  className='text-success-content'
-                />
-              )}
-
-              {type === 'error' && (
-                <Icon
-                  icon='solar:danger-triangle-linear'
-                  width={iconSize}
-                  height={iconSize}
-                  className='text-error-content'
-                />
-              )}
             </div>
 
             <p className='text-center font-medium'>
@@ -120,42 +148,8 @@ const ConfirmationModal = ({
               'flex-row-reverse': iconPosition === 'right',
             })}
           >
-            <div
+            <div className='w-fit'>
-              className={cn(
+              <ConfirmationModalIcon type={type} size={iconSize} />
-                'w-fit p-4 flex flex-row justify-center items-center rounded-full',
-                {
-                  'bg-error': type === 'error',
-                  'bg-info': type === 'info',
-                  'bg-success': type === 'success',
-                }
-              )}
-            >
-              {type === 'info' && (
-                <Icon
-                  icon='material-symbols:info-outline-rounded'
-                  width={iconSize}
-                  height={iconSize}
-                  className='text-info-content'
-                />
-              )}
-
-              {type === 'success' && (
-                <Icon
-                  icon='qlementine-icons:success-12'
-                  width={iconSize}
-                  height={iconSize}
-                  className='text-success-content'
-                />
-              )}
-
-              {type === 'error' && (
-                <Icon
-                  icon='solar:danger-triangle-linear'
-                  width={iconSize}
-                  height={iconSize}
-                  className='text-error-content'
-                />
-              )}
             </div>
 
             <div className='flex flex-col gap-1'>
@@ -176,7 +170,7 @@ const ConfirmationModal = ({
           {secondaryButton && secondaryButton.text && (
             <Button
               {...secondaryButton}
-              variant='ghost'
+              variant='outline'
               color={secondaryButton?.color}
               isLoading={secondaryButton?.isLoading}
               disabled={

src/components/pages/uniformity/UniformityTable.tsx

@@ -467,7 +467,6 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
           ref={successModal.ref}
           type='success'
           iconPosition='left'
-          iconSize={32}
           text='Data Berhasil Ditambahkan'
           subtitleText='Data uniformity telah berhasil disimpan.'
           closeOnBackdrop={false}
@@ -539,7 +538,6 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
           ref={singleDeleteModal.ref}
           type='error'
           iconPosition='left'
-          iconSize={32}
           text={`Delete This Data?`}
           subtitleText='Are you sure you want to delete this data?'
           secondaryButton={{
@@ -547,7 +545,7 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
           }}
           primaryButton={{
             text: 'Ya',
-            color: 'error',
+            color: 'primary',
             isLoading: isDeleteLoading,
             onClick: singleDeleteHandler,
           }}
@@ -614,7 +612,6 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
           ref={bulkDeleteModal.ref}
           type='error'
           iconPosition='left'
-          iconSize={32}
           text={`Delete This Data?`}
           subtitleText={`Are you sure you want to delete this data? (${selectedRowIds.length} data)`}
           secondaryButton={{
@@ -622,7 +619,7 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
           }}
           primaryButton={{
             text: 'Ya',
-            color: 'error',
+            color: 'primary',
             isLoading: isBulkActionLoading,
             onClick: bulkDeleteHandler,
           }}
@@ -689,7 +686,6 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
           ref={singleApproveModal.ref}
           type='success'
           iconPosition='left'
-          iconSize={32}
           text='Approve This Submission?'
           subtitleText='Are you sure you want to approve this submission?'
           secondaryButton={{
@@ -697,7 +693,7 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
           }}
           primaryButton={{
             text: 'Ya',
-            color: 'success',
+            color: 'primary',
             isLoading: isDeleteLoading,
             onClick: singleApproveHandler,
           }}
@@ -766,7 +762,6 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
           ref={bulkApproveModal.ref}
           type='success'
           iconPosition='left'
-          iconSize={32}
           text={`Approve This Submission?`}
           subtitleText={`Are you sure you want to approve this submission? (${selectedRowIds.length} data)`}
           secondaryButton={{
@@ -774,7 +769,7 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
           }}
           primaryButton={{
             text: 'Ya',
-            color: 'success',
+            color: 'primary',
             isLoading: isBulkActionLoading,
             onClick: bulkApproveHandler,
           }}
@@ -814,7 +809,6 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
           ref={singleRejectModal.ref}
           type='error'
           iconPosition='left'
-          iconSize={32}
           text='Reject This Submission?'
           subtitleText='Are you sure you want to reject this submission?'
           secondaryButton={{
@@ -822,7 +816,7 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
           }}
           primaryButton={{
             text: 'Ya',
-            color: 'error',
+            color: 'primary',
             isLoading: isDeleteLoading,
             onClick: singleRejectHandler,
           }}
@@ -891,7 +885,6 @@ const UniformityTable = ({ refresh }: { refresh?: () => void }) => {
           ref={bulkRejectModal.ref}
           type='error'
           iconPosition='left'
-          iconSize={32}
           text={`Apakah anda yakin ingin menolak ${selectedRowIds.length} data Uniformity yang dipilih?`}
           secondaryButton={{
             text: 'Tidak',