Merge remote-tracking branch 'origin/parthners-area-fix-modal' into parthners-area

# Conflicts:
#	src/pages/PartnerSettings/PartnerSettings.js

src/components/AuthBox/AuthBox.js

@@ -3,24 +3,20 @@ import { Link, useNavigate } from "react-router-dom";
 import { useDispatch, useSelector } from "react-redux";
 
 import { Loader } from "../Loader/Loader";
-import ErrorBoundary from "../../hoc/ErrorBoundary";
 
 import { auth, selectAuth, setUserInfo } from "../../redux/outstaffingSlice";
 import { loading } from "../../redux/loaderSlice";
 import { setRole } from "../../redux/roleSlice";
 import { selectIsLoading } from "../../redux/loaderSlice";
 
+import ModalErrorLogin from "../../components/UI/ModalErrorLogin/ModalErrorLogin";
+
 import { apiRequest } from "../../api/request";
 
 import ellipse from "../../images/ellipse.png";
 
 import "./authBox.scss";
 
-import Swal from "sweetalert2";
-import withReactContent from "sweetalert2-react-content";
-
-const SweetAlert = withReactContent(Swal);
-
 export const AuthBox = ({ title }) => {
   const dispatch = useDispatch();
   const ref = useRef();
@@ -30,15 +26,7 @@ export const AuthBox = ({ title }) => {
   const isLoading = useSelector(selectIsLoading);
 
   const [error, setError] = useState(null);
-
-  const handleModalError = (error) => {
-    SweetAlert.fire({
-      title: "Ошибка",
-      text: error,
-    });
-
-    setError(null);
-  };
+  const [modalError, setModalError] = useState(false);
 
   useEffect(() => {
     if (!localStorage.getItem("auth_token")) {
@@ -62,6 +50,7 @@ export const AuthBox = ({ title }) => {
       }).then((res) => {
         if (!res.access_token) {
           setError("Некорректные данные для входа");
+          setModalError(true);
           dispatch(loading(false));
         } else {
           localStorage.setItem("auth_token", res.access_token);
@@ -104,15 +93,11 @@ export const AuthBox = ({ title }) => {
 
         {error && (
           <div className="auth-box__form-error">
-            <ErrorBoundary>
-              {handleModalError(error)}
-              {/*<SweetAlert*/}
-              {/*    show={!!error}*/}
-              {/*    title='Ошибка'*/}
-              {/*    text={error}*/}
-              {/*    onConfirm={() => setError(null)}*/}
-              {/*/>*/}
-            </ErrorBoundary>
+            <ModalErrorLogin
+              active={modalError}
+              setActive={setModalError}
+              title={error}
+            />
           </div>
         )}
 
@@ -130,7 +115,9 @@ export const AuthBox = ({ title }) => {
           {/* TODO: при клике отправлять на форму/модалку/страницу регистрации */}
           <button
             className="auth-box__form-btn--role auth-box__auth-link"
-            onClick={(e) => e.preventDefault()}
+            onClick={(e) => {
+              e.preventDefault();
+            }}
           >
             Регистрация
           </button>

src/components/AuthBox/authBox.scss

@@ -150,11 +150,11 @@
         width: 268px;
         height: 75px;
         border-radius: 38px;
-        background-color: #ffffff;
+        background-color: #f5f5f5;
         border: 2px solid #6aaf5c;
         font-family: "Muller";
         font-size: 2em;
-        font-weight: 300;
+        font-weight: 400;
         letter-spacing: normal;
         line-height: 71.88px;
         text-align: center;

src/components/AuthHeader/AuthHeader.js

@@ -8,7 +8,9 @@ export const AuthHeader = ({}) => {
   return (
     <div className="auth-header">
       <div className="auth-header__logo">
-        <h3>itguild.</h3>
+        <h3>
+          itguild.<span>аутстафинг ИТ специалистов</span>
+        </h3>
       </div>
       <div className="auth-header__navigation">
         <div className="container">

src/components/AuthHeader/authHeader.scss

@@ -12,6 +12,9 @@
       line-height: 32px;
       color: #000000;
     }
+    span {
+      color: #52b709;
+    }
   }
 
   &__navigation {

src/components/SideBar/sidebar.scss

@@ -1,6 +1,6 @@
 .auth-menu {
   z-index: 99;
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
   width: 141px;

src/components/SliderWorkers/sliderWorkers.scss

@@ -46,14 +46,16 @@
     margin-left: 15px;
 
     img {
-      margin-right: 33px;
+      margin-right: 20px;
+      width: 100px;
+      height: 100px;
     }
 
     p {
       font-size: 15px;
       line-height: 22px;
       color: black;
-      width: 198px;
+      width: 160px;
     }
 
     &__resume {
@@ -66,40 +68,54 @@
       line-height: 32px;
       color: white;
       border: none;
+      transition: 0.5s;
+
+      &:hover {
+        transition: 0.5s;
+        background-color: #52b709a8;
+      }
     }
   }
 
   .slick-next {
+    display: flex !important;
+    align-items: center;
+    justify-content: center;
     background-color: #8dc63f;
     width: 44px;
     height: 44px;
     border-radius: 44px;
 
     &:before {
-      content: ">";
-      color: white;
-      font-size: 23px;
+      content: url("../../images/arrowViewReport.svg");
+    }
+
+    &:focus {
+      background-color: #8dc63f;
     }
 
-    &:focus,
     &:hover {
       background-color: #8ec63f91;
     }
   }
 
   .slick-prev {
+    display: flex !important;
+    align-items: center;
+    justify-content: center;
     background-color: #8dc63f;
     width: 44px;
     height: 44px;
     border-radius: 44px;
 
     &:before {
-      content: "<";
-      color: white;
-      font-size: 23px;
+      content: url("../../images/ArrovLeftSlider.png");
+    }
+
+    &:focus {
+      background-color: #8dc63f;
     }
 
-    &:focus,
     &:hover {
       background-color: #8ec63f91;
     }
@@ -128,7 +144,6 @@
 
       img {
         margin: 0;
-        width: 50%;
       }
 
       p {
@@ -136,7 +151,7 @@
         text-align: center;
       }
 
-      .worker-description {
+      &-description {
         display: flex;
         flex-direction: column;
         align-items: center;

src/components/UI/ModalCreate/ModalCreate.js

@@ -0,0 +1,48 @@
+import React, { useState } from "react";
+import { useDispatch } from "react-redux";
+import {  setProject } from "../../../redux/projectsTrackerSlice";
+
+import "./ModalCreate.scss";
+
+export const ModalCreate = ({ active, setActive, title }) => {
+  const [inputValue, setInputValue] = useState("");
+  const dispatch = useDispatch();
+
+  function createName() {
+    let newItem = {
+      name: inputValue,
+      count: 0,
+    };
+    dispatch(setProject(newItem));
+    setActive(false);
+    setInputValue("")
+  }
+
+  return (
+    <div
+      className={active ? "modal-project active" : "modal-project"}
+      onClick={() => setActive(false)}
+    >
+      <div
+        className="modal-project__content"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="title-project">
+          <h4>{title}</h4>
+          <div className="input-container">
+            <input
+              className="name-project"
+              value={inputValue}
+              onChange={(e) => setInputValue(e.target.value)}
+            ></input>
+          </div>
+        </div>
+        <button className="create-project" onClick={createName}>
+          Создать
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default ModalCreate;

src/components/UI/ModalCreate/ModalCreate.scss

@@ -0,0 +1,71 @@
+.modal-project {
+  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 {
+    padding: 15px;
+    background: #ffffff;
+    border: 1px solid #dde2e4;
+    border-radius: 8px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .title-project {
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+
+      .input-container {
+        width: 220px;
+        height: 25px;
+        border-radius: 44px;
+        border: 1px solid #d1d1d1;
+      }
+
+      h4 {
+        color: #111112;
+        margin-bottom: 10px;
+        font-size: 14px !important;
+      }
+    }
+
+    .name-project {
+      margin-left: 10px;
+      border: none;
+      outline: none;
+      height: 100%;
+      width: 90%;
+      font-size: 14px;
+    }
+
+    .create-project {
+      margin: 15px 0 0 0;
+      width: 188px;
+      height: 40px;
+      background: #52b709;
+      border-radius: 44px;
+      border: none;
+      font-weight: 400;
+      font-size: 15px;
+      line-height: 32px;
+      color: #ffffff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
+
+.modal-project.active {
+  transform: scale(1);
+}

src/components/UI/ModalErrorLogin/ModalErrorLogin.js

@@ -2,7 +2,7 @@ import React from "react";
 
 import "./modalErrorLogin.scss";
 
-export const ModalErrorLogin = ({ active, setActive }) => {
+export const ModalErrorLogin = ({ active, setActive, title }) => {
   return (
     <div
       className={active ? "modal-error active" : "modal-error"}
@@ -13,8 +13,14 @@ export const ModalErrorLogin = ({ active, setActive }) => {
         onClick={(e) => e.stopPropagation()}
       >
         <h2>Ошибка входа</h2>
-        <p>Введены некоректные данные для входа</p>
-        <button className="modal-error__content-button">
+        <p>{title}</p>
+        <button
+          className="modal-error__content-button"
+          onClick={(e) => {
+            e.preventDefault();
+            setActive(false);
+          }}
+        >
           Попробовать еще раз
         </button>
         <span onClick={() => setActive(false)}></span>

src/components/UI/ModalProject/ModalProject.js

@@ -1,27 +0,0 @@
-import React from "react";
-
-import "./ModalProject.scss";
-
-export const ModalProject = ({ active, setActive }) => {
-  return (
-    <div
-      className={active ? "modal-project active" : "modal-project"}
-      onClick={() => setActive(false)}
-    >
-      <div
-        className="modal-project__content"
-        onClick={(e) => e.stopPropagation()}
-      >
-        <div className="title-project">
-          <h4>Укажите название проекта: </h4>
-          <div className="input-container">
-            <input className="name-project"></input>
-          </div>
-        </div>
-        <button className="create-project">Создать</button>
-      </div>
-    </div>
-  );
-};
-
-export default ModalProject;

src/components/UI/ModalProject/ModalProject.scss

@@ -1,57 +0,0 @@
-.modal-project {
-  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);
-}
-
-.modal-project.active {
-  transform: scale(1);
-}
-
-.modal-project__content {
-  padding: 15px;
-  background: #ffffff;
-  border: 1px solid #dde2e4;
-  border-radius: 8px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  .title-project {
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-
-    .input-container {
-      width: 220px;
-      height: 25px;
-      border-radius: 44px;
-      border: 1px solid #d1d1d1;
-    }
-
-    h4 {
-      margin-bottom: 10px;
-    }
-  }
-
-  .name-project {
-    margin-left: 10px;
-    border: none;
-    outline: none;
-    height: 100%;
-    width: 90%;
-    font-size: 14px;
-  }
-
-  .create-project {
-    margin: 15px 0 0 0;
-  }
-}

src/components/UI/ModalTiket/ModalTiket.js

@@ -40,14 +40,6 @@ export const ModalTiket = ({ active, setActive }) => {
         className="modal-tiket__content"
         onClick={(e) => e.stopPropagation()}
       >
-        <div className="author">
-          <a href="#">
-            <img src={creatorMock}></img>
-          </a>
-          <a href="#">
-            <img src={creatorMock}></img>
-          </a>
-        </div>
         <div className="content">
           <h3 className="title-project">
             <img src={category} className="title-project__category"></img>
@@ -75,6 +67,7 @@ export const ModalTiket = ({ active, setActive }) => {
           </div>
         </div>
         <div className="workers">
+          <span className="exit" onClick={() => setActive(false)}></span>
           <span>{tiket.code}</span>
           <p className="workers__creator">Создатель : {tiket.creator}</p>
           <div>

src/components/UI/ModalTiket/ModalTiket.scss

@@ -23,20 +23,6 @@
   display: flex;
   flex-direction: row;
 
-  .author {
-    padding: 25px 0 0 0;
-    border-radius: 8px 0 0 8px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: 76px;
-    background: #fbfbfb;
-
-    a {
-      margin-bottom: 16px;
-    }
-  }
-
   .content {
     display: flex;
     flex-direction: column;
@@ -109,10 +95,34 @@
   }
 
   .workers {
+    position: relative;
     border-left: 1px solid #f1f1f1;
     width: 300px;
     padding: 40px;
 
+    .exit {
+      cursor: pointer;
+      position: absolute;
+      top: 22px;
+      right: 31px;
+
+      &:before,
+      &:after {
+        content: "";
+        position: absolute;
+        width: 16px;
+        height: 2px;
+        background: #263238;
+      }
+
+      &:before {
+        transform: rotate(45deg);
+      }
+      &:after {
+        transform: rotate(-45deg);
+      }
+    }
+
     span {
       font-family: "Inter", sans-serif;
       font-weight: 500;
@@ -149,6 +159,7 @@
     }
 
     .start {
+      font-size: 12px;
       margin-top: 25px;
       width: 151px;
       height: 40px;