Redesign calendar

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