Improve the look of modals

indico · Jul 23, 2024 · af960f5 · af960f5
1 parent af9fda1
commit af960f5
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 46 deletions.
diff --git a/src/Components/Tailwind/Button.tsx b/src/Components/Tailwind/Button.tsx
@@ -32,8 +32,8 @@ const Button = ({children, variant, className, onClick}: ButtonProps) => {
 export default Button;
 
 const defaultDangerBtnClassName: ComponentProps<'div'>['className'] = `
-  flex gap-2 text-white bg-red-700 font-medium rounded-lg text-sm px-4 h-fit py-3 justify-self-center
-  active:bg-red-800 dark:bg-red-600 dark:active:bg-red-700`;
+  flex gap-2 justify-center text-white bg-red-500 font-medium rounded-lg text-sm px-4 h-fit py-3 justify-self-center
+  active:bg-red-600 dark:bg-red-700 dark:active:bg-red-800`;
 
 export const DangerButton = ({children, className, onClick}: ButtonProps) => {
   const fullClassname = defaultDangerBtnClassName + ' ' + (className || '');
@@ -63,8 +63,8 @@ export const SimpleButton = ({children, className, onClick}: ButtonProps) => {
 const defaultOultineBtnClassName: ComponentProps<'div'>['className'] = `
   py-3 px-3 text-sm font-medium text-gray-900 bg-white rounded-lg
   border border-gray-200 active:bg-gray-100 active:text-blue-700
-  dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600
-  dark:active:text-white dark:active:bg-gray-700`;
+  dark:bg-gray-800 dark:text-gray-100 dark:border-gray-500
+  dark:active:text-blue-300 dark:active:bg-gray-700`;
 
 export const OutlineButton = ({children, className, onClick}: ButtonProps) => {
   const fullClassname = `${defaultOultineBtnClassName} ${className}`;

diff --git a/src/Components/Tailwind/Modal/Modal.tsx b/src/Components/Tailwind/Modal/Modal.tsx
@@ -1,8 +1,9 @@
 import {createPortal} from 'react-dom';
 import {ExclamationCircleIcon} from '@heroicons/react/24/outline';
+import {TrashIcon} from '@heroicons/react/24/outline';
 import {ConfirmModalData, ErrorModalData} from '../../../context/ModalContextProvider';
 import {useModalData} from '../../../hooks/useModal';
-import Button, {DangerButton, OutlineButton} from '../Button';
+import {DangerButton, OutlineButton} from '../Button';
 import Typography from '../Typography';
 
 export default function Modal() {
@@ -18,11 +19,7 @@ export default function Modal() {
       className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-70"
       onClick={closeModal}
     >
-      <div
-        className="relative mx-4 flex w-full flex-col rounded rounded-lg
-                   bg-white px-4 pb-4 pt-10 shadow-2xl dark:bg-gray-800"
-        onClick={e => e.stopPropagation()}
-      >
+      <div onClick={e => e.stopPropagation()}>
         {type === 'error' && (
           <ErrorModal {...(rest as Omit<ErrorModalData, 'type'>)} closeModal={closeModal} />
         )}
@@ -41,25 +38,29 @@ interface ErrorModalProps extends Omit<ErrorModalData, 'type'> {
 
 const ErrorModal = ({title, content, closeBtnText, closeModal}: ErrorModalProps) => {
   return (
-    <>
-      <div className="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 rounded-full bg-dangerDark">
+    <div className="relative mx-4 flex flex-col shadow-2xl">
+      <div className="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 rounded-full bg-red-500 dark:bg-dangerDark">
         <ExclamationCircleIcon className="w-12 min-w-[3rem] p-1 text-white" />
       </div>
-      <Typography variant="h3" className="text-center">
-        {title}
-      </Typography>
-      <Typography variant="body1" className="mt-4 text-center">
-        {content}
-      </Typography>
-      <div className="flex justify-center pt-8">
-        <Button
-          className="min-w-[5rem] justify-center font-bold shadow-lg outline-none"
-          onClick={closeModal}
-        >
-          {closeBtnText}
-        </Button>
+      <div
+        className={`flex flex-col gap-6 overflow-hidden rounded rounded-md border-t-[6px] border-t-red-500
+                    bg-white pt-10 dark:border-t-red-700 dark:bg-gray-800`}
+      >
+        <div className="flex flex-col gap-2 px-4">
+          <Typography variant="h3" className="text-center">
+            {title}
+          </Typography>
+          <Typography variant="body1" className="mt-4 text-center">
+            {content}
+          </Typography>
+        </div>
+        <div className="flex justify-end gap-3 bg-gray-100 px-4 pb-4 pt-4 dark:bg-gray-700">
+          <OutlineButton className="min-w-[5rem]" onClick={closeModal}>
+            {closeBtnText}
+          </OutlineButton>
+        </div>
       </div>
-    </>
+    </div>
   );
 };
 
@@ -76,27 +77,37 @@ const ConfirmModal = ({
   onConfirm,
 }: ConfirmModalProps) => {
   return (
-    <>
-      <div className="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 rounded-full bg-dangerDark">
-        <ExclamationCircleIcon className="w-12 min-w-[3rem] p-1 text-white" />
+    <div className="relative mx-4 flex flex-col shadow-2xl">
+      <div className="absolute left-1/2 top-0 -translate-x-1/2 -translate-y-1/2 rounded-full bg-red-500 dark:bg-dangerDark">
+        <TrashIcon className="w-12 min-w-[2rem] p-2 text-white" />
       </div>
-      <Typography variant="h3" className="text-center">
-        {title}
-      </Typography>
-      <Typography variant="body1" className="mt-4 text-center">
-        {content}
-      </Typography>
-      <div className="flex justify-end gap-2 pt-8">
-        <OutlineButton onClick={closeModal}>{closeBtnText}</OutlineButton>
-        <DangerButton
-          onClick={() => {
-            closeModal();
-            onConfirm();
-          }}
-        >
-          {confirmBtnText}
-        </DangerButton>
+      <div
+        className={`flex flex-col gap-6 overflow-hidden rounded rounded-md border-t-[6px] border-t-red-500
+                    bg-white pt-10 dark:border-t-red-700 dark:bg-gray-800`}
+      >
+        <div className="flex flex-col gap-2 px-4">
+          <Typography variant="h3" className="text-center">
+            {title}
+          </Typography>
+          <Typography variant="body1" className="mt-4 text-center">
+            {content}
+          </Typography>
+        </div>
+        <div className="flex justify-end gap-3 bg-gray-100 px-4 pb-4 pt-4 dark:bg-gray-700">
+          <OutlineButton className="min-w-[5rem]" onClick={closeModal}>
+            {closeBtnText}
+          </OutlineButton>
+          <DangerButton
+            className="min-w-[5rem]"
+            onClick={() => {
+              closeModal();
+              onConfirm();
+            }}
+          >
+            {confirmBtnText}
+          </DangerButton>
+        </div>
       </div>
-    </>
+    </div>
   );
 };