Apply styles from the chat mode to the completion mode also

- images
- button styles
- textarea style

Author: corebonts

llamafile/server/www/chatbot.css

@@ -173,12 +173,15 @@ ul li:first-child {
   background-color: transparent;
 }
 
-.chat-input:focus {
+.chat-input:focus,
+#completions-input:focus {
   border-color: #86b7fe;
   box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
 }
 
-.chat-input-container button, .menu-trigger {
+.chat-input-container button,
+.menu-trigger,
+.completions-content button {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -196,7 +199,9 @@ ul li:first-child {
   gap: 0.5em;
 }
 
-.chat-input-button-container button img, .menu-trigger img {
+.chat-input-button-container button img,
+.menu-trigger img,
+.completions-controls img {
   width: 24px;
   height: 24px;
 }
@@ -206,26 +211,33 @@ ul li:first-child {
   gap: 0.5rem;
 }
 
-.chat-input-button-row button, .menu-trigger {
+.chat-input-button-row button,
+.menu-trigger,
+.completions-controls button {
   padding: 0.5rem .5rem;
   background: #9299a0;
 }
 
-.chat-input-button-row button:hover, .menu-trigger:hover {
+.chat-input-button-row button:hover,
+.menu-trigger:hover,
+.completions-controls button:hover {
   background: #5c636a;
 }
 
-.send-button {
+.send-button,
+button.complete-button {
   padding: 0.75rem 1.5rem;
   background: #0d6efd;
   font-size: 1rem;
 }
 
-.send-button:hover {
+.send-button:hover,
+button.complete-button:hover {
   background: #0b5ed7;
 }
 
-.send-button:disabled {
+.send-button:disabled,
+button.complete-button:disabled {
   background: #6c757d;
   cursor: not-allowed;
 }
@@ -461,28 +473,14 @@ ul li:first-child {
   font-size: 1rem;
   font-family: inherit;
   resize: none;
+  outline: none ;
 }
 
 .completions-controls {
   display: flex;
   gap: 0.5rem;
 }
 
-.complete-button {
-  padding: 0.75rem 1.5rem;
-  background: #0d6efd;
-  color: white;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  font-size: 1rem;
-  transition: background-color 0.2s;
-}
-
-.complete-button:hover {
-  background: #0b5ed7;
-}
-
 .mode-dropdown {
   display: none;
 }

llamafile/server/www/index.html

@@ -54,7 +54,7 @@ <h1>
       <span id="model-completions">llamafile</span>
     </h1>
     <div class="menu-dropdown">
-      <button class="menu-trigger">▼</button>
+      <button class="menu-trigger"><img src="menu.svg" alt="[menu]"></button>
       <div class="menu">
         <button class="menu-item" id="completions-mode-switch">Switch to Chat Mode</button>
       </div>
@@ -65,7 +65,7 @@ <h1>
     <div class="completions-controls">
       <button class="complete-button" id="complete-button">Complete</button>
       <button class="stop-button" id="completions-stop-button" style="display:none">Stop</button>
-      <button class="settings-button" id="completions-settings-button" title="Settings">⚙️</button>
+      <button class="settings-button" id="completions-settings-button" title="Settings"><img src="gear.svg" alt="[settings]"></button>
     </div>
   </div>
 </div>