From f4007bde45dbae184051f982e7ff20769053f875 Mon Sep 17 00:00:00 2001
From: denis0001-dev <denis0001.dev@ya.ru>
Date: Tue, 19 Aug 2025 21:09:53 +0300
Subject: [PATCH] New design

---
 frontend/index.html                    |  20 ++--
 frontend/src/css/_chat.scss            | 132 +++++++++++++++----------
 frontend/src/css/common/_material.scss |  14 ++-
 frontend/src/css/style.scss            |   5 +-
 frontend/src/main.ts                   |   2 +-
 5 files changed, 107 insertions(+), 66 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index d834b94..349183c 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -77,7 +77,7 @@
         <!-- Chat Interface -->
         <div id="chat-interface" style="display: none;">
             <div class="header">
-                <div class="container header-content">
+                <div class="header-content">
                     <div class="logo">
                         <span id="productname">Loading...</span>
                     </div>
@@ -96,7 +96,7 @@
                 </div>
             </div>
 
-            <div class="container chat-container">
+            <div class="chat-container">
                 <div class="chat-main">
                     <div class="chat-header">
                         <img src="src/images/default-avatar.png" alt="Avatar" class="chat-header-avatar">
@@ -110,13 +110,15 @@
                         <!-- Messages will be loaded here dynamically -->
                     </div>
                     
-                    <div class="chat-input">
-                        <form class="input-group" id="message-form">
-                            <input type="text" class="message-input" id="message-input" placeholder="Напишите сообщение..." autocomplete="off">
-                            <button type="submit" class="send-btn">
-                                <span class="material-symbols filled">send</span>
-                            </button>
-                        </form>
+                    <div class="chat-input-wrapper">
+                        <div class="chat-input">
+                            <form class="input-group" id="message-form">
+                                <input type="text" class="message-input" id="message-input" placeholder="Напишите сообщение..." autocomplete="off">
+                                <button type="submit" class="send-btn">
+                                    <span class="material-symbols filled">send</span>
+                                </button>
+                            </form>
+                        </div>
                     </div>
                 </div>
             </div>
diff --git a/frontend/src/css/_chat.scss b/frontend/src/css/_chat.scss
index e8e0292..1f31549 100644
--- a/frontend/src/css/_chat.scss
+++ b/frontend/src/css/_chat.scss
@@ -1,12 +1,12 @@
 @use "common/colors" as *;
+@use "common/material" as *;
 
 #chat-interface {
     /* Header */
     .header {
-        background: linear-gradient(135deg, $primary, $primary-dark);
+        background-color: $color-dark-surface-container;
         color: white;
-        padding: 1rem 0;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        padding: 16px 16px;
         position: fixed;
         width: 100%;
         top: 0;
@@ -60,14 +60,13 @@
             flex: 1;
             display: flex;
             flex-direction: column;
-            background-color: #F7FAFC;
 
             .chat-header {
-                padding: 1rem;
-                background: white;
-                border-bottom: 1px solid $gray;
+                padding: 16px;
+                background: $color-dark-surface-container;
                 display: flex;
                 align-items: center;
+                box-shadow: black 0px 0px 20px;
 
                 .chat-header-avatar {
                     width: 45px;
@@ -104,6 +103,19 @@
                 padding: 1rem;
                 overflow-y: auto;
 
+                &::-webkit-scrollbar {
+                    width: 7px;
+                }
+
+                &::-webkit-scrollbar-track {
+                    background: transparent;
+                }
+
+                &::-webkit-scrollbar-thumb {
+                    background-color: $color-dark-surface-container-high;
+                    border-radius: 20px;
+                }
+
                 .message {
                     margin-bottom: 1rem;
                     max-width: 70%;
@@ -117,15 +129,15 @@
 
                         .message-time {
                             font-size: 0.7rem;
-                            color: #A0AEC0;
+                            color: $color-dark-on-surface-variant;
                             margin-top: 0.3rem;
                             text-align: right;
                         }
                     }
 
                     &.received .message-inner {
-                        background: white;
-                        border-top-left-radius: 0;
+                        background-color: $color-dark-surface-container;
+                        border-top-left-radius: 5px;
                         box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
                     }
 
@@ -133,13 +145,13 @@
                         margin-left: auto;
 
                         .message-inner {
-                            background: linear-gradient(135deg, $primary, $primary-dark);
-                            color: white;
-                            border-top-right-radius: 0;
+                            background-color: $color-dark-primary-container;
+                            color: $color-dark-on-primary-container;
+                            border-top-right-radius: 5px;
                         }
 
                         .message-time {
-                            color: rgba(255, 255, 255, 0.7);
+                            color: $color-dark-on-primary-container;
                         }
                     }
                 }
@@ -150,50 +162,64 @@
                     font-size: 0.9rem;
                 }
             }
