From e6e71adbf1cca9407c23f05d891b2e4b9a471ee0 Mon Sep 17 00:00:00 2001
From: denis0001-dev <denis0001.dev@ya.ru>
Date: Wed, 20 Aug 2025 19:27:11 +0300
Subject: [PATCH] Fix the new design

---
 frontend/index.html              |  37 +++++++----
 frontend/src/css/_chat.scss      |   1 -
 frontend/src/css/_panelchat.scss | 102 +++++++++++++++++--------------
 3 files changed, 83 insertions(+), 57 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index 2d9ee15..9f59de8 100644
--- a/frontend/index.html
+++ b/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>
-                        <li>чаты</li>
-                        <li>каналы</li>
-                        <li>контакты</li>
-                    </ul></nav></div>
-                    <div class="chats-chanel-kontarti">
-                        <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 class="chat-tabs">
+                        <nav>
+                            <ul>
+                                <li>Чаты</li>
+                                <li>Каналы</li>
+                                <li>Контакты</li>
+                            </ul>
+                        </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">          
diff --git a/frontend/src/css/_chat.scss b/frontend/src/css/_chat.scss
index b8c98c1..b45373a 100644
--- a/frontend/src/css/_chat.scss
+++ b/frontend/src/css/_chat.scss
@@ -60,7 +60,6 @@
         width: 100%;
         flex-direction: column;
 
-
         .chat-main {
             flex-grow: 1;
             display: flex;
diff --git a/frontend/src/css/_panelchat.scss b/frontend/src/css/_panelchat.scss
index 1e47489..df00a33 100644
--- a/frontend/src/css/_panelchat.scss
+++ b/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;
+    }
+}
\ No newline at end of file