refactor: several small ui refactor for generalisation

frontend/src/modals/ConfirmationModal.tsx

@@ -0,0 +1,68 @@
+import Exit from '../assets/exit.svg';
+import { ActiveState } from '../models/misc';
+
+function ConfirmationModal({
+  message,
+  modalState,
+  setModalState,
+  submitLabel,
+  handleSubmit,
+  cancelLabel,
+  handleCancel,
+}: {
+  message: string;
+  modalState: ActiveState;
+  setModalState: (state: ActiveState) => void;
+  submitLabel: string;
+  handleSubmit: () => void;
+  cancelLabel?: string;
+  handleCancel?: () => void;
+}) {
+  return (
+    <article
+      className={`${
+        modalState === 'ACTIVE' ? 'visible' : 'hidden'
+      } fixed top-0 left-0 z-30  h-screen w-screen  bg-gray-alpha`}
+    >
+      <article className="mx-auto mt-[35vh] flex w-[90vw] max-w-lg  flex-col gap-4 rounded-2xl bg-white shadow-lg dark:bg-outer-space">
+        <div className="relative">
+          <button
+            className="absolute top-3 right-4 m-2 w-3"
+            onClick={() => {
+              setModalState('INACTIVE');
+              handleCancel && handleCancel();
+            }}
+          >
+            <img className="filter dark:invert" src={Exit} />
+          </button>
+          <div className="p-8">
+            <p className="font-base mb-1 w-[90%] text-lg text-jet dark:text-bright-gray">
+              {message}
+            </p>
+            <div>
+              <div className="mt-6 flex flex-row-reverse gap-1">
+                <button
+                  onClick={handleSubmit}
+                  className="rounded-3xl bg-purple-30 px-5 py-2 text-sm text-white transition-all hover:bg-[#6F3FD1]"
+                >
+                  {submitLabel}
+                </button>
+                <button
+                  onClick={() => {
+                    setModalState('INACTIVE');
+                    handleCancel && handleCancel();
+                  }}
+                  className="cursor-pointer rounded-3xl px-5 py-2 text-sm font-medium hover:bg-gray-100 dark:bg-transparent dark:text-light-gray dark:hover:bg-[#767183]/50"
+                >
+                  {cancelLabel ? cancelLabel : 'Cancel'}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </article>
+    </article>
+  );
+}
+
+export default ConfirmationModal;