Merge branch 'main' of https://git.itguild.info/apuc/guild_front into fixed/components

src/components/ProfileCalendar/ProfileCalendar.jsx

@@ -95,11 +95,21 @@ export const ProfileCalendar = () => {
               alt="avatar"
             />
             <p className="summary__name">
-              {profileInfo?.fio || profileInfo?.username},{" "}
+              {profileInfo?.fio || profileInfo?.username}{" "}
-              {profileInfo.specification} разработчик
+              {profileInfo.specification}
             </p>
+            <hr />
+            <div className="summary__direction">Front End</div>
+            <div className="summary__level">Middle+</div>
           </div>
-          <Link to="/profile/calendar/report">
+          <div className="summary__skill">
+            <p>Ключевые навыки:</p>
+            <div>Java</div>
+            <div>Java</div>
+            <div>Solid</div>
+            <div>Java</div>
+          </div>
+          {/* <Link to="/profile/calendar/report">
             <button
               className="calendar__btn"
               onClick={() => {
@@ -109,7 +119,7 @@ export const ProfileCalendar = () => {
             >
               Заполнить отчет
             </button>
-          </Link>
+          </Link> */}
         </div>
         {loader ? (
           <div className="loader__wrapper">

src/components/ProfileCalendar/profileCalendar.scss

@@ -22,6 +22,25 @@
     @media (max-width: 500px) {
       padding-right: 5px;
     }
+
+    .summary__skill {
+      color: #6f6f6f;
+      font-size: 14px;
+      font-weight: 300;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      column-gap: 10px;
+
+      div {
+        font-size: 12px;
+        font-weight: 400;
+
+        border: #8dc63f 0.5px solid;
+        border-radius: 44px;
+        padding: 3px 20px;
+      }
+    }
   }
 
   .loader__wrapper {

src/pages/Summary/Summary.jsx

@@ -116,8 +116,8 @@ export const Summary = () => {
                 alt="avatar"
               />
               <p className="summary__name">
-                {profileInfo?.fio || profileInfo?.username},{" "}
+                {profileInfo?.fio || profileInfo?.username}{" "}
-                {profileInfo.specification} разработчик
+                {profileInfo.specification}
               </p>
               <hr />
               <div className="summary__direction">Front End</div>

src/pages/Summary/summary.scss

@@ -36,6 +36,7 @@
   }
 
   &__info {
+    width: 100%;
     min-height: 110px;
     background: white;
     border-radius: 12px;
@@ -64,6 +65,12 @@
     align-items: center;
     column-gap: 20px;
 
+    hr {
+      background-color: #00000081;
+      height: 30px;
+      width: 1px;
+    }
+
     @media (max-width: 825px) {
       column-gap: 20px;
     }
@@ -131,6 +138,7 @@
     border-radius: 44px;
     font-size: 14px;
     font-weight: 400;
+    padding: 5px 17px;
   }
 
   &__git {

src/pages/ViewReport/ViewReport.jsx

@@ -170,101 +170,87 @@ export const ViewReport = () => {
             </div>
           )}
         </div>
-        <div className="view-report__switch-date">
-          <div onClick={() => previousDay()}>
-            <Link
-              to={`/profile/calendar/view/${getCreatedDate(
-                previousReportDay
-              )}/${params.id}`}
-            >
-              <div className="view-report__switch-date__prev switch-date">
-                <img src={arrowSwitchDate} alt="arrow" />
-              </div>
-            </Link>
-          </div>
 
-          <p>{getCorrectDate(params.date)}</p>
-
-          <div
-            onClick={() => nextDay()}
-            className={`${
-              getCreatedDate(currentDay) === params.date ? "disable" : ""
-            }`}
-          >
-            <Link
-              to={`/profile/calendar/view/${getCreatedDate(nextReportDay)}/${
-                params.id
-              }`}
-            >
-              <div className={`view-report__switch-date__next switch-date`}>
-                <img src={arrowSwitchDate} alt="arrow" />
-              </div>
-            </Link>
-          </div>
-        </div>
         {loader && <Loader width={75} height={75} />}
         {Boolean(taskText.length) && (
           <div className="view-report__content">
-            <div className="table__container">
+            <div className="view-report__switch-date">
-              <table className="view-report__done">
+              <div onClick={() => previousDay()}>
-                <thead>
+                <Link
-                  <tr>
+                  to={`/profile/calendar/view/${getCreatedDate(
-                    <th>
+                    previousReportDay
-                      <p>Выполненные задачи</p>
+                  )}/${params.id}`}
-                    </th>
+                >
-                    <th>
+                  <div className="view-report__switch-date__prev switch-date">
-                      <p>Время</p>
+                    <img src={arrowSwitchDate} alt="arrow" />
-                    </th>
+                  </div>
-                  </tr>
+                </Link>
-                </thead>
+              </div>
-                <tbody>
+
-                  {taskText.length &&
+              <p>{getCorrectDate(params.date)}</p>
-                    taskText.map((task, index) => {
+
-                      return (
+              <div
-                        <tr key={task.id}>
+                onClick={() => nextDay()}
-                          <td>
+                className={`${
-                            <p>
+                  getCreatedDate(currentDay) === params.date ? "disable" : ""
-                              {index + 1}. {task.task}
+                }`}
-                            </p>
+              >
-                          </td>
+                <Link
-                          <td>
+                  to={`/profile/calendar/view/${getCreatedDate(
-                            <div className="view-report__done__hours__item">
+                    nextReportDay
-                              <span>{Math.floor(task.hours)}</span>
+                  )}/${params.id}`}
-                              <p className="hours">
+                >
-                                {hourOfNum(Math.floor(task.hours))}
+                  <div className={`view-report__switch-date__next switch-date`}>
-                              </p>
+                    <img src={arrowSwitchDate} alt="arrow" />
-                            </div>
+                  </div>
-                          </td>
+                </Link>
-                        </tr>
+              </div>
-                      );
-                    })}
-                  <tr>
-                    <td></td>
-                    <td>
-                      <span>
-                        Всего: {totalHours} {hourOfNum(totalHours)}
-                      </span>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
             </div>
-            {Boolean(difficulties.length) && (
+            <div className="view-report__done">
-              <div className="view-report__item">
+              <h2>Выполненные задачи</h2>
-                <h3>Возникшие сложности</h3>
+              {taskText.length &&
-                {difficulties.map((item, index) => {
+                taskText.map((task, index) => {
-                  return <p key={index}>{item}</p>;
+                  return (
+                    <div className="view-report__done-task" key={task.id}>
+                      <div>
+                        <p>
+                          {index + 1}. {task.task}
+                        </p>
+                      </div>
+
+                      <div className="view-report__done__hours__item">
+                        <span>{Math.floor(task.hours)}</span>
+                        <p className="hours">
+                          / {hourOfNum(Math.floor(task.hours))}
+                        </p>
+                      </div>
+                      <div>Задача ( On Review ) - Уведомления </div>
+                    </div>
+                  );
                 })}
-              </div>
+
-            )}
+              <p className="view-report__done-total-hours">
-            {Boolean(tomorrowTask.length) && (
+                Всего: {totalHours} <span>/ {hourOfNum(totalHours)}</span>
-              <div className="view-report__item">
+              </p>
-                <h3>Что планируется сделать завтра?</h3>
+            </div>
-                {tomorrowTask.map((item, index) => {
+            <div className="view-report__addition">
-                  return <p key={index}>{item}</p>;
+              {Boolean(difficulties.length) && (
-                })}
+                <div className="view-report__addition-item">
-              </div>
+                  <h3>Возникшие сложности</h3>
-            )}
+                  {difficulties.map((item, index) => {
+                    return <p key={index}>{item}</p>;
+                  })}
+                </div>
+              )}
+              {Boolean(tomorrowTask.length) && (
+                <div className="view-report__addition-item">
+                  <h3>Что планируется сделать завтра?</h3>
+                  {tomorrowTask.map((item, index) => {
+                    return <p key={index}>{item}</p>;
+                  })}
+                </div>
+              )}
+            </div>
           </div>
         )}
         {!Boolean(taskText.length) && !loader && (

src/pages/ViewReport/viewReport.scss

@@ -16,6 +16,12 @@
     }
   }
 
+  &__content {
+    background-color: #ffffff;
+    border-bottom-left-radius: 12px;
+    border-bottom-right-radius: 12px;
+  }
+
   &__info {
     display: flex;
     flex-direction: column;
@@ -60,7 +66,8 @@
     display: flex;
     margin-top: 20px;
     background: #ffffff;
-    border-radius: 12px;
+    border-top-left-radius: 12px;
+    border-top-right-radius: 12px;
     padding: 20px 33px;
     align-items: center;
     column-gap: 20px;
@@ -121,10 +128,10 @@
 
   &__switch-date {
     display: flex;
-    margin: 20px 0;
-    justify-content: center;
     column-gap: 30px;
     align-items: center;
+    padding: 20px 20px 20px 30px;
+    border-bottom: #eeeeee 1px solid;
 
     @media (max-width: 500px) {
       column-gap: 0;
@@ -132,17 +139,16 @@
     }
 
     p {
-      font-weight: 400;
+      font-weight: 500;
-      font-size: 18px;
+      font-size: 22px;
-      line-height: 32px;
+      color: #2e3a59;
-      color: #000000;
     }
 
     .switch-date {
-      width: 48px;
+      width: 20px;
-      height: 48px;
+      height: 47px;
-      background: #8dc63f;
+      background-color: #e5f1fb;
-      border-radius: 50px;
+      border-radius: 5px;
       display: flex;
       justify-content: center;
       align-items: center;
@@ -186,6 +192,34 @@
     border-collapse: separate;
     border-spacing: 28px 0;
 
+    h2 {
+      color: #1458dd;
+      font-size: 20px;
+      font-weight: 500;
+      padding: 35px;
+    }
+
+    &-task {
+      display: grid;
+      grid-template-columns: 40% 15% 30%;
+      align-items: center;
+      font-size: 15px;
+      font-weight: 500;
+      color: #111112;
+      justify-content: space-evenly;
+      margin: 0 0 20px 0;
+
+      div {
+        background-color: #f4f7ff;
+        height: 61px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 10px;
+        padding: 10px 20px;
+      }
+    }
+
     @media (max-width: 1205px) {
       display: grid;
       border-collapse: collapse;
@@ -309,57 +343,17 @@
       }
 
       &__item {
-        display: flex;
-        column-gap: 25px;
-        align-items: center;
-        min-width: 155px;
-
-        .hours {
-          font-size: 15px;
-
-          @media (max-width: 1170px) {
-            font-size: 13px;
-            text-align: center;
-          }
-        }
-
-        @media (max-width: 900px) {
-          column-gap: 0;
-          justify-content: space-between;
-          min-width: auto;
-          width: 100%;
-        }
-
-        @media (max-width: 775px) {
-          flex-direction: column;
-          justify-content: center;
-          row-gap: 10px;
-        }
-
         span {
-          max-width: 48px;
-          height: 48px;
-          background: #8dc63f;
-          border-radius: 50px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
           font-weight: 700;
-          font-size: 22px;
+          font-size: 20px;
-          line-height: 32px;
           color: #000000;
-          width: 100%;
+          margin: 5px;
-
-          @media (max-width: 900px) {
-            max-width: 40px;
-            height: 40px;
-          }
         }
 
         p {
           font-weight: 400;
-          font-size: 12px;
+          font-size: 15px;
-          line-height: 32px;
+          color: #6f6f6f;
         }
       }
 
@@ -369,40 +363,54 @@
         line-height: 32px;
       }
     }
-  }
 
-  &__item {
+    &-total-hours {
-    display: flex;
+      color: #000000;
-    flex-direction: column;
+      font-size: 20px;
-    row-gap: 10px;
-    background: #ffffff;
-    border-radius: 12px;
-    margin: 20px 0;
-    padding: 15px;
-
-    h3 {
       font-weight: 500;
-      font-size: 22px;
+      margin: 35px 0 0 30px;
-      line-height: 32px;
 
-      @media (max-width: 650px) {
+      span {
-        font-size: 16px;
+        font-weight: 400;
-        line-height: 20px;
+        font-size: 15px;
-      }
+        color: #6f6f6f;
-    }
-
-    p {
-      font-weight: 400;
-      font-size: 15px;
-
-      @media (max-width: 650px) {
-        font-size: 13px;
       }
     }
   }
 
-  &__item:last-child {
+  &__addition {
-    margin-bottom: 0;
+    display: grid;
+    grid-template-columns: 55% 45%;
+    column-gap: 15px;
+    padding: 35px;
+
+    &-item {
+      display: flex;
+      flex-direction: column;
+      row-gap: 10px;
+      background-color: #f4f7ff;
+      border-radius: 10px;
+      padding: 15px;
+
+      h3 {
+        color: #1458dd;
+        font-weight: 500;
+        font-size: 20px;
+
+        @media (max-width: 650px) {
+          font-size: 16px;
+        }
+      }
+
+      p {
+        font-weight: 400;
+        font-size: 15px;
+
+        @media (max-width: 650px) {
+          font-size: 13px;
+        }
+      }
+    }
   }
 
   &__no-task {