style: changed the color for the header inside the drawer, to not have too much green everywhere

src/modules/chatbot/components/conversation-box.vue

@@ -26,8 +26,7 @@ const stopDrag = () => {
 
 window.addEventListener('mousemove', onDrag)
 window.addEventListener('mouseup', stopDrag)
-
-
+//--------------------------------------------
 
 // Block to handle the incomming and sending of the messages from the user and the ai
 const text = ref('');
@@ -76,6 +75,7 @@ const handleSend = async () => {
   }
 
 };
+//---------------------------------------------
 </script>
 
 <template>
@@ -86,23 +86,29 @@ const handleSend = async () => {
     style="box-shadow: -4px 0 12px rgba(0,0,0,0.15);"
     :width="drawerWidth"
   >
-    <div class="chat-header">AI Assistant</div>
+    <div
+      class="chat-header"
+      style="text-align:start; padding: 10px 10px 0px;"
+    >AI Assistant</div>
+    <div class="line-separator"></div>
 
     <div class="chat-body">
       <DialogueContent :messages="messages" />
     </div>
 
+    <div class="line-separator"></div>
     <q-form
       @submit="handleSend"
       class="chat-footer row"
     >
+
       <q-input
         v-model="text"
         label="Enter a Message"
         autogrow
         class="col"
         @keydown.enter="handleSend"
-        style="margin-left: 10px;"
+        style="margin-left: 8px;"
       />
     </q-form>
     <div
@@ -131,6 +137,12 @@ const handleSend = async () => {
   /* invisible but hoverable */
 }
 
+.line-separator {
+  height: 1px;
+  background-color: #ccc;
+  margin: 10px 0;
+}
+
 .chat-drawer {
   display: flex;
   flex-direction: column;
@@ -139,8 +151,7 @@ const handleSend = async () => {
 
 /* Header at the top */
 .chat-header {
-  background: #019547;
-  color: white;
+  color: #019547;
   padding: 10px;
   font-weight: bold;
   flex-shrink: 0;
@@ -151,6 +162,6 @@ const handleSend = async () => {
   flex: 1;
   padding: 10px;
   overflow-y: auto;
-  height: 85%;
+  height: 81%;
 }
 </style>