The first working Theme Settings

app/components/Settings.tsx

@@ -1,8 +1,92 @@
-import React, { useState } from'react';
+import React, { useState, useEffect } from 'react';
 
 const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ({ closeSettings, accountName }) => {
   const [activeSection, setActiveSection] = useState('general');
 
+  // Theme settings state
+  const [backgroundColor, setBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--background-color').trim());
+  const [textColor, setTextColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--text-color').trim());
+  const [inputBackgroundColor, setInputBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--input-background-color').trim());
+  const [inputButtonColor, setInputButtonColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--input-button-color').trim());
+  const [inputButtonHoverColor, setInputButtonHoverColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--input-button-hover-color').trim());
+  const [userMessageBackgroundColor, setUserMessageBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--user-message-background-color').trim());
+  const [userMessageTextColor, setUserMessageTextColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--user-message-text-color').trim());
+  const [aiMessageBackgroundColor, setAiMessageBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--ai-message-background-color').trim());
+  const [aiMessageTextColor, setAiMessageTextColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--ai-message-text-color').trim());
+  const [buttonBackgroundColor, setButtonBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--button-background-color').trim());
+  const [buttonHoverBackgroundColor, setButtonHoverBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--button-hover-background-color').trim());
+  const [modelsBackgroundColor, setModelsBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--models-background-color').trim());
+  const [historyBackgroundColor, setHistoryBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--history-background-color').trim());
+  const [leftPanelBackgroundColor, setLeftPanelBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--left-panel-background-color').trim());
+  const [conversationBackgroundColor, setConversationBackgroundColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--conversation-background-color').trim());
+  const [popUpTextColor, setPopUpTextColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--pop-up-text').trim());
+  const [inputBorderColor, setInputBorderColor] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--input-border-color').trim());
+  const [fontFamily, setFontFamily] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--font-family').trim());
+  const [fontSize, setFontSize] = useState<string>(getComputedStyle(document.documentElement).getPropertyValue('--font-size').trim());
+
+  // General settings state
+  const [preferredLanguage, setPreferredLanguage] = useState<string>('English');
+  const [preferredCurrency, setPreferredCurrency] = useState<string>('USD');
+  const [dateFormat, setDateFormat] = useState<string>('MM/DD/YYYY');
+  const [timeFormat, setTimeFormat] = useState<string>('12-hour');
+  const [timeZone, setTimeZone] = useState<string>('UTC');
+
+  // Privacy settings state
+  const [disableOnlineAI, setDisableOnlineAI] = useState<boolean>(false);
+  const [disableChatHistory, setDisableChatHistory] = useState<boolean>(false);
+  const [disableAIMemory, setDisableAIMemory] = useState<boolean>(false);
+
+  // FOSS settings state
+  const [openSourceMode, setOpenSourceMode] = useState<boolean>(false);
+
+  // Account settings state
+  const [newName, setNewName] = useState<string>('');
+  const [newEmail, setNewEmail] = useState<string>('');
+  const [newPassword, setNewPassword] = useState<string>('');
+
+  // Effect to update CSS variables on theme state change
+  useEffect(() => {
+    document.documentElement.style.setProperty('--background-color', backgroundColor);
+    document.documentElement.style.setProperty('--text-color', textColor);
+    document.documentElement.style.setProperty('--input-background-color', inputBackgroundColor);
+    document.documentElement.style.setProperty('--input-button-color', inputButtonColor);
+    document.documentElement.style.setProperty('--input-button-hover-color', inputButtonHoverColor);
+    document.documentElement.style.setProperty('--user-message-background-color', userMessageBackgroundColor);
+    document.documentElement.style.setProperty('--user-message-text-color', userMessageTextColor);
+    document.documentElement.style.setProperty('--ai-message-background-color', aiMessageBackgroundColor);
+    document.documentElement.style.setProperty('--ai-message-text-color', aiMessageTextColor);
+    document.documentElement.style.setProperty('--button-background-color', buttonBackgroundColor);
+    document.documentElement.style.setProperty('--button-hover-background-color', buttonHoverBackgroundColor);
+    document.documentElement.style.setProperty('--models-background-color', modelsBackgroundColor);
+    document.documentElement.style.setProperty('--history-background-color', historyBackgroundColor);
+    document.documentElement.style.setProperty('--left-panel-background-color', leftPanelBackgroundColor);
+    document.documentElement.style.setProperty('--conversation-background-color', conversationBackgroundColor);
+    document.documentElement.style.setProperty('--pop-up-text', popUpTextColor);
+    document.documentElement.style.setProperty('--input-border-color', inputBorderColor);
+    document.documentElement.style.setProperty('--font-family', fontFamily);
+    document.documentElement.style.setProperty('--font-size', fontSize);
+  }, [
+    backgroundColor,
+    textColor,
+    inputBackgroundColor,
+    inputButtonColor,
+    inputButtonHoverColor,
+    userMessageBackgroundColor,
+    userMessageTextColor,
+    aiMessageBackgroundColor,
+    aiMessageTextColor,
+    buttonBackgroundColor,
+    buttonHoverBackgroundColor,
+    modelsBackgroundColor,
+    historyBackgroundColor,
+    leftPanelBackgroundColor,
+    conversationBackgroundColor,
+    popUpTextColor,
+    inputBorderColor,
+    fontFamily,
+    fontSize
+  ]);
+
   const renderSettingsContent = () => {
     switch (activeSection) {
       case 'general':
@@ -10,209 +94,312 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
           <div className="settings-section">
             <h2>General Settings</h2>
             <div className="settings-option">
-              <p>Change Language</p>
-              <select>
-                <option value="en">English</option>
-                <option value="es">Spanish</option>
-                <option value="fr">French</option>
-                <option value="de">German</option>
-                <option value="it">Italian</option>
-                <option value="pt">Portuguese</option>
-                <option value="zh">Chinese</option>
-                <option value="ja">Japanese</option>
-                <option value="ko">Korean</option>
-                <option value="ar">Arabic</option>
-                <option value="ru">Russian</option>
-                <option value="he">Hebrew</option>
-              </select>
+              <label>Preferred Language</label>
+              <input
+                type="text"
+                value={preferredLanguage}
+                onChange={(e) => setPreferredLanguage(e.target.value)}
+              />
             </div>
             <div className="settings-option">
-              <p>Notifications</p>
-              <label>
-                <input type="checkbox" /> Enable notifications
-              </label>
+              <label>Preferred Currency</label>
+              <input
+                type="text"
+                value={preferredCurrency}
+                onChange={(e) => setPreferredCurrency(e.target.value)}
+              />
             </div>
             <div className="settings-option">
-              <p>Notification Frequency</p>
-              <select>
-                <option value="instant">Instant</option>
-                <option value="daily">Daily</option>
-                <option value="weekly">Weekly</option>
-                <option value="monthly">Monthly</option>
-                <option value="quarterly">Quarterly</option>
-                <option value="annually">Annually</option>
-              </select>
+              <label>Date Format</label>
+              <input
+                type="text"
+                value={dateFormat}
+                onChange={(e) => setDateFormat(e.target.value)}
+              />
             </div>
             <div className="settings-option">
-              <p>Time Zone</p>
-              <select>
-                <option value="utc">UTC</option>
-                <option value="est">EST</option>
-                <option value="pst">PST</option>
-                <option value="gmt">GMT</option>
-                <option value="cst">CST</option>
-                <option value="mst">MST</option>
-                <option value="bst">BST</option>
-                <option value="cest">CEST</option>
-              </select>
+              <label>Time Format</label>
+              <input
+                type="text"
+                value={timeFormat}
+                onChange={(e) => setTimeFormat(e.target.value)}
+              />
             </div>
             <div className="settings-option">
-              <p>Auto-Save</p>
-              <label>
-                <input type="checkbox" /> Enable auto-save
-              </label>
-            </div>
-            <div className="settings-option">
-              <p>Auto-Save Frequency</p>
-              <select>
-                <option value="5">Every 5 minutes</option>
-                <option value="10">Every 10 minutes</option>
-                <option value="15">Every 15 minutes</option>
-                <option value="30">Every 30 minutes</option>
-                <option value="60">Every hour</option>
-              </select>
-            </div>
-            <div className="settings-option">
-              <p>Default Currency</p>
-              <select>
-                <option value="usd">USD</option>
-                <option value="eur">EUR</option>
-                <option value="gbp">GBP</option>
-                <option value="jpy">JPY</option>
-                <option value="cny">CNY</option>
-                <option value="aud">AUD</option>
-              </select>
-            </div>
-            <div className="settings-option">
-              <p>Date Format</p>
-              <select>
-                <option value="mm/dd/yyyy">MM/DD/YYYY</option>
-                <option value="dd/mm/yyyy">DD/MM/YYYY</option>
-                <option value="yyyy-mm-dd">YYYY-MM-DD</option>
-              </select>
-            </div>
-            <div className="settings-option">
-              <p>Time Format</p>
-              <select>
-                <option value="12-hour">12-hour clock</option>
-                <option value="24-hour">24-hour clock</option>
-              </select>
+              <label>Time Zone</label>
+              <input
+                type="text"
+                value={timeZone}
+                onChange={(e) => setTimeZone(e.target.value)}
+              />
             </div>
           </div>
         );
+
       case 'privacy':
         return (
           <div className="settings-section">
             <h2>Privacy Settings</h2>
             <div className="settings-option">
-              <p>Data Collection</p>
               <label>
-                <input type="checkbox" /> Allow data collection
+                <input
+                  type="checkbox"
+                  checked={disableOnlineAI}
+                  onChange={() => setDisableOnlineAI(!disableOnlineAI)}
+                />
+                Disable Online AI
               </label>
             </div>
             <div className="settings-option">
-              <p>Location Access</p>
               <label>
-                <input type="checkbox" /> Enable location access
+                <input
+                  type="checkbox"
+                  checked={disableChatHistory}
+                  onChange={() => setDisableChatHistory(!disableChatHistory)}
+                />
+                Disable Chat History Save
               </label>
             </div>
             <div className="settings-option">
-              <p>Two-Factor Authentication</p>
               <label>
-                <input type="checkbox" /> Enable 2FA
+                <input
+                  type="checkbox"
+                  checked={disableAIMemory}
+                  onChange={() => setDisableAIMemory(!disableAIMemory)}
+                />
+                Disable AI Memory
               </label>
             </div>
             <div className="settings-option">
-              <p>Data Export</p>
-              <button>Export Data</button>
-            </div>
-            <div className="settings-option">
-              <p>Cookie Policy</p>
-              <label>
-                <input type="checkbox" /> Accept cookie policy
-              </label>
-            </div>
-            <div className="settings-option">
-              <p>GDPR Compliance</p>
-              <label>
-                <input type="checkbox" /> I agree to GDPR terms
-              </label>
-            </div>
-            <div className="settings-option">
-              <p>CCPA Compliance</p>
-              <label>
-                <input type="checkbox" /> I agree to CCPA terms
-              </label>
-            </div>
-            <div className="settings-option">
-              <p>Biometric Data</p>
-              <label>
-                <input type="checkbox" /> Allow biometric data collection
-              </label>
+              <button onClick={() => {/* Export data logic */}}>Export My Data</button>
             </div>
           </div>
         );
+
         case 'theme':
           return (
             <div className="settings-section">
               <h2>Theme Settings</h2>
-            <div className="settings-option">
-              <p>Choose Theme Color</p>
-              <input type="color" />
-            </div>
               <div className="settings-option">
               <p>Font Size</p>
-              <input type="range" min="10" max="30" />
+              <input
+                type="range"
+                min="12"
+                max="30"
+                value={parseInt(fontSize, 10)} // Ensure value is a number
+                onChange={(e) => {
+                  const newSize = `${e.target.value}px`;
+                  setFontSize(newSize);
+                  document.documentElement.style.setProperty('--font-size', newSize); // Update the CSS variable
+                }}
+              />
+              <span>{fontSize}</span>
               </div>
               <div className="settings-option">
-              <p>Background Pattern</p>
-              <select>
-                <option value="solid">Solid</option>
-                <option value="striped">Striped</option>
-                <option value="dots">Dotted</option>
-                <option value="grid">Grid</option>
-              </select>
+                <p>Background Color</p>
+                <input
+                  type="color"
+                  value={backgroundColor}
+                  onChange={(e) => setBackgroundColor(e.target.value)}
+                />
+              </div>
+              <div className="settings-option">
+                <p>Text Color</p>
+                <input
+                  type="color"
+                  value={textColor}
+                  onChange={(e) => setTextColor(e.target.value)}
+                />
+              </div>
+              <div className="settings-option">
+                <p>Input Background Color</p>
+                <input
+                  type="color"
+                  value={inputBackgroundColor}
+                  onChange={(e) => setInputBackgroundColor(e.target.value)}
+                />
+              </div>
+              <div className="settings-option">
+                <p>Input Button Color</p>
+                <input
+                  type="color"
+                  value={inputButtonColor}
+                  onChange={(e) => setInputButtonColor(e.target.value)}
+                />
+              </div>
+              <div className="settings-option">
+                <p>Input Button Hover Color</p>
+                <input
+                  type="color"
+                  value={inputButtonHoverColor}
+                  onChange={(e) => setInputButtonHoverColor(e.target.value)}
+                />
+              </div>
+              <div className="settings-option">
+                <p>User Message Background Color</p>
+                <input
+                  type="color"
+                  value={userMessageBackgroundColor}
+                  onChange={(e) => setUserMessageBackgroundColor(e.target.value)}
+                />
+              </div>
+              <div className="settings-option">
+                <p>User Message Text Color</p>
+                <input
+                  type="color"
+                  value={userMessageTextColor}
+                  onChange={(e) => setUserMessageTextColor(e.target.value)}
+                />
+              </div>
+              <div className="settings-option">
+                <p>AI Message Background Color</p>
+                <input
+                  type="color"
+                  value={aiMessageBackgroundColor}
+                  onChange={(e) => setAiMessageBackgroundColor(e.target.value)}
+                />
+              </div>
+              <div className="settings-option">
+                <p>AI Message Text Color</p>
+                <input
+                  type="color"
+                  value={aiMessageTextColor}
+                  onChange={(e) => setAiMessageTextColor(e.target.value)}
+                />
+              </div>
+              <div className="settings-option">
+                <p>Button Background Color</p>
+                <input
+                  type="color"
+                  value={buttonBackgroundColor}
+                  onChange={(e) => setButtonBackgroundColor(e.target.value)}
+                />
+              </div>
+              <div className="settings-option">
+                <p>Button Hover Background Color</p>
+                <input
+                  type="color"
+                  value={buttonHoverBackgroundColor}
+                  onChange={(e) => setButtonHoverBackgroundColor(e.target.value)}
+                />
+              </div>
+              <div className="settings-option">
+                <p>Models Background Color</p>
+                <input
+                  type="color"
+                  value={modelsBackgroundColor}
+                  onChange={(e) => setModelsBackgroundColor(e.target.value)}
+                />
+              </div>
+              <div className="settings-option">
+                <p>History Background Color</p>
+                <input
+                  type="color"
+                  value={historyBackgroundColor}
+                  onChange={(e) => setHistoryBackgroundColor(e.target.value)}
+                />
+              </div>
+              <div className="settings-option">
+                <p>Left Panel Background Color</p>
+                <input
+                  type="color"
+                  value={leftPanelBackgroundColor}
+                  onChange={(e) => setLeftPanelBackgroundColor(e.target.value)}
+                />
+              </div>
+              <div className="settings-option">
+                <p>Conversation Background Color</p>
+                <input
+                  type="color"
+                  value={conversationBackgroundColor}
+                  onChange={(e) => setConversationBackgroundColor(e.target.value)}
+                />
+              </div>
+              <div className="settings-option">
+                <p>Pop-up Text Color</p>
+                <input
+                  type="color"
+                  value={popUpTextColor}
+                  onChange={(e) => setPopUpTextColor(e.target.value)}
+                />
+              </div>
+              <div className="settings-option">
+                <p>Input Border Color</p>
+                <input
+                  type="color"
+                  value={inputBorderColor}
+                  onChange={(e) => setInputBorderColor(e.target.value)}
+                />
               </div>
               <div className="settings-option">
                 <p>Font Family</p>
-              <select>
-                <option value="arial">Arial</option>
-                <option value="calibri">Calibri</option>
-                <option value="helvetica">Helvetica</option>
-              </select>
-            </div>
-            <div className="settings-option">
-              <p>Button Style</p>
-              <select>
-                <option value="flat">Flat</option>
-                <option value="raised">Raised</option>
-                <option value="rounded">Rounded</option>
+                <select
+                  value={fontFamily}
+                  onChange={(e) => setFontFamily(e.target.value)}
+                >
+                  <option value="'Arial', sans-serif">Arial</option>
+                  <option value="'Calibri', sans-serif">Calibri</option>
+                  <option value="'Helvetica', sans-serif">Helvetica</option>
+                  <option value="'Times New Roman', serif">Times New Roman</option>
+                  <option value="'Poppins', sans-serif">Poppins</option>
                 </select>
               </div>
             </div>
           );
+        
+      case 'foss':
+        return (
+          <div className="settings-section">
+            <h2>FOSS Settings</h2>
+            <div className="settings-option">
+              <label>
+                <input
+                  type="checkbox"
+                  checked={openSourceMode}
+                  onChange={() => setOpenSourceMode(!openSourceMode)}
+                />
+                Enable Open Source Mode
+              </label>
+              <p>(ONLY OPEN SOURCE MODULES WORK IN THERE)</p>
+            </div>
+          </div>
+        );
+
       case 'account':
         return (
           <div className="settings-section">
             <h2>Account Settings</h2>
             <div className="settings-option">
-              <p>Change Name</p>
-              <input type="text" placeholder="New Name" />
+              <label>Change Name</label>
+              <input
+                type="text"
+                value={newName}
+                onChange={(e) => setNewName(e.target.value)}
+              />
             </div>
             <div className="settings-option">
-              <p>Change Email</p>
-              <input type="email" placeholder="New Email" />
+              <label>Change Email</label>
+              <input
+                type="email"
+                value={newEmail}
+                onChange={(e) => setNewEmail(e.target.value)}
+              />
             </div>
             <div className="settings-option">
-              <p>Change Password</p>
-              <input type="password" placeholder="New Password" />
+              <label>Change Password</label>
+              <input
+                type="password"
+                value={newPassword}
+                onChange={(e) => setNewPassword(e.target.value)}
+              />
             </div>
-            <div className="settings-option">
-              <p>Delete Account</p>
-              <button>Delete Account</button>
+            <div className="danger-zone">
+              <h3>DANGER ZONE</h3>
+              <button onClick={() => {/* Delete account logic */}}>Delete Account</button>
             </div>
           </div>
         );
+
       default:
         return null;
     }
@@ -227,6 +414,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
               <li onClick={() => setActiveSection('general')}>General</li>
               <li onClick={() => setActiveSection('privacy')}>Privacy</li>
               <li onClick={() => setActiveSection('theme')}>Theme</li>
+              <li onClick={() => setActiveSection('foss')}>FOSS</li>
               <li onClick={() => setActiveSection('account')}>Account</li>
             </ul>
           </div>

app/styles/Login.css

@@ -36,8 +36,8 @@
 
 /* Popup content box */
 .popup-content {
-    background: var(--background-color);
-    color: var(--text-color);
+    background: var(--popup-background-color); /* Use variable for background color */
+    color: var(--popup-text-color); /* Use variable for text color */
     padding: 30px;
     border-radius: 10px;
     width: 300px;
@@ -63,7 +63,7 @@
 
 /* Close button */
 .close-popup {
-    background: red; /* Exception to the rule */
+    background: var(--close-button-color); /* Use variable for close button color */
     color: var(--text-color);
     border: none;
     border-radius: 5px;
@@ -73,7 +73,7 @@
 }
 
 .log-into-account {
-    background: green; /* Exception to the rule */
+    background: var(--login-button-color); /* Use variable for login button color */
     color: var(--text-color);
     border: none;
     border-radius: 5px;
@@ -111,6 +111,6 @@
 }
 
 .popup-content p {
-    color: var(--pop-up-text);
+    color: var(--popup-text-color); /* Use variable for paragraph text color */
     margin: 10px;
 }

app/styles/Settings.css

@@ -12,18 +12,27 @@
     z-index: 10000;
 }
 
-.settings-container{
+.settings-main h2 {
+    margin-bottom: 1em;
+}   
 
+.settings-main p {
+    padding-bottom: 7px;
+}
+
+/* Main container for the settings */
+.settings-container {
     display: grid;
     grid-template-columns: 1fr 3fr; /* 1fr for sidebar, 3fr for main content */
     grid-auto-flow: column;
-    overflow-x:hidden;
+    overflow-x: hidden;
+    height: 100%; /* Ensure it takes full height */
 }
 
 /* Settings content */
 .settings-content {
-    background: #f5f5f5;
-    color: #333;
+    background: var(--history-background-color);
+    color: var(--text-color);
     padding: 20px;
     border-radius: 10px;
     width: 90%;
@@ -31,13 +40,15 @@
     height: 90%;
     max-height: 600px;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
-    overflow: scroll; /* Prevents overflow of the content */
+    overflow: hidden; /* Prevents overflow of the content */
     position: relative; /* Needed for absolute positioning of close button */
+    display: flex;
+    flex-direction: column; /* Flexbox for vertical stacking */
 }
 
 /* Sidebar styles */
 .sidebar {
-    background: #e0e0e0;
+    background: var(--settings-background-color);
     padding: 20px;
     border-radius: 10px 0 0 10px; /* Rounded corners on the left side */
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
@@ -45,15 +56,17 @@
     display: flex;
     flex-direction: column;
     grid-column: 1; /* Places sidebar in the first grid column */
+    height: 100%; /* Ensures sidebar takes full height */
 }
 
 /* Sidebar item styles */
 .sidebar ul {
     list-style-type: none;
     padding: 0;
-    margin: 0; /* Ensure no margin for the list */
+    margin: 0;
     display: flex;
     flex-direction: column; /* Make the ul a column */
+    flex-grow: 1; /* Allows the list to take available space */
 }
 
 .sidebar li {
@@ -65,11 +78,11 @@
 }
 
 .sidebar li:hover {
-    background: #d0d0d0; /* Highlight on hover */
+    background: var(--input-button-hover-color); /* Highlight on hover */
 }
 
 .sidebar li.active {
-    background: #b0b0b0; /* Active section highlight */
+    background: var(--button-hover-background-color); /* Active section highlight */
 }
 
 /* Main settings area */
@@ -78,14 +91,14 @@
     padding: 20px;
     border-radius: 0 10px 10px 0; /* Rounded corners on the right side */
     overflow-y: auto; /* Scroll if content exceeds height */
-    display: flex; /* Ensure main settings area displays content correctly */
+    display: flex;
     flex-direction: column; /* Stack content vertically */
 }
 
 /* Close button positioning */
 .close-popup {
-    background-color: #ff4d4d;
-    color: #fff;
+    background-color: var(--close-button-color);
+    color: var(--user-message-text-color);
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
     padding: 10px 20px;
     border: none;
@@ -98,21 +111,39 @@
 }
 
 .close-popup:hover {
-    background-color: #e63939; /* Darker red on hover */
+    background-color: var(--close-button-hover-color); /* Darker red on hover */
 }
 
 /* Additional styles for inputs and options */
+.settings-option {
+    margin-bottom: 20px; /* Adds space between each setting option */
+    padding-bottom: 10px; /* Adds internal spacing */
+    border-bottom: 1px solid var(--input-border-color); /* Optional, creates a separator between options */
+}
+
+.settings-option:last-child {
+    margin-bottom: 0; /* Removes bottom margin from last option */
+    border-bottom: none; /* Removes separator from last option */
+}
+
 .settings-option input[type="text"],
 .settings-option input[type="email"],
 .settings-option input[type="password"],
 .settings-option input[type="color"],
 .settings-option input[type="range"],
 .settings-option select {
-    border-color: #ccc;
-    color: #333;
+    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: 100%;
-    margin-bottom: 10px; /* Add spacing between inputs */
+    margin-bottom: 10px; /* Adds spacing between inputs */
+}
+
+/* Optional additional spacing for labels */
+.settings-option label {
+    margin-bottom: 5px;
+    display: block;
+    font-weight: bold;
 }

app/styles/container.css

@@ -12,6 +12,8 @@
 .left-panel {
     width: 25vw; /* Adjust as needed */
     transition: width 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; /* Smooth transitions for all properties */
+    background-color: var(--left-panel-background-color); /* Use variable for background color */
+    border-radius: 0 1em 0 0;
 }
 
 .left-panel.hidden {
@@ -23,6 +25,8 @@
 .conversation-container {
     flex: 1;
     transition: margin-left 0.3s ease; /* Smooth margin adjustment */
+    background-color: var(--conversation-background-color); /* Use variable for background color */
+    border-radius: 1em 0 0 0;
 }
 
 /* Adjust margin-left when panel is shown or hidden */

app/styles/doc.css

@@ -9,7 +9,7 @@
   max-width: 900px;
   height: 80vh;
   margin: 0 auto;
-  background: #fff;
+  background: var(--doc-background-color); /* Use variable for background */
   padding: 2rem;
   border-radius: 8px;
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
@@ -18,29 +18,27 @@
 
 .title {
   font-size: 2rem;
-  color: #333;
+  color: var(--doc-title-color); /* Use variable for title color */
   margin-bottom: 1.5rem;
 }
 
 .subtitle {
   font-size: 1.5rem;
-  color: #555;
+  color: var(--doc-subtitle-color); /* Use variable for subtitle color */
   margin-top: 2rem;
   margin-bottom: 1rem;
 }
 
 .subsection-title {
   font-size: 1.25rem;
-  color: #666;
+  color: var(--doc-subsection-title-color); /* Use variable for subsection title color */
   margin-top: 1.5rem;
   margin-bottom: 0.75rem;
 }
 
 .paragraph {
   font-size: 1rem;
-  color: #333;
+  color: var(--doc-paragraph-color); /* Use variable for paragraph color */
   margin-bottom: 1.5rem;
   line-height: 1.6;
 }
-
-

app/styles/faq.css

@@ -11,7 +11,7 @@
     max-width: 800px;
     width: 90%;
     padding: 20px;
-    background-color: #222;
+    background-color: var(--faq-background-color); /* Use variable for background */
     border-radius: 10px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
     overflow-y: scroll; /* Allow vertical scrolling if content overflows */
@@ -21,7 +21,7 @@
 
 #faq h2 {
     text-align: center;
-    color: #00ccff;
+    color: var(--faq-heading-color); /* Use variable for heading color */
     font-size: 2em;
     margin-bottom: 20px;
 }
@@ -30,22 +30,22 @@
     margin-bottom: 20px;
     padding: 10px;
     border-radius: 5px;
-    background-color: #333;
+    background-color: var(--faq-item-background-color); /* Use variable for item background */
     transition: background-color 0.3s ease-in-out;
 }
 
 .faq-item h3 {
-    color: #00ccff;
+    color: var(--faq-item-heading-color); /* Use variable for item heading color */
     margin-bottom: 10px;
     font-size: 1.5em;
 }
 
 .faq-item p {
-    color: #ddd;
+    color: var(--faq-item-text-color); /* Use variable for item text color */
     font-size: 1.1em;
     line-height: 1.5;
 }
 
 .faq-item:hover {
-    background-color: #444;
+    background-color: var(--faq-item-hover-background-color); /* Use variable for hover background */
 }

app/styles/global.css

@@ -14,5 +14,34 @@ body {
     background-color: var(--background-color);
     color: var(--text-color);
     font-family: var(--font-family);
+    font-size: var(--font-size);
     margin-bottom: 0.5em;
 }
+
+
+header {
+    background-color: var(--header-background-color);
+    color: var(--header-text-color);
+    padding: 1rem; /* Adjust padding as needed */
+}
+
+button {
+    background-color: var(--button-background-color);
+    color: var(--text-color);
+    border: 1px solid var(--input-border-color);
+    transition: background-color 0.3s ease;
+}
+
+button:hover {
+    background-color: var(--button-hover-background-color);
+}
+
+input {
+    background-color: var(--input-background-color);
+    border: 1px solid var(--input-border-color);
+    color: var(--text-color);
+}
+
+input:hover {
+    border-color: var(--button-hover-background-color);
+}

app/styles/header.css

@@ -1,6 +1,6 @@
 header {
-    background-color: var(--background-color);
-    color: black;
+    background-color: var(--header-background-color); /* Use the new header background color */
+    color: var(--header-text-color); /* Use the new header text color */
     width: 100%;
     text-decoration: none;
     position: fixed;
@@ -24,7 +24,7 @@ header img {
 
 header a, 
 header li button {
-    color: black;
+    color: var(--header-text-color); /* Use the new header text color */
     text-decoration: none;
     transition: color 0.3s;
     border: none;
@@ -34,5 +34,5 @@ header li button {
 
 header a:hover,
 header li button:hover {
-    color: var(--input-button-color);
+    color: var(--input-button-color); /* Keep the hover color */
 }

app/styles/history.css

@@ -29,7 +29,7 @@
 .history ul li a {
     display: block;
     text-decoration: none;
-    color: white;
+    color: var(--text-color); /* Use variable for link text color */
     width: 100%;
     padding: 5px;
 }

app/styles/input.css

@@ -22,8 +22,8 @@
     border: 2px solid var(--input-button-color);
     outline: none;
     margin-right: 10px;
-    background-color: rgba(255, 255, 255, 0.9);
-    color: #333;
+    background-color: var(--input-background-color); /* Use variable for background */
+    color: var(--text-color); /* Use variable for text color */
     transition: border-color 0.3s ease-in-out;
     height: 7vh;
 }
@@ -36,7 +36,7 @@
     padding: 1em;
     margin: 5px;
     background-color: var(--input-button-color);
-    color: white;
+    color: var(--user-message-text-color); /* Use variable for button text color */
     border: none;
     border-radius: 50%;
     font-size: 1.5em;

app/styles/models.css

@@ -1,21 +1,20 @@
 .model-background {
-    grid-column: 1/2;
-    grid-row: 2/5;
+    grid-column: 1 / 2;
+    grid-row: 2 / 5;
     overflow-y: auto;
-    background-color: var(--models-background-color);
+    background-color: var(--models-background-color); /* Ensure this variable is defined */
     border-radius: 2em;
     padding: 1em;
     margin-left: 1em;
     height: 40vh;
     box-sizing: border-box;
-    overflow: hidden;
 }
 
 .models {
-    grid-column: 1/2;
-    grid-row: 2/5;
+    grid-column: 1 / 2;
+    grid-row: 2 / 5;
     overflow-y: auto;
-    background-color: var(--models-background-color);
+    background-color: var(--models-background-color); /* Ensure this variable is defined */
     border-radius: 2em;
     padding: 1em;
     height: 100%;
@@ -55,7 +54,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    color: #fff;
+    color: var(--text-color); /* Use variable for text color */
     border-radius: 5%;
     overflow: hidden;
     position: relative;
@@ -70,7 +69,7 @@
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.7);
-    color: white;
+    color: var(--text-color); /* Use variable for overlay text color */
     display: flex;
     justify-content: center;
     align-items: center;
@@ -103,7 +102,7 @@
 
 .math-model {
     background-image: url(/img/math.jpg);
-    background-color: white;
+    background-color: var(--background-color); /* Use variable for background color */
     background-position: center;
     background-repeat: no-repeat;
     background-size: contain;
@@ -111,7 +110,7 @@
 
 .language-model {
     background-image: url(/img/language.jpg);
-    background-color: #72cce4;
+    background-color: #72cce4; /* Use variable for background color */
     background-repeat: no-repeat;
     background-size: contain;
     background-position: center;

app/styles/output.css

@@ -11,8 +11,7 @@
     justify-content: flex-start;
     font-size: 1em;
     overflow-y: auto;
-    margin-bottom: 0;
-    width: 100% -2em;
+    width: calc(100% - 2em); /* Corrected calculation for width */
     height: 70vh;
     margin-bottom: 1vh;
 }
@@ -59,10 +58,8 @@
     background: none;
     border: none;
     cursor: pointer;
-    background-color: var(--button-background-color);
     border-radius: 50%;
     padding: 10px;
-    padding-top: 0;
     transition: background-color 0.3s ease;
 }
 

app/styles/responsive.css

@@ -1,6 +1,6 @@
 /* Responsive behavior - applies only on smaller screens */
 @media (max-width: 1200px) {
-  *{
+  * {
     margin: 0;
     padding: 0;
   }
@@ -28,7 +28,7 @@
     padding: 0;
   }
 
-  header li{
+  header li {
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -99,6 +99,8 @@
     font-size: 1em; /* Adjust font size */
     max-width: 65%;
     margin-right: 0;
+    border-color: var(--input-border-color); /* Use variable for input border */
+    color: var(--text-color); /* Use variable for text color */
   }
 
   .input button {
@@ -106,11 +108,12 @@
     width: 40px; /* Adjust button width */
     font-size: 1.2em; /* Adjust button font size */
     margin: auto;
+    background-color: var(--input-button-color); /* Use variable for button color */
+    color: var(--user-message-text-color); /* Use variable for button text color */
   }
 }
 
-
-/* Responsive adjustments for the settings*/
+/* Responsive adjustments for the settings */
 @media (max-width: 768px) {
   .settings-content {
     flex-direction: column; /* Stack sidebar and main content on smaller screens */

app/styles/scrollbar.css

@@ -8,10 +8,10 @@
 }
 
 .scrollbar::-webkit-scrollbar-thumb {
-  background-color: #ccc;
+  background-color: var(--input-border-color); /* Use variable for thumb color */
   border-radius: 4px;
 }
 
 .scrollbar::-webkit-scrollbar-track {
-  background-color: #f1f1f1;
+  background-color: var(--history-background-color); /* Use variable for track color */
 }

app/styles/user-ai-messages.css

@@ -11,7 +11,7 @@
 }
 
 .user-message {
-    background-color: var(--user-message-color);
+    background-color: var(--user-message-background-color);
     color: var(--text-color);
     border-bottom-right-radius: 0;
     margin-left: auto;
@@ -19,7 +19,7 @@
 }
 
 .ai-message {
-    background-color: var(--ai-message-color);
+    background-color: var(--ai-message-background-color);
     color: var(--text-color);
     border-bottom-left-radius: 0;
     margin-right: auto;

app/styles/variables.css

@@ -1,16 +1,34 @@
 :root {
-    --background-color: white;
-    --text-color: white;
-    --font-family: Arial, sans-serif;
-    --history-background-color: rgb(0, 0, 48);
-    --models-background-color: rgb(0, 0, 48);
-    --output-background-color: black;
-    --user-message-color: rgb(0, 128, 255);
-    --ai-message-color: rgb(100, 100, 255);
-    --input-background-color: rgb(0, 0, 48);
-    --input-button-color: rgb(0, 128, 255);
-    --input-button-hover-color: rgb(0, 100, 200);
-    --scrollbar-track: rgb(91, 172, 253);
-    --scrollbar-thumb: rgb(0, 88, 176);
-    --pop-up-text: darkgrey;
+    /* Colors */
+    --header-background-color: #7e7e7e; /* New header background color */
+    --header-text-color: #ffffff; /* Header text color */
+    --background-color: #8B9635; /* Main background color */
+    --text-color: #474D22; /* Main text color */
+    --input-background-color: #ffffff; /* Background color for input fields */
+    --input-button-color: #8B9635; /* Button color */
+    --input-button-hover-color: #6b7c2b; /* Hover color for input buttons */
+    --user-message-background-color: #8B9635; /* Background color for user messages */
+    --user-message-text-color: #000; /* Text color for user messages */
+    --ai-message-background-color: #FCFCEB; /* Background color for AI messages */
+    --ai-message-text-color: #000; /* Text color for AI messages */
+    --button-background-color: #8B9635; /* Button background color */
+    --button-hover-background-color: #6b7c2b; /* Button hover color */
+    --models-background-color: #ffffff; /* Background for models section */
+    --history-background-color: #f9f9f9; /* Background color for history */
+    --left-panel-background-color: #79832e; /* Background color for left panel */
+    --conversation-background-color: #79832e; /* Background color for conversation container */
+    --doc-background-color: #ffffff; /* Background color for documents */
+    
+    /* FAQ Colors */
+    --faq-background-color: #474D22; /* Background color for FAQ section */
+    --faq-heading-color: #8B9635; /* Heading color for FAQ section */
+    --faq-item-background-color: #fefefe; /* Background color for FAQ items */
+    --faq-item-heading-color: #474D22; /* Heading color for FAQ items */
+    --faq-item-text-color: #333; /* Text color for FAQ items */
+    --faq-item-hover-background-color: #e0e0e0; /* Hover background color for FAQ items */
+
+    --pop-up-text: #000; /* Text color for pop-ups */
+    --input-border-color: #8B9635; /* Input border color */
+    --font-family: 'Poppins', 'sans-serif';/* Default font family */
+    --font-size: 16px;
 }