From 8ac5fd0ba953196da2a1555b74e5d410cf2b03f4 Mon Sep 17 00:00:00 2001
From: MuhammadKhalilzadeh <muhammadkhalilzadeh1998@gmail.com>
Date: Thu, 9 May 2024 11:12:14 +0330
Subject: [PATCH] popup modal with textfield is created

---
 .../dualButtonPopupModal.css                  |  4 +-
 .../DualButtonPopupModalWithTextfields.jsx    | 36 +++++++++++
 .../dualButtonPopupModalWithTextfields.css    | 60 +++++++++++++++++++
 .../PlayGround/PlayGround-Popup-Modals.jsx    |  6 +-
 4 files changed, 104 insertions(+), 2 deletions(-)
 create mode 100644 Client/src/components/PopupModals/DualButtonPopupModalWithTextfields/DualButtonPopupModalWithTextfields.jsx
 create mode 100644 Client/src/components/PopupModals/DualButtonPopupModalWithTextfields/dualButtonPopupModalWithTextfields.css

diff --git a/Client/src/components/PopupModals/DualButtonPopupModal/dualButtonPopupModal.css b/Client/src/components/PopupModals/DualButtonPopupModal/dualButtonPopupModal.css
index a5803a412..73d6e9e4a 100644
--- a/Client/src/components/PopupModals/DualButtonPopupModal/dualButtonPopupModal.css
+++ b/Client/src/components/PopupModals/DualButtonPopupModal/dualButtonPopupModal.css
@@ -9,6 +9,7 @@
 
 .dual-button-popup-modal-holder {
   width: 380px;
+  height: 130px;
   margin: 10px 20px;
   padding: 30px;
   box-shadow: 0px 8px 8px -4px rgba(16, 24, 40, 0.03),
@@ -46,7 +47,8 @@
   background-color: var(--color-0);
   border: 1px solid var(--color-1);
   border-radius: 4px;
-  margin: 5px 10px;
+  margin: 5px 0;
+  margin-left: 20px;
   color: white;
   font-family: var(--popup-font-family-0);
   cursor: pointer;
diff --git a/Client/src/components/PopupModals/DualButtonPopupModalWithTextfields/DualButtonPopupModalWithTextfields.jsx b/Client/src/components/PopupModals/DualButtonPopupModalWithTextfields/DualButtonPopupModalWithTextfields.jsx
new file mode 100644
index 000000000..950e592af
--- /dev/null
+++ b/Client/src/components/PopupModals/DualButtonPopupModalWithTextfields/DualButtonPopupModalWithTextfields.jsx
@@ -0,0 +1,36 @@
+import "./dualButtonPopupModalWithTextfields.css";
+import React from "react";
+import CloseIcon from "@mui/icons-material/Close";
+import { TextField } from "@mui/material";
+
+function DualButtonPopupModalWithTextfields() {
+  return (
+    <div className="popup-modal-holder">
+      <div className="popup-modal-header">
+        <div className="popup-modal-title">Create new organization</div>
+        <div className="popup-modal-close">
+          <CloseIcon style={{ fill: "#98A2B3" }} />
+        </div>
+      </div>
+      <div className="spacing-height"></div>
+      {PopupModalTextfield()}
+      <div className="spacing-height"></div>
+      <div className="spacing-height"></div>
+      <div className="popup-modal-controllers">
+        <button className="white-cancel-button">Cancel</button>
+        <button className="blue-save-button">Save</button>
+      </div>
+    </div>
+  );
+}
+
+export default DualButtonPopupModalWithTextfields;
+
+function PopupModalTextfield() {
+  return (
+    <div className="popup-modal-input">
+      <div className="popup-modal-input-title">Name</div>
+      <input type="text" className="popup-modal-text-field" />
+    </div>
+  );
+}
diff --git a/Client/src/components/PopupModals/DualButtonPopupModalWithTextfields/dualButtonPopupModalWithTextfields.css b/Client/src/components/PopupModals/DualButtonPopupModalWithTextfields/dualButtonPopupModalWithTextfields.css
new file mode 100644
index 000000000..af66589d2
--- /dev/null
+++ b/Client/src/components/PopupModals/DualButtonPopupModalWithTextfields/dualButtonPopupModalWithTextfields.css
@@ -0,0 +1,60 @@
+:root {
+  --popup-color-with-input-border-0: #f2f2f2;
+  --popup-color-with-input-border-1: #d0d5dd;
+  --popup-modal-with-input-title-color: #344054;
+}
+
+.popup-modal-holder {
+  width: 480px;
+  font-family: var(--popup-font-family-0);
+  padding: 50px 40px;
+  border-radius: 4px;
+  margin: 10px 20px;
+  border: 1px solid var(--popup-color-with-input-border-0);
+  box-shadow: 0px 8px 8px -4px rgba(16, 24, 40, 0.03),
+    0px 20px 24px -4px rgba(16, 24, 40, 0.08);
+}
+
+.popup-modal-header {
+  display: flex;
+  justify-content: space-between;
+  font-weight: bold;
+}
+
+.popup-modal-close {
+  cursor: pointer;
+}
+
+.spacing-height {
+  height: 30px;
+}
+
+.popup-modal-input-title {
+  margin-bottom: 20px;
+  color: var(--popup-modal-with-input-title-color);
+}
+
+.popup-modal-text-field {
+  width: 100%;
+  height: 35px;
+  border: 1px solid var(--popup-color-with-input-border-1);
+  border-radius: 4px;
+}
+
+.popup-modal-controllers {
+  display: flex;
+  justify-content: end;
+}
+
+.white-cancel-button {
+  border: none;
+  background-color: transparent;
+  font-family: var(--popup-font-family-0);
+  margin: 5px 10px;
+  width: 145px;
+  height: 35px;
+  padding: 5px 20px;
+  border: 1px solid var(--popup-color-with-input-border-1);
+  border-radius: 4px;
+  cursor: pointer;
+}
diff --git a/Client/src/screens/PlayGround/PlayGround-Popup-Modals.jsx b/Client/src/screens/PlayGround/PlayGround-Popup-Modals.jsx
index 843753704..2128dcae2 100644
--- a/Client/src/screens/PlayGround/PlayGround-Popup-Modals.jsx
+++ b/Client/src/screens/PlayGround/PlayGround-Popup-Modals.jsx
@@ -1,10 +1,14 @@
 import React from "react";
 import DualButtonPopupModal from "../../components/PopupModals/DualButtonPopupModal/DualButtonPopupModal";
+import DualButtonPopupModalWithTextfields from "../../components/PopupModals/DualButtonPopupModalWithTextfields/DualButtonPopupModalWithTextfields";
 
 function PlayGroundPopupModals() {
   return (
-    <div>
+    <div style={{ display: "flex" }}>
       <DualButtonPopupModal />
+      <br />
+      <br />
+      <DualButtonPopupModalWithTextfields />
     </div>
   );
 }