finished calendar mobile page

src/App.js

@@ -8,6 +8,7 @@ const AuthPageForDevelopers = lazy(() => import('./pages/AuthPageForDevelopers')
 const HomePage = lazy(() => import('./pages/HomePage'));
 const CandidatePage = lazy(() => import('./pages/CandidatePage'));
 const CalendarPage = lazy(() => import('./pages/CalendarPage'));
+const ReportPage = lazy(() => import('./pages/ReportFormPage.js'));
 
 const App = () => {
   const [isAuth, setIsAuth] = useState(true);
@@ -26,6 +27,9 @@ const App = () => {
             <Route path="/calendar">
               <CalendarPage />
             </Route>
+            <Route path="/report">
+              <ReportPage />
+            </Route>
             <Route>
               <div>Not found page</div>
             </Route>

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}>
+            <div>
-              <button>Заполнить отчет за день</button>
+              <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;
+    width: 60%;
-    bottom: -40px;
+    margin: 30px 0;
-    left: 20%;
   }
 }
 
@@ -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;
 }

src/components/Home/Home.js

@@ -51,7 +51,7 @@ const tabsList = [
   },
 ];
 
-const Home = () => {
+const Home = ({ onTestFunc }) => {
   const [tabs, setTabs] = useState([]);
   const [candidates, setCandidates] = useState([]);
   const [tags, setTags] = useState([]);

src/components/ReportForm/ReportForm.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import style from './ReportForm.module.css';
+import calendarIcon from '../../images/calendar_icon.png';
+import ellipse from '../../images/ellipse.png';
+
+const ReportForm = () => {
+  return (
+    <section className="reportForm">
+      <div className="container">
+        <div className="row">
+          <div className="col-xl-12">
+            <div className={style.reportForm__header}>
+              <div className={style.reportForm__headerTitle}>
+                <h2>Добавить отчет</h2>
+                <h3>Дата заполнения отчета:</h3>
+              </div>
+              <div className={style.reportForm__headerImg}>
+                <img className={style.calendarIcon} src={calendarIcon} alt="" />
+                15 июня
+              </div>
+              <div className={style.reportForm__tasks}>
+                <img src={ellipse} alt="" />
+                <span>Какие задачи были выполнены?</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default ReportForm;

src/components/ReportForm/ReportForm.module.css

@@ -0,0 +1,73 @@
+.reportForm__headerTitle {
+  margin-top: 76px;
+}
+
+.reportForm__headerTitle > h2 {
+  color: #282828;
+  font-family: 'GT Eesti Pro Display';
+  font-size: 3.3em;
+  font-weight: 700;
+  font-style: normal;
+  letter-spacing: normal;
+  line-height: 48.74px;
+  text-align: left;
+}
+
+.reportForm__headerTitle > h3 {
+  font-family: 'GT Eesti Pro Display';
+  font-size: 2.1em;
+  font-weight: 400;
+  font-style: normal;
+  letter-spacing: normal;
+  line-height: 30px;
+  text-align: left;
+  margin-top: 52px;
+  margin-bottom: 35px;
+}
+
+.reportForm__headerImg {
+  width: 280px;
+  height: 42px;
+  box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
+  border-radius: 5px;
+  border: 1px solid #398208;
+  background-color: #ffffff;
+  display: flex;
+  align-items: center;
+  font-family: 'GT Eesti Pro Display';
+  font-size: 13px;
+  font-weight: 700;
+  font-style: normal;
+  letter-spacing: normal;
+  line-height: normal;
+  text-align: left;
+}
+
+.reportForm__headerImg > img {
+  margin-left: 20px;
+  margin-right: 20px;
+}
+
+.reportForm__tasks {
+  margin-top: 40px;
+  display: flex;
+  align-items: center;
+}
+
+.reportForm__tasks > img {
+  width: 6px;
+  height: 6px;
+  margin-left: 12px;
+  margin-right: 12px;
+}
+
+.reportForm__tasks > span {
+  color: #18586e;
+  font-family: 'GT Eesti Pro Display';
+  font-size: 2em;
+  font-weight: 500;
+  font-style: normal;
+  letter-spacing: normal;
+  line-height: 16.81px;
+  text-align: left;
+}

src/pages/ReportFormPage.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import ReportForm from '../components/ReportForm/ReportForm';
+
+const ReportFormPage = () => <ReportForm />;
+
+export default ReportFormPage;