Fixed buttons in tracker page

2023-06-22 19:18:41 +03:00
parent 5ab7e65905
commit 055225d747
10 changed files with 103 additions and 63 deletions
--- a/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx
+++ b/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx
@ -9,7 +9,7 @@ import { getCorrectRequestDate, urlForLocal } from "@utils/helper";
 import { apiRequest } from "@api/request";

 import BaseButton from "@components/Common/BaseButton/BaseButton";
-import TrackerModal from "@components/Modal/TrackerModal/TrackerModal";
+import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal";
 import TrackerTaskComment from "@components/TrackerTaskComment/TrackerTaskComment";

 import archive from "assets/icons/archive.svg";
@ -370,10 +370,10 @@ export const ModalTiсket = ({
                </BaseButton>
              </p>
              <p className="file">
-                <button>
+                <BaseButton styles={"button-add-file"}>
                  <img src={file}></img>
                  Загрузить файл
-                </button>
+                </BaseButton>
                <span>{0}</span>
                Файлов
              </p>
@ -425,7 +425,12 @@ export const ModalTiсket = ({
              </div>
            ) : (
              <div className="add-worker moreItems ">
-                <button onClick={() => setDropListOpen(true)}>+</button>
+                <BaseButton
+                  onClick={() => setDropListOpen(true)}
+                  styles={"button-add-worker"}
+                >
+                  +
+                </BaseButton>
                <span>Добавить исполнителя</span>
                {dropListOpen && (
                  <div className="dropdownList">
@ -473,7 +478,12 @@ export const ModalTiсket = ({
            )}

            <div className="add-worker moreItems">
-              <button onClick={() => setDropListMembersOpen(true)}>+</button>
+              <BaseButton
+                onClick={() => setDropListMembersOpen(true)}
+                styles={"button-add-worker"}
+              >
+                +
+              </BaseButton>
              <span>Добавить участников</span>
              {dropListMembersOpen && (
                <div className="dropdownList">
--- a/src/components/Modal/Tracker/ModalTicket/modalTicket.scss
+++ b/src/components/Modal/Tracker/ModalTicket/modalTicket.scss
@ -277,7 +277,7 @@
        justify-content: space-between;
        margin-left: 20px;

-        button {
+        .button-add-file {
          display: flex;
          align-items: center;
          justify-content: center;
@ -332,6 +332,10 @@
        cursor: pointer;
        margin-right: 18px;
      }
+
+      &:focus-within {
+        border: 1px solid #0000004d;
+      }
    }
  }

@ -392,6 +396,7 @@
      display: flex;
      align-items: center;
      position: relative;
+      margin-bottom: 5px;

      span {
        color: #000000;
@ -402,17 +407,12 @@
        font-weight: 400;
      }

-      button {
-        cursor: pointer;
-        background: #8bcc60;
-        border-radius: 44px;
+      .button-add-worker {
        width: 33px;
        height: 33px;
        display: flex;
        justify-content: center;
        align-items: center;
-        border: none;
-        color: white;
        font-size: 17px;
      }
    }
@ -601,6 +601,10 @@
            font-weight: 700;
          }
        }
+
+        p:hover {
+          text-decoration: underline;
+        }
      }
    }
  }
--- a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx
+++ b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx
@ -18,7 +18,7 @@ import { apiRequest } from "@api/request";
 import BaseButton from "@components/Common/BaseButton/BaseButton";
 import { Footer } from "@components/Common/Footer/Footer";
 import { Loader } from "@components/Common/Loader/Loader";
-import TrackerModal from "@components/Modal/TrackerModal/TrackerModal";
+import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal";
 import { Navigation } from "@components/Navigation/Navigation";
 import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
@ -386,10 +386,10 @@ export const TicketFullScreen = () => {
                      </BaseButton>
                    </p>
                    <p className="file">
-                      <button>
-                        <img src={file} alt="file"></img>
+                      <BaseButton styles={"button-add-file"}>
+                        <img src={file}></img>
                        Загрузить файл
-                      </button>
+                      </BaseButton>
                      <span>{0}</span>
                      Файлов
                    </p>
@ -441,25 +441,28 @@ export const TicketFullScreen = () => {
                  </div>

                  <div className="add-worker moreItems">
-                    <button
+                    <BaseButton
                      onClick={() => {
                        dispatch(modalToggle("addWorker"));
                        setModalAddWorker(true);
                      }}
+                      styles={"button-add-worker"}
                    >
                      +
-                    </button>
+                    </BaseButton>
                    <span>Добавить исполнителя</span>
                  </div>
                  <div className="add-worker moreItems">
-                    <button
+                    <BaseButton
                      onClick={() => {
                        dispatch(modalToggle("addWorker"));
                        setModalAddWorker(true);
                      }}
+                      styles={"button-add-worker"}
                    >
                      +
-                    </button>
+                    </BaseButton>
+
                    <span>Добавить участников</span>
                  </div>
                </div>
--- a/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx
+++ b/src/components/Modal/Tracker/TrackerModal/TrackerModal.jsx
@ -1,8 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";

-import { apiRequest } from "../../../api/request";
-import arrowDown from "../../../assets/icons/arrows/selectArrow.png";
 import {
  addPersonToProject,
  editColumnName,
@ -16,8 +14,16 @@ import {
  setColumnPriority,
  setProject,
  setProjectBoardFetch,
-} from "../../../redux/projectsTrackerSlice";
-import { urlForLocal } from "../../../utils/helper";
+} from "@redux/projectsTrackerSlice";
+
+import { urlForLocal } from "@utils/helper";
+
+import { apiRequest } from "@api/request";
+
+import BaseButton from "@components/Common/BaseButton/BaseButton";
+
+import arrowDown from "assets/icons/arrows/selectArrow.png";
+
 import "./trackerModal.scss";

 export const TrackerModal = ({
@ -266,9 +272,9 @@ export const TrackerModal = ({
                )}
              </div>
            </div>
-            <button className="button-add" onClick={addUserToProject}>
+            <BaseButton styles={"button-add"} onClick={addUserToProject}>
              Добавить
-            </button>
+            </BaseButton>
          </div>
        )}
        {modalType === "createTiketProject" && (
@ -292,9 +298,9 @@ export const TrackerModal = ({
                />
              </div>
            </div>
-            <button className="button-add" onClick={createTiket}>
+            <BaseButton styles={"button-add"} onClick={createTiket}>
              Создать
-            </button>
+            </BaseButton>
          </div>
        )}
        {modalType === "editProject" && (
@ -309,9 +315,10 @@ export const TrackerModal = ({
                />
              </div>
            </div>
-            <button className="button-add" onClick={editProject}>
+
+            <BaseButton styles={"button-add"} onClick={editProject}>
              Сохранить
-            </button>
+            </BaseButton>
          </div>
        )}
        {modalType === "createProject" && (
@ -325,9 +332,9 @@ export const TrackerModal = ({
                  onChange={(e) => setNameProject(e.target.value)}
                />
              </div>
-              <button className="button-add" onClick={createProject}>
+              <BaseButton styles={"button-add"} onClick={createProject}>
                Создать
-              </button>
+              </BaseButton>
            </div>
          </div>
        )}
@ -343,9 +350,12 @@ export const TrackerModal = ({
                <textarea className="title-project__textarea"></textarea>
              </div>
            </div>
-            <button className="button-add" onClick={(e) => e.preventDefault()}>
+            <BaseButton
+              styles={"button-add"}
+              onClick={(e) => e.preventDefault()}
+            >
              Добавить
-            </button>
+            </BaseButton>
          </div>
        )}
        {modalType === "createColumn" && (
@ -360,9 +370,9 @@ export const TrackerModal = ({
                />
              </div>
            </div>
-            <button className="button-add" onClick={createTab}>
+            <BaseButton styles={"button-add"} onClick={createTab}>
              Создать
-            </button>
+            </BaseButton>
          </div>
        )}
        {modalType === "editColumn" && (
@ -388,9 +398,9 @@ export const TrackerModal = ({
                />
              </div>
            </div>
-            <button className="button-add" onClick={changeColumnParams}>
+            <BaseButton styles={"button-add"} onClick={changeColumnParams}>
              Сохранить
-            </button>
+            </BaseButton>
          </div>
        )}

--- a/src/components/Modal/Tracker/TrackerModal/trackerModal.scss
+++ b/src/components/Modal/Tracker/TrackerModal/trackerModal.scss
@ -28,6 +28,7 @@
    display: flex;
    align-items: center;
    flex-direction: column;
+    margin: 0 0 15px 0;

    .input-container {
      width: 287px;
@ -129,13 +130,13 @@
  .button-add {
    width: 130px;
    height: 37px;
-    background: #52b709;
-    border-radius: 44px;
-    border: none;
+    // background: #52b709;
+    // border-radius: 44px;
+    // border: none;
    font-weight: 400;
    font-size: 15px;
    line-height: 32px;
-    color: #ffffff;
+    // color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;