фикс дизайна

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>

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;
                 }

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;
         }
     }
-}
+

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);

frontend/src/css/style.scss

@@ -22,4 +22,5 @@ body {
     line-height: 1.6;
     height: 100vh;
     position: relative;
+
 }