Fixed archive and select modal

src/components/Common/ModalLayout/modalLayout.scss

@@ -14,7 +14,7 @@
   &__content {
     position: relative;
     background: linear-gradient(180deg, #ffffff 0%, #ebebeb 100%);
-    border-radius: 24px;
+    border-radius: 10px;
     padding: 25px;
     display: flex;
     flex-direction: column;
@@ -117,3 +117,17 @@
 .modal-layout.active {
   transform: scale(1);
 }
+
+.createProject {
+  background: linear-gradient(180deg, #fff 0%, #ebebeb 37.29%);
+  .title-project {
+    margin-top: 20px;
+  }
+  .button-add {
+    margin-top: 8px;
+  }
+  .exit {
+    top: 16px;
+    right: 15px;
+  }
+}

src/components/Modal/ModalSelect/modalSelect.scss

@@ -5,13 +5,13 @@
     background: #e1fccf;
     border-radius: 12px;
     transform: scale(0);
-    bottom: -148px;
+    bottom: -90px;
     right: -120px;
 
     @media (max-width: 1050px) {
       right: 10px;
       padding-top: 10px;
-      bottom: -160px;
+      bottom: -75px;
     }
 
     &-menu {

src/pages/Tracker/Tracker.js

@@ -24,6 +24,7 @@ import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
 import ProjectTiket from "@components/ProjectTiket/ProjectTiket";
 
 import addProjectImg from "assets/icons/addProjectImg.svg";
+import arrowViewReport from "assets/icons/arrows/arrowViewReport.svg";
 import search from "assets/icons/serchIcon.png";
 import project from "assets/icons/trackerProject.svg";
 import tasks from "assets/icons/trackerTasks.svg";
@@ -300,6 +301,21 @@ export const Tracker = () => {
                   {`${filterCompleteTasks.length} 
                     ${caseOfNum(filterCompleteTasks.length, "tasks")}`}
                 </p>
+
+                <div className="archive__tasks-period">
+                  <div className="buttons-month">
+                    <button>
+                      <img src={arrowViewReport} alt="<"></img>
+                    </button>
+                    <button>
+                      <img src={arrowViewReport} alt=">"></img>
+                    </button>
+                  </div>
+                  <div className="month-period">
+                    <h2>Сентябрь,</h2>
+                    <h3>2023</h3>
+                  </div>
+                </div>
                 <div className="archive__tasks__search">
                   <img src={search} alt="search" />
                   <input

src/pages/Tracker/tracker.scss

@@ -1356,23 +1356,25 @@
         padding: 0 20px;
         margin: 0 auto;
         display: flex;
-        column-gap: 28px;
+        flex-direction: column;
 
-        @media (max-width: 1100px) {
+        // column-gap: 28px;
-          flex-direction: column;
-          row-gap: 20px;
-        }
 
-        @media (max-width: 650px) {
+        // @media (max-width: 1100px) {
-          padding-bottom: 20px;
+        //   flex-direction: column;
-        }
+        //   row-gap: 20px;
+        // }
+
+        // @media (max-width: 650px) {
+        //   padding-bottom: 20px;
+        // }
 
         .archive {
           &__title {
             padding-bottom: 8px;
             display: flex;
             align-items: center;
-            color: #1458dd;
+            color: #000;
             min-height: 48px;
 
             h3 {
@@ -1406,7 +1408,7 @@
             display: flex;
             flex-direction: column;
             row-gap: 15px;
-            max-height: 400px;
+            // max-height: 400px;
             overflow-y: auto;
             margin-right: -16px;
             padding-right: 10px;
@@ -1513,15 +1515,61 @@
           }
 
           &__tasks {
-            min-height: 400px;
+            // min-height: 400px;
-            max-height: 450px;
+            // max-height: 450px;
             padding-right: 15px;
-            width: 65%;
+            // width: 65%;
 
             @media (max-width: 1100px) {
               width: 100%;
             }
 
+            &-period {
+              display: flex;
+              align-items: center;
+              margin-left: 73px;
+
+              .buttons-month {
+                display: flex;
+                gap: 34px;
+
+                button {
+                  width: 30px;
+                  height: 30px;
+                  background-color: #8dc63f;
+                  border-radius: 15px;
+                  border: none;
+
+                  img {
+                    width: 14px;
+                    height: 14px;
+                  }
+
+                  &:first-child {
+                    transform: rotate(-180deg);
+                  }
+                }
+              }
+
+              .month-period {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+                margin-left: 62px;
+
+                h2 {
+                  color: #1458dd;
+                }
+
+                h3 {
+                  color: #252c32;
+                  font-size: 18px;
+                  font-weight: 700;
+                  margin-left: 5px;
+                }
+              }
+            }
+
             &__search {
               margin-left: auto;
               padding: 6px 12px;
@@ -1569,7 +1617,7 @@
           }
 
           &__projects {
-            display: flex;
+            display: none;
             flex-direction: column;
             width: 33%;
             min-height: 400px;