adaptive

src/components/ProjectTiket/projectTiket.scss

@@ -21,10 +21,6 @@
     width: 100%;
   }
 
-  @media (max-width: 430px) {
-    padding: 8px 13px 8px;
-  }
-
   a {
     font-weight: 700;
     font-size: 18px;
@@ -47,10 +43,6 @@
     align-items: center;
     position: relative;
 
-    @media (max-width: 430px) {
-      justify-content: space-between;
-    }
-
     p {
       color: #6f6f6f;
       font-weight: 500;
@@ -90,10 +82,6 @@
       color: #6f6f6f;
       right: 0;
       top: -35%;
-
-      @media (max-width: 430px) {
-        display: none;
-      }
     }
   }
 }

src/pages/Tracker/Tracker.js

@@ -44,6 +44,7 @@ export const Tracker = () => {
   const [allCompletedTasks, setAllCompletedTasks] = useState([]);
 
   const [modalCreateProject, setModalCreateProject] = useState(false);
+  const tabs = ['projectsTab', 'tasksTab', 'archiveTab']
 
   useEffect(() => {
     setLoader(true);
@@ -135,28 +136,28 @@ export const Tracker = () => {
       <div className="tracker__tabs">
         <div className="tracker__tabs__head">
           <div
-            className={tab === 1 ? "tab active-tab" : "tab"}
+            className={tab === 1 ? "tab active-tab projectsTab" : "tab projectsTab"}
             onClick={() => toggleTabs(1)}
           >
             <img src={project} alt="img" />
             <p>Проекты </p>
           </div>
           <div
-            className={tab === 2 ? "tab active-tab" : "tab"}
+            className={tab === 2 ? "tab active-tab tasksTab" : "tab tasksTab"}
             onClick={() => toggleTabs(2)}
           >
             <img src={tasks} alt="img" />
             <p>Все мои задачи</p>
           </div>
           <div
-            className={tab === 3 ? "tab active-tab" : "tab"}
+            className={tab === 3 ? "tab active-tab archiveTab" : "tab archiveTab"}
             onClick={() => toggleTabs(3)}
           >
             <img src={archive} alt="img" />
             <p>Архив</p>
           </div>
         </div>
-        <div className="tracker__tabs__content">
+        <div className={`tracker__tabs__content ${tabs[tab - 1]}`}>
           <div
             className={
               tab === 1

src/pages/Tracker/tracker.scss

@@ -46,6 +46,15 @@
       margin: 0 auto;
       position: relative;
       height: 60px;
+
+      @media (max-width: 650px) {
+        padding: 0 15px;
+        background: none;
+        justify-content: space-between;
+        position: relative;
+        top: 15px;
+        height: auto;
+      }
     }
 
     .tab {
@@ -79,6 +88,19 @@
           white-space: nowrap;
         }
       }
+
+      @media (max-width: 650px) {
+        border-radius: 10px;
+        flex-direction: column;
+        padding: 20px;
+        align-items: start;
+        row-gap: 20px;
+        height: auto !important;
+
+        p {
+          margin-left: 0;
+        }
+      }
     }
 
     .active-tab {
@@ -98,6 +120,12 @@
         filter: invert(0%) sepia(0%) saturate(2411%) hue-rotate(-25deg)
           brightness(118%) contrast(119%);
       }
+
+      @media (max-width: 650px) {
+        border-radius: 10px;
+        align-items: start;
+        top: 0;
+      }
     }
 
     &__content {
@@ -119,11 +147,12 @@
         align-items: center;
 
         @media (max-width: 785px) {
+          row-gap: 25px;
           justify-content: center;
         }
 
         @media (max-width: 460px) {
-          padding: 15px;
+          padding: 0 15px;
         }
 
         .no-projects {
@@ -172,17 +201,17 @@
             font-weight: 700;
             font-size: 18px;
           }
+
+          @media (max-width: 650px) {
+            height: 40px;
+            font-size: 12px;
+          }
         }
 
         .create-newProject {
           display: flex;
           align-items: center;
 
-          @media (max-width: 450px) {
-            flex-direction: column;
-            row-gap: 15px;
-          }
-
           p {
             margin-left: 32px;
             font-weight: 400;
@@ -192,8 +221,6 @@
 
             @media (max-width: 450px) {
               max-width: none;
-              margin-left: 0;
-              text-align: center;
             }
           }
         }
@@ -1104,13 +1131,22 @@
               &__info {
                 display: flex;
                 flex-direction: column;
-                max-width: 730px;
+                max-width: 535px;
+
+                @media (max-width: 820px) {
+                  text-align: center;
+                  max-width: none;
+                }
 
                 h5 {
                   font-weight: 700;
                   font-size: 20px;
                   line-height: 24px;
                   margin-bottom: 0;
+
+                  @media (max-width: 820px) {
+                    font-size: 19px;
+                  }
                 }
 
                 p {
@@ -1130,6 +1166,10 @@
                 img {
                   width: 40px;
                 }
+
+                @media (max-width: 820px) {
+                  justify-content: center;
+                }
               }
 
               &__project {
@@ -1146,6 +1186,19 @@
                   font-size: 14px;
                 }
               }
+
+              @media (max-width: 820px) {
+                row-gap: 10px;
+                flex-direction: column;
+              }
+
+              @media (max-width: 650px) {
+                background-color: white;
+              }
+
+              @media (max-width: 450px) {
+                padding: 12px 15px;
+              }
             }
           }
         }
