Improve buttons in web ui

Mozilla-Ocho · Dec 13, 2024 · 43bc1eb · 43bc1eb
1 parent f51e535
commit 43bc1eb
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 12 deletions.
diff --git a/llamafile/server/www/chatbot.css b/llamafile/server/www/chatbot.css
@@ -267,21 +267,23 @@ ul li:first-child {
 }
 
 .redo-button {
+  padding: 0.5rem .5rem;
+  background: #6c757d;
+  color: white;
   padding: 8px;
-  background: transparent;
   border: none;
+  border-radius: 6px;
   cursor: pointer;
   font-size: 20px;
-  color: #666;
   transition: color 0.2s;
 }
 
 .redo-button:hover {
-  color: #000;
+  background: #5c636a;
 }
 
 .settings-button {
-  padding: 0.75rem 1rem;
+  padding: 0.5rem .5rem;
   background: #6c757d;
   color: white;
   border: none;
@@ -483,17 +485,21 @@ ul li:first-child {
 }
 
 .upload-button {
-  padding-left: .5rem;
-  background: transparent;
+  padding: 0.5rem .5rem;
+  background: #6c757d;
+  color: white;
   border: none;
   border-radius: 6px;
   cursor: pointer;
-  font-size: 1rem;
   transition: color 0.2s;
 }
 
+.upload-button img {
+  vertical-align: middle;
+}
+
 .upload-button:hover {
-  color: #0d6efd;
+  background: #5c636a;
 }
 
 .mode-dropdown {

diff --git a/llamafile/server/www/gear.svg b/llamafile/server/www/gear.svg
diff --git a/llamafile/server/www/index.html b/llamafile/server/www/index.html
@@ -31,10 +31,10 @@ <h1>
     <textarea class="chat-input" id="chat-input" placeholder="Type your message..." rows="1" autocomplete="off"></textarea>
     <button class="send-button" id="send-button">Send</button>
     <button class="stop-button" id="stop-button" style="display:none">Stop</button>
-    <button class="settings-button" id="settings-button" title="Settings">⚙️</button>
-    <button class="upload-button" id="upload-button">📎</button>
-    <button class="redo-button" id="redo-button" title="Redo last message">↺</button>
-    <input type="file" id="file-upload" accept="image/*,text/*" style="display: none">
+    <button class="settings-button" id="settings-button" title="Settings"><img src="gear.svg" alt="[settings]" width="30" height="30"></button>
+    <button class="redo-button" id="redo-button" title="Redo last message"><img src="redo.svg" alt="[redo]" width="30" height="30"></button>
+    <button class="upload-button" id="upload-button" title="Upload"><img src="paperclip.svg" alt="[upload]" width="30" height="30"></button>
+    <input type="file" id="file-upload" style="display: none">
   </div>
 </div>
 

diff --git a/llamafile/server/www/paperclip.svg b/llamafile/server/www/paperclip.svg
diff --git a/llamafile/server/www/redo.svg b/llamafile/server/www/redo.svg