calendar and styles fixes

src/components/Calendar/calendar.scss

@@ -64,7 +64,6 @@
   &__btn {
     width: 280px;
     height: 62px;
-    box-shadow: 6px 5px 20px rgba(82, 151, 34, 0.21);
     border-radius: 31px;
     background-color: #ffffff;
     background-image: linear-gradient(to top, #6aaf5c 0%, #52b709 100%),
@@ -81,6 +80,12 @@
     font-size: 1.6em;
     letter-spacing: normal;
     text-align: center;
+    transition: all 0.3s ease;
+
+    &:hover {
+      box-shadow: 6px 5px 20px rgb(87 98 80 / 21%);
+      transform: scale(1.02);
+    }
   }
 
   &__hours {

src/components/Calendar/calendarComponent.scss

@@ -92,6 +92,11 @@
       letter-spacing: normal;
       line-height: normal;
       text-align: center;
+
+      a {
+        text-decoration: none;
+        color: #000000;
+      }
     }
   }
 }
@@ -263,3 +268,7 @@
 .selected {
   background-color: #f9f9c3 !important;
 }
+
+.block {
+  pointer-events: none;
+}

src/components/ProfileCalendar/ProfileCalendar.js

@@ -49,7 +49,7 @@ export const ProfileCalendar = () => {
     }, [month])
 
     return (
-        <div className='calendar'>
+        <div className='profile__calendar'>
             <ProfileHeader/>
             <div className='container'>
                 <h2 className='summary__title'>Ваши отчеты</h2>

src/components/ProfileCalendar/ProfileCalendarComponent.js

@@ -28,23 +28,33 @@ export const ProfileCalendarComponent = ({reportsDates}) => {
         return day.isSame(new Date(), 'day')
     }
 
+    function correctDay(day) {
+        if (day < 10) {
+            return `0${day}`
+        } return day
+    }
+
     function dayStyles(day) {
-        if (value < day) return ``
-        if (day.day() === 6 || day.day() === 0) return `selected`
-        function correctDay(day) {
-            if (day < 10) {
-                return `0${day}`
-            } return day
-        }
+        if (value < day) return `block`
         for (const date of reportsDates) {
-            if (`${new Date(day).getFullYear()}-${new Date(day).getMonth() + 1}-${correctDay(new Date(day).getDate())}` === date.date) {
+            if (`${new Date(day).getFullYear()}-${correctDay(new Date(day).getMonth() + 1)}-${correctDay(new Date(day).getDate())}` === date.date) {
                 return `before`
             }
         }
+        if (day.day() === 6 || day.day() === 0) return `selected`
         if (isToday(day)) return `today`
         return 'pass'
     }
 
+    function correctRoute(day) {
+        for (const date of reportsDates) {
+            if (`${new Date(day).getFullYear()}-${correctDay(new Date(day).getMonth() + 1)}-${correctDay(new Date(day).getDate())}` === date.date) {
+                return `/view/report`
+            }
+        }
+        return '/profile/report'
+    }
+
     // function prevMonth() {
     //     return value.clone().subtract(1, 'month')
     // }
@@ -85,7 +95,6 @@ export const ProfileCalendarComponent = ({reportsDates}) => {
                 <div className='calendar-component__form'>
                     {calendar.map((week) =>
                         week.map((day) => (
-                            <Link to='/profile/report' key={day}>
                                 <button
                                     onClick={() => {
                                         dispatch(setReportDate(day))
@@ -95,10 +104,11 @@ export const ProfileCalendarComponent = ({reportsDates}) => {
                                     name={day.format('dddd')}
                                     id='btn'
                                 >
-                                    <img className={'calendar__icon'} src={calendarIcon} alt='' />
-                                    {currentMonthAndDay(day)}
+                                    <Link to={() => correctRoute(day)}>
+                                        <img className={'calendar__icon'} src={calendarIcon} alt='' />
+                                        {currentMonthAndDay(day)}
+                                    </Link>
                                 </button>
-                            </Link>
                         ))
                     )}
                 </div>

src/components/ProfileCalendar/profileCalendar.scss

@@ -1,4 +1,4 @@
-.calendar {
+.profile__calendar {
   background: #F1F1F1;
   height: 100%;
   min-height: 100vh;

src/components/ReportForm/ReportForm.js

@@ -61,7 +61,7 @@ const ReportForm = () => {
           <div>
             <div className='report__head'>
               <Link className='calendar__back' to={`/profile/profilecalendar`}>
-                <div><img src={arrow} alt=''/>Вернуться</div>
+                <img src={arrow} alt=''/><p>Вернуться</p>
               </Link>
             </div>
           </div>

src/components/ReportForm/reportForm.scss

@@ -22,6 +22,24 @@
 
   .report__head {
     margin-top: 20px;
+
+    a {
+      display: flex;
+      align-items: center;
+      grid-column-gap: 30px;
+      column-gap: 30px;
+      margin-top: 20px;
+      cursor: pointer;
+      text-decoration: none;
+
+      p {
+        margin-bottom: 0;
+        font-size: 14px;
+        line-height: 32px;
+        font-weight: 500;
+        color: black;
+      }
+    }
   }
 
   &__block-title {