From 363a7d2fc3a407cc46dc8d0e81e3fe80091f0ed1 Mon Sep 17 00:00:00 2001
From: sageTheDM <info@photofuel.tech>
Date: Wed, 9 Oct 2024 13:27:35 +0200
Subject: [PATCH] New and improved buttons for the history

---
 app/components/History.tsx | 35 +++++++++++++++++++++--------------
 app/styles/history.css     | 36 ++++++++++++++++++++++++++++++++++++
 2 files changed, 57 insertions(+), 14 deletions(-)

diff --git a/app/components/History.tsx b/app/components/History.tsx
index e4d593a..d109f24 100644
--- a/app/components/History.tsx
+++ b/app/components/History.tsx
@@ -34,28 +34,35 @@ const History: React.FC = () => {
           {/* Populate with history items */}
           {chatHistory.chats.map((chats, index) => (
             <li key={index}>
-              <a href="#" onClick={() => handleHistoryClick(index)}>{chatHistory.chats[index].name}</a>
+              <a href="#" onClick={() => handleHistoryClick(index)}>
+                {chatHistory.chats[index].name}
+              </a>
             </li>
           ))}
           <li>
             {isEditing ? (
-        <div>
-          <input
-            type="text"
-            value={inputValue}
-            onChange={handleInputChange}
-            placeholder="Enter text"
-          />
-          <button onClick={handleSaveButtonClick}>Save</button>
-        </div>
-      ) : (
-        <button onClick={handleEditButtonClick}>{'New Chat'}</button>
-      )}
+              <div className="input-container">
+                <input
+                  type="text"
+                  value={inputValue}
+                  onChange={handleInputChange}
+                  placeholder="Enter text"
+                  className="chat-input"
+                />
+                <button onClick={handleSaveButtonClick} className="save-btn">
+                  Save
+                </button>
+              </div>
+            ) : (
+              <button onClick={handleEditButtonClick} className="newChat-btn">
+                New Chat
+              </button>
+            )}
           </li>
         </ul>
       </div>
     </div>
-  );
+  );  
 };
 
 export default History;
diff --git a/app/styles/history.css b/app/styles/history.css
index bf92b8e..3580acf 100644
--- a/app/styles/history.css
+++ b/app/styles/history.css
@@ -37,3 +37,39 @@
     height: 86dvh;
     /* padding-bottom: 3dvh; */
 }
+.input-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+}
+.chat-input {
+    border-color: var(--input-border-color);
+    color: var(--text-color);
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    padding: 10px;
+    border-radius: 5px;
+    width: 80%;
+    height: 50px;
+    box-sizing: border-box;
+    line-height: 30px;
+}
+.save-btn, .newChat-btn {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    width: 20%;
+    height: 50px;
+    background-color: var(--input-button-color);
+    color: var(--text-color);
+    border: none;
+    font-size: 0.9em;
+    border-radius: 5px;
+    margin-left: 10px;
+}
+
+.newChat-btn{
+    margin-left: 0px;
+}
+