new fixes

src/components/ProfileCalendar/ProfileCalendar.js

@@ -80,9 +80,11 @@ export const ProfileCalendar = () => {
                     </Link>
                 </div>
                 {loader ?
-                    <Loader height={80}  width={80} />
+                    <div className='loader__wrapper'>
+                        <Loader height={80}  width={80} />
+                    </div>
                     :
-                    <div className='row'>
+                    <div className='row calendar__wrapper'>
                         <div className='col-12 col-xl-12'>
                             <ProfileCalendarComponent setValueHandler={setValueHandler} value={value} reports={reports} totalHours={totalHours} />
                         </div>

src/components/ProfileCalendar/ProfileCalendarComponent.js

@@ -3,7 +3,7 @@ import arrow from '../../images/arrowCalendar.png'
 import rectangle from '../../images/rectangle__calendar.png'
 import calendarIcon from '../../images/calendar_icon.png'
 import moment from 'moment'
-import {calendarHelper, currentMonth, currentMonthAndDay, getReports} from '../Calendar/calendarHelper'
+import {calendarHelper, currentMonthAndDay, getReports, hourOfNum} from '../Calendar/calendarHelper'
 import {setReportDate, setRequestDate} from '../../redux/reportSlice';
 import {useDispatch} from "react-redux";
 import {Link} from "react-router-dom";
@@ -67,28 +67,35 @@ export const ProfileCalendarComponent = React.memo(({value, setValueHandler, rep
     return (
         <div className='calendar-component'>
             <div className='calendar-component__header'>
-                <h3>Мои отчеты</h3>
-                <div className='calendar-component__header-box' onClick={() => {
-                    setValueHandler(prevMonth())
-                    dispatch(setRequestDate(getReports(prevMonth())))
-                }}>
-                    <img src={arrow} alt='' />
-                    <span>
-                        {prevMonth().format('MMMM')}
-                    </span>
+                <div className='calendar-component__header-info'>
+                    <h3>Мои отчеты:</h3>
+                    <p className='calendar__hours'>
+                        {month} - <span> {totalHours} {hourOfNum(totalHours)} </span>
+                    </p>
                 </div>
-                <div className='calendar-component__header-box'>
-                    <span>{value.format('YYYY')}</span>
-                </div>
-                <div className='calendar-component__header-box' onClick={() => {
-                    setValueHandler(nextMonth())
-                    dispatch(setRequestDate(getReports(nextMonth())))
+                <div className='calendar-component__header-switcher'>
+                    <div className='calendar-component__header-box' onClick={() => {
+                        setValueHandler(prevMonth())
+                        dispatch(setRequestDate(getReports(prevMonth())))
+                    }}>
+                        <img src={arrow} alt='' />
+                        <span>
+                            {prevMonth().format('MMMM')}
+                        </span>
+                    </div>
+                    <div className='calendar-component__header-box'>
+                        <span>{value.format('YYYY')}</span>
+                    </div>
+                    <div className='calendar-component__header-box' onClick={() => {
+                        setValueHandler(nextMonth())
+                        dispatch(setRequestDate(getReports(nextMonth())))
 
-                }}>
-                    <span>
-                        {nextMonth().format('MMMM')}
-                    </span>
-                    <img src={arrow} alt='' />
+                    }}>
+                        <span>
+                            {nextMonth().format('MMMM')}
+                        </span>
+                        <img src={arrow} alt='' />
+                    </div>
                 </div>
             </div>
 
@@ -128,9 +135,6 @@ 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

@@ -21,8 +21,27 @@
     }
   }
 
+  .loader__wrapper {
+    min-height: 719px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    @media (max-width: 1000px) {
+      min-height: 645px;
+    }
+  }
+
+
+  .calendar__wrapper {
+    min-height: 719px;
+
+    @media (max-width: 1000px) {
+      min-height: auto;
+    }
+  }
+
   .loader {
-    margin: 20px 0 50px;
     &:hover {
       path {
         fill: #ffffff;