reports adaptive

src/components/AuthBox/AuthBox.jsx

@@ -63,7 +63,7 @@ export const AuthBox = ({ title }) => {
           localStorage.setItem("role_status", res.status);
           localStorage.setItem(
             "access_token_expired_at",
-            res.access_token_expired_at
+            res.access_token_expired_at,
           );
           dispatch(auth(true));
           dispatch(setUserInfo(res));

src/components/Calendar/calendarComponent.scss

@@ -186,16 +186,26 @@
         }
       }
 
+      @media (max-width: 1200px) {
+        width: 110px;
+      }
+
       @media (max-width: 968px) {
+        width: 90px;
+        font-size: 11px;
+      }
+
+      @media (max-width: 680px) {
+        width: 70px;
         font-size: 10px;
       }
 
-      @media (max-width: 610px) {
+      @media (max-width: 550px) {
-        width: 55px;
+        width: 60px;
-        height: 45px;
+        height: 35px;
       }
 
-      @media (max-width: 480px) {
+      @media (max-width: 450px) {
         width: 45px;
         height: 35px;
       }

src/components/ProfileCalendar/ProfileCalendar.jsx

@@ -64,8 +64,8 @@ export const ProfileCalendar = () => {
     }
     apiRequest(
       `/reports/reports-by-date?${requestDates}&user_card_id=${localStorage.getItem(
-        "cardId"
+        "cardId",
-      )}`
+      )}`,
     ).then((reports) => {
       let spendTime = 0;
       for (const report of reports) {

src/components/ProfileCalendar/ProfileCalendarComponent.jsx

@@ -205,11 +205,11 @@ export const ProfileCalendarComponent = React.memo(
       <div className="calendar-component">
         <div className="calendar-component__header">
           <div className="calendar-component__header-info">
-            <h3>Мои отчеты:</h3>
+            <h3>Мои отчеты за </h3>
             <p className="calendar__hours">
               {month}&nbsp;
               <span>
-                {totalHours} {hourOfNum(totalHours)}{" "}
+                ({totalHours} {hourOfNum(totalHours)})
               </span>
             </p>
           </div>
@@ -316,13 +316,15 @@ export const ProfileCalendarComponent = React.memo(
                 ? `${getCorrectDate(startDate)} - ${getCorrectDate(endDate)}`
                 : `${getCorrectDate(endDate)} - ${getCorrectDate(startDate)}`
               : activePeriod
-                ? "Выберите начало диапазона"
+                ? "Выберите диапазон на календаре"
                 : "Выбрать диапазон"}
           </span>
           <span>
             {totalRangeHours
               ? `${totalRangeHours} ${hourOfNum(totalRangeHours)}`
-              : "0 часов"}
+              : endDate
+                ? "0 часов"
+                : ""}
           </span>
           {endDate && (
             <BaseButton

src/components/ReportForm/ReportForm.jsx

@@ -180,9 +180,7 @@ const ReportForm = () => {
                 <p className="report-form__task-title--description">
                   Краткое описание задачи
                 </p>
-                <p className="report-form__task-title--hours">
+                <p className="report-form__task-title--hours">Кол-во часов</p>
-                  Количество часов
-                </p>
               </div>
 
               {inputs.map((input, index) => {
@@ -299,7 +297,7 @@ const ReportForm = () => {
                   {isFetching ? <Loader /> : "Отправить"}
                 </button>
                 <p className="report-form__footer-text">
-                  Всего за день :{" "}
+                  Всего за день:{" "}
                   <span>
                     {totalHours} {hourOfNum(totalHours)}
                   </span>

src/components/ReportForm/reportForm.scss

@@ -352,6 +352,7 @@
 
   &__footer {
     display: flex;
+    flex-direction: column-reverse;
     align-items: center;
     margin-top: 20px;
 
@@ -380,16 +381,13 @@
     &-text {
       font-family: "GT Eesti Pro Display";
       font-size: 1.9em;
-      font-weight: 600;
       font-style: normal;
       letter-spacing: normal;
       line-height: 22.38px;
-      text-align: left;
+      margin-bottom: 20px;
-      margin-left: 40px;
-      margin-bottom: 0;
 
       span {
-        font-weight: 100;
+        font-weight: 600;
       }
     }
 

src/components/features/quiz/Instructions.jsx

@@ -47,7 +47,7 @@ export const Instruction = () => {
                 <img src={comment} alt="" />
               </div>
               <div className="instruction__text instruction__text_info">
-                Количество вопросов в тесте: <span>{countQuestions}</span>
+                Вопросов в тесте: <span>{countQuestions}</span>
               </div>
             </div>
           </>