Merge branch 'profileCalendar' into profilePage

# Conflicts:
#	src/App.js
#	src/components/ProfileCalendar/ProfileCalendar.js
#	src/components/ReportForm/ReportForm.js
#	src/pages/Profile.js

src/components/ProfileCalendar/ProfileCalendar.js

@@ -8,6 +8,7 @@ import moment from "moment";
 import rectangle from '../../images/rectangle_secondPage.png'
 import {currentMonth, getReports} from '../Calendar/calendarHelper'
 import {ProfileCalendarComponent} from "./ProfileCalendarComponent";
+import { ProfileHeader } from "../Profile/ProfileHeader";
 import { Footer } from '../Footer/Footer'
 
 import './profileCalendar.scss'
@@ -48,42 +49,29 @@ export const ProfileCalendar = () => {
     }, [month]);
 
     return (
-        <section className='calendar'>
-            <div className='profile__calendar'>
-                <Link className='calendar__back' to={`/profile`}>
-                    <div><img src={arrow} alt=''/>Вернуться назад</div>
-                </Link>
-                <h2 className='calendar__profile'>
-                    Добрый день, <span>{profileInfo.fio}</span>
-                </h2>
-                <div className='col-12 col-xl-12 d-flex justify-content-between align-items-center flex-column flex-sm-row'>
-                    <div className='calendar__info'>
-                        <img className='calendar__info-img' src={profileInfo.photo} alt='img' />
-                        <h3 className='calendar__info-name'>{}</h3>
-                    </div>
-                    <div className='calendar__title'>
-                        <h3 className='calendar__title-text'>{profileInfo.position_name}</h3>
-                        <img className='calendar__title-img' src={rectangle} alt='img' />
-                    </div>
-                    <div>
-                        <Link to='/report'>
-                            <button className='calendar__btn' onClick={() => {
-                                dispatch(setReportDate(moment()))
-                            }}>Заполнить отчет за день</button>
-                        </Link>
+        <div className='profile__calendar'>
+            <ProfileHeader/>
+            <div className='container'>
+                <h2 className='summary__title'>Ваши отчеты</h2>
+                <div className='summary__info'>
+                    <div className='summary__person'>
+                        <img src={profileInfo.photo} className='summary__avatar'  alt='avatar'/>
+                        <p className='summary__name'>{profileInfo.fio} {profileInfo.specification}</p>
                     </div>
+                    <Link to='/profile/report'>
+                        <button className="calendar__btn">Заполнить отчет за день</button>
+                    </Link>
                 </div>
-            </div>
-
-            <div className='row'>
-                <div className='col-12 col-xl-12'>
-                    <ProfileCalendarComponent reportsDates={reports} />
-                    <p className='calendar__hours'>
-                        {month} : <span> {totalHours} часов </span>
-                    </p>
+                <div className='row'>
+                    <div className='col-12 col-xl-12'>
+                        <ProfileCalendarComponent reportsDates={reports} />
+                        <p className='calendar__hours'>
+                            {month} : <span> {totalHours} часов </span>
+                        </p>
+                    </div>
                 </div>
             </div>
             <Footer />
-        </section>
+        </div>
     )
 };

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='/report'>
                                 <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,5 +1,21 @@
-.calendar {
-  font-family: 'LabGrotesque', sans-serif;
+.profile__calendar {
+  background: #F1F1F1;
+  height: 100%;
+  min-height: 100vh;
+  font-family: "LabGrotesque", sans-serif;
+
+  .container {
+    max-width: 1160px;
+    margin-top: 23px;
+
+    @media (max-width: 570px) {
+      margin-top: 0;
+    }
+  }
+
+  .summary__info {
+    padding-right: 25px;
+  }
   .profile__calendar {
     margin-top: 20px;
   }
@@ -17,4 +33,11 @@
   &__profile {
     margin-top: 42px;
   }
+
+  &__btn {
+    transition: all 0.3s ease;
+    &:hover {
+      transform: scale(1.02);
+    }
+  }
 }