From f95812ac356ca09aab65cb969d16114fee1a0610 Mon Sep 17 00:00:00 2001
From: MaxOvs19 <gshk3669@gmail.com>
Date: Fri, 23 Jun 2023 15:18:19 +0300
Subject: [PATCH] Fixed styles modalTracker

---
 .../Tracker/ModalTicket/modalTicket.scss      |   3 +-
 .../Tracker/TrackerModal/TrackerModal.jsx     | 370 +++++++++---------
 .../Tracker/TrackerModal/trackerModal.scss    | 197 +++++-----
 3 files changed, 283 insertions(+), 287 deletions(-)

diff --git a/src/components/Modal/Tracker/ModalTicket/modalTicket.scss b/src/components/Modal/Tracker/ModalTicket/modalTicket.scss
index efe4daa6..60936eeb 100644
--- a/src/components/Modal/Tracker/ModalTicket/modalTicket.scss
+++ b/src/components/Modal/Tracker/ModalTicket/modalTicket.scss
@@ -32,6 +32,7 @@
       max-width: 85%;
       display: flex;
       align-items: center;
+      flex-direction: row;
 
       &__category {
         margin-right: 17px;
@@ -100,7 +101,7 @@
       .comments__list {
         display: flex;
         flex-direction: column;
-        max-height: 420px;
+        max-height: 300px;
         overflow: auto;
 
         &::-webkit-scrollbar {
diff --git a/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx b/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx
index c77c53fe..ed3b0d2b 100644
--- a/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx
+++ b/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx
@@ -21,6 +21,7 @@ import { urlForLocal } from "@utils/helper";
 import { apiRequest } from "@api/request";
 
 import BaseButton from "@components/Common/BaseButton/BaseButton";
+import ModalLayout from "@components/Common/ModalLayout/ModalLayout";
 
 import arrowDown from "assets/icons/arrows/selectArrow.png";
 
@@ -211,202 +212,197 @@ export const TrackerModal = ({
   }, [active]);
 
   return (
-    <div
-      className={active ? "modal-add active" : "modal-add"}
-      onClick={() => {
-        setActive(false);
-        setSelectWorkersOpen(false);
-      }}
+    <ModalLayout
+      active={active}
+      setActive={setActive}
+      // onClick={() => {
+      //   setSelectWorkersOpen(false);
+      // }}
     >
-      <div className="modal-add__content" onClick={(e) => e.stopPropagation()}>
-        {modalType === "addWorker" && (
-          <div>
-            <div className="title-project">
-              <h4>Добавьте участника</h4>
-              {/*<div className="input-container">*/}
-              {/*  <input*/}
-              {/*    className="name-project"*/}
-              {/*    value={emailWorker}*/}
-              {/*    onChange={(e) => setEmailWorker(e.target.value)}*/}
-              {/*  />*/}
-              {/*</div>*/}
-              <div
-                className={
-                  selectWorkersOpen ? "select__worker open" : "select__worker"
-                }
-                onClick={() => setSelectWorkersOpen(!selectWorkersOpen)}
-              >
-                <p>
-                  {selectedWorker
-                    ? selectedWorker.employee.fio
-                    : "Выберите пользователя"}
-                </p>
-                <img className="arrow" src={arrowDown} alt="arrow" />
-                {Boolean(selectWorkersOpen) && (
-                  <div className="select__worker__dropDown">
-                    {Boolean(workers.length) ? (
-                      workers.map((worker) => {
-                        if (worker === selectedWorker) {
-                          return;
-                        }
-                        return (
-                          <div
-                            className="worker"
-                            key={worker.id}
-                            onClick={() => {
-                              setSelectedWorker(worker);
-                            }}
-                          >
-                            <p>{worker.employee.fio}</p>
-                            <img
-                              src={urlForLocal(worker.employee.avatar)}
-                              alt="avatar"
-                            />
-                          </div>
-                        );
-                      })
-                    ) : (
-                      <div>Нет пользователей</div>
-                    )}
-                  </div>
-                )}
-              </div>
-            </div>
-            <BaseButton styles={"button-add"} onClick={addUserToProject}>
-              Добавить
-            </BaseButton>
-          </div>
-        )}
-        {modalType === "createTiketProject" && (
-          <div>
-            <div className="title-project">
-              <h4>Введите название и описание задачи</h4>
-              <div className="input-container">
-                <input
-                  className="name-project"
-                  value={valueTiket}
-                  onChange={(e) => setValueTiket(e.target.value)}
-                  placeholder="Название задачи"
-                />
-              </div>
-              <div className="input-container">
-                <input
-                  className="name-project"
-                  value={descriptionTicket}
-                  onChange={(e) => setDescriptionTicket(e.target.value)}
-                  placeholder="Описание задачи"
-                />
-              </div>
-            </div>
-            <BaseButton styles={"button-add"} onClick={createTiket}>
-              Создать
-            </BaseButton>
-          </div>
-        )}
-        {modalType === "editProject" && (
-          <div>
-            <div className="title-project">
-              <h4>Введите новое название</h4>
-              <div className="input-container">
-                <input
-                  className="name-project"
-                  value={projectName}
-                  onChange={(e) => setProjectName(e.target.value)}
-                />
-              </div>
-            </div>
-
-            <BaseButton styles={"button-add"} onClick={editProject}>
-              Сохранить
-            </BaseButton>
-          </div>
-        )}
-        {modalType === "createProject" && (
-          <div>
-            <div className="title-project">
-              <h4>{titleProject}</h4>
-              <div className="input-container">
-                <input
-                  className="name-project"
-                  value={nameProject}
-                  onChange={(e) => setNameProject(e.target.value)}
-                />
-              </div>
-              <BaseButton styles={"button-add"} onClick={createProject}>
-                Создать
-              </BaseButton>
-            </div>
-          </div>
-        )}
-        {modalType === "addSubtask" && (
-          <div>
-            <div className="title-project subtask">
-              <h4>
-                Вы добавляете подзадачу{" "}
-                <p>в колонку(id) задачи "{defautlInput}"</p>
-              </h4>
-              <p className="title-project__decs">Введите текст</p>
-              <div>
-                <textarea className="title-project__textarea"></textarea>
-              </div>
-            </div>
-            <BaseButton
-              styles={"button-add"}
-              onClick={(e) => e.preventDefault()}
+      {modalType === "addWorker" && (
+        <div>
+          <div className="title-project">
+            <h4>Добавьте участника</h4>
+            {/*<div className="input-container">*/}
+            {/*  <input*/}
+            {/*    className="name-project"*/}
+            {/*    value={emailWorker}*/}
+            {/*    onChange={(e) => setEmailWorker(e.target.value)}*/}
+            {/*  />*/}
+            {/*</div>*/}
+            <div
+              className={
+                selectWorkersOpen ? "select__worker open" : "select__worker"
+              }
+              onClick={() => setSelectWorkersOpen(!selectWorkersOpen)}
             >
-              Добавить
-            </BaseButton>
-          </div>
-        )}
-        {modalType === "createColumn" && (
-          <div>
-            <div className="title-project">
-              <h4>Введите название колонки</h4>
-              <div className="input-container">
-                <input
-                  className="name-project"
-                  value={valueColumn}
-                  onChange={(e) => setValueColumn(e.target.value)}
-                />
-              </div>
+              <p>
+                {selectedWorker
+                  ? selectedWorker.employee.fio
+                  : "Выберите пользователя"}
+              </p>
+              <img className="arrow" src={arrowDown} alt="arrow" />
+              {Boolean(selectWorkersOpen) && (
+                <div className="select__worker__dropDown">
+                  {Boolean(workers.length) ? (
+                    workers.map((worker) => {
+                      if (worker === selectedWorker) {
+                        return;
+                      }
+                      return (
+                        <div
+                          className="worker"
+                          key={worker.id}
+                          onClick={() => {
+                            setSelectedWorker(worker);
+                          }}
+                        >
+                          <p>{worker.employee.fio}</p>
+                          <img
+                            src={urlForLocal(worker.employee.avatar)}
+                            alt="avatar"
+                          />
+                        </div>
+                      );
+                    })
+                  ) : (
+                    <div>Нет пользователей</div>
+                  )}
+                </div>
+              )}
             </div>
-            <BaseButton styles={"button-add"} onClick={createTab}>
+          </div>
+          <BaseButton styles={"button-add"} onClick={addUserToProject}>
+            Добавить
+          </BaseButton>
+        </div>
+      )}
+      {modalType === "createTiketProject" && (
+        <div>
+          <div className="title-project">
+            <h4>Введите название и описание задачи</h4>
+            <div className="input-container">
+              <input
+                className="name-project"
+                value={valueTiket}
+                onChange={(e) => setValueTiket(e.target.value)}
+                placeholder="Название задачи"
+              />
+            </div>
+            <div className="input-container">
+              <input
+                className="name-project"
+                value={descriptionTicket}
+                onChange={(e) => setDescriptionTicket(e.target.value)}
+                placeholder="Описание задачи"
+              />
+            </div>
+          </div>
+          <BaseButton styles={"button-add"} onClick={createTiket}>
+            Создать
+          </BaseButton>
+        </div>
+      )}
+      {modalType === "editProject" && (
+        <div>
+          <div className="title-project">
+            <h4>Введите новое название</h4>
+            <div className="input-container">
+              <input
+                className="name-project"
+                value={projectName}
+                onChange={(e) => setProjectName(e.target.value)}
+              />
+            </div>
+          </div>
+
+          <BaseButton styles={"button-add"} onClick={editProject}>
+            Сохранить
+          </BaseButton>
+        </div>
+      )}
+      {modalType === "createProject" && (
+        <div>
+          <div className="title-project">
+            <h4>{titleProject}</h4>
+            <div className="input-container">
+              <input
+                className="name-project"
+                value={nameProject}
+                onChange={(e) => setNameProject(e.target.value)}
+              />
+            </div>
+            <BaseButton styles={"button-add"} onClick={createProject}>
               Создать
             </BaseButton>
           </div>
-        )}
-        {modalType === "editColumn" && (
-          <div>
-            <div className="title-project">
-              <h4>Введите новое название</h4>
-              <div className="input-container">
-                <input
-                  className="name-project"
-                  value={columnName}
-                  onChange={(e) => dispatch(setColumnName(e.target.value))}
-                />
-              </div>
-              <h4>Приоритет колонки</h4>
-              <div className="input-container">
-                <input
-                  className="name-project"
-                  placeholder="Приоритет колонки"
-                  type="number"
-                  step="1"
-                  value={columnPriority}
-                  onChange={(e) => dispatch(setColumnPriority(e.target.value))}
-                />
-              </div>
+        </div>
+      )}
+      {modalType === "addSubtask" && (
+        <div>
+          <div className="title-project subtask">
+            <h4>
+              Вы добавляете подзадачу{" "}
+              <p>в колонку(id) задачи "{defautlInput}"</p>
+            </h4>
+            <p className="title-project__decs">Введите текст</p>
+            <div>
+              <textarea className="title-project__textarea"></textarea>
             </div>
-            <BaseButton styles={"button-add"} onClick={changeColumnParams}>
-              Сохранить
-            </BaseButton>
           </div>
-        )}
+          <BaseButton styles={"button-add"} onClick={(e) => e.preventDefault()}>
+            Добавить
+          </BaseButton>
+        </div>
+      )}
+      {modalType === "createColumn" && (
+        <div>
+          <div className="title-project">
+            <h4>Введите название колонки</h4>
+            <div className="input-container">
+              <input
+                className="name-project"
+                value={valueColumn}
+                onChange={(e) => setValueColumn(e.target.value)}
+              />
+            </div>
+          </div>
+          <BaseButton styles={"button-add"} onClick={createTab}>
+            Создать
+          </BaseButton>
+        </div>
+      )}
+      {modalType === "editColumn" && (
+        <div>
+          <div className="title-project">
+            <h4>Введите новое название</h4>
+            <div className="input-container">
+              <input
+                className="name-project"
+                value={columnName}
+                onChange={(e) => dispatch(setColumnName(e.target.value))}
+              />
+            </div>
+            <h4>Приоритет колонки</h4>
+            <div className="input-container">
+              <input
+                className="name-project"
+                placeholder="Приоритет колонки"
+                type="number"
+                step="1"
+                value={columnPriority}
+                onChange={(e) => dispatch(setColumnPriority(e.target.value))}
+              />
+            </div>
+          </div>
+          <BaseButton styles={"button-add"} onClick={changeColumnParams}>
+            Сохранить
+          </BaseButton>
+        </div>
+      )}
 
-        <span className="exit" onClick={() => setActive(false)}></span>
-      </div>
-    </div>
+      <span className="exit" onClick={() => setActive(false)}></span>
+    </ModalLayout>
   );
 };
 
diff --git a/src/components/Modal/Tracker/TrackerModal/trackerModal.scss b/src/components/Modal/Tracker/TrackerModal/trackerModal.scss
index c8f6ccc4..0181b6ef 100644
--- a/src/components/Modal/Tracker/TrackerModal/trackerModal.scss
+++ b/src/components/Modal/Tracker/TrackerModal/trackerModal.scss
@@ -1,3 +1,4 @@
+//Удалить при переходе всех модалок в обертку modalLayout
 .modal-add {
   z-index: 9;
   height: 100%;
@@ -23,125 +24,123 @@
     align-items: center;
     justify-content: center;
   }
+}
 
-  .title-project {
+.title-project {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  margin: 0 0 15px 0;
+
+  .input-container {
+    width: 287px;
+    height: 35px;
+    background: #ffffff;
+    border-radius: 8px;
+    margin: 12px 0;
+
+    input::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+    }
+  }
+
+  h4 {
+    font-weight: 500;
+    font-size: 22px;
+    line-height: 26px;
+    color: #263238 !important;
+  }
+
+  &__decs {
+    font-weight: 300;
+    font-size: 12px;
+    line-height: 14px;
+    margin: 12px 0 16px 0;
+  }
+
+  &__textarea {
+    resize: none;
+    width: 302px;
+    height: 83px;
+    background: #ffffff;
+    border-radius: 8px;
+    border: none;
+    font-size: 15px;
+    line-height: 18px;
+  }
+
+  .select__worker {
     display: flex;
+    justify-content: space-between;
     align-items: center;
-    flex-direction: column;
-    margin: 0 0 15px 0;
+    padding: 5px;
+    background: white;
+    border-radius: 5px;
+    cursor: pointer;
+    width: 100%;
+    position: relative;
 
-    .input-container {
-      width: 287px;
-      height: 35px;
-      background: #ffffff;
-      border-radius: 8px;
-      margin: 12px 0;
-
-      input::-webkit-inner-spin-button {
-        -webkit-appearance: none;
-      }
+    p {
+      max-width: 150px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      font-size: 14px;
     }
 
-    h4 {
-      font-weight: 500;
-      font-size: 22px;
-      line-height: 26px;
-      color: #263238 !important;
+    img {
+      transition: all 0.3s ease;
+      width: 16px;
+      height: 16px;
     }
 
-    &__decs {
-      font-weight: 300;
-      font-size: 12px;
-      line-height: 14px;
-      margin: 12px 0 16px 0;
-    }
-
-    &__textarea {
-      resize: none;
-      width: 302px;
-      height: 83px;
-      background: #ffffff;
-      border-radius: 8px;
-      border: none;
-      font-size: 15px;
-      line-height: 18px;
-    }
-
-    .select__worker {
+    &__dropDown {
       display: flex;
-      justify-content: space-between;
-      align-items: center;
+      flex-direction: column;
+      position: absolute;
+      width: 100%;
       padding: 5px;
+      top: 35px;
+      left: 0;
       background: white;
       border-radius: 5px;
-      cursor: pointer;
-      width: 100%;
-      position: relative;
+      row-gap: 5px;
 
-      p {
-        max-width: 150px;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        font-size: 14px;
-      }
-
-      img {
-        transition: all 0.3s ease;
-        width: 16px;
-        height: 16px;
-      }
-
-      &__dropDown {
+      .worker {
         display: flex;
-        flex-direction: column;
-        position: absolute;
-        width: 100%;
-        padding: 5px;
-        top: 35px;
-        left: 0;
-        background: white;
-        border-radius: 5px;
-        row-gap: 5px;
-
-        .worker {
-          display: flex;
-          justify-content: space-between;
-        }
-      }
-    }
-
-    .open {
-      .arrow {
-        transform: rotate(180deg);
+        justify-content: space-between;
       }
     }
   }
 
-  .name-project {
-    margin-left: 10px;
-    border: none;
-    outline: none;
-    height: 100%;
-    width: 90%;
-    font-size: 14px;
+  .open {
+    .arrow {
+      transform: rotate(180deg);
+    }
   }
+}
 
-  .button-add {
-    width: 130px;
-    height: 37px;
-    // 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;
-    margin: 0 auto;
-  }
+.name-project {
+  margin-left: 10px;
+  border: none;
+  outline: none;
+  height: 100%;
+  width: 90%;
+  font-size: 14px;
+}
+
+.button-add {
+  width: 130px;
+  height: 37px;
+
+  font-weight: 400;
+  font-size: 15px;
+  line-height: 32px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto;
 }
 
 .modal-add.active {