reports adaptive

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/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,13 @@ 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

@@ -43,7 +43,7 @@ const ReportForm = () => {
   const [isFetching, setIsFetching] = useState(false);
   const [reportSuccess, setReportSuccess] = useState("");
   const [startDate, setStartDate] = useState(
-    reportDate ? new Date(reportDate._d) : new Date(),
+    reportDate ? new Date(reportDate._d) : new Date()
   );
   const [datePickerOpen, setDatePickerOpen] = useState(false);
 
@@ -73,7 +73,7 @@ const ReportForm = () => {
         (div) =>
           div.classList &&
           (div.classList.contains("report-form__block-img") ||
-            div.classList.contains("react-datepicker-popper")),
+            div.classList.contains("react-datepicker-popper"))
       )
     ) {
       setDatePickerOpen(false);
@@ -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) => {
@@ -212,7 +210,7 @@ const ReportForm = () => {
                                     task: e.target.value,
                                   }
                                 : input;
-                            }),
+                            })
                           )
                         }
                       />
@@ -238,7 +236,7 @@ const ReportForm = () => {
                                     hours_spent: Number(e.target.value),
                                   }
                                 : input;
-                            }),
+                            })
                           )
                         }
                       />

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>
           </>