From f5b1e80c6d6c2c49384c1d17a660f7d15b48f762 Mon Sep 17 00:00:00 2001 From: sageTheDM Date: Mon, 23 Sep 2024 11:55:58 +0200 Subject: [PATCH 1/2] The first working Theme Settings --- app/components/Settings.tsx | 498 ++++++++++++++++++++++---------- app/styles/Login.css | 10 +- app/styles/Settings.css | 63 +++- app/styles/container.css | 4 + app/styles/doc.css | 12 +- app/styles/faq.css | 12 +- app/styles/global.css | 29 ++ app/styles/header.css | 8 +- app/styles/history.css | 2 +- app/styles/input.css | 6 +- app/styles/models.css | 21 +- app/styles/output.css | 5 +- app/styles/responsive.css | 39 +-- app/styles/scrollbar.css | 6 +- app/styles/user-ai-messages.css | 6 +- app/styles/variables.css | 46 ++- 16 files changed, 517 insertions(+), 250 deletions(-) diff --git a/app/components/Settings.tsx b/app/components/Settings.tsx index 697fb68..29ba297 100644 --- a/app/components/Settings.tsx +++ b/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(getComputedStyle(document.documentElement).getPropertyValue('--background-color').trim()); + const [textColor, setTextColor] = useState(getComputedStyle(document.documentElement).getPropertyValue('--text-color').trim()); + const [inputBackgroundColor, setInputBackgroundColor] = useState(getComputedStyle(document.documentElement).getPropertyValue('--input-background-color').trim()); + const [inputButtonColor, setInputButtonColor] = useState(getComputedStyle(document.documentElement).getPropertyValue('--input-button-color').trim()); + const [inputButtonHoverColor, setInputButtonHoverColor] = useState(getComputedStyle(document.documentElement).getPropertyValue('--input-button-hover-color').trim()); + const [userMessageBackgroundColor, setUserMessageBackgroundColor] = useState(getComputedStyle(document.documentElement).getPropertyValue('--user-message-background-color').trim()); + const [userMessageTextColor, setUserMessageTextColor] = useState(getComputedStyle(document.documentElement).getPropertyValue('--user-message-text-color').trim()); + const [aiMessageBackgroundColor, setAiMessageBackgroundColor] = useState(getComputedStyle(document.documentElement).getPropertyValue('--ai-message-background-color').trim()); + const [aiMessageTextColor, setAiMessageTextColor] = useState(getComputedStyle(document.documentElement).getPropertyValue('--ai-message-text-color').trim()); + const [buttonBackgroundColor, setButtonBackgroundColor] = useState(getComputedStyle(document.documentElement).getPropertyValue('--button-background-color').trim()); + const [buttonHoverBackgroundColor, setButtonHoverBackgroundColor] = useState(getComputedStyle(document.documentElement).getPropertyValue('--button-hover-background-color').trim()); + const [modelsBackgroundColor, setModelsBackgroundColor] = useState(getComputedStyle(document.documentElement).getPropertyValue('--models-background-color').trim()); + const [historyBackgroundColor, setHistoryBackgroundColor] = useState(getComputedStyle(document.documentElement).getPropertyValue('--history-background-color').trim()); + const [leftPanelBackgroundColor, setLeftPanelBackgroundColor] = useState(getComputedStyle(document.documentElement).getPropertyValue('--left-panel-background-color').trim()); + const [conversationBackgroundColor, setConversationBackgroundColor] = useState(getComputedStyle(document.documentElement).getPropertyValue('--conversation-background-color').trim()); + const [popUpTextColor, setPopUpTextColor] = useState(getComputedStyle(document.documentElement).getPropertyValue('--pop-up-text').trim()); + const [inputBorderColor, setInputBorderColor] = useState(getComputedStyle(document.documentElement).getPropertyValue('--input-border-color').trim()); + const [fontFamily, setFontFamily] = useState(getComputedStyle(document.documentElement).getPropertyValue('--font-family').trim()); + const [fontSize, setFontSize] = useState(getComputedStyle(document.documentElement).getPropertyValue('--font-size').trim()); + + // General settings state + const [preferredLanguage, setPreferredLanguage] = useState('English'); + const [preferredCurrency, setPreferredCurrency] = useState('USD'); + const [dateFormat, setDateFormat] = useState('MM/DD/YYYY'); + const [timeFormat, setTimeFormat] = useState('12-hour'); + const [timeZone, setTimeZone] = useState('UTC'); + + // Privacy settings state + const [disableOnlineAI, setDisableOnlineAI] = useState(false); + const [disableChatHistory, setDisableChatHistory] = useState(false); + const [disableAIMemory, setDisableAIMemory] = useState(false); + + // FOSS settings state + const [openSourceMode, setOpenSourceMode] = useState(false); + + // Account settings state + const [newName, setNewName] = useState(''); + const [newEmail, setNewEmail] = useState(''); + const [newPassword, setNewPassword] = useState(''); + + // 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 }> = (

