Redesign calendar

2024-04-04 17:31:28 +03:00
parent 3e54f947b4
commit 90274e8b17
13 changed files with 162 additions and 98 deletions
--- a/src/components/Calendar/calendarComponent.scss
+++ b/src/components/Calendar/calendarComponent.scss
@ -23,10 +23,14 @@

      .calendar__hours {
        margin: 0 5px;
-        line-height: 0;
+        font-size: 22px;
        font-weight: 500;
        display: flex;
        align-items: center;
+        span {
+          font-size: 22px;
+          font-weight: 500;
+        }
      }
    }

@ -54,21 +58,33 @@
    }

    &-box {
+      background-color: #e5f1fb;
+      height: 47px;
      display: flex;
      align-items: center;
-      margin-left: 20px;
-      cursor: pointer;
+      margin: 0 15px;
+      padding: 0 20px;
+      border-radius: 5px;
+
+      font-weight: 400;
+      font-size: 16px;
+      color: #406128;

      img {
-        margin: 0px 10px;
-        width: 12px;
-        height: 12px;
-
-        &:first-child {
-          transform: rotate(180deg);
-          margin: 0;
-        }
+        width: 17px;
+        height: 17px;
+        margin: 0 10px 0 0;
      }
+    }
+
+    &-arrow {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      height: 47px;
+      padding: 0 8px;
+      background-color: #e5f1fb;
+      border-radius: 5px;

      span {
        color: #18586e;
@ -107,12 +123,9 @@
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;

      p {
-        color: #398208;
-        font-size: 25px;
-        font-weight: 400;
-        font-style: normal;
-        letter-spacing: normal;
-        line-height: 30px;
+        color: #9babc5;
+        font-size: 14px;
+        font-weight: 500;
        text-align: center;
      }
    }
@ -127,24 +140,48 @@

    button {
      margin: 0 auto;
-      width: 125px;
-      height: 42px;
+      width: 135px;
+      height: 82px;
      padding: 0px;
      box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
-      border-radius: 5px;
+      border-radius: 10px;
      border: 1px solid #c4c4c4;
      background-color: #ffffff;
      margin-top: 20px;
      font-size: 1.2em;
      text-align: center;

+      .form-date {
+        width: 100%;
+        padding: 5px 0 0 15px;
+        height: 100%;
+      }
+
+      .form-box {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        border-bottom-left-radius: 10px;
+        border-bottom-right-radius: 10px;
+        border-top: #eff5fa 2px solid;
+
+        .form-hours {
+          display: none;
+        }
+      }
+
      a {
        color: black;
        display: flex;
+        flex-direction: column;
        align-items: center;
        justify-content: center;
-        font-weight: 500;
-        font-size: 12px;
+        font-weight: 400;
+        font-size: 16px;
+        height: 100%;

        @media (max-width: 500px) {
          font-size: 10px;
@ -152,20 +189,6 @@
        }
      }

-      img {
-        width: 16px;
-        height: 16px;
-        margin: 0 5px 0 0;
-
-        @media (max-width: 968px) {
-          margin-right: 2px;
-
-          @media (max-width: 610px) {
-            display: none;
-          }
-        }
-      }
-
      @media (max-width: 1200px) {
        width: 110px;
      }
@ -214,17 +237,6 @@
  }
 }

-.calendar__icon {
-  margin-right: 10px;
-  margin-top: -4px;
-}
-
-@media (max-width: 575.98px) {
-  .calendar__icon {
-    display: none;
-  }
-}
-
 .select-days {
  border-style: dashed !important;

@ -246,7 +258,44 @@
 }

 .before {
-  background-color: #e5f9b6 !important;
+  background-color: #ffffff !important;
+
+  .form-date {
+    height: 35% !important;
+  }
+  .form-box {
+    background-color: #fafbfe;
+
+    .form-hours {
+      color: #6dd077;
+      background-color: #6dd0772f;
+      border-spacing: 10px;
+      border-radius: 5px;
+      display: flex !important;
+      flex-direction: row;
+      width: 95%;
+      font-weight: 400;
+      font-size: 14px;
+      padding: 0 7px;
+      position: relative;
+
+      span {
+        color: #1458dd;
+        font-weight: 700;
+        font-size: 14px;
+        margin: auto;
+      }
+    }
+    .form-hours::before {
+      content: "";
+      position: absolute;
+      top: 10%;
+      left: 0;
+      height: 75%;
+      border-left: 2px solid #6dd077;
+      border-radius: 5px;
+    }
+  }
 }

 .pass {
@ -271,18 +320,25 @@
  align-items: center;
  column-gap: 16px;
  font-size: 16px;
-  font-weight: 500;
+  font-weight: 400;
  position: relative;

  .select {
+    background-color: #e5f1fb;
+    color: #406128;
    border-radius: 5px;
-    border: 2px solid #c4c4c4;
-    box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
-    padding: 5px 8px;
+    padding: 15px;
    cursor: pointer;
    text-align: center;
  }

+  .hint {
+    color: #6f6f6f;
+    font-size: 14px;
+    font-weight: 300;
+    margin: 0 0 0 20px;
+  }
+
  .close {
    cursor: pointer;
    margin-left: 8px;
--- a/src/components/Modal/ModalResetPassword/ModalResetPassword.jsx
+++ b/src/components/Modal/ModalResetPassword/ModalResetPassword.jsx
@ -7,7 +7,7 @@ import { useNotification } from "@hooks/useNotification";
 import { Loader } from "@components/Common/Loader/Loader";
 import ModalLayout from "@components/Common/ModalLayout/ModalLayout";

-import arrow from "assets/icons/arrows/arrowCalendar.png";
+import arrow from "assets/icons/arrows/arrowRight.png";
 import close from "assets/icons/close.png";

 import "./modalResetPassword.scss";
--- a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx
+++ b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx
@ -32,7 +32,7 @@ import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadc
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
 import TrackerTaskComment from "@components/TrackerTaskComment/TrackerTaskComment";

-import arrow from "assets/icons/arrows/arrowCalendar.png";
+import arrow from "assets/icons/arrows/arrowRight.png";
 import arrowStart from "assets/icons/arrows/arrowStart.png";
 import arrowDown from "assets/icons/arrows/selectArrow.png";
 import calendarIcon from "assets/icons/calendar.svg";
--- a/src/components/ProfileCalendar/ProfileCalendarComponent.jsx
+++ b/src/components/ProfileCalendar/ProfileCalendarComponent.jsx
@ -26,7 +26,8 @@ import { apiRequest } from "@api/request";
 import "@components/Calendar/calendarComponent.scss";
 import BaseButton from "@components/Common/BaseButton/BaseButton";

-import arrow from "assets/icons/arrows/arrowCalendar.png";
+import arrowLeft from "assets/icons/arrows/arrowCalendar_left.png";
+import arrowRight from "assets/icons/arrows/arrowCalendar_right.png";
 import calendarIcon from "assets/icons/calendar.svg";
 // import close from "assets/icons/closeProjectPersons.svg";
 import rectangle from "assets/images/rectangle__calendar.png";
@ -173,11 +174,13 @@ export const ProfileCalendarComponent = React.memo(
      });
    }

