Redesign calendar

src/assets/icons/calendar.svg

@@ -1,4 +1,3 @@
-<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<svg fill="#000000" width="800px" height="800px" viewBox="0 0 1920 1920" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.569 2.26115H12.9023V1.42782C12.9023 1.2068 12.8145 0.99484 12.6583 0.83856C12.502 0.68228 12.29 0.594482 12.069 0.594482C11.848 0.594482 11.636 0.68228 11.4798 0.83856C11.3235 0.99484 11.2357 1.2068 11.2357 1.42782V2.26115H6.23568V1.42782C6.23568 1.2068 6.14788 0.99484 5.9916 0.83856C5.83532 0.68228 5.62336 0.594482 5.40234 0.594482C5.18133 0.594482 4.96937 0.68228 4.81309 0.83856C4.65681 0.99484 4.56901 1.2068 4.56901 1.42782V2.26115H2.90234C2.2393 2.26115 1.60342 2.52454 1.13458 2.99338C0.665736 3.46222 0.402344 4.09811 0.402344 4.76115V14.7611C0.402344 15.4242 0.665736 16.0601 1.13458 16.5289C1.60342 16.9978 2.2393 17.2612 2.90234 17.2612H14.569C15.2321 17.2612 15.8679 16.9978 16.3368 16.5289C16.8056 16.0601 17.069 15.4242 17.069 14.7611V4.76115C17.069 4.09811 16.8056 3.46222 16.3368 2.99338C15.8679 2.52454 15.2321 2.26115 14.569 2.26115ZM15.4023 14.7611C15.4023 14.9822 15.3145 15.1941 15.1583 15.3504C15.002 15.5067 14.79 15.5945 14.569 15.5945H2.90234C2.68133 15.5945 2.46937 15.5067 2.31309 15.3504C2.15681 15.1941 2.06901 14.9822 2.06901 14.7611V8.92782H15.4023V14.7611ZM15.4023 7.26115H2.06901V4.76115C2.06901 4.54014 2.15681 4.32817 2.31309 4.17189C2.46937 4.01561 2.68133 3.92782 2.90234 3.92782H4.56901V4.76115C4.56901 4.98216 4.65681 5.19412 4.81309 5.3504C4.96937 5.50669 5.18133 5.59448 5.40234 5.59448C5.62336 5.59448 5.83532 5.50669 5.9916 5.3504C6.14788 5.19412 6.23568 4.98216 6.23568 4.76115V3.92782H11.2357V4.76115C11.2357 4.98216 11.3235 5.19412 11.4798 5.3504C11.636 5.50669 11.848 5.59448 12.069 5.59448C12.29 5.59448 12.502 5.50669 12.6583 5.3504C12.8145 5.19412 12.9023 4.98216 12.9023 4.76115V3.92782H14.569C14.79 3.92782 15.002 4.01561 15.1583 4.17189C15.3145 4.32817 15.4023 4.54014 15.4023 4.76115V7.26115Z" fill="#406128"/>
-    <path d="M1411.824 0c31.17 0 56.47 25.3 56.47 56.471v56.47h169.412c93.403 0 169.412 76.01 169.412 169.412V1920H113V282.353c0-93.402 76.009-169.412 169.412-169.412h169.41v-56.47c0-31.172 25.3-56.47 56.472-56.47s56.47 25.298 56.47 56.47v56.47h790.589v-56.47c0-31.172 25.299-56.47 56.47-56.47Zm282.352 564.705H225.942v1242.353h1468.234V564.705Zm-1016.47 677.648v338.824H338.882v-338.824h338.824Zm451.765 0v338.824H790.647v-338.824h338.824Zm451.764 0v338.824h-338.823v-338.824h338.823Zm-1016.47 112.941H451.824v112.941h112.941v-112.941Zm451.764 0H903.588v112.941h112.941v-112.941Zm451.765 0h-112.941v112.941h112.941v-112.941ZM677.706 790.588v338.824H338.882V790.588h338.824Zm451.765 0v338.824H790.647V790.588h338.824Zm451.764 0v338.824h-338.823V790.588h338.823ZM564.765 903.53H451.824v112.941h112.941V903.53Zm451.764 0H903.588v112.941h112.941V903.53Zm451.765 0h-112.941v112.941h112.941V903.53ZM451.823 225.882H282.412c-31.06 0-56.47 25.3-56.47 56.471v169.412h1468.234V282.353c0-31.172-25.411-56.47-56.47-56.47h-169.412v56.47c0 31.172-25.3 56.471-56.47 56.471-31.172 0-56.471-25.299-56.471-56.47v-56.472H564.765v56.471c0 31.172-25.3 56.471-56.471 56.471-31.171 0-56.471-25.299-56.471-56.47v-56.472Z" fill-rule="evenodd"/>
 </svg>

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;
+      margin: 0 15px;
-      cursor: pointer;
+      padding: 0 20px;
+      border-radius: 5px;
+
+      font-weight: 400;
+      font-size: 16px;
+      color: #406128;
 
       img {
-        margin: 0px 10px;
+        width: 17px;
-        width: 12px;
+        height: 17px;
-        height: 12px;
+        margin: 0 10px 0 0;
+      }
+    }
 