General Settings

-

Change Language

- + + setPreferredLanguage(e.target.value)} + />
-

Notifications

- + + setPreferredCurrency(e.target.value)} + />
-

Notification Frequency

- + + setDateFormat(e.target.value)} + />
-

Time Zone

- + + setTimeFormat(e.target.value)} + />
-

Auto-Save

- -
-
-

Auto-Save Frequency

- -
-
-

Default Currency

- -
-
-

Date Format

- -
-
-

Time Format

- + + setTimeZone(e.target.value)} + />
); + case 'privacy': return (

Privacy Settings

-

Data Collection

-

Location Access

-

Two-Factor Authentication

-

Data Export

- -
-
-

Cookie Policy

- -
-
-

GDPR Compliance

- -
-
-

CCPA Compliance

- -
-
-

Biometric Data

- +
); - case 'theme': + + case 'theme': + return ( +
+

Theme Settings

+
+

Font Size

+ { + const newSize = `${e.target.value}px`; + setFontSize(newSize); + document.documentElement.style.setProperty('--font-size', newSize); // Update the CSS variable + }} + /> + {fontSize} +
+
+

Background Color

+ setBackgroundColor(e.target.value)} + /> +
+
+

Text Color

+ setTextColor(e.target.value)} + /> +
+
+

Input Background Color

+ setInputBackgroundColor(e.target.value)} + /> +
+
+

Input Button Color

+ setInputButtonColor(e.target.value)} + /> +
+
+

Input Button Hover Color

+ setInputButtonHoverColor(e.target.value)} + /> +
+
+

User Message Background Color

+ setUserMessageBackgroundColor(e.target.value)} + /> +
+
+

User Message Text Color

+ setUserMessageTextColor(e.target.value)} + /> +
+
+

AI Message Background Color

+ setAiMessageBackgroundColor(e.target.value)} + /> +
+
+

AI Message Text Color

+ setAiMessageTextColor(e.target.value)} + /> +
+
+

Button Background Color

+ setButtonBackgroundColor(e.target.value)} + /> +
+
+

Button Hover Background Color

+ setButtonHoverBackgroundColor(e.target.value)} + /> +
+
+

Models Background Color

+ setModelsBackgroundColor(e.target.value)} + /> +
+
+

History Background Color

+ setHistoryBackgroundColor(e.target.value)} + /> +
+
+

Left Panel Background Color

+ setLeftPanelBackgroundColor(e.target.value)} + /> +
+
+

Conversation Background Color

+ setConversationBackgroundColor(e.target.value)} + /> +
+
+

Pop-up Text Color

+ setPopUpTextColor(e.target.value)} + /> +
+
+

Input Border Color

+ setInputBorderColor(e.target.value)} + /> +
+
+

Font Family

+ +
+
+ ); + + case 'foss': return (
-

Theme Settings

+

FOSS Settings

-

Choose Theme Color

- -
-
-

Font Size

- -
-
-

Background Pattern

- -
-
-

Font Family

- -
-
-

Button Style

- + +

(ONLY OPEN SOURCE MODULES WORK IN THERE)

); + case 'account': return (

Account Settings

-

Change Name

- + + setNewName(e.target.value)} + />
-

Change Email

- + + setNewEmail(e.target.value)} + />
-

Change Password

- + + setNewPassword(e.target.value)} + />
-
-

Delete Account

- +
+

DANGER ZONE

