finished calendar mobile page

src/components/Calendar/Calendar.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 import style from './Calendar.module.css';
 import calendarMale from '../../images/medium_male.png';
 import rectangle from '../../images/rectangle_secondPage.png';
@@ -23,8 +24,10 @@ const Calendar = () => {
               <h3 className={style.calendarHeader__title__text}>Frontend разработчик, Middle</h3>
               <img className={style.calendarHeader__title__img} src={rectangle} alt="img" />
             </div>
-            <div className={style.calendarHeader__btn}>
-              <button>Заполнить отчет за день</button>
+            <div>
+              <Link to="/report">
+                <button className={style.calendarHeader__btn}>Заполнить отчет за день</button>
+              </Link>
             </div>
           </div>
         </div>

src/components/Calendar/Calendar.module.css

@@ -1,3 +1,7 @@
+.calendar {
+  margin-bottom: 40px;
+}
+
 .calendar__title {
   color: #282828;
   font-family: 'GT Eesti Pro Display';
@@ -80,7 +84,7 @@
   .calendarHeader__info {
     width: 74%;
     height: 94px;
-    margin-top: 142px;
+    margin-top: 40px;
     margin-bottom: 40px;
   }
 }
@@ -89,7 +93,7 @@
   .calendarHeader__info {
     width: 84%;
     height: 94px;
-    margin-top: 112px;
+    margin-top: 20px;
   }
 }
 
@@ -124,6 +128,36 @@
   transform: translate(-50%, -50%);
 }
 
+@media (max-width: 575.98px) {
+  .calendarHeader__title {
+    margin-left: 100px;
+  }
+}
+
+@media (max-width: 505.98px) {
+  .calendarHeader__title {
+    margin-left: 80px;
+  }
+}
+
+@media (max-width: 455.98px) {
+  .calendarHeader__title {
+    margin-left: 60px;
+  }
+}
+
+@media (max-width: 375.98px) {
+  .calendarHeader__title {
+    margin-left: 40px;
+  }
+}
+
+@media (max-width: 348.98px) {
+  .calendarHeader__title {
+    margin-left: 0;
+  }
+}
+
 .calendarHeader__title__text {
   font-family: 'GT Eesti Pro Display';
   font-size: 2.7em;
@@ -136,9 +170,6 @@
 
 @media (max-width: 575.98px) {
   .calendarHeader__title__text {
-    position: absolute;
-    top: 0;
-    left: 10%;
     font-size: 4.4em;
   }
 }
@@ -157,7 +188,7 @@
 
 @media (max-width: 524.98px) {
   .calendarHeader__title__text {
-    font-size: 3.8em;
+    font-size: 3.6em;
   }
 }
 
@@ -191,11 +222,16 @@
   }
 }
 
+@media (max-width: 325.98px) {
+  .calendarHeader__title__text {
+    font-size: 2.7em;
+  }
+}
+
 @media (max-width: 575.98px) {
   .calendarHeader__title__img {
-    position: absolute;
-    bottom: -40px;
-    left: 20%;
+    width: 60%;
+    margin: 30px 0;
   }
 }
 
@@ -217,7 +253,7 @@
   }
 }
 
-.calendarHeader__btn > button {
+.calendarHeader__btn {
   width: 280px;
   height: 62px;
   box-shadow: 6px 5px 20px rgba(82, 151, 34, 0.21);
@@ -236,7 +272,6 @@
   font-family: 'Muller';
   font-size: 1.6em;
   letter-spacing: normal;
-  line-height: 71.88px;
   text-align: center;
 }
 

src/components/Calendar/CalendarComponent.js

@@ -42,8 +42,6 @@ const CalendarComponent = () => {
     return value.clone().add(1, 'month');
   }
 
-  //////////////////////////////////////////////////////////////////////////
-
   return (
     <div className={style.CalendarComponent}>
       <div className={style.CalendarComponent__header}>
@@ -64,13 +62,13 @@ const CalendarComponent = () => {
 
       <div className={style.CalendarComponent__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={style.CalendarComponent__form}>

src/components/Calendar/CalendarComponent.module.css

@@ -1,4 +1,5 @@
 .CalendarComponent {
+  position: relative;
   margin-top: 80px;
   margin-bottom: 60px;
   background-color: #f9f9f9;
@@ -31,7 +32,9 @@
 
 @media (max-width: 575.98px) {
   .CalendarComponent__header > h3 {
-    font-size: 1.6em;
+    position: absolute;
+    top: -10%;
+    left: 25%;
   }
 }
 
@@ -41,6 +44,12 @@
   margin-left: 40px;
 }
 
+@media (max-width: 575.98px) {
+  .CalendarComponent__header__box {
+    margin-left: 20px;
+  }
+}
+
 .CalendarComponent__header__box > img {
   width: 6px;
   height: 6px;
@@ -222,7 +231,7 @@
 }
 
 .before {
-  opacity: 0.2;
+  background-color: #f0f7e0 !important;
 }
 
 .today {
@@ -231,5 +240,5 @@
 }
 
 .selected {
-  background-color: yellow !important;
+  background-color: #f9f9c3 !important;
 }