Added ui btn and fixed Modals

src/components/CandidateSidebar/CandidateSidebar.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 
 import { Achievement } from "../Achievement/Achievement";
-import ModalAspt from "../UI/ModalAspt/ModalAspt";
+import ModalAspirant from "../UI/ModalAspirant/ModalAspirant";
 
 import { urlForLocal } from "../../helper";
 import { LEVELS, SKILLS } from "../../constants/constants";
@@ -39,11 +39,11 @@ const CandidateSidebar = ({ candidate, setActiveSnippet, activeSnippet }) => {
 
   return (
     <div className="candidate-sidebar">
-      <ModalAspt
+      <ModalAspirant
         active={addAspt}
         setActive={setAddAspt}
         level={levelAspt}
-      ></ModalAspt>
+      ></ModalAspirant>
 
       <div className="candidate-sidebar__info">
         <div className="candidate-sidebar__position">

src/components/Common/Button/Button.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+import classes from "./button.module.scss";
+
+export const Button = ({ children, styles, ...props }) => {
+  return (
+    <button
+      className={styles ? `${styles} ${classes.button}` : classes.button}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default Button;

src/components/Common/Button/button.module.scss

@@ -0,0 +1,18 @@
+.button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #52b709;
+  border-radius: 44px;
+  color: white;
+  font-style: normal;
+  font-family: "LabGrotesque", sans-serif;
+  border: none;
+  transition: 0.5s;
+
+  &:hover {
+    transition: 0.5s;
+    background-color: #52b709a8;
+    text-decoration: none;
+  }
+}

src/components/SliderWorkers/SliderWorkers.jsx

@@ -2,6 +2,8 @@ import React, { useState } from "react";
 import Slider from "react-slick";
 import { Link } from "react-router-dom";
 
+import Button from "../Common/Button/Button";
+
 import mockWorker from "../../assets/images/mock/mokPerson.png";
 
 import "./sliderWorkers.scss";
@@ -65,9 +67,9 @@ export const SliderWorkers = ({ title, titleInfo, subTitle }) => {
                 <img src={worker.avatar}></img>
                 <div className="worker-description">
                   <p>{worker.skils}</p>
-                  <Link to={`/worker/${index}`} className="worker__resume">
+                  <Button styles="worker__resume">
-                    Подробное резюме
+                    <Link to={`/worker/${index}`}>Подробное резюме</Link>
-                  </Link>
+                  </Button>
                 </div>
               </div>
             );

src/components/SliderWorkers/sliderWorkers.scss

@@ -59,24 +59,16 @@
     }
 
     &__resume {
-      display: flex;
-      align-items: center;
-      justify-content: center;
       margin-top: 5px;
       width: 177px;
       height: 40px;
-      background: #52b709;
-      border-radius: 44px;
       font-size: 14px;
       line-height: 32px;
-      color: white;
-      border: none;
       transition: 0.5s;
 
-      &:hover {
+      a {
-        transition: 0.5s;
+        color: white;
-        background-color: #52b709a8;
+        width: 100%;
-        text-decoration: none;
       }
     }
   }

src/components/UI/FreeDevelopers/FreeDevelopers.jsx

@@ -1,12 +1,12 @@
 import React from "react";
+import { Link } from "react-router-dom";
 
 import AuthHeader from "../../AuthHeader/AuthHeader";
 import SideBar from "../../SideBar/SideBar";
 import { Footer } from "../../Footer/Footer";
-
-import { Link } from "react-router-dom";
 import { scrollToForm } from "../../../helper";
 import { ProfileBreadcrumbs } from "../../ProfileBreadcrumbs/ProfileBreadcrumbs";
+import Button from "../../Common/Button/Button";
 
 import mockWorker from "../../../assets/images/mock/mokPerson.png";
 import arrow from "../../../assets/icons/arrows/arrow_left.png";
@@ -42,9 +42,9 @@ export const FreeDevelopers = ({}) => {
               <div></div>
             </div>
           </div>
-          <button className="button-green" onClick={scrollToForm}>
+          <Button onClick={scrollToForm} styles={"dev-code"}>
             Код разработчика
-          </button>
+          </Button>
         </div>
 
         <div className="free-dev__body">
@@ -84,14 +84,13 @@ export const FreeDevelopers = ({}) => {
             </div>
           </div>
 
-          <div className="logIn">
+          <div className="login">
             <h3>Для просмотра полного резюме разработчика авторизуйтесь</h3>
-            <Link to={"/auth"} className="button-green">
+            <Button styles={"dev-code"}>
-              Войти
+              <Link to={"/auth"}>Войти</Link>
-            </Link>
+            </Button>
           </div>
         </div>
-
         <Footer />
       </div>
     </section>

src/components/UI/FreeDevelopers/freeDevelopers.scss

@@ -118,7 +118,7 @@
       }
     }
 
-    .logIn {
+    .login {
       position: absolute;
       bottom: 75px;
       border: 3px solid #52b709;
@@ -140,10 +140,8 @@
       }
 
       a {
-        width: 140px;
-        height: 50px;
         color: white;
-        text-decoration: none;
+        width: 100%;
       }
 
       @media (max-width: 920px) {
@@ -156,7 +154,7 @@
           text-align: center;
         }
 
-        a {
+        button {
           margin-top: 15px;
           height: 25px;
           height: 40px;
@@ -229,17 +227,9 @@
   }
 }
 
-.button-green {
+.dev-code {
-  align-items: center;
-  justify-content: center;
-  display: flex;
-  background: #52b709;
-  border-radius: 44px;
   width: 202px;
   height: 50px;
   font-weight: 500;
   font-size: 16px;
-  line-height: 32px;
-  color: #ffffff;
-  border: none;
 }

src/components/UI/ModalAspirant/ModalAspirant.jsx

@@ -0,0 +1,102 @@
+import React, { useState } from "react";
+
+import { Link } from "react-router-dom";
+import ModalLayout from "../ModalLayout/ModalLayout";
+
+import avatar from "../../../assets/images/mock/mokPerson.png";
+import logoTg from "../../../assets/icons/tgLogo.svg";
+import arrow from "../../../assets/icons/arrows/left-arrow.png";
+import interview from "../../../assets/images/logo/interviewLogo.svg";
+
+import "./modalAspirant.scss";
+
+export const ModalAspirant = ({ active, setActive, level }) => {
+  const [date, setDate] = useState("");
+  const [time, setTime] = useState("");
+  const [modalSend, setModalSend] = useState(false);
+
+  const send = () => {
+    if (date != "" && time != "") {
+      setModalSend(true);
+
+      setTimeout(() => {
+        setModalSend(false);
+        setActive(false);
+      }, 3200);
+    }
+  };
+
+  // TODO: Исправить стили тут, и заменить в модалках
+  return (
+    <ModalLayout
+      active={active}
+      setActive={setActive}
+      styles={"modal-aspt__content"}
+    >
+      <div className="aspt-decs">
+        <h1>Выбранный кандидат</h1>
+        <div className="aspt-decs__avatar">
+          <div className="aspt-decs__avatar_title">
+            <img src={avatar}></img>
+            <p>
+              {level.spec} {level.skils}, {level.level}{" "}
+            </p>
+          </div>
+          <div className="aspt-decs__avatar_back">
+            <Link to={"/profile/catalog"}>
+              <div>
+                <img src={arrow}></img>
+              </div>
+              <p>Вернуться к списку</p>
+            </Link>
+          </div>
+        </div>
+
+        <div className="aspt-decs__telega">
+          <h4>Есть вопросы?</h4>
+          <div className="aspt-decs__telega-logo">
+            <img src={logoTg}></img>
+            <p>Напишите нам в Телеграм. Мы с удовольствием ответим!</p>
+          </div>
+        </div>
+      </div>
+      <div className="form-interview">
+        <p>Дата собеседования</p>
+        <div className="input">
+          <input
+            type="date"
+            value={date}
+            onChange={(e) => setDate(e.target.value)}
+          ></input>
+        </div>
+
+        <p>Время собеседования</p>
+        <div className="input">
+          <input
+            type="time"
+            value={time}
+            onChange={(e) => setTime(e.target.value)}
+          ></input>
+        </div>
+
+        <button onClick={send}>Отправить</button>
+      </div>
+      <span className="exit" onClick={() => setActive(false)}></span>
+
+      <ModalLayout active={modalSend} setActive={setModalSend} styles={"send"}>
+        <div className="send">
+          <img src={interview}></img>
+          <h2>Спасибо, собеседование назначено</h2>
+          <p>
+            Дата: <span>{date}</span>
+          </p>
+          <p>
+            Время собеседования: <span>{time}</span>
+          </p>
+        </div>
+      </ModalLayout>
+    </ModalLayout>
+  );
+};
+
+export default ModalAspirant;

src/components/UI/ModalAspirant/modalAspirant.scss

@@ -164,32 +164,32 @@
       }
     }
   }
-
-  .send {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    h2 {
-      text-align: center;
-      margin: 25px 0 31px 0;
-    }
-
-    p {
-      font-size: 14px;
-      line-height: 17px;
-      font-weight: 700;
-      text-align: center;
-      color: #000000;
-      margin-bottom: 10px;
-
-      span {
-        color: #406128;
-      }
-    }
-  }
 }
 
 .modal-aspt.active {
   transform: scale(1);
 }