+
); + default: return null; } @@ -227,6 +414,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
  • setActiveSection('general')}>General
  • setActiveSection('privacy')}>Privacy
  • setActiveSection('theme')}>Theme
    • +
  • setActiveSection('foss')}>FOSS
  • setActiveSection('account')}>Account
    • @@ -241,4 +429,4 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( ); }; -export default Settings; \ No newline at end of file +export default Settings; diff --git a/app/styles/Login.css b/app/styles/Login.css index c2754a9..c8c559e 100644 --- a/app/styles/Login.css +++ b/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; } diff --git a/app/styles/Settings.css b/app/styles/Settings.css index a3c7fa0..014a3a8 100644 --- a/app/styles/Settings.css +++ b/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; } diff --git a/app/styles/container.css b/app/styles/container.css index 528c675..08f254a 100644 --- a/app/styles/container.css +++ b/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 */ diff --git a/app/styles/doc.css b/app/styles/doc.css index d924358..eb06945 100644 --- a/app/styles/doc.css +++ b/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; } - - diff --git a/app/styles/faq.css b/app/styles/faq.css index 05e93e5..1484722 100644 --- a/app/styles/faq.css +++ b/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 */ } diff --git a/app/styles/global.css b/app/styles/global.css index 2a2b956..f1bcfdf 100644 --- a/app/styles/global.css +++ b/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); +} diff --git a/app/styles/header.css b/app/styles/header.css index 8ecc019..eed0f9e 100644 --- a/app/styles/header.css +++ b/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 */ } diff --git a/app/styles/history.css b/app/styles/history.css index d1adcd0..7bc9bcd 100644 --- a/app/styles/history.css +++ b/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; } diff --git a/app/styles/input.css b/app/styles/input.css index 12b71e2..ceeb0b3 100644 --- a/app/styles/input.css +++ b/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; diff --git a/app/styles/models.css b/app/styles/models.css index 9f853f1..c53d14b 100644 --- a/app/styles/models.css +++ b/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; diff --git a/app/styles/output.css b/app/styles/output.css index f105f90..f5d7924 100644 --- a/app/styles/output.css +++ b/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; } diff --git a/app/styles/responsive.css b/app/styles/responsive.css index b995946..31f563d 100644 --- a/app/styles/responsive.css +++ b/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; @@ -47,46 +47,46 @@ } /* Left panel styles */ - .left-panel { + .left-panel { display: none; /* Initially hidden */ min-width: 90%; /* Takes full width when visible */ margin: 0; } - .left-panel.visible { + .left-panel.visible { display: block; } /* Conversation container styles */ - .conversation-container { + .conversation-container { width: 90%; height: 90%; } - .conversation-container.collapsed { + .conversation-container.collapsed { width: 0; padding: 0; border: none; overflow: hidden; } - .conversation-container.expanded { + .conversation-container.expanded { width: 100%; } /* Grid styles */ - .grid { + .grid { grid-template-columns: 1fr; /* One item per line */ } /* Model box styles */ - .model-box { + .model-box { max-width: none; /* Remove max-width */ margin: 0 auto; /* Center each model-box */ } /* Input styles */ - .input { + .input { grid-column: 1 / -1; gap: 10px; padding: 0.5em; @@ -95,32 +95,35 @@ width: 90%; } - .input input { + .input input { 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 { + .input button { height: 40px; /* Adjust button height */ 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 */ + flex-direction: column; /* Stack sidebar and main content on smaller screens */ } .sidebar { - width: 100%; /* Full width for sidebar */ + width: 100%; /* Full width for sidebar */ } .settings-main { - width: 100%; /* Full width for main content */ + width: 100%; /* Full width for main content */ } -} \ No newline at end of file +} diff --git a/app/styles/scrollbar.css b/app/styles/scrollbar.css index 5e2f6a1..7608126 100644 --- a/app/styles/scrollbar.css +++ b/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; -} \ No newline at end of file + background-color: var(--history-background-color); /* Use variable for track color */ +} diff --git a/app/styles/user-ai-messages.css b/app/styles/user-ai-messages.css index 91a04d6..ebb9da1 100644 --- a/app/styles/user-ai-messages.css +++ b/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,9 +19,9 @@ } .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; text-align: left; -} \ No newline at end of file +} diff --git a/app/styles/variables.css b/app/styles/variables.css index 97b3628..e5b3bbc 100644 --- a/app/styles/variables.css +++ b/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; } From 9cc89ffe613e9a97dd8993965a35cff0edcbf8f5 Mon Sep 17 00:00:00 2001 From: sageTheDM Date: Mon, 23 Sep 2024 14:07:02 +0200 Subject: [PATCH 2/2] Preset color themes --- app/components/Settings.tsx | 457 +++++++++++++++++++++++------------- 1 file changed, 290 insertions(+), 167 deletions(-) diff --git a/app/components/Settings.tsx b/app/components/Settings.tsx index 29ba297..ea1a818 100644 --- a/app/components/Settings.tsx +++ b/app/components/Settings.tsx @@ -44,6 +44,10 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( const [newEmail, setNewEmail] = useState(''); const [newPassword, setNewPassword] = useState(''); + // Theme selection + const [selectedTheme, setSelectedTheme] = useState('IOMARKET'); // Default value can be 'IOMARKET' + + // Effect to update CSS variables on theme state change useEffect(() => { document.documentElement.style.setProperty('--background-color', backgroundColor); @@ -84,7 +88,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( popUpTextColor, inputBorderColor, fontFamily, - fontSize + fontSize, ]); const renderSettingsContent = () => { @@ -171,7 +175,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
    - +
    ); @@ -180,177 +184,300 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( return (

    Theme Settings

    + + {/* Dropdown to select theme */}
    -

    Font Size

    - { - const newSize = `${e.target.value}px`; - setFontSize(newSize); - document.documentElement.style.setProperty('--font-size', newSize); // Update the CSS variable - }} - /> - {fontSize} -
    -
    -

    Background Color

    - setBackgroundColor(e.target.value)} - /> -
    -
    -

    Text Color

    - setTextColor(e.target.value)} - /> -
    -
    -

    Input Background Color

    - setInputBackgroundColor(e.target.value)} - /> -
    -
    -

    Input Button Color

    - setInputButtonColor(e.target.value)} - /> -
    -
    -

    Input Button Hover Color

    - setInputButtonHoverColor(e.target.value)} - /> -
    -
    -

    User Message Background Color

    - setUserMessageBackgroundColor(e.target.value)} - /> -
    -
    -

    User Message Text Color

    - setUserMessageTextColor(e.target.value)} - /> -
    -
    -

    AI Message Background Color

    - setAiMessageBackgroundColor(e.target.value)} - /> -
    -
    -

    AI Message Text Color

    - setAiMessageTextColor(e.target.value)} - /> -
    -
    -

    Button Background Color

    - setButtonBackgroundColor(e.target.value)} - /> -
    -
    -

    Button Hover Background Color

    - setButtonHoverBackgroundColor(e.target.value)} - /> -
    -
    -

    Models Background Color

    - setModelsBackgroundColor(e.target.value)} - /> -
    -
    -

    History Background Color

    - setHistoryBackgroundColor(e.target.value)} - /> -
    -
    -

    Left Panel Background Color

    - setLeftPanelBackgroundColor(e.target.value)} - /> -
    -
    -

    Conversation Background Color

    - setConversationBackgroundColor(e.target.value)} - /> -
    -
    -

    Pop-up Text Color

    - setPopUpTextColor(e.target.value)} - /> -
    -
    -

    Input Border Color

    - setInputBorderColor(e.target.value)} - /> -
    -
    -

    Font Family

    +

    Select Theme

    + + {/* Conditionally render theme settings only if "CUSTOM" is selected */} + {selectedTheme === 'CUSTOM' && ( + <> +
    +

    Font Size

    + { + const newSize = `${e.target.value}px`; + setFontSize(newSize); + document.documentElement.style.setProperty('--font-size', newSize); // Update the CSS variable + }} + /> + {fontSize} +
    +
    +

    Background Color

    + setBackgroundColor(e.target.value)} + /> +
    +
    +

    Text Color

    + setTextColor(e.target.value)} + /> +
    +
    +

    Input Background Color

    + setInputBackgroundColor(e.target.value)} + /> +
    +
    +

    Input Button Color

    + setInputButtonColor(e.target.value)} + /> +
    +
    +

    Input Button Hover Color

    + setInputButtonHoverColor(e.target.value)} + /> +
    +
    +

    User Message Background Color

    + setUserMessageBackgroundColor(e.target.value)} + /> +
    +
    +

    User Message Text Color

    + setUserMessageTextColor(e.target.value)} + /> +
    +
    +

    AI Message Background Color

    + setAiMessageBackgroundColor(e.target.value)} + /> +
    +
    +

    AI Message Text Color

    + setAiMessageTextColor(e.target.value)} + /> +
    +
    +

    Button Background Color

    + setButtonBackgroundColor(e.target.value)} + /> +
    +
    +

    Button Hover Background Color

    + setButtonHoverBackgroundColor(e.target.value)} + /> +
    +
    +

    Models Background Color

    + setModelsBackgroundColor(e.target.value)} + /> +
    +
    +

    History Background Color

    + setHistoryBackgroundColor(e.target.value)} + /> +
    +
    +

    Left Panel Background Color

    + setLeftPanelBackgroundColor(e.target.value)} + /> +
    +
    +

    Conversation Background Color

    + setConversationBackgroundColor(e.target.value)} + /> +
    +
    +

    Pop-up Text Color

    + setPopUpTextColor(e.target.value)} + /> +
    +
    +

    Input Border Color

    + setInputBorderColor(e.target.value)} + /> +
    +
    +

    Font Family

    + +
    + + )}
    ); case 'foss': return (
    -

    FOSS Settings

    +

    Free and Open Source Software (FOSS) Settings

    -

    (ONLY OPEN SOURCE MODULES WORK IN THERE)

    ); @@ -393,10 +519,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( onChange={(e) => setNewPassword(e.target.value)} /> -
    -

    DANGER ZONE

    - -
    ); @@ -426,6 +548,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( + ); };