Merge pull request #120 from apuc/tracker-tasks

Tracker tasks

src/components/Common/ModalLayout/modalLayout.scss

@@ -15,7 +15,7 @@
     position: relative;
     background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%);
     border-radius: 24px;
-    padding: 20px 40px 30px 40px;
+    padding: 35px 15px 15px 15px;
     display: flex;
     flex-direction: column;
     align-items: center;

src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx

@@ -487,7 +487,7 @@ export const ModalTiсket = ({
                 }}
               />
             ) : (
-              <h5>{inputsValue.title}</h5>
+              <h5 className="taskName">{inputsValue.title}</h5>
             )}
             <div className="content__description">
               {editOpen ? (
@@ -518,6 +518,7 @@ export const ModalTiсket = ({
                 />
               ) : (
                 <p
+                  className="taskDescription"
                   dangerouslySetInnerHTML={{ __html: inputsValue.description }}
                 />
               )}

src/components/Modal/Tracker/ModalTicket/modalTicket.scss

@@ -115,6 +115,42 @@
         margin-bottom: 0;
       }
 
+      .taskName {
+        max-width: 550px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        -webkit-line-clamp: 5;
+        -webkit-box-orient: vertical;
+      }
+
+      .taskDescription {
+        max-width: 550px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        -webkit-line-clamp: 5;
+        -webkit-box-orient: vertical;
+      }
+
+      .fullName {
+        max-width: 800px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        -webkit-line-clamp: 5;
+        -webkit-box-orient: vertical;
+      }
+
+      .fullDescription {
+        max-width: 800px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        -webkit-line-clamp: 5;
+        -webkit-box-orient: vertical;
+      }
+
       .comments__list {
         display: flex;
         flex-direction: column;
@@ -318,13 +354,32 @@
     .task__files {
       display: flex;
       flex-wrap: wrap;
-      gap: 10px;
+      column-gap: 25px;
+      row-gap: 20px;
       margin-top: 10px;
+      max-height: 350px;
+      overflow-y: auto;
+
+      &::-webkit-scrollbar {
+        width: 5px;
+        border-radius: 10px;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background: #cbd9f9;
+        border-radius: 20px;
+      }
+
+      &::-webkit-scrollbar-track {
+        background: #c5c0c6;
+        border-radius: 20px;
+      }
 
       .taskFile {
         position: relative;
         .imgFile {
-          max-width: 180px;
+          max-width: 170px;
+          max-height: 104px;
           object-fit: contain;
         }
 
@@ -665,7 +720,7 @@
         }
         span {
           font-size: 12px;
-          color: #000000;
+          color: #1458DD;
           margin-left: 10px;
           font-weight: 500;
         }
@@ -683,7 +738,8 @@
       }
 
       .react-datepicker {
-        border: 1px solid #398208;
+        border: 1px solid #e8ede4;
+        border-radius: 8px;
       }
 
       .react-datepicker-popper {
@@ -693,25 +749,58 @@
       }
 
       .react-datepicker__current-month {
-        font-size: 14px;
+        font-size: 18px;
         font-family: "LabGrotesque", sans-serif;
         text-transform: capitalize;
       }
 
+      .react-datepicker__navigation-icon {
+        width: 20px;
+        height: 20px;
+        border-radius: 50px;
+        border: 2px solid #cbd1d2;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        &:hover {
+          background-color: white;
+        }
+      }
+
+      .react-datepicker__navigation-icon--next::before {
+        border-width: 2px 2px 0 0;
+        top: auto;
+        left: 4px;
+        height: 6px;
+        width: 6px;
+      }
+
+      .react-datepicker__navigation-icon--previous::before {
+        border-width: 2px 2px 0 0;
+        top: auto;
+        left: 6px;
+        height: 6px;
+        width: 6px;
+      }
+
       .react-datepicker__header {
         padding: 5px 0 10px;
-        border-bottom: 1px solid #398208;
+        border-bottom: 1px solid #baacc0;
       }
 
       .react-datepicker__day {
-        font-size: 14px;
+        font-size: 16px;
         width: 35px;
         font-family: "LabGrotesque", sans-serif;
+        border-radius: 50px;
+        padding: 7px;
       }
 
       .react-datepicker__day-name {
-        font-size: 14px;
+        font-size: 18px;
         width: 35px;
+        font-weight: 500;
         font-family: "LabGrotesque", sans-serif;
       }
 
@@ -719,7 +808,7 @@
         left: 85px !important;
 
         &:before {
-          border-bottom-color: #398208 !important;
+          border: 1px solid #e8ede4;
         }
       }
     }

