From eb2fcee589023c601550cf705a26c5f0d89270bc Mon Sep 17 00:00:00 2001
From: MuhammadKhalilzadeh <muhammadkhalilzadeh1998@gmail.com>
Date: Thu, 9 May 2024 10:14:26 +0330
Subject: [PATCH] dual button popup modal is created

---
 Client/src/App.jsx                            |  6 +-
 .../DualButtonPopupModal.jsx                  | 20 +++++++
 .../dualButtonPopupModal.css                  | 60 +++++++++++++++++++
 .../PlayGround/PlayGround-Popup-Modals.jsx    | 12 ++++
 4 files changed, 97 insertions(+), 1 deletion(-)
 create mode 100644 Client/src/components/PopupModals/DualButtonPopupModal/DualButtonPopupModal.jsx
 create mode 100644 Client/src/components/PopupModals/DualButtonPopupModal/dualButtonPopupModal.css
 create mode 100644 Client/src/screens/PlayGround/PlayGround-Popup-Modals.jsx

diff --git a/Client/src/App.jsx b/Client/src/App.jsx
index 519f2fc59..3e3a46702 100644
--- a/Client/src/App.jsx
+++ b/Client/src/App.jsx
@@ -1,7 +1,11 @@
+import PlayGroundPopupModals from "./screens/PlayGround/PlayGround-Popup-Modals";
+
 function App() {
   return (
     <>
-      <div></div>
+      <div>
+        <PlayGroundPopupModals />
+      </div>
     </>
   );
 }
diff --git a/Client/src/components/PopupModals/DualButtonPopupModal/DualButtonPopupModal.jsx b/Client/src/components/PopupModals/DualButtonPopupModal/DualButtonPopupModal.jsx
new file mode 100644
index 000000000..f1585a9cb
--- /dev/null
+++ b/Client/src/components/PopupModals/DualButtonPopupModal/DualButtonPopupModal.jsx
@@ -0,0 +1,20 @@
+import "./dualButtonPopupModal.css";
+import React from "react";
+
+function DualButtonPopupModal({ open = true }) {
+  return (
+    <div className="dual-button-popup-modal-holder">
+      <div className="dual-button-popup-modal-subject">Unsaved changes</div>
+      <div className="dual-button-popup-modal-description">
+        Do you want to save or discard changes?
+      </div>
+      <div className="dual-modal-spacing"></div>
+      <div className="dual-button-popup-modal-controllers">
+        <button className="transparent-discard-button">Discard</button>
+        <button className="blue-save-button">Save changes</button>
+      </div>
+    </div>
+  );
+}
+
+export default DualButtonPopupModal;
diff --git a/Client/src/components/PopupModals/DualButtonPopupModal/dualButtonPopupModal.css b/Client/src/components/PopupModals/DualButtonPopupModal/dualButtonPopupModal.css
new file mode 100644
index 000000000..a5803a412
--- /dev/null
+++ b/Client/src/components/PopupModals/DualButtonPopupModal/dualButtonPopupModal.css
@@ -0,0 +1,60 @@
+:root {
+  --popup-color-border-0: #f2f2f2;
+  --popup-font-family-0: "Roboto", "Helvetica", "Arial", sans-serif;
+  --popup-color-0: #101828;
+  --popup-color-1: #475467;
+  --color-0: #1570ef;
+  --color-1: #175cd3;
+}
+
+.dual-button-popup-modal-holder {
+  width: 380px;
+  margin: 10px 20px;
+  padding: 30px;
+  box-shadow: 0px 8px 8px -4px rgba(16, 24, 40, 0.03),
+    0px 20px 24px -4px rgba(16, 24, 40, 0.08);
+  border: 1px solid var(--popup-color-border-0);
+  border-radius: 4px;
+}
+
+.dual-button-popup-modal-subject {
+  font-family: var(--popup-font-family-0);
+  color: var(--popup-color-0);
+  font-weight: 900;
+}
+
+.dual-button-popup-modal-description {
+  font-family: var(--popup-font-family-0);
+  color: var(--popup-color-1);
+  font-size: 13px;
+  margin-top: 10px;
+}
+
+.dual-modal-spacing {
+  height: 40px;
+}
+
+.dual-button-popup-modal-controllers {
+  display: flex;
+  justify-content: end;
+}
+
+.blue-save-button {
+  width: 145px;
+  height: 35px;
+  padding: 5px 20px;
+  background-color: var(--color-0);
+  border: 1px solid var(--color-1);
+  border-radius: 4px;
+  margin: 5px 10px;
+  color: white;
+  font-family: var(--popup-font-family-0);
+  cursor: pointer;
+}
+
+.transparent-discard-button {
+  border: none;
+  background-color: transparent;
+  font-family: var(--popup-font-family-0);
+  margin: 5px 10px;
+}
diff --git a/Client/src/screens/PlayGround/PlayGround-Popup-Modals.jsx b/Client/src/screens/PlayGround/PlayGround-Popup-Modals.jsx
new file mode 100644
index 000000000..843753704
--- /dev/null
+++ b/Client/src/screens/PlayGround/PlayGround-Popup-Modals.jsx
@@ -0,0 +1,12 @@
+import React from "react";
+import DualButtonPopupModal from "../../components/PopupModals/DualButtonPopupModal/DualButtonPopupModal";
+
+function PlayGroundPopupModals() {
+  return (
+    <div>
+      <DualButtonPopupModal />
+    </div>
+  );
+}
+
+export default PlayGroundPopupModals;