-        
-            .chat-input {
-                padding: 1rem;
-                background: white;
-                border-top: 1px solid $gray;
 
-                .input-group {
-                    display: flex;
+            .chat-input-wrapper {
+                position: relative;
 
-                    .message-input {
-                        flex: 1;
-                        padding: 0.8rem 1rem;
-                        border: 1px solid $gray;
-                        border-radius: 25px;
-                        font-size: 1rem;
-                        outline: none;
-                        transition: all 0.3s ease;
+                &::before {
+                    $height: 20px;
 
-                        &:focus {
-                            border-color: $primary;
-                            box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.2);
-                        }
-                    }
-                    
-                    .send-btn {
-                        margin-left: 1rem;
-                        width: 50px;
-                        height: 50px;
-                        border-radius: 50%;
-                        background: linear-gradient(135deg, $primary, $primary-dark);
-                        color: white;
-                        border: none;
-                        cursor: pointer;
-                        transition: all 0.3s ease;
+                    content: '';
+                    position: absolute;
+                    top: -$height;
+                    left: 0;
+                    right: 0;
+                    width: 100%;
+                    height: $height;
+                    background: linear-gradient(
+                        0deg,
+                        $color-dark-surface,
+                        rgba(255, 255, 255, 0),
+                    );
+                }
+
+                .chat-input {
+                    margin: 0 20px 20px 20px;
+                    background-color: $color-dark-surface-container;
+                    border-radius: 40px;
+    
+                    .input-group {
                         display: flex;
-                        align-items: center;
-                        justify-content: center;
-
-                        &:hover {
-                            transform: translateY(-2px);
-                            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    
+                        .message-input {
+                            flex: 1;
+                            padding: 10px 20px;
+                            border: none;
+                            border-radius: 25px;
+                            font-size: 1rem;
+                            outline: none;
+                            background-color: inherit;
+                            caret-color: $color-dark-primary;
                         }
-                    }
-                } 
+                        
+                        .send-btn {
+                            margin: 10px;
+                            width: 50px;
+                            height: 50px;
+                            border-radius: 50%;
+                            background-color: $color-dark-primary;
+                            color: $color-dark-on-primary;
+                            border: none;
+                            cursor: pointer;
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                            transition: background-color 0.25s ease;
+    
+                            @include hoverStateLayer($background: $color-dark-primary);
+                        }
+                    } 
+                }
             }
         }
     }
diff --git a/frontend/src/css/common/_material.scss b/frontend/src/css/common/_material.scss
index 323637d..46834c8 100644
--- a/frontend/src/css/common/_material.scss
+++ b/frontend/src/css/common/_material.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 // Dark
 $color-dark-primary: rgb(145 206 244);
 $color-dark-surface-tint: rgb(145 206 244);
@@ -98,4 +100,14 @@ $color-light-surface-container-lowest: rgb(255 255 255);
 $color-light-surface-container-low: rgb(240 244 248);
 $color-light-surface-container: rgb(235 238 243);
 $color-light-surface-container-high: rgb(229 232 237);
-$color-light-surface-container-highest: rgb(223 227 231);
\ No newline at end of file
+$color-light-surface-container-highest: rgb(223 227 231);
+
+@mixin hoverStateLayer($background: $color-surface, $overlayColor: $color-dark-on-primary) {
+    &:hover {
+        background-color: color.mix($overlayColor, $background, 8%);
+    }
+
+    &:active {
+        background-color: color.mix($overlayColor, $background, 18%);
+    }
+}
\ No newline at end of file
diff --git a/frontend/src/css/style.scss b/frontend/src/css/style.scss
index b81dadf..b721e95 100644
--- a/frontend/src/css/style.scss
+++ b/frontend/src/css/style.scss
@@ -3,6 +3,7 @@
 @use "common/animations";
 @use "common/components";
 @use "common/colors" as *;
+@use "common/material" as *;
 
 @use "lib/fonts/montserrat";
 @use "lib/fonts/material-symbols";
@@ -15,7 +16,7 @@
 
 body {
     font-family: 'Montserrat', sans-serif;
-    background-color: #f8f9fa;
-    color: $dark;
+    background-color: $color-dark-surface;
+    color: $color-dark-on-surface;
     line-height: 1.6;
 }
\ No newline at end of file
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 56c8e25..90f0ba4 100644
--- a/frontend/src/main.ts
+++ b/frontend/src/main.ts
@@ -25,7 +25,7 @@ export function addMessage(message: Message, isAuthor: boolean) {
     if (isAuthor) {
         messageDiv.classList.add("sent");
     } else {
-        messageDiv.classList.add("receive");
+        messageDiv.classList.add("received");
     }
     messageDiv.dataset.id = `${message.id}`;