src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx

@@ -626,7 +626,7 @@ export const TicketFullScreen = () => {
                       }}
                     />
                   ) : (
-                    <h5>{inputsValue.title}</h5>
+                    <h5 className="fullName">{inputsValue.title}</h5>
                   )}
                   <div className="content__description">
                     {editOpen ? (
@@ -657,6 +657,7 @@ export const TicketFullScreen = () => {
                       />
                     ) : (
                       <p
+                        className="fullDescription"
                         dangerouslySetInnerHTML={{
                           __html: inputsValue.description,
                         }}

src/components/Modal/Tracker/TrackerModal/trackerModal.scss

@@ -30,7 +30,8 @@
   display: flex;
   align-items: center;
   flex-direction: column;
-  row-gap: 5px;
+  row-gap: 8px;
+  margin-bottom: 10px;
 
   .select-priority {
     background-color: white;
@@ -94,7 +95,8 @@
   }
 
   .ck-editor__editable.ck-rounded-corners {
-    min-height: 100px;
+    max-width: 390px;
+    min-height: 130px;
     font-size: 14px;
   }
 

src/pages/Tracker/Tracker.js

@@ -309,7 +309,9 @@ export const Tracker = () => {
                         return (
                           <div className="archive__completeTask" key={index}>
                             <div className="archive__completeTask__description">
-                              <p>{task.title}</p>
+                              <p className="completeTask__title">
+                                {task.title}
+                              </p>
                               <p
                                 className="date"
                                 dangerouslySetInnerHTML={{

src/pages/Tracker/tracker.scss

@@ -340,9 +340,9 @@
               flex-direction: column;
               background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%);
               border-radius: 40px;
-              padding: 33px 24px 44px 34px;
+              padding: 31px 128px 41px 49px;
-              width: 425px;
               cursor: default;
+              width: 650px;
 
               &__close {
                 cursor: pointer;
@@ -372,7 +372,7 @@
 
               &__info {
                 display: flex;
-                margin: 13px 0 10px;
+                margin: 11px 0 35px;
                 align-items: center;
 
                 span {
@@ -402,31 +402,33 @@
               &__items {
                 display: flex;
                 flex-wrap: wrap;
-                row-gap: 10px;
+                row-gap: 32px;
-                column-gap: 35px;
+                column-gap: 85px;
                 margin-bottom: 38px;
               }
 
               &__item {
-                width: 145px;
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
+                max-width: 190px;
+                width: 100%;
 
                 .avatar {
-                  width: 22px;
+                  width: 38px;
-                  height: 22px;
+                  height: 38px;
+                  margin-right: 12px;
                 }
 
                 span {
                   display: block;
                   font-weight: 400;
-                  font-size: 12px;
+                  font-size: 15px;
                   line-height: initial;
                   color: #807777;
                   width: auto;
                   height: auto;
-                  max-width: 85px;
+                  max-width: 130px;
                   overflow: hidden;
                   white-space: nowrap;
                   text-overflow: ellipsis;
@@ -452,9 +454,10 @@
                   margin-left: 17px;
                   color: #000000;
                   font-weight: 400;
-                  font-size: 12px;
+                  font-size: 16px;
                   line-height: 32px;
                   position: initial;
+                  max-width: none;
                 }
               }
             }
@@ -800,6 +803,7 @@
               p {
                 font-weight: 500;
                 font-size: 14px;
+                color: #1458DD;
               }
 
               span {
@@ -1239,14 +1243,17 @@
             }
 
             p {
-              max-width: 250px;
+              max-width: 420px;
               overflow: hidden;
               white-space: nowrap;
               text-overflow: ellipsis;
               margin-bottom: 0;
               color: #111112;
+            }
+
+            .completeTask__title {
               font-weight: 700;
-              font-size: 16px;
+              font-size: 20px;
               line-height: 32px;
             }
 
@@ -1256,7 +1263,7 @@
 
               .date {
                 font-weight: 500;
-                font-size: 10px;
+                font-size: 16px;
                 line-height: 24px;
                 color: #6f6f6f;
               }