new design calendar and report

src/App.js

@@ -46,9 +46,9 @@ const App = () => {
             path='/candidate/:id/form'
             component={FormPage}
           />
-          <ProtectedRoute exact path='/report' component={ReportPage} />
+          <ProtectedRoute exact path='/profile/report' component={ReportPage} />
           <ProtectedRoute path='/report/:id' component={SingleReportPage} />
-          <ProtectedRoute path='/ProfileCalendar' component={ProfileCalendarPage} />
+          <ProtectedRoute path='/profile/profilecalendar' component={ProfileCalendarPage} />
           <ProtectedRoute path='/quiz' component={QuizPage} />
           <ProtectedRoute
             path='/quiz-interjacent'

src/components/Calendar/calendarComponent.scss

@@ -1,6 +1,6 @@
 .calendar-component {
   position: relative;
-  margin-top: 80px;
+  margin-top: 30px;
   margin-bottom: 60px;
   background-color: #f9f9f9;
   padding-left: 68px;

src/components/Profile/profile.scss

@@ -49,6 +49,12 @@
       border-radius: 12px;
       text-decoration: none;
       cursor: pointer;
+      transition: all 0.3s ease;
+
+      &:hover {
+        box-shadow: 6px 5px 20px rgb(87 98 80 / 21%);
+        transform: scale(1.02);
+      }
 
       @media (max-width: 1175px) {
         width: 48%;

src/components/Profile/profileHeader.scss

@@ -57,6 +57,11 @@
       font-size: 18px;
       line-height: 32px;
       color: #807777 !important;
+      transition: all 0.3s ease;
+
+      &:hover {
+        color: #261a1a !important;
+      }
     }
 
     @media (max-width: 800px) {

src/components/Profile/summary.scss

@@ -121,6 +121,12 @@
     line-height: 32px;
     color: white;
     border: none;
+    transition: all 0.3s ease;
+
+    &:hover {
+      box-shadow: 6px 5px 20px rgb(87 98 80 / 21%);
+      transform: scale(1.02);
+    }
 
     @media (max-width: 690px) {
       width: 120px;
@@ -257,6 +263,12 @@
         background: #FFFFFF;
         border-radius: 12px;
         padding: 35px 30px 30px 45px;
+        transition: all 0.3s ease;
+
+        &:hover {
+          box-shadow: 6px 5px 20px rgb(87 98 80 / 21%);
+          transform: scale(1.02);
+        }
 
         @media (max-width: 825px) {
           width: 100%;

src/components/ProfileCalendar/ProfileCalendar.js

@@ -9,6 +9,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,33 +49,19 @@ export const ProfileCalendar = () => {
     }, [month])
 
     return (
-        <section className='calendar'>
+        <div className='calendar'>
-            <div className='profile__calendar'>
+            <ProfileHeader/>
-                <Link className='calendar__back' to={`/profile`}>
+            <div className='container'>
-                    <div><img src={arrow} alt=''/>Вернуться назад</div>
+                <h2 className='summary__title'>Ваши отчеты</h2>
-                </Link>
+                <div className='summary__info'>
-                <h2 className='calendar__profile'>
+                    <div className='summary__person'>
-                    Добрый день, <span>{profileInfo.fio}</span>
+                        <img src={profileInfo.photo} className='summary__avatar'  alt='avatar'/>
-                </h2>
+                        <p className='summary__name'>{profileInfo.fio} {profileInfo.specification}</p>
-                <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'>
+                    <Link to='/profile/report'>
-                        <h3 className='calendar__title-text'>{profileInfo.position_name}</h3>
+                        <button className="calendar__btn">Заполнить отчет за день</button>
-                        <img className='calendar__title-img' src={rectangle} alt='img' />
-                    </div>
-                    <div>
-                        <Link to='/report'>
-                            <button className='calendar__btn' onClick={() => {
-                                dispatch(setReportDate(value))
-                            }}>Заполнить отчет за день</button>
                     </Link>
                 </div>
-                </div>
-            </div>
-
                 <div className='row'>
                     <div className='col-12 col-xl-12'>
                         <ProfileCalendarComponent reportsDates={reports} />
@@ -83,7 +70,8 @@ export const ProfileCalendar = () => {
                         </p>
                     </div>
                 </div>
+            </div>
             <Footer />
-        </section>
+        </div>
     )
 };

src/components/ProfileCalendar/ProfileCalendarComponent.js

@@ -85,7 +85,7 @@ export const ProfileCalendarComponent = ({reportsDates}) => {
                 <div className='calendar-component__form'>
                     {calendar.map((week) =>
                         week.map((day) => (
-                            <Link to='/report'>
+                            <Link to='/profile/report' key={day}>
                                 <button
                                     onClick={() => {
                                         dispatch(setReportDate(day))

src/components/ProfileCalendar/profileCalendar.scss

@@ -1,5 +1,21 @@
 .calendar {
-  font-family: 'LabGrotesque', sans-serif;
+  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);
+    }
+  }
 }

src/components/ReportForm/ReportForm.js

@@ -11,6 +11,8 @@ import ellipse from '../../images/ellipse.png'
 import remove from '../../images/remove.png'
 import addIcon from '../../images/addIcon.png'
 import {currentMonthAndDay, getReports} from '../Calendar/calendarHelper'
+import {ProfileHeader} from "../Profile/ProfileHeader";
+import {Footer} from "../Footer/Footer";
 import './reportForm.scss'
 import arrow from "../../images/right-arrow.png";
 
@@ -53,14 +55,21 @@ const ReportForm = () => {
 
   return (
       <section className='report-form'>
-        <div className='row'>
+        <ProfileHeader/>
-          <div className='col-xl-12 report__head'>
+        <div className='container'>
-            <Link className='calendar__back' to={`/ProfileCalendar`}>
+          <h2 className='summary__title'>Ваши отчеты - <span>добавить отчет</span></h2>
-              <div><img src={arrow} alt=''/>Вернуться назад</div>
+          <div>
+            <div className='report__head'>
+              <Link className='calendar__back' to={`/profile/profilecalendar`}>
+                <div><img src={arrow} alt=''/>Вернуться</div>
               </Link>
+            </div>
+          </div>
+
+          <div className='report-form__content'>
             <div className='report-form__block'>
               <div className='report-form__block-title'>
-                <h2>Добавить отчет</h2>
+                <h2>Добавление отчета за день</h2>
                 <h3>Дата заполнения отчета:</h3>
               </div>
               <div className='report-form__block-img'>
@@ -77,8 +86,6 @@ const ReportForm = () => {
                 <span>Какие задачи были выполнены?</span>
               </div>
             </div>
-          </div>
-        </div>
 
             <div className='row'>
               <div className='col-8'>
@@ -188,6 +195,9 @@ const ReportForm = () => {
                 </div>
               </div>
             </div>
+          </div>
+        </div>
+        <Footer/>
       </section>
   )
 };

src/components/ReportForm/reportForm.scss

@@ -1,14 +1,33 @@
 .report-form {
+  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;
+    }
+  }
+
+  &__content {
+    background: #FFFFFF;
+    border-radius: 12px;
+    margin: 25px 0 80px;
+    padding: 50px 40px;
+  }
 
   .report__head {
     margin-top: 20px;
   }
 
   &__block-title {
-    margin-top: 15px;
 
     h2 {
-      color: #282828;
+      color: #52B709;
       font-family: 'GT Eesti Pro Display';
       font-size: 3.3em;
       font-weight: 700;

src/pages/Profile.js

@@ -28,7 +28,7 @@ export const Profile = () => {
                     </div>
                 </div>
                 <div className='profile__items'>
-                    <Link to={'/ProfileCalendar'} className='item'>
+                    <Link to={'/profile/profilecalendar'} className='item'>
                         <div className='item__about'>
                             <img src={reportsIcon}  alt='report'/>
                             <h3>Ваша отчетность</h3>

src/pages/ProfileCalendarPage.js

@@ -3,7 +3,7 @@ import { WithLogout } from '../hoc/withLogout';
 import { ProfileCalendar } from '../../src/components/ProfileCalendar/ProfileCalendar';
 
 const ProfileCalendarPage = () => {
-    return <WithLogout><ProfileCalendar/></WithLogout>;
+    return <ProfileCalendar/>;
 };
 
 export default ProfileCalendarPage;

src/pages/ReportFormPage.js

@@ -2,6 +2,6 @@ import React from 'react';
 import { WithLogout } from '../hoc/withLogout';
 import ReportForm from '../components/ReportForm/ReportForm';
 
-const ReportFormPage = () => <WithLogout><ReportForm /></WithLogout>;
+const ReportFormPage = () => <ReportForm />;
 
 export default ReportFormPage;