+    // function errorr(TotalRangeHours) {
+    //   console.error(TotalRangeHours);
+    // }
    return (
      <div className="calendar-component">
        <div className="calendar-component__header">
          <div className="calendar-component__header-info">
-            {!userId && <h3>Мои отчеты за </h3>}
            <p className="calendar__hours">
              {month}&nbsp;
              <span>
@ -187,27 +190,26 @@ export const ProfileCalendarComponent = React.memo(
          </div>
          <div className="calendar-component__header-switcher">
            <div
-              className="calendar-component__header-box"
+              className="calendar-component__header-arrow"
              onClick={() => {
                setValueHandler(prevMonth());
                dispatch(setRequestDate(getReports(prevMonth())));
              }}
            >
-              <img src={arrow} alt="" />
-              <span>{prevMonth().format("MMMM")}</span>
+              <img src={arrowLeft} alt="" />
            </div>
            <div className="calendar-component__header-box">
-              <span>{value.format("YYYY")}</span>
+              <img className={"calendar__icon"} src={calendarIcon} alt="" />
+              <span>{value.format("MMMM, YYYY")}</span>
            </div>
            <div
-              className="calendar-component__header-box"
+              className="calendar-component__header-arrow"
              onClick={() => {
                setValueHandler(nextMonth());
                dispatch(setRequestDate(getReports(nextMonth())));
              }}
            >
-              <span>{nextMonth().format("MMMM")}</span>
-              <img src={arrow} alt="" />
+              <img src={arrowRight} alt="" />
            </div>
          </div>
        </div>
@ -218,13 +220,13 @@ export const ProfileCalendarComponent = React.memo(

        <div className="calendar-component__body">
          <div>
-            <p>Пн</p>
-            <p>Вт</p>
-            <p>Ср</p>
-            <p>Чт</p>
-            <p>Пт</p>
-            <p>Сб</p>
-            <p>Вс</p>
+            <p>Понедельник</p>
+            <p>Вторник</p>
+            <p>Среда</p>
+            <p>Четверг</p>
+            <p>Пятница</p>
+            <p>Суббота</p>
+            <p>Воскресенье</p>
          </div>

          <div className="calendar-component__form">
@ -260,12 +262,13 @@ export const ProfileCalendarComponent = React.memo(
                  id="btn"
                >
                  <Link to={startRangeDays ? "#" : correctRoute(day)}>
-                    <img
-                      className={"calendar__icon"}
-                      src={calendarIcon}
-                      alt=""
-                    />
-                    {currentMonthAndDay(day)}
+                    <div className="form-date">{day.format("D")}</div>
+                    <div className="form-box">
+                      <div className="form-hours">
+                        <span>7/Час</span>
+                      </div>
+                    </div>
+                    {/* {currentMonthAndDay(day)} */}
                  </Link>
                </button>
              ))
@ -289,6 +292,7 @@ export const ProfileCalendarComponent = React.memo(
              ? "Выберите диапазон на календаре"
              : "Выбрать диапазон"}
          </span>
+
          <span>
            {totalRangeHours
              ? `${totalRangeHours} ${hourOfNum(totalRangeHours)}`
@ -308,6 +312,7 @@ export const ProfileCalendarComponent = React.memo(
              Сбросить
            </BaseButton>
          )}
+          <span className="hint">Для общего просчета - выберите диапазон</span>
        </div>
      </div>
    );
--- a/src/components/ProfileCalendar/profileCalendar.scss
+++ b/src/components/ProfileCalendar/profileCalendar.scss
@ -36,7 +36,6 @@
  }

  .calendar__wrapper {
-
    @media (max-width: 1000px) {
      min-height: auto;
    }