+
+.send {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  h2 {
+    text-align: center;
+    margin: 25px 0 31px 0;
+  }
+
+  p {
+    font-size: 14px;
+    line-height: 17px;
+    font-weight: 700;
+    text-align: center;
+    color: #000000;
+    margin-bottom: 10px;
+
+    span {
+      color: #406128;
+    }
+  }
+}

src/components/UI/ModalAspt/ModalAspt.jsx

@@ -1,102 +0,0 @@
-import React, { useState } from "react";
-
-import { Link } from "react-router-dom";
-import ModalLayout from "../ModalLayout/ModalLayout";
-
-import avatar from "../../../assets/images/mock/mokPerson.png";
-import logoTg from "../../../assets/icons/tgLogo.svg";
-import arrow from "../../../assets/icons/arrows/left-arrow.png";
-import interview from "../../../assets/images/logo/interviewLogo.svg";
-
-import "./modalAspt.scss";
-
-export const ModalAspt = ({ active, setActive, level }) => {
-  const [date, setDate] = useState("");
-  const [time, setTime] = useState("");
-  const [modalSend, setModalSend] = useState(false);
-
-  const send = () => {
-    if (date != "" && time != "") {
-      setModalSend(true);
-
-      setTimeout(() => {
-        setModalSend(false);
-        setActive(false);
-      }, 3200);
-    }
-  };
-
-  return (
-    <div
-      className={active ? "modal-aspt active" : "modal-aspt"}
-      onClick={() => setActive(false)}
-    >
-      <div className="modal-aspt__content" onClick={(e) => e.stopPropagation()}>
-        <div className="aspt-decs">
-          <h1>Выбранный кандидат</h1>
-          <div className="aspt-decs__avatar">
-            <div className="aspt-decs__avatar_title">
-              <img src={avatar}></img>
-              <p>
-                {level.spec} {level.skils}, {level.level}{" "}
-              </p>
-            </div>
-            <div className="aspt-decs__avatar_back">
-              <Link to={"/profile/catalog"}>
-                <div>
-                  <img src={arrow}></img>
-                </div>
-                <p>Вернуться к списку</p>
-              </Link>
-            </div>
-          </div>
-
-          <div className="aspt-decs__telega">
-            <h4>Есть вопросы?</h4>
-            <div className="aspt-decs__telega-logo">
-              <img src={logoTg}></img>
-              <p>Напишите нам в Телеграм. Мы с удовольствием ответим!</p>
-            </div>
-          </div>
-        </div>
-        <div className="form-interview">
-          <p>Дата собеседования</p>
-          <div className="input">
-            <input
-              type="date"
-              value={date}
-              onChange={(e) => setDate(e.target.value)}
-            ></input>
-          </div>
-
-          <p>Время собеседования</p>
-          <div className="input">
-            <input
-              type="time"
-              value={time}
-              onChange={(e) => setTime(e.target.value)}
-            ></input>
-          </div>
-
-          <button onClick={send}>Отправить</button>
-        </div>
-        <span className="exit" onClick={() => setActive(false)}></span>
-      </div>
-
-      <ModalLayout active={modalSend} setActive={setModalSend}>
-        <div className="send">
-          <img src={interview}></img>
-          <h2>Спасибо, собеседование назначено</h2>
-          <p>
-            Дата: <span>{date}</span>
-          </p>
-          <p>
-            Время собеседования: <span>{time}</span>
-          </p>
-        </div>
-      </ModalLayout>
-    </div>
-  );
-};
-
-export default ModalAspt;

