fixes

src/App.js

@@ -19,6 +19,9 @@ import {ResultPage} from './pages/quiz/ResultPage'
 import {Profile} from './pages/Profile/Profile.js'
 import {Summary} from './pages/Summary/Summary'
 import {ViewReport} from './pages/ViewReport/ViewReport'
+import {Tracker} from './pages/Tracker/Tracker'
+import {Payouts} from './pages/Payouts/Payouts'
+import {Settings} from './pages/Settings/Settings'
 
 import './fonts/stylesheet.css'
 import 'bootstrap/dist/css/bootstrap.min.css'
@@ -58,6 +61,9 @@ const App = () => {
               <Route exact path='calendar' element={<ProfileCalendar/>}/>
               <Route exact path='summary' element={<Summary/>}/>
               <Route exact path='view' element={<ViewReport/>}/>
+              <Route exact path='tracker' element={<Tracker/>}/>
+              <Route exact path='payouts' element={<Payouts/>}/>
+              <Route exact path='settings' element={<Settings/>}/>
             </Route>
 
             <Route path="*" element={<Navigate to="/" replace/>}/>

src/components/Calendar/calendar.scss

@@ -95,6 +95,18 @@
       box-shadow: 6px 5px 20px rgb(87 98 80 / 21%);
       transform: scale(1.02);
     }
+
+    @media (max-width: 800px) {
+      width: auto;
+      height: auto;
+      padding: 15px;
+      white-space: nowrap;
+    }
+
+    @media (max-width: 590px) {
+      padding: 8px;
+      font-size: 12px;
+    }
   }
 
   &__hours {
@@ -104,7 +116,8 @@
     letter-spacing: normal;
     line-height: 30px;
     text-align: left;
-    margin-left: 68px;
+    margin: 50px 0 0;
+    text-transform: capitalize;
 
     span {
       font-weight: 100;

src/components/Calendar/calendarComponent.scss

@@ -6,7 +6,7 @@
   padding-left: 68px;
   padding-right: 54px;
   padding-top: 48px;
-  padding-bottom: 94px;
+  padding-bottom: 40px;
   font-family: 'LabGrotesque', sans-serif;
 
   &__header {
@@ -20,6 +20,10 @@
       letter-spacing: normal;
       line-height: 30px;
       text-align: left;
+
+      @media (max-width: 500px) {
+        font-size: 1.7em;
+      }
     }
 
     &-box {
@@ -42,6 +46,10 @@
         text-align: left;
         margin-left: 10px;
         cursor: pointer;
+
+        @media (max-width: 500px) {
+          font-size: 1.2em;
+        }
       }
     }
   }
@@ -79,8 +87,9 @@
 
     button {
       margin: 0 auto;
-      width: 125px;
+      //width: 125px;
-      height: 42px;
+      //height: 42px;
+      padding: 0 5px;
       box-shadow: 0 0 59px rgba(44, 44, 44, 0.05);
       border-radius: 5px;
       border: 1px solid #c4c4c4;
@@ -94,35 +103,67 @@
       text-align: center;
 
       a {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 115px;
+        height: 42px;
         text-decoration: none;
         color: #000000;
-      }
+
-    }
+        img {
-  }
+          width: 16px;
+          height: 16px;
+          margin: 0 10px 0 0;
         }
 
         @media (max-width: 1200px) {
-  .calendar-component {
+          width: 90px;
-    &__form {
-      button {
-        width: 100px;
           height: 40px;
         }
-    }
-  }
-}
 
