From 3e0acbf495b536e4220c3fb8a6d1e0ec638d35eb Mon Sep 17 00:00:00 2001
From: Blaster4385 <blaster4385@tablaster.dev>
Date: Wed, 15 May 2024 13:22:15 +0530
Subject: fix: fixed modal styling

- Also close modal when clicked outside
---
 client/public/assets/icons/ic_close.png      | Bin 534 -> 0 bytes
 client/src/components/Modal/Modal.jsx        |  23 +++++++++++++++++++----
 client/src/components/Modal/Modal.module.css |  15 +++++++++++----
 3 files changed, 30 insertions(+), 8 deletions(-)
 delete mode 100644 client/public/assets/icons/ic_close.png

diff --git a/client/public/assets/icons/ic_close.png b/client/public/assets/icons/ic_close.png
deleted file mode 100644
index 90d5759..0000000
Binary files a/client/public/assets/icons/ic_close.png and /dev/null differ
diff --git a/client/src/components/Modal/Modal.jsx b/client/src/components/Modal/Modal.jsx
index 54c816e..bf0540b 100644
--- a/client/src/components/Modal/Modal.jsx
+++ b/client/src/components/Modal/Modal.jsx
@@ -1,15 +1,31 @@
-import React from "react";
+import React, { useRef, useEffect } from "react";
 import styles from "./Modal.module.css";
 
 const Modal = ({ openModal, setOpenModal, onSuccessClick, onCancelClick }) => {
+  const modalRef = useRef(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (modalRef.current && !modalRef.current.contains(event.target)) {
+        setOpenModal(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [setOpenModal]);
+
   return (
     <div className={`${styles.background} ${openModal && styles.active}`}>
-      <div className={styles.container}>
+      <div ref={modalRef} className={styles.container}>
         <button
           className={styles.container__close}
           onClick={() => setOpenModal(false)}
         >
-          <img src="assets/icons/ic_close.png" className={styles.close__img} />
+          <span>&#10007;</span>
         </button>
         <p className={styles.container__title}>Encrypt content?</p>
         <div className={styles.container__actions}>
@@ -22,4 +38,3 @@ const Modal = ({ openModal, setOpenModal, onSuccessClick, onCancelClick }) => {
 };
 
 export default Modal;
-
diff --git a/client/src/components/Modal/Modal.module.css b/client/src/components/Modal/Modal.module.css
index 9d79c62..ea4978b 100644
--- a/client/src/components/Modal/Modal.module.css
+++ b/client/src/components/Modal/Modal.module.css
@@ -27,6 +27,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  color: var(--color-light);
 }
 
 .container__close {
@@ -34,10 +35,11 @@
   background: none;
   border: none;
   margin-left: auto;
-}
-
-.close__img {
-  width: 20px;
+  color: inherit;
+  font-size: 2rem;
+  &:hover {
+    transform: scale(0.9);
+  }
 }
 
 .container__actions {
@@ -54,8 +56,13 @@
   text-align: center;
   background-color: var(--color-yellow);
   color: var(--color-dark);
+  border: none;
   border-radius: 10px;
   font-size: 1rem;
   margin: 0 10px;
+
+  &:hover {
+    transform: scale(1.1);
+  }
 }
 
-- 
cgit v1.2.3-73-gaa49b