Fix the new design

frontend/index.html

@@ -76,24 +76,39 @@
 
         <!-- Chat Interface -->
         <div id="chat-interface" style="display: none;">
-            <div class="all-conteiner">
+            <div class="all-container">
                 <div class="chat-list" id="chat-list">
-                    <header class="chat-sitting">
+                    <header class="chat-header-left">
                         <div id="productname">Loading...</div> 
                         <div class="profile">
                             <a href="#"><img src="./src/images/default-avatar.png" alt=""></a>
                         </div>
                     </header>
-                    <div class="chat-sortirovka"><nav><ul>
+                    <div class="chat-tabs">
-                        <li>чаты</li>
+                        <nav>
-                        <li>каналы</li>
+                            <ul>
-                        <li>контакты</li>
+                                <li>Чаты</li>
-                    </ul></nav></div>
+                                <li>Каналы</li>
-                    <div class="chats-chanel-kontarti">
+                                <li>Контакты</li>
-                        <a href="#" id="chat1but"><img src="./src/images/default-avatar.png" alt=""> Общий чат</a>
+                            </ul>
-                        <a href="#" id="chat1but2"><img src="./src/images/default-avatar.png" alt="">Общий чат 2</a>
+                        </nav>
+                    </div>
+                    <div class="chats">
+                        <a href="#" id="chat1but">
+                            <img src="./src/images/default-avatar.png" alt=""> 
+                            Общий чат
+                        </a>
+                        <a href="#" id="chat1but2">
+                            <img src="./src/images/default-avatar.png" alt="">
+                            Общий чат 2
+                        </a>
+                    </div>
+                    
+                    <div class="ponel">
+                        <a href="#">+чат</a> 
+                        <a href="#">+канал</a> 
+                        <a href="#">Выйти</a>
                     </div>
-                    <div class="ponel"><a href="#">+чат</a> <a href="#">+канал</a> <a href="#">Выйти</a></div>
                     <footer></footer>
                 </div>
                 <div class="chat-container">          

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-size: 25px;
-        font-weight: bolder;
         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;
+                border-radius: 50%;
-                width: 56px;
+                width: $size;
-                height: 56px;
+                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,7 +76,8 @@
             font-weight: 20px;
             border-radius: 20px;
             align-items: center;
-            img{
+
+            img {
                 width: 45px;
                 height: 45px;
                 border-radius: 20%;
@@ -77,33 +86,36 @@
             }
         }
     }
-    .chat-sortirovka{
+
+    .chat-tabs {
         display: flex;
         flex-direction: row;
         font-size: 24px;
         justify-content: center;
         color: white;
-            ul{
+
+        ul {
             display: flex;
             flex-direction: row;
             gap: 5px;
         }
-            li{
+
+        li {
             display: flex;
             flex-direction: row;
         }
     }
-    }
+}
 
-    .ponel{
+.ponel {
     display: flex;
     position: fixed;
     top: 95%;
     left: 2%;
     gap: 10px;
-        a{
+
+    a {
         text-decoration: none;
         color: $color-dark-surface;
     }
-    }
+}
-