@@ -1158,7 +1211,7 @@
         display: flex;
         column-gap: 28px;
 
-        @media (max-width: 880px) {
+        @media (max-width: 1100px) {
           flex-direction: column;
           row-gap: 20px;
         }
@@ -1191,6 +1244,10 @@
                 font-size: 15px;
               }
             }
+
+            @media (max-width: 450px) {
+              flex-wrap: wrap;
+            }
           }
 
           &__tasksWrapper {
@@ -1234,7 +1291,6 @@
             background: #f1f1f1;
             border-radius: 12px;
             padding: 12px 42px 7px 32px;
-            transition: 0.4s;
 
             &:hover {
               transform: scale(0.99);
@@ -1294,6 +1350,15 @@
                 }
               }
             }
+
+            @media (max-width: 740px) {
+              flex-direction: column;
+              padding: 10px 20px;
+            }
+
+            @media (max-width: 650px) {
+              background-color: white;
+            }
           }
 
           &__tasks {
@@ -1303,7 +1368,7 @@
             width: 65%;
             overflow: hidden;
 
-            @media (max-width: 880px) {
+            @media (max-width: 1100px) {
               width: 100%;
             }
 
@@ -1331,6 +1396,11 @@
                 max-width: 150px;
               }
 
+              @media (max-width: 450px) {
+                margin-left: 0;
+                max-width: none;
+              }
+
               input {
                 width: 100%;
                 padding-left: 10px;
@@ -1356,8 +1426,9 @@
             max-height: 450px;
             padding-right: 15px;
 
-            @media (max-width: 880px) {
+            @media (max-width: 1100px) {
               width: 100%;
+              min-height: auto;
             }
           }
 
@@ -1373,9 +1444,37 @@
               color: #111112;
               text-align: center;
             }
+
+            @media (max-width: 650px) {
+              background-color: white;
+            }
           }
         }
       }
     }
+
+    @media (max-width: 650px) {
+
+      &__content {
+        padding: 28px 0;
+
+        .project {
+          background-color: white;
+          max-width: 394px;
+        }
+      }
+
+      .projectsTab {
+        background-color: #DFF1FF;
+      }
+
+      .tasksTab {
+        background-color: #E8FFEB;
+      }
+
+      .archiveTab {
+        background-color: #FFECEF;
+      }
+    }
   }
 }