:zap: [Enhance] Prettify UI by adding box-shadow and background-image linear-gradient

components/inputs_binder.js

@@ -1,7 +1,7 @@
 import { setup_temperature_on_select } from "../components/llm_models_loader.js";
 
 export class InputsBinder {
-    constructor() { }
+    constructor() {}
     bind() {
         setup_temperature_on_select();
         let user_input_resizer = new UserInputResizer();
@@ -16,7 +16,7 @@ export class InputsBinder {
 }
 
 class UserInputResizer {
-    constructor() { }
+    constructor() {}
     bind() {
         // https://stackoverflow.com/questions/37629860/automatically-resizing-textarea-in-bootstrap
         document.getElementById("user-input").addEventListener(
@@ -31,7 +31,7 @@ class UserInputResizer {
 }
 
 class ChatSessionContainerResizeBinder {
-    constructor() { }
+    constructor() {}
     bind() {
         this.resize();
         $(window).resize(this.resize.bind(this));
@@ -49,7 +49,7 @@ class ChatSessionContainerResizeBinder {
 class ChatHistorySidebarResizeBinder {
     constructor() {
         this.USER_INTERACTIONS_MAX_WIDTH = 900;
-        this.SIDEBAR_GAP = 10;
+        this.SIDEBAR_GAP = 20;
         this.SIDEBAR_MAX_WIDTH = 300;
         this.SIDEBAR_MIN_WIDTH = 120;
     }
@@ -64,11 +64,17 @@ class ChatHistorySidebarResizeBinder {
         return $("#user-interactions").width();
     }
     get_side_margin() {
-        return (this.get_window_width() - this.get_user_interations_width()) / 2 - this.SIDEBAR_GAP;
+        return (
+            (this.get_window_width() - this.get_user_interations_width()) / 2 -
+            this.SIDEBAR_GAP
+        );
     }
     need_to_show() {
         let sidebar = $("#chat-history-sidebar");
-        return (!sidebar.hasClass("show")) && localStorage.getItem("show_chat_history_sidebar") === "true";
+        return (
+            !sidebar.hasClass("show") &&
+            localStorage.getItem("show_chat_history_sidebar") === "true"
+        );
     }
     resize() {
         let sidebar = $("#chat-history-sidebar");
@@ -93,4 +99,4 @@ class ChatHistorySidebarResizeBinder {
             sidebar.css("min-width", this.SIDEBAR_MIN_WIDTH + "px");
         }
     }
-}
+}

css/default.css

@@ -8,8 +8,27 @@
     max-width: 100vw;
 }
 
+body {
+    background-image: linear-gradient(90deg, #cdd9fd, #cdd9fd);
+}
+
+.content-displayer {
+    box-shadow: 4px 4px 8px 0px rgba(122, 122, 122, 0.2);
+    background-image: linear-gradient(90deg, #e3eaff, #d6e0fd);
+    border-radius: 5px;
+}
+
+#user-interactions {
+    box-shadow: 4px 4px 8px 0px rgba(122, 122, 122, 0.2);
+    background-image: linear-gradient(30deg, #e3eaff, #d6e0fd);
+    border-radius: 10px;
+}
+
 #chat-history-sidebar {
-    background-color: rgba(255, 255, 255, 0.5);
+    box-shadow: 4px 4px 8px 0px rgba(122, 122, 122, 0.2);
+    background-image: linear-gradient(90deg, #cdd9fd, #d6e0fd);
+    border-width: 0px;
+    opacity: 0.8;
 }
 
 /* Adaptation for mobile */
@@ -117,6 +136,7 @@
 
 .fa:hover {
     color: lightsalmon;
+    transform: scale(1.25);
 }
 
 .fa-small {
@@ -127,4 +147,4 @@
 
 .icon-success {
     color: green;
-}
+}

index.html

@@ -82,7 +82,7 @@
                     </button>
                 </div>
             </div>
-            <div class="mt-2 row no-gutters">
+            <div class="my-2 row no-gutters">
                 <div class="col-auto pr-0">
                     <button id="new-chat-session" class="btn px-0">
                         <i class="fa fa-compass"></i>