-        &:first-child {
+    &-arrow {
-          transform: rotate(180deg);
+      display: flex;
-          margin: 0;
+      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;
+        color: #9babc5;
-        font-size: 25px;
+        font-size: 14px;
-        font-weight: 400;
+        font-weight: 500;
-        font-style: normal;
-        letter-spacing: normal;
-        line-height: 30px;
         text-align: center;
       }
     }
@@ -127,24 +140,48 @@
 
     button {
       margin: 0 auto;
-      width: 125px;
+      width: 135px;
-      height: 42px;
+      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-weight: 400;
-        font-size: 12px;
+        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;
+    padding: 15px;
-    box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
-    padding: 5px 8px;
     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;

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";

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";

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="" />
+              <img src={arrowLeft} alt="" />
-              <span>{prevMonth().format("MMMM")}</span>
             </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={arrowRight} alt="" />
-              <img src={arrow} 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
+                    <div className="form-date">{day.format("D")}</div>
-                      className={"calendar__icon"}
+                    <div className="form-box">
-                      src={calendarIcon}
+                      <div className="form-hours">
-                      alt=""
+                        <span>7/Час</span>
-                    />
+                      </div>
-                    {currentMonthAndDay(day)}
+                    </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>
     );

src/components/ProfileCalendar/profileCalendar.scss

@@ -36,7 +36,6 @@
   }
 
   .calendar__wrapper {
-
     @media (max-width: 1000px) {
       min-height: auto;
     }

src/pages/ProjectTracker/ProjectTracker.jsx

@@ -41,7 +41,7 @@ import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadc
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
 import TrackerSelectColumn from "@components/TrackerSelectColumn/TrackerSelectColumn";
 
-import arrow from "assets/icons/arrows/arrowCalendar.png";
+import arrow from "assets/icons/arrows/arrowRight.png";
 import arrowDown from "assets/icons/arrows/selectArrow.png";
 import category from "assets/icons/category.svg";
 import close from "assets/icons/close.png";

src/pages/Statistics/Statistics.jsx

@@ -15,7 +15,7 @@ import { Navigation } from "@components/Navigation/Navigation";
 import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
 
-import arrow from "assets/icons/arrows/arrowCalendar.png";
+import arrow from "assets/icons/arrows/arrowRight.png";
 import emailImg from "assets/icons/emailStatistics.svg";
 import link from "assets/icons/link.svg";
 import project from "assets/icons/trackerProject.svg";

src/pages/Summary/Summary.jsx

@@ -119,6 +119,9 @@ export const Summary = () => {
                 {profileInfo?.fio || profileInfo?.username},{" "}
                 {profileInfo.specification} разработчик
               </p>
+              <hr />
+              <div className="summary__direction">Front End</div>
+              <div className="summary__level">Middle+</div>
             </div>
             {!openGit && (
               <button className="summary__git" onClick={() => setOpenGit(true)}>

src/pages/Summary/summary.scss

@@ -1,5 +1,5 @@
 .summary {
-  background: #f1f1f1;
+  background: #f4f7ff;
   display: flex;
   flex-direction: column;
   min-height: 100vh;
@@ -62,7 +62,7 @@
   &__person {
     display: flex;
     align-items: center;
-    column-gap: 45px;
+    column-gap: 20px;
 
     @media (max-width: 825px) {
       column-gap: 20px;
@@ -74,8 +74,8 @@
   }
 
   &__avatar {
-    width: 88px;
+    width: 50px;
-    height: 88px;
+    height: 50px;
     border-radius: 100px;
 
     @media (max-width: 690px) {
@@ -97,9 +97,9 @@
   }
 
   &__name {
+    color: #1458dd;
+    font-size: 15px;
     font-weight: 500;
-    font-size: 16px;
-    line-height: 32px;
     position: relative;
 
     @media (max-width: 690px) {
@@ -118,17 +118,19 @@
     @media (max-width: 450px) {
       max-width: 160px;
     }
-
-    &:after {
-      content: "";
-      position: absolute;
-      background: #52b709;
-      border-radius: 12px;
-      width: 70%;
-      height: 8px;
-      bottom: -14px;
-      left: 0;
   }
+
+  &__direction {
+    color: #6f6f6f;
+    font-size: 14px;
+  }
+
+  &__level {
+    background-color: #1458dd;
+    color: #ffffff;
+    border-radius: 44px;
+    font-size: 14px;
+    font-weight: 400;
   }
 
   &__git {