From 9ff6fe3462a4993eb8e2eb164d7f4f55b39f9a15 Mon Sep 17 00:00:00 2001
From: grabic21 <suchok.listok25@bk.ru>
Date: Wed, 20 Aug 2025 19:35:39 +0400
Subject: [PATCH] =?UTF-8?q?=D1=84=D0=B8=D0=BA=D1=81=20=D0=B4=D0=B8=D0=B7?=
 =?UTF-8?q?=D0=B0=D0=B9=D0=BD=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/index.html                    |  6 ++---
 frontend/src/css/_chat.scss            |  2 +-
 frontend/src/css/_panelchat.scss       | 36 +++++++++++++++++++++-----
 frontend/src/css/common/_material.scss |  6 ++++-
 frontend/src/css/style.scss            |  1 +
 5 files changed, 39 insertions(+), 12 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index 6c2e67e..3d37430 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -81,7 +81,7 @@
                     <header class="chat-sitting">
                         <div id="productname">Loading...</div> 
                         <div class="profile">
-                            <a href="#">Профиль</a>
+                            <a href="#"><img src="./src/images/default-avatar.png" alt=""></a>
                         </div>
                     </header>
                     <div class="chat-sortirovka"><nav><ul>
@@ -90,8 +90,8 @@
                         <li>контакты</li>
                     </ul></nav></div>
                     <div class="chats-chanel-kontarti">
-                        <a href="#" id="chat1but">Общий чат</a>
-                        <a href="#" id="chat1but2">Общий чат 2</a>
+                        <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>
                     <footer></footer>
diff --git a/frontend/src/css/_chat.scss b/frontend/src/css/_chat.scss
index 7ed8efc..b8c98c1 100644
--- a/frontend/src/css/_chat.scss
+++ b/frontend/src/css/_chat.scss
@@ -77,7 +77,7 @@
                 .chat-header-avatar {
                     width: 45px;
                     height: 45px;
-                    border-radius: 50%;
+                    border-radius: 20%;
                     object-fit: cover;
                     margin-right: 1rem;
                 }
diff --git a/frontend/src/css/_panelchat.scss b/frontend/src/css/_panelchat.scss
index 2c3bd40..a858056 100644
--- a/frontend/src/css/_panelchat.scss
+++ b/frontend/src/css/_panelchat.scss
@@ -12,21 +12,27 @@
     flex-direction: column;
     flex-grow: 0;
     width: 40%;
-    background-color: $color-light-primary-container;
+    background-color: $color-dark-surface-container;
     height: 100%;
     z-index: 1000;
+    border-right: solid 2px black;
     .chat-sitting{
         display: flex;
-        color: $color-dark-on-primary-container;
+        color: white;
         font-size: 42px;
         font-weight: bolder;
-        background-color: rgb(159, 163, 165);
+        background-color: $color-dark-surface-container;
         width: 100%;
         justify-content: center;
+        height: 85px;
+        border-block-end: solid 2px black;
+        gap: 110px;
+        align-items: center;
+    
         .profile{
             font-size: 24px;
             display: flex;
-            justify-content: end;
+            justify-content: start;
             a{
                 display: flex;
                 color: $color-dark-surface;
@@ -36,6 +42,12 @@
                     font-size: 26px;
                 }
             }
+            img{
+                display: flex;
+                border-radius: 100px;
+                width: 56px;
+                height: 56px;
+            }
         }
     }
     .chats-chanel-kontarti{
@@ -47,12 +59,21 @@
             display: flex;
             text-decoration: none;
             padding: 10px;
-            border:  solid 2px black;
+            border:  solid 2px $color-dark-surface;
             margin-left: 20px;
             margin-right: 20px;
-            background-color: $gray;
+            background-color: $color-dark-on-surface-variant;
             color: $color-dark-shadow;
             font-weight: 20px;
+            border-radius: 20px;
+            align-items: center;
+            img{
+                    width: 45px;
+                    height: 45px;
+                    border-radius: 20%;
+                    object-fit: cover;
+                    margin-right: 1rem;
+                }
         }
     }
     .chat-sortirovka{
@@ -69,6 +90,7 @@
                 display: flex;
                 flex-direction: row;
             }
+            }
     }
 
     .ponel{
@@ -82,4 +104,4 @@
             color: $color-dark-surface;
         }
     }
-}
+
diff --git a/frontend/src/css/common/_material.scss b/frontend/src/css/common/_material.scss
index 46834c8..d2a5079 100644
--- a/frontend/src/css/common/_material.scss
+++ b/frontend/src/css/common/_material.scss
@@ -50,7 +50,11 @@ $color-dark-surface-container-low: rgb(24 28 31);
 $color-dark-surface-container: rgb(28 32 36);
 $color-dark-surface-container-high: rgb(38 43 46);
 $color-dark-surface-container-highest: rgb(49 53 57);
-
+// custom colors
+$color-1: rgb(82, 109, 246);   
+$color-2: rgb(65, 11, 113);   
+$color-4: rgb(95, 26, 198);   
+$color-3: rgb(49, 71, 179);   
 // Light
 $color-light-primary: rgb(31 101 134);
 $color-light-surface-tint: rgb(31 101 134);
diff --git a/frontend/src/css/style.scss b/frontend/src/css/style.scss
index fe9ddd0..302081e 100644
--- a/frontend/src/css/style.scss
+++ b/frontend/src/css/style.scss
@@ -22,4 +22,5 @@ body {
     line-height: 1.6;
     height: 100vh;
     position: relative;
+
 }
\ No newline at end of file