finished reports adaptive

src/components/ReportForm/ReportForm.jsx

@@ -170,7 +170,7 @@ const ReportForm = () => {
             />
             <div className="report-form__task-list">
               <img src={ellipse} alt="" />
-              <span>Какие задачи были выполнены?</span>
+              <span>Какие задачи выполнены?</span>
             </div>
           </div>
 

src/components/ReportForm/reportForm.scss

@@ -166,7 +166,7 @@
         }
 
         @media (max-width: 610px) {
-          margin-left: 85px;
+          margin-left: 80px;
         }
       }
     }
@@ -472,12 +472,6 @@
           max-width: 141px;
         }
       }
-
-      &-list {
-        img {
-          display: none;
-        }
-      }
     }
   }
 }

src/pages/ViewReport/ViewReport.jsx

@@ -59,13 +59,12 @@ export const ViewReport = () => {
             task: task.task,
             id: task.id
           };
-          if (task.hours_spent) {
+          spendTime += Math.floor(task.hours_spent);
-            spendTime += Number(task.hours_spent);
+
-          }
           setTaskText((prevArray) => [...prevArray, taskInfo]);
         });
       }
-      setTotalHours(spendTime);
+      setTotalHours(Math.floor(spendTime));
       setLoader(false);
     });
     previousReportDay.setDate(previousReportDay.getDate() - 1);
@@ -106,7 +105,7 @@ export const ViewReport = () => {
             <img src={arrow} alt="#" />
             <p>Вернуться</p>
           </Link>
-          <div className="viewReport__bar">
+          {/* <div className="viewReport__bar">
             <h3 className="viewReport__bar__date">
               {getCorrectDate(dateReport.id)}
             </h3>
@@ -116,16 +115,12 @@ export const ViewReport = () => {
                 {totalHours} {hourOfNum(totalHours)}
               </span>
             </p>
-          </div>
+          </div> */}
         </div>
-        <div className="viewReport__switchDate">
+        <div className="viewReport__switch-date">
-          <div
+          <div onClick={() => previousDay()}>
-            onClick={() => {
-              previousDay();
-            }}
-          >
             <Link to={`../view/${getCreatedDate(previousReportDay)}`}>
-              <div className="viewReport__switchDate__prev switchDate">
+              <div className="viewReport__switch-date__prev switch-date">
                 <img src={arrowSwitchDate} alt="arrow" />
               </div>
             </Link>
@@ -140,7 +135,7 @@ export const ViewReport = () => {
             }`}
           >
             <Link to={`../view/${getCreatedDate(nextReportDay)}`}>
-              <div className={`viewReport__switchDate__next switchDate`}>
+              <div className={`viewReport__switch-date__next switch-date`}>
                 <img src={arrowSwitchDate} alt="arrow" />
               </div>
             </Link>
@@ -154,7 +149,7 @@ export const ViewReport = () => {
                 <thead>
                   <tr>
                     <th>
-                      <p>Какие задачи были выполнены?</p>
+                      <p>Какие задачи выполнены?</p>
                     </th>
                     <th>
                       <p>Время</p>
@@ -173,9 +168,9 @@ export const ViewReport = () => {
                           </td>
                           <td>
                             <div className="viewReport__done__hours__item">
-                              <span>{task.hours}</span>
+                              <span>{Math.floor(task.hours)}</span>
                               <p className="hours">
-                                {hourOfNum(task.hours)} на задачу
+                                {hourOfNum(Math.floor(task.hours))}
                               </p>
                             </div>
                           </td>

src/pages/ViewReport/viewReport.scss

@@ -139,11 +139,11 @@
     margin-bottom: 0;
   }
 
-  &__switchDate {
+  &__switch-date {
     display: flex;
-    margin: 30px 0;
+    margin: 20px 0;
     justify-content: center;
-    column-gap: 140px;
+    column-gap: 30px;
     align-items: center;
 
     @media (max-width: 500px) {
@@ -158,7 +158,7 @@
       color: #000000;
     }
 
-    .switchDate {
+    .switch-date {
       width: 48px;
       height: 48px;
       background: #8DC63F;
@@ -396,15 +396,11 @@
   &__item {
     display: flex;
     flex-direction: column;
-    row-gap: 22px;
+    row-gap: 10px;
     background: #FFFFFF;
     border-radius: 12px;
-    margin: 25px 0;
+    margin: 20px 0;
-    padding: 25px 35px;
+    padding: 15px;
-
-    @media (max-width: 650px) {
-      padding: 15px 20px;
-    }
 
     h3 {
       font-weight: 500;
@@ -420,11 +416,9 @@
     p {
       font-weight: 400;
       font-size: 15px;
-      line-height: 20px;
 
       @media (max-width: 650px) {
-        font-size: 10px;
+        font-size: 13px;
-        line-height: 18px;
       }
     }
   }