+        @media (max-width: 968px) {
+          width: 62px;
+          height: 40px;
+          font-size: 10px;
+
+          img {
+            margin-right: 2px;
+          }
+        }
+
+        @media (max-width: 610px) {
+          img {
+            display: none;
+          }
+          width: auto;
+          height: auto;
+        }
+      }
+
+      @media (max-width: 610px) {
+        width: 55px;
+        height: 45px;
+      }
+
+      @media (max-width: 480px) {
+        width: 45px;
+        height: 35px;
+      }
+    }
+  }
+}
 @media (max-width: 968px) {
   .calendar-component {
     margin-bottom: 40px;
-    padding: 28px 0 48px 0;
+    padding: 28px 10px 48px 10px;
 
     &__header {
-      h3 {
+      //h3 {
-        position: absolute;
+      //  position: absolute;
-        top: -10%;
+      //  top: -10%;
-        left: 25%;
+      //  left: 25%;
-      }
+      //}
 
       &-box {
         margin-left: 20px;
@@ -132,114 +173,103 @@
     &__rectangle {
       margin: 24px 0;
     }
-
-    &__form {
-      button {
-        width: 72px;
-        height: 40px;
-
-        img {
-          display: none;
-        }
-      }
-    }
-  }
-}
-
-@media (max-width: 768px) {
-  .calendar-component__form > button {
-    width: 70px;
-    height: 40px;
-
-    img {
-      display: none;
-    }
-  }
-}
-
-@media (max-width: 540.98px) {
-  .calendar-component__form > button {
-    width: 68px;
-    height: 40px;
   }
 }
 
-@media (max-width: 520.98px) {
+//@media (max-width: 768px) {
-  .calendar-component__form > button {
+//  .calendar-component__form > button {
-    width: 66px;
+//    width: 70px;
-    height: 40px;
+//    height: 40px;
-  }
+//
-}
+//    img {
+//      display: none;
+//    }
+//  }
+//}
 
-@media (max-width: 500.98px) {
+//@media (max-width: 540.98px) {
-  .calendar-component__form > button {
+//  .calendar-component__form > button {
-    width: 64px;
+//    width: 68px;
-    height: 40px;
+//    height: 40px;
-  }
+//  }
-}
+//}
-
+//
-@media (max-width: 480.98px) {
+//@media (max-width: 520.98px) {
-  .calendar-component__form > button {
+//  .calendar-component__form > button {
-    width: 60px;
+//    width: 66px;
-    height: 40px;
+//    height: 40px;
-  }
+//  }
-}
+//}
-
+//
-@media (max-width: 460.98px) {
+//@media (max-width: 500.98px) {
-  .calendar-component__form > button {
+//  .calendar-component__form > button {
-    width: 56px;
+//    width: 64px;
-    height: 40px;
+//    height: 40px;
-  }
+//  }
-}
+//}
-
+//
-@media (max-width: 440.98px) {
+//@media (max-width: 480.98px) {
-  .calendar-component__form > button {
+//  .calendar-component__form > button {
-    width: 52px;
+//    width: 60px;
-    height: 40px;
+//    height: 40px;
-  }
+//  }
-}
+//}
-
+//
-@media (max-width: 428.98px) {
+//@media (max-width: 460.98px) {
-  .calendar-component__form > button {
+//  .calendar-component__form > button {
-    width: 50px;
+//    width: 56px;
-    height: 40px;
+//    height: 40px;
-  }
+//  }
-}
+//}
-
+//
-@media (max-width: 414.98px) {
+//@media (max-width: 440.98px) {
-  .calendar-component__form > button {
+//  .calendar-component__form > button {
-    width: 49px;
+//    width: 52px;
-    height: 40px;
+//    height: 40px;
-  }
+//  }
-}
+//}
-
+//
-@media (max-width: 395.98px) {
+//@media (max-width: 428.98px) {
-  .calendar-component__form > button {
+//  .calendar-component__form > button {
-    width: 46px;
+//    width: 50px;
-    height: 40px;
+//    height: 40px;
-  }
+//  }
-}
+//}
-
+//
-@media (max-width: 350.98px) {
+//@media (max-width: 414.98px) {
-  .calendar-component__form > button {
+//  .calendar-component__form > button {
-    width: 44px;
+//    width: 49px;
-    height: 40px;
+//    height: 40px;
-  }
+//  }
-}
+//}
-
+//
-@media (max-width: 349.98px) {
+//@media (max-width: 395.98px) {
-  .calendar-component__form > button {
+//  .calendar-component__form > button {
-    width: 42px;
+//    width: 46px;
-    height: 40px;
+//    height: 40px;
-  }
+//  }
-}
+//}
-
+//
-@media (max-width: 346.98px) {
+//@media (max-width: 350.98px) {
-  .calendar-component__form > button {
+//  .calendar-component__form > button {
-    width: 40px;
+//    width: 44px;
-    height: 40px;
+//    height: 40px;
-  }
+//  }
-}
+//}
+//
+//@media (max-width: 349.98px) {
+//  .calendar-component__form > button {
+//    width: 42px;
+//    height: 40px;
+//  }
+//}
+//
+//@media (max-width: 346.98px) {
+//  .calendar-component__form > button {
+//    width: 40px;
+//    height: 40px;
+//  }
+//}
 
 .calendar__icon {
   margin-right: 10px;

src/components/Calendar/calendarHelper.js

@@ -30,6 +30,18 @@ export function getReports(value) {
   return getReports;
 }
 
+export function getCreatedDate(day) {
+  if (day) {
+    return `${new Date(day).getFullYear()}-${new Date(day).getMonth() + 1}-${new Date(day).getDate()}`
+  } else {
+    const date = new Date();
+    const dd = String(date.getDate()).padStart(2, '0');
+    const mm = String(date.getMonth() + 1).padStart(2, '0');
+    const yyyy = date.getFullYear();
+    return `${yyyy}-${mm}-${dd}`
+  }
+}
+
 export function currentMonth() {
   const currentMonth = moment().format('MMMM');
 
@@ -40,6 +52,10 @@ export function currentMonthAndDay(day) {
   return day.format('D MMMM');
 }
 
+export function getCorrectDate(day) {
+  return `${new Date(day).getDate()}-${new Date(day).getMonth() + 1}-${new Date(day).getFullYear()}`
+};
+
 export function currentMonthAndDayReportPage() {
   return moment().format('D MMMM');
 }

src/components/ProfileCalendar/ProfileCalendar.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react'
 import {useDispatch, useSelector} from 'react-redux'
 
-import {currentMonth, getReports} from '../Calendar/calendarHelper'
+import {getReports} from '../Calendar/calendarHelper'
 import { Link } from 'react-router-dom'
 import moment from "moment";
 
@@ -24,7 +24,6 @@ export const ProfileCalendar = () => {
     const dispatch = useDispatch();
     const profileInfo = useSelector(getProfileInfo)
     const requestDates = useSelector(getRequestDates)
-    const [month, setMonth] = useState('');
     const [value, setValue] = useState(moment())
     const [reports, setReports] = useState([]);
     const [totalHours, setTotalHours] = useState(0);
@@ -59,10 +58,6 @@ export const ProfileCalendar = () => {
             })
     }, [requestDates]);
 
-    useEffect(() => {
-        setMonth(currentMonth)
-    }, [month]);
-
     return (
         <div className='profile__calendar'>
             <ProfileHeader/>
@@ -71,7 +66,7 @@ export const ProfileCalendar = () => {
                 <div className='summary__info'>
                     <div className='summary__person'>
                         <img src={urlForLocal(profileInfo.photo)} className='summary__avatar'  alt='avatar'/>
-                        <p className='summary__name'>{profileInfo.fio} {profileInfo.specification}</p>
+                        <p className='summary__name'>{profileInfo.fio}, {profileInfo.specification} разработчик</p>
                     </div>
                     <Link to='/report'>
                         <button className="calendar__btn" onClick={() => {
@@ -84,10 +79,7 @@ export const ProfileCalendar = () => {
                     :
                     <div className='row'>
                         <div className='col-12 col-xl-12'>
-                            <ProfileCalendarComponent setValueHandler={setValueHandler} value={value} reports={reports} />
+                            <ProfileCalendarComponent setValueHandler={setValueHandler} value={value} reports={reports} totalHours={totalHours} />
-                            <p className='calendar__hours'>
-                                {month} : <span> {totalHours} часов </span>
-                            </p>
                         </div>
                     </div>
                 }

src/components/ProfileCalendar/ProfileCalendarComponent.js

@@ -3,7 +3,7 @@ import ellipse from '../../images/ellipse.png'
 import rectangle from '../../images/rectangle__calendar.png'
 import calendarIcon from '../../images/calendar_icon.png'
 import moment from 'moment'
-import {calendarHelper, currentMonthAndDay, getReports} from '../Calendar/calendarHelper'
+import {calendarHelper, currentMonth, currentMonthAndDay, getReports} from '../Calendar/calendarHelper'
 import {setReportDate, setRequestDate} from '../../redux/reportSlice';
 import {useDispatch} from "react-redux";
 import {Link} from "react-router-dom";
@@ -11,18 +11,19 @@ import {Link} from "react-router-dom";
 import 'moment/locale/ru'
 import './../Calendar/calendarComponent.scss'
 
-export const ProfileCalendarComponent = React.memo(({value, setValueHandler, reports}) => {
+export const ProfileCalendarComponent = React.memo(({value, setValueHandler, reports, totalHours}) => {
     const dispatch = useDispatch();
     const [currentDay] = useState(moment())
     const [calendar, setCalendar] = useState([])
+    const [month, setMonth] = useState('');
 
     useEffect(() => {
         setCalendar(calendarHelper(value))
     }, [value])
 
-    // function beforeToday(day) {
+    useEffect(() => {
-    //     return day.isBefore(new Date(), 'day')
+        setMonth(value.format('MMMM'))
-    // }
+    }, [month]);
 
     function isToday(day) {
         return day.isSame(new Date(), 'day')
@@ -76,6 +77,9 @@ export const ProfileCalendarComponent = React.memo(({value, setValueHandler, rep
                         {prevMonth().format('MMMM')}
                     </span>
                 </div>
+                <div className='calendar-component__header-box'>
+                    <span>{value.format('YYYY')}</span>
+                </div>
                 <div className='calendar-component__header-box'>
                     <img src={ellipse} alt='' />
                     <span onClick={() => {
@@ -124,6 +128,9 @@ export const ProfileCalendarComponent = React.memo(({value, setValueHandler, rep
                     )}
                 </div>
             </div>
+            <p className='calendar__hours'>
+                {month} : <span> {totalHours} часов </span>
+            </p>
         </div>
     )
 })

src/components/ProfileCalendar/profileCalendar.scss

@@ -15,6 +15,10 @@
 
   .summary__info {
     padding-right: 25px;
+
+    @media (max-width: 500px) {
+      padding-right: 5px;
+    }
   }
 
   .loader {

src/components/ProfileHeader/ProfileHeader.js

@@ -55,14 +55,16 @@ export const ProfileHeader = () => {
             <nav className='profileHeader__nav'>
               <NavLink end to={'/profile/summary'}>Резюме</NavLink>
               <NavLink end to={'/profile'}>Отчетность</NavLink>
-              <NavLink end to={'/'}>Трекер</NavLink>
+              <NavLink end to={'/profile/tracker'}>Трекер</NavLink>
-              <NavLink end to={'/'}>Выплаты</NavLink>
+              <NavLink end to={'/profile/payouts'}>Выплаты</NavLink>
-              <NavLink end to={'/'}>Настройки</NavLink>
+              <NavLink end to={'/profile/settings'}>Настройки</NavLink>
             </nav>
 
             <div className='profileHeader__personalInfo'>
               <h3 className='profileHeader__personalInfoName'>{profileInfo?.fio}</h3>
+              <NavLink end to={'/profile'}>
                 <img src={profileInfo.photo ? urlForLocal(profileInfo.photo) : ""} className='profileHeader__personalInfoAvatar' alt='avatar'/>
+              </NavLink>
             </div>
           </div>
         </div>

src/components/ProfileHeader/profileHeader.scss

@@ -71,6 +71,10 @@
         font-size: 12px;
       }
     }
+
+    @media (max-width: 450px) {
+      column-gap: 8px;
+    }
   }
 
   &__personalInfo {

src/components/ReportForm/ReportForm.js

@@ -2,6 +2,7 @@ import React, {useState, useEffect} from 'react'
 import {useSelector} from 'react-redux'
 import {Link, useNavigate} from 'react-router-dom'
 import DatePicker, { registerLocale } from "react-datepicker"
+import {getCorrectDate, getCreatedDate} from '../Calendar/calendarHelper'
 import ru from "date-fns/locale/ru"
 registerLocale("ru", ru);
 
@@ -27,18 +28,6 @@ const ReportForm = () => {
   const navigate= useNavigate();
   const reportDate = useSelector(getReportDate);
 
-  const getCreatedDate = (day) => {
-    if (day) {
-      return `${new Date(day).getFullYear()}-${new Date(day).getMonth() + 1}-${new Date(day).getDate()}`
-    } else {
-      const date = new Date();
-      const dd = String(date.getDate()).padStart(2, '0');
-      const mm = String(date.getMonth() + 1).padStart(2, '0');
-      const yyyy = date.getFullYear();
-      return `${yyyy}-${mm}-${dd}`
-    }
-  };
-
   useEffect(() => {
     initListeners()
   }, [])
@@ -130,7 +119,7 @@ const ReportForm = () => {
                     src={calendarIcon}
                     alt=''
                 />
-                {getCreatedDate(startDate)}
+                {getCorrectDate(startDate)}
               </div>
               <DatePicker
                   className='datePicker'
@@ -184,9 +173,11 @@ const ReportForm = () => {
                                        : input
                                  }))}/>
                         </div>
+                        {index > 0 &&
                         <div className='report-form__task-remove'>
                           <img onClick={() => deleteInput(index)} src={remove} alt=''/>
                         </div>
+                        }
                       </form>
                   )
                 })}
@@ -196,7 +187,6 @@ const ReportForm = () => {
                   <span>Добавить еще </span>
                 </div>
               </div>
-              <div className='col-4'></div>
             </div>
 
         <div className='row'>

src/components/ReportForm/reportForm.scss

@@ -18,6 +18,10 @@
     border-radius: 12px;
     margin: 25px 0 80px;
     padding: 50px 40px;
+
+    @media (max-width: 555px) {
+      padding: 25px 20px;
+    }
   }
 
   .report__head {
@@ -53,6 +57,10 @@
       letter-spacing: normal;
       line-height: 48.74px;
       text-align: left;
+
+      @media (max-width: 555px) {
+        font-size: 2.5em;
+      }
     }
 
     h3 {
@@ -65,6 +73,11 @@
       text-align: left;
       margin-top: 52px;
       margin-bottom: 35px;
+
+      @media (max-width: 555px) {
+        margin-top: 25px;
+        margin-bottom: 15px;
+      }
     }
   }
 
@@ -84,6 +97,7 @@
     letter-spacing: normal;
     line-height: normal;
     text-align: left;
+    cursor: pointer;
 
     img {
       margin-left: 20px;
@@ -102,7 +116,7 @@
       font-style: normal;
       letter-spacing: normal;
       line-height: 48.74px;
-      width: 40px;
+      width: 12px;
     }
 
     &-list {
@@ -144,16 +158,25 @@
         line-height: normal;
         text-align: left;
         margin-bottom: 26px;
+        white-space: nowrap;
       }
     }
 
     &-title {
-      &--description {
+      //&--description {
-        margin-left: 20px;
+      //  margin-left: 20px;
-      }
+      //}
 
       &--hours {
         margin-left: 330px;
+
+        @media (max-width: 810px) {
+          margin-left: 125px;
+        }
+
+        @media (max-width: 610px) {
+          margin-left: 25px;
+        }
       }
     }
 
@@ -161,6 +184,10 @@
       margin-left: 20px;
       display: flex;
       align-items: center;
+
+      img {
+        cursor: pointer;
+      }
     }
 
     &-form {
@@ -186,6 +213,14 @@
           font-size: 1.8em;
           padding-left: 20px;
           padding-right: 20px;
+
+          @media (max-width: 810px) {
+            width: 250px;
+          }
+
+          @media (max-width: 610px) {
+            width: 150px;
+          }
         }
       }
 
@@ -200,6 +235,18 @@
           outline: none;
           font-size: 1.8em;
           text-align: center;
+
+          @media (max-width: 500px) {
+            width: 100px;
+          }
+
+          @media (max-width: 440px) {
+            width: 75px;
+          }
+
+          @media (max-width: 410px) {
+            width: 50px;
+          }
         }
       }
     }
@@ -235,6 +282,11 @@
       padding-left: 20px;
       padding-right: 20px;
       outline: none;
+
+      @media (max-width: 610px) {
+        max-width: 460px;
+        width: 100%;
+      }
     }
   }
 