src/components/UI/ModalLayout/ModalLayout.jsx

@@ -1,12 +1,19 @@
 import React from "react";
 
-export const ModalLayout = ({ active, setActive, children }) => {
+import "./modalLayout.scss";
+
+export const ModalLayout = ({ active, setActive, children, styles }) => {
   return (
     <div
-      className={active ? "modal-add active" : "modal-add"}
+      className={active ? `modal-layout active` : "modal-layout"}
       onClick={() => setActive(false)}
     >
-      <div className="modal-add__content" onClick={(e) => e.stopPropagation()}>
+      <div
+        className={
+          styles ? `modal-layout__content ${styles}` : "modal-layout__content"
+        }
+        onClick={(e) => e.stopPropagation()}
+      >
         {children}
       </div>
     </div>

src/components/UI/ModalLayout/modalLayout.scss

@@ -0,0 +1,29 @@
+.modal-layout {
+  z-index: 9;
+  height: 100%;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.11);
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: scale(0);
+
+  &__content {
+    position: relative;
+    background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%);
+    border-radius: 24px;
+
+    padding: 60px 60px 30px 60px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.modal-layout.active {
+  transform: scale(1);
+}

src/pages/PartnerRequests/PartnerRequests.jsx

@@ -5,6 +5,7 @@ import {
   setPartnerRequestId,
   setPartnerRequests,
 } from "../../redux/outstaffingSlice";
+import { apiRequest } from "../../api/request";
 
 import { Navigation } from "../../components/Navigation/Navigation";
 import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
@@ -12,8 +13,7 @@ import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileB
 import { SliderWorkers } from "../../components/SliderWorkers/SliderWorkers";
 import { Loader } from "../../components/Loader/Loader";
 import { Footer } from "../../components/Footer/Footer";
-
+import Button from "../../components/Common/Button/Button";
-import { apiRequest } from "../../api/request";
 
 import cursorImg from "../../assets/icons/cursorImg.svg";
 
@@ -82,10 +82,12 @@ export const PartnerRequests = () => {
                 Оператор компании заводит заявку и указывает необходимые
                 параметры — количество сотрудников, стек, уровень специалиста
               </p>
-              <Link to={"/profile/add-request"}>
+              <Button>
-                <span>+</span>
+                <Link to={"/profile/add-request"}>
-                Создать запрос
+                  <span>+</span>
-              </Link>
+                  Создать запрос
+                </Link>
+              </Button>
             </div>
           </div>
         )}
@@ -95,10 +97,12 @@ export const PartnerRequests = () => {
               <div className="partnerRequests__noItems__create__link">
                 <img src={cursorImg} alt="cursor" />
                 <p>У вас еще нет запросов на сотрудников</p>
-                <Link to={"/profile/add-request"}>
+                <Button>
-                  <span>+</span>
+                  <Link to={"/profile/add-request"}>
-                  Создать запрос
+                    <span>+</span>
-                </Link>
+                    Создать запрос
+                  </Link>
+                </Button>
               </div>
               <div className="partnerRequests__noItems__create__instruction">
                 <h3>Инструкция: подачи заявки</h3>

src/pages/PartnerRequests/partnerRequests.scss

@@ -161,21 +161,19 @@
         }
       }
 
-      a {
+      button {
-        background: #52b709;
         max-width: 188px;
-        border-radius: 44px;
         height: 52px;
-        border: none;
-        font-weight: 400;
         font-size: 15px;
-        line-height: 32px;
-        color: #ffffff;
-        display: flex;
-        justify-content: center;
-        align-items: center;
         transition: 0.3s all ease;
 
+        a {
+          color: #ffffff;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+
         span {
           color: white;
           font-weight: 700;
@@ -186,8 +184,6 @@
         &:hover {
           box-shadow: 6px 5px 20px rgb(87 98 80 / 21%);
           transform: scale(1.02);
-          text-decoration: none;
-          color: #ffffff;
         }
       }
     }
@@ -260,22 +256,23 @@
           }
         }
 
-        a {
+        button {
-          background: #52b709;
           max-width: 174px;
-          border-radius: 44px;
           width: 100%;
           height: 46px;
-          border: none;
           font-weight: 400;
           font-size: 15px;
           line-height: 32px;
-          color: #ffffff;
-          display: flex;
-          justify-content: center;
-          align-items: center;
           transition: 0.3s all ease;
 
+          a {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            color: white;
+            width: 100%;
+          }
+
           span {
             color: white;
             font-weight: 700;
@@ -286,8 +283,6 @@
           &:hover {
             box-shadow: 6px 5px 20px rgb(87 98 80 / 21%);
             transform: scale(1.02);
-            text-decoration: none;
-            color: #ffffff;
           }
         }
       }

src/pages/PartnerSettings/PartnerSettings.jsx

@@ -4,6 +4,7 @@ import { Footer } from "../../components/Footer/Footer";
 import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
 import { Navigation } from "../../components/Navigation/Navigation";
+import Button from "../../components/Common/Button/Button";
 
 import kontur from "../../assets/images/logo/konturLogo.png";
 import astral from "../../assets/images/logo/astralLogo.png";
@@ -39,8 +40,8 @@ export const PartnerSettings = () => {
               </div>
 
               <div className="settings__buttons">
-                <button className="settings__buttons-cancel">Отмена</button>
+                <Button styles={"settings__buttons-cancel"}>Отмена</Button>
-                <button className="settings__buttons-save">Сохранить</button>
+                <Button styles={"settings__buttons-save"}>Сохранить</Button>
               </div>
               <span className="settings__agreement">
                 Нажимая "Сохранить", вы соглашаетесь с Правилами обработки и
@@ -76,8 +77,8 @@ export const PartnerSettings = () => {
               </div>
 
               <div className="settings__buttons">
-                <button className="settings__buttons-cancel">Отмена</button>
+                <Button styles={"settings__buttons-cancel"}>Отмена</Button>
-                <button className="settings__buttons-save">Сохранить</button>
+                <Button styles={"settings__buttons-save"}>Сохранить</Button>
               </div>
               <span className="settings__agreement">
                 Нажимая "Сохранить", вы соглашаетесь с Правилами обработки и

src/pages/PartnerSettings/partnerSettings.scss

@@ -72,7 +72,6 @@
 
     &-cancel,
     &-save {
-      border-radius: 44px;
       width: 151px;
       height: 40px;
       font-size: 14px;
@@ -83,12 +82,10 @@
       color: #6f6f6f;
       background: white;
       border: 0.5px solid #8dc63f;
-    }
 
-    &-save {
+      &:hover {
-      color: #ffffff;
+        background-color: white;
-      background: #52b709;
+      }
-      border: none;
     }
   }