Add button cancel for modal page

ita-social-projects · Oct 4, 2023 · ad58f4d · ad58f4d
1 parent beac3af
commit ad58f4d
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 1 deletion.
diff --git a/FrontEnd/src/components/SignUp/pages/SignUpModalPage.js b/FrontEnd/src/components/SignUp/pages/SignUpModalPage.js
@@ -1,3 +1,4 @@
+import { Link } from "react-router-dom"
 import styles from "./SignUpModalPage.module.css";
 import DotDecorComponent from "../UI/dotDecor/DotDecor";
 
@@ -20,6 +21,13 @@ export function SignUpModalPage() {
                   </div>
                 </p>
             </div>
+            <div className={styles["modal__footer"]}>
+              <div className={styles["button-container"]}>
+                <Link className={styles["signup-page__button"]} to="/login">
+                  Закрити
+                </Link>
+              </div>
+            </div>
         </div>
         <DotDecorComponent position={"down-left"} />
       </div>

diff --git a/FrontEnd/src/components/SignUp/pages/SignUpModalPage.module.css b/FrontEnd/src/components/SignUp/pages/SignUpModalPage.module.css
@@ -14,7 +14,7 @@
 
 .container-modal {
   width: 610px;
-  height: 225px;
+  height: 290px;
   position: absolute;
   z-index: 2;
 }
@@ -71,3 +71,45 @@
   line-height: 20px;
   letter-spacing: -0.14px;
 }
+
+.button-container {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+}
+
+.signup-page__button {
+  display: flex;
+  padding: 5px 15px;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  border-radius: 4px;
+  border: 1px solid var(--primary-green-80, #1f9a7c);
+  background: var(--main-white, #fff);
+
+  /* drop-shadow/button-secondary */
+  box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.02);
+
+  color: var(--primary-green-80, #1f9a7c);
+  text-align: center;
+  font-feature-settings: "calt" off;
+
+  /* Text/Body/16-Semi bold */
+  font-family: Inter, sans-serif;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 20px;
+  /* 125% */
+  letter-spacing: -0.16px;
+  text-decoration: none;
+
+  cursor: pointer;
+}
+
+.signup-page__button:hover {
+  border: 1px solid var(--primary-green-80, #1f9a7c);
+  background: var(--primary-green-80, #1f9a7c);
+  color: var(--main-white, #fff);
+}