src/helper.js

@@ -3,7 +3,7 @@ export function createMarkup(text) {
 }
 
 export function transformHtml(text) {
-  let startHtml = {__html: text.split('<h2>').join('<br><h2>').split('<br>')};
+  let startHtml = {__html: text.split('<h4> || <h3> || <h2> || <h1>').join('<br><h2>').split('<br>')};
   startHtml = startHtml.__html.filter((el) =>
       el !== null && el !== "" || el === 0
   );

src/pages/Payouts/Payouts.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
+
+export const Payouts = () => {
+    return (
+        <div className='payouts'>
+            <ProfileHeader />
+        </div>
+    )
+};

src/pages/Profile/Profile.js

@@ -31,7 +31,7 @@ export const Profile = () => {
           <div className='summary__info'>
             <div className='summary__person'>
               <img src={profileInfo.photo ? urlForLocal(profileInfo.photo) : ''} className='summary__avatar' alt='avatar'/>
-              <p className='summary__name'>{profileInfo.fio} {profileInfo.specification}</p>
+              <p className='summary__name'>{profileInfo.fio}, {profileInfo.specification} разработчик</p>
             </div>
           </div>
           <div className='profile__items'>

src/pages/Settings/Settings.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
+
+export const Settings = () => {
+    return (
+        <div className='settings'>
+            <ProfileHeader />
+        </div>
+    )
+};

src/pages/Summary/Summary.js

@@ -34,7 +34,7 @@ export const Summary = () => {
             <div className='summary__info'>
               <div className='summary__person'>
                 <img src={urlForLocal(profileInfo.photo)} className='summary__avatar' alt='avatar'/>
-                <p className='summary__name'>{profileInfo.fio} {profileInfo.specification}</p>
+                <p className='summary__name'>{profileInfo.fio}, {profileInfo.specification} разработчик</p>
               </div>
               {!openGit &&
               <button className='summary__git' onClick={() => setOpenGit(true)}>Git</button>

src/pages/Summary/summary.scss

@@ -62,6 +62,10 @@
       padding: 0 20px;
       min-height: 80px;
     }
+
+    @media (max-width: 500px) {
+      padding: 0 5px;
+    }
   }
 
   &__person {
@@ -72,6 +76,10 @@
     @media (max-width: 690px) {
       column-gap: 20px;
     }
+
+    @media (max-width: 550px) {
+      column-gap: 10px;
+    }
   }
 
   &__avatar {
@@ -92,6 +100,14 @@
     font-size: 16px;
     line-height: 32px;
     position: relative;
+    white-space: nowrap;
+
+    @media (max-width: 915px) {
+      max-width: 220px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
 
     @media (max-width: 690px) {
       font-size: 14px;
@@ -99,6 +115,18 @@
       line-height: 15px;
     }
 
+    @media (max-width: 640px) {
+      max-width: 180px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      margin: 0;
+    }
+
+    @media (max-width: 450px) {
+      max-width: 120px;
+    }
+
     &:after {
       content: '';
       position: absolute;

src/pages/Tracker/Tracker.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+import {ProfileHeader} from "../../components/ProfileHeader/ProfileHeader";
+
+export const Tracker = () => {
+    return (
+        <div className='tacker'>
+            <ProfileHeader />
+        </div>
+    )
+};

src/pages/ViewReport/ViewReport.js

@@ -10,22 +10,12 @@ import {Footer} from "../../components/Footer/Footer";
 
 import arrow from "../../images/right-arrow.png";
 import arrowSwitchDate from "../../images/arrowViewReport.png";
+import {apiRequest} from "../../api/request";
+import {getCorrectDate, getCreatedDate} from '../../components/Calendar/calendarHelper'
 
 import './viewReport.scss'
-import {apiRequest} from "../../api/request";
 
 export const ViewReport = () => {
-    const getCreatedDate = (day) => {
-        if (day) {
-            return `${new Date(day).getFullYear()}-${new Date(day).getMonth() + 1}-${new Date(day).getDate()}`
-        } else {
-            const date = new Date();
-            const dd = String(date.getDate()).padStart(2, '0');
-            const mm = String(date.getMonth() + 1).padStart(2, '0');
-            const yyyy = date.getFullYear();
-            return `${yyyy}-${mm}-${dd}`
-        }
-    };
     const reportDate = useSelector(getReportDate);
 
     const [taskText, setTaskText] = useState([]);
@@ -91,7 +81,7 @@ export const ViewReport = () => {
                         <img src={arrow} alt='arrow'/><p>Вернуться</p>
                     </Link>
                     <div className='viewReport__bar'>
-                        <h3 className='viewReport__bar__date'>{getCreatedDate(reportDay)}</h3>
+                        <h3 className='viewReport__bar__date'>{getCorrectDate(reportDay)}</h3>
                         <p className='viewReport__bar__hours'>Вами потрачено на работу : <span>{totalHours} часов</span></p>
                         {/*<div className='viewReport__bar__progressBar'>*/}
                         {/*    <span></span>*/}
@@ -103,7 +93,7 @@ export const ViewReport = () => {
                     <div className='viewReport__switchDate__prev switchDate' onClick={() => previousDay()}>
                         <img src={arrowSwitchDate} alt='arrow'/>
                     </div>
-                    <p>{getCreatedDate(reportDay)}</p>
+                    <p>{getCorrectDate(reportDay)}</p>
                     <div className={`viewReport__switchDate__next switchDate ${getCreatedDate(currentDay) === getCreatedDate(reportDay) ? 'disable' : ''}`} onClick={() => nextDay()}>
                         <img src={arrowSwitchDate} alt='arrow'/>
                     </div>

src/pages/ViewReport/viewReport.scss

@@ -27,6 +27,10 @@
     span {
       color: #52B709;
     }
+
+    @media (max-width: 500px) {
+      font-size: 18px;
+    }
   }
 
   &__back {
@@ -60,11 +64,20 @@
     height: 72px;
     justify-content: space-between;
 
+    @media (max-width: 500px) {
+      column-gap: 0;
+      justify-content: space-between;
+    }
+
     &__date {
       font-weight: 500;
       font-size: 22px;
       line-height: 32px;
       color: #000000;
+
+      @media (max-width: 500px) {
+        font-size: 16px;
+      }
     }
 
     &__hours {
@@ -73,6 +86,10 @@
       line-height: 32px;
       color: #000000;
 
+      @media (max-width: 500px) {
+        font-size: 11px;
+      }
+
       span {
         color: #52B709;
         font-weight: 700;
@@ -120,6 +137,11 @@
     column-gap: 140px;
     align-items: center;
 
+    @media (max-width: 500px) {
+      column-gap: 0;
+      justify-content: space-between;
+    }
+
     p {
       font-weight: 400;
       font-size: 18px;
@@ -164,6 +186,10 @@
     margin: 0 -28px;
     overflow: hidden;
     position: relative;
+
+    @media (max-width: 1205px) {
+      margin: 0;
+    }
   }
 
   &__done {
@@ -171,6 +197,58 @@
     border-collapse: separate;
     border-spacing: 28px 0;
 
+
+    @media (max-width: 1205px) {
+      display: grid;
+      border-collapse: collapse;
+      thead {
+        display: grid;
+
+        tr {
+          display: grid;
+          grid-template-columns: 74% calc(26% - 28px);
+          column-gap: 28px;
+        }
+      }
+
+      tbody {
+        display: grid;
+
+        tr {
+          display: grid;
+          grid-template-columns: 74% calc(26% - 28px);
+          column-gap: 28px;
+        }
+      }
+    }
+
+    @media (max-width: 900px) {
+      thead {
+        tr {
+          th {
+            padding: 15px;
+          }
+        }
+      }
+
+      tbody {
+        tr {
+          td {
+            padding: 15px;
+            display: flex;
+            justify-content: space-between;
+          }
+        }
+      }
+    }
+
+    @media (max-width: 650px) {
+      tr {
+        grid-template-columns: 74% calc(26% - 10px) !important;
+        column-gap: 10px !important;
+      }
+    }
+
     th {
       padding: 32px 40px;
       background: white;
@@ -179,6 +257,11 @@
       font-size: 22px;
       line-height: 32px;
       color: #000000;
+
+      @media (max-width: 650px) {
+        font-size: 16px;
+        line-height: 20px;
+      }
     }
 
     td {
@@ -190,6 +273,16 @@
         font-size: 12px;
         line-height: 24px;
         color: #000000;
+
+        @media (max-width: 750px) {
+          font-size: 10px;
+          line-height: 18px;
+        }
+
+        @media (max-width: 465px) {
+          text-align: center;
+          line-height: 14px;
+        }
       }
     }
 
@@ -203,6 +296,15 @@
         font-size: 17px;
         line-height: 32px;
         color: #000000;
+
+        @media (max-width: 750px) {
+          font-size: 14px;
+          line-height: 20px;
+        }
+
+        @media (max-width: 575px) {
+          text-align: center;
+        }
       }
     }
 
@@ -228,6 +330,19 @@
         align-items: center;
         min-width: 155px;
 
+        @media (max-width: 900px) {
+          column-gap: 0;
+          justify-content: space-between;
+          min-width: auto;
+          width: 100%;
+        }
+
+        @media (max-width: 575px) {
+          flex-direction: column;
+          justify-content: center;
+          row-gap: 10px;
+        }
+
         span {
           width: 48px;
           height: 48px;
@@ -240,6 +355,12 @@
           font-size: 22px;
           line-height: 32px;
           color: #000000;
+
+          @media (max-width: 900px) {
+            width: 25px;
+            height: 25px;
+            font-size: 18px;
+          }
         }
 
         p {
@@ -266,16 +387,30 @@
     margin: 25px 0;
     padding: 25px 35px;
 
+    @media (max-width: 650px) {
+      padding: 15px 20px;
+    }
+
     h3 {
       font-weight: 500;
       font-size: 22px;
       line-height: 32px;
+
+      @media (max-width: 650px) {
+        font-size: 16px;
+        line-height: 20px;
+      }
     }
 
     p {
       font-weight: 400;
       font-size: 12px;
       line-height: 24px;
+
+      @media (max-width: 650px) {
+        font-size: 10px;
+        line-height: 18px;
+      }
     }
   }
 
@@ -295,6 +430,10 @@
       line-height: 32px;
       color: #000000;
 
+      @media (max-width: 500px) {
+        font-size: 18px;
+      }
+
       span {
         color: #8BCC60;
         font-weight: 500;
@@ -304,5 +443,9 @@
 
   footer {
     margin-top: 70px;
+
+    @media (max-width: 575px) {
+      margin-top: 0;
+    }
   }
 }