Fix the new design

frontend/src/css/_chat.scss

@@ -60,7 +60,6 @@
         width: 100%;
         flex-direction: column;
 
-
         .chat-main {
             flex-grow: 1;
             display: flex;

frontend/src/css/_panelchat.scss

@@ -1,13 +1,16 @@
 @use "common/colors" as *;
 @use "common/material" as *;
+
+
 // контейнер чата и панели с чатами
-.all-conteiner{
+.all-container {
     display: flex;
     flex-direction: row;
     width: 100%;
     height: 100vh;
 }
-#chat-list{
+
+#chat-list {
     display: flex;
     flex-direction: column;
     flex-grow: 0;
@@ -15,47 +18,52 @@
     background-color: $color-dark-surface-container;
     height: 100%;
     z-index: 1000;
-    border-right: solid 2px black;
-    .chat-sitting{
+
+    .chat-header-left {
         display: flex;
         color: white;
-        font-size: 42px;
-        font-weight: bolder;
+        font-size: 25px;
         background-color: $color-dark-surface-container;
         width: 100%;
         justify-content: center;
-        height: 85px;
-        border-block-end: solid 2px black;
         gap: 110px;
         align-items: center;
+        padding: 16px;
     
-        .profile{
+        .profile {
             font-size: 24px;
             display: flex;
             justify-content: start;
-            a{
+
+            a {
                 display: flex;
                 color: $color-dark-surface;
                 text-decoration: none;
                 width: 100%;
-                &:hover{
+
+                &:hover {
                     font-size: 26px;
                 }
             }
-            img{
+
+            img {
+                $size: 45px;
+
                 display: flex;
-                border-radius: 100px;
-                width: 56px;
-                height: 56px;
+                border-radius: 50%;
+                width: $size;
+                height: $size;
             }
         }
     }
-    .chats-chanel-kontarti{
+
+    .chats {
         display: flex;
         flex-direction: column;
         gap: 10px;
         margin-top: 5px;
-        a{
+
+        a {
             display: flex;
             text-decoration: none;
             padding: 10px;
@@ -68,42 +76,46 @@
             font-weight: 20px;
             border-radius: 20px;
             align-items: center;
-            img{
-                    width: 45px;
-                    height: 45px;
-                    border-radius: 20%;
-                    object-fit: cover;
-                    margin-right: 1rem;
-                }
+
+            img {
+                width: 45px;
+                height: 45px;
+                border-radius: 20%;
+                object-fit: cover;
+                margin-right: 1rem;
+            }
         }
     }
-    .chat-sortirovka{
+
+    .chat-tabs {
         display: flex;
         flex-direction: row;
         font-size: 24px;
         justify-content: center;
         color: white;
-            ul{
-                display: flex;
-                flex-direction: row;
-                gap: 5px;
-            }
-            li{
-                display: flex;
-                flex-direction: row;
-            }
-            }
-    }
 
-    .ponel{
-        display: flex;
-        position: fixed;
-        top: 95%;
-        left: 2%;
-        gap: 10px;
-        a{
-            text-decoration: none;
-            color: $color-dark-surface;
+        ul {
+            display: flex;
+            flex-direction: row;
+            gap: 5px;
+        }
+
+        li {
+            display: flex;
+            flex-direction: row;
         }
     }
+}
 
+.ponel {
+    display: flex;
+    position: fixed;
+    top: 95%;
+    left: 2%;
+    gap: 10px;
+
+    a {
+        text-decoration: none;
+        color: $color-dark-surface;
+    }
+}