From 1e429de868dfe4d643aeb325d10c1f7bad802096 Mon Sep 17 00:00:00 2001 From: sageTheDM <info@photofuel.tech> Date: Wed, 25 Sep 2024 13:58:16 +0200 Subject: [PATCH] Started de-spaghettifying the code --- app/components/Models.tsx | 8 ++- app/components/Settings.tsx | 123 ++++++++++-------------------------- app/components/theme.ts | 96 ++++++++++++++++++++++++++++ app/styles/variables.css | 2 +- 4 files changed, 138 insertions(+), 91 deletions(-) create mode 100644 app/components/theme.ts diff --git a/app/components/Models.tsx b/app/components/Models.tsx index a1f351a..f151777 100644 --- a/app/components/Models.tsx +++ b/app/components/Models.tsx @@ -102,7 +102,13 @@ const Models: React.FC = () => { </button> <button className="default-model model-box"> <div className="overlay"> - <h3>Custom</h3> + <h3>Custom1</h3> + {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />} + </div> + </button> + <button className="default-model model-box"> + <div className="overlay"> + <h3>Custom2</h3> {isOfflineModel(selectedModel) && <img src="/img/nowifi.svg" alt="No Wi-Fi" />} </div> </button> diff --git a/app/components/Settings.tsx b/app/components/Settings.tsx index 656bd53..84582fc 100644 --- a/app/components/Settings.tsx +++ b/app/components/Settings.tsx @@ -1,4 +1,5 @@ import React, { useState, useEffect } from 'react'; +import { applyIOMarketTheme, applyWhiteTheme, applyBlackTheme } from './theme'; import { exportSettings, importSettings } from './settingUtils'; // Import utility functions const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ({ closeSettings, accountName }) => { @@ -57,6 +58,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( 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()); + const [burgerMenu, setBurgerMenu] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--burger-menu-background-color:').trim()); // Theme selection const [selectedTheme, setSelectedTheme] = useState(() => localStorage.getItem('selectedTheme') || 'default'); @@ -199,6 +201,10 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( useEffect(() => { localStorage.setItem('fontSize', fontSize); }, [fontSize]); + + useEffect(() => { + localStorage.setItem('burgerMenu', burgerMenu); + }, [fontSize]); useEffect(() => { localStorage.setItem('selectedTheme', selectedTheme); @@ -315,7 +321,12 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( if (settings.fontSize) { setFontSize(settings.fontSize); document.documentElement.style.setProperty('--font-size', settings.fontSize); - } + } + + if (settings.burgerMenu) { + setBurgerMenu(settings.fontSize); + document.documentElement.style.setProperty('--burger-menu-background-color:', settings.burgerMenu); + } }; @@ -472,105 +483,25 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( <select value={selectedTheme} onChange={(e) => { - const theme = e.target.value; + const theme = e.target.value; // Get the selected value from the event setSelectedTheme(theme); // Update state for selected theme // Apply the appropriate theme based on selection - switch (theme) { + switch (theme) { // Use 'theme' instead of 'selectedTheme' case 'IOMARKET': - document.documentElement.style.setProperty('--header-background-color', '#7e7e7e'); // Header background color - document.documentElement.style.setProperty('--header-text-color', '#ffffff'); // Header text color - document.documentElement.style.setProperty('--background-color', '#8B9635'); // Main background color - document.documentElement.style.setProperty('--text-color', '#474D22'); // Main text color - document.documentElement.style.setProperty('--input-background-color', '#ffffff'); // Input fields background - document.documentElement.style.setProperty('--input-button-color', '#8B9635'); // Button color - document.documentElement.style.setProperty('--input-button-hover-color', '#6b7c2b'); // Button hover color - document.documentElement.style.setProperty('--user-message-background-color', '#8B9635'); // User messages background - document.documentElement.style.setProperty('--user-message-text-color', '#000'); // User messages text color - document.documentElement.style.setProperty('--ai-message-background-color', '#FCFCEB'); // AI messages background - document.documentElement.style.setProperty('--ai-message-text-color', '#000'); // AI messages text color - document.documentElement.style.setProperty('--button-background-color', '#8B9635'); // Button background color - document.documentElement.style.setProperty('--button-hover-background-color', '#6b7c2b'); // Button hover color - document.documentElement.style.setProperty('--models-background-color', '#ffffff'); // Models section background - document.documentElement.style.setProperty('--history-background-color', '#f9f9f9'); // History background - document.documentElement.style.setProperty('--left-panel-background-color', '#79832e'); // Left panel background - document.documentElement.style.setProperty('--conversation-background-color', '#79832e'); // Conversation container background - document.documentElement.style.setProperty('--doc-background-color', '#ffffff'); // Documents background - document.documentElement.style.setProperty('--faq-background-color', '#474D22'); // FAQ section background - document.documentElement.style.setProperty('--faq-heading-color', '#8B9635'); // FAQ heading color - document.documentElement.style.setProperty('--faq-item-background-color', '#fefefe'); // FAQ items background - document.documentElement.style.setProperty('--faq-item-heading-color', '#474D22'); // FAQ items heading color - document.documentElement.style.setProperty('--faq-item-text-color', '#333'); // FAQ items text color - document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0'); // FAQ items hover background - document.documentElement.style.setProperty('--pop-up-text', '#000'); // Pop-up text color - document.documentElement.style.setProperty('--input-border-color', '#8B9635'); // Input border color - document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Font family - document.documentElement.style.setProperty('--font-size', '16px'); // Font size + applyIOMarketTheme(); // Call the function to apply the IOMARKET theme break; case 'WHITE': - document.documentElement.style.setProperty('--header-background-color', '#ffffff'); // White header background - document.documentElement.style.setProperty('--header-text-color', '#000000'); // Header text color - document.documentElement.style.setProperty('--background-color', '#f0f0f0'); // Main background color - document.documentElement.style.setProperty('--text-color', '#000000'); // Main text color - document.documentElement.style.setProperty('--input-background-color', '#ffffff'); // Input fields background - document.documentElement.style.setProperty('--input-button-color', '#007bff'); // Button color - document.documentElement.style.setProperty('--input-button-hover-color', '#0056b3'); // Button hover color - document.documentElement.style.setProperty('--user-message-background-color', '#ffffff'); // User messages background - document.documentElement.style.setProperty('--user-message-text-color', '#000000'); // User messages text color - document.documentElement.style.setProperty('--ai-message-background-color', '#f9f9f9'); // AI messages background - document.documentElement.style.setProperty('--ai-message-text-color', '#000000'); // AI messages text color - document.documentElement.style.setProperty('--button-background-color', '#007bff'); // Button background color - document.documentElement.style.setProperty('--button-hover-background-color', '#0056b3'); // Button hover color - document.documentElement.style.setProperty('--models-background-color', '#ffffff'); // Models section background - document.documentElement.style.setProperty('--history-background-color', '#f9f9f9'); // History background - document.documentElement.style.setProperty('--left-panel-background-color', '#ffffff'); // Left panel background - document.documentElement.style.setProperty('--conversation-background-color', '#ffffff'); // Conversation container background - document.documentElement.style.setProperty('--doc-background-color', '#ffffff'); // Documents background - document.documentElement.style.setProperty('--faq-background-color', '#ffffff'); // FAQ section background - document.documentElement.style.setProperty('--faq-heading-color', '#007bff'); // FAQ heading color - document.documentElement.style.setProperty('--faq-item-background-color', '#f9f9f9'); // FAQ items background - document.documentElement.style.setProperty('--faq-item-heading-color', '#000000'); // FAQ items heading color - document.documentElement.style.setProperty('--faq-item-text-color', '#333333'); // FAQ items text color - document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0'); // FAQ items hover background - document.documentElement.style.setProperty('--pop-up-text', '#000000'); // Pop-up text color - document.documentElement.style.setProperty('--input-border-color', '#ced4da'); // Input border color - document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Font family - document.documentElement.style.setProperty('--font-size', '16px'); // Font size + applyWhiteTheme(); // Call the function to apply the WHITE theme break; case 'BLACK': - document.documentElement.style.setProperty('--header-background-color', '#1a1a1a'); // Dark header background - document.documentElement.style.setProperty('--header-text-color', '#ffffff'); // Header text color - document.documentElement.style.setProperty('--background-color', '#121212'); // Main background color - document.documentElement.style.setProperty('--text-color', '#e0e0e0'); // Main text color - document.documentElement.style.setProperty('--input-background-color', '#1e1e1e'); // Input fields background - document.documentElement.style.setProperty('--input-button-color', '#3c3c3c'); // Button color - document.documentElement.style.setProperty('--input-button-hover-color', '#5a5a5a'); // Button hover color - document.documentElement.style.setProperty('--user-message-background-color', '#000000'); // User messages background - document.documentElement.style.setProperty('--user-message-text-color', '#ffffff'); // User messages text color - document.documentElement.style.setProperty('--ai-message-background-color', '#202020'); // AI messages background - document.documentElement.style.setProperty('--ai-message-text-color', '#ffffff'); // AI messages text color - document.documentElement.style.setProperty('--button-background-color', '#3c3c3c'); // Button background color - document.documentElement.style.setProperty('--button-hover-background-color', '#5a5a5a'); // Button hover color - document.documentElement.style.setProperty('--models-background-color', '#1e1e1e'); // Models section background - document.documentElement.style.setProperty('--history-background-color', '#1a1a1a'); // History background - document.documentElement.style.setProperty('--left-panel-background-color', '#1e1e1e'); // Left panel background - document.documentElement.style.setProperty('--conversation-background-color', '#2c2c2c'); // Conversation container background - document.documentElement.style.setProperty('--doc-background-color', '#1e1e1e'); // Documents background - document.documentElement.style.setProperty('--faq-background-color', '#2c2c2c'); // FAQ section background - document.documentElement.style.setProperty('--faq-heading-color', '#ffffff'); // FAQ heading color - document.documentElement.style.setProperty('--faq-item-background-color', '#3c3c3c'); // FAQ items background - document.documentElement.style.setProperty('--faq-item-heading-color', '#ffffff'); // FAQ items heading color - document.documentElement.style.setProperty('--faq-item-text-color', '#e0e0e0'); // FAQ items text color - document.documentElement.style.setProperty('--faq-item-hover-background-color', '#5a5a5a'); // FAQ items hover background - document.documentElement.style.setProperty('--pop-up-text', '#ffffff'); // Pop-up text color - document.documentElement.style.setProperty('--input-border-color', '#3c3c3c'); // Input border color - document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Font family - document.documentElement.style.setProperty('--font-size', '16px'); // Font size + applyBlackTheme(); // Call the function to apply the BLACK theme break; case 'CUSTOM': - // Handle custom theme logic here + // Handle custom theme logic here if necessary break; default: + applyIOMarketTheme(); // Fallback to the IOMARKET theme break; } }} // Handle theme selection @@ -581,7 +512,8 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( <option value="BLACK">BLACK</option> <option value="CUSTOM">CUSTOM</option> </select> - </div> + </div> + {/* Conditionally render theme settings only if "CUSTOM" is selected */} {selectedTheme === 'CUSTOM' && ( <> @@ -809,6 +741,19 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( /> </div> + <div className="settings-option"> + <p>Burger Menu Color</p> + <input + type="color" + value={burgerMenu} + onChange={(e) => { + const newColor = e.target.value; + setBurgerMenu(newColor); + document.documentElement.style.setProperty('--burger-menu-background-color', newColor); + }} + /> + </div> + <div className="settings-option"> <p>Input Border Color</p> <input diff --git a/app/components/theme.ts b/app/components/theme.ts new file mode 100644 index 0000000..f9367bd --- /dev/null +++ b/app/components/theme.ts @@ -0,0 +1,96 @@ +// theme.ts +export const applyIOMarketTheme = () => { + document.documentElement.style.setProperty('--header-background-color', '#7e7e7e'); // Header background color + document.documentElement.style.setProperty('--header-text-color', '#ffffff'); // Header text color + document.documentElement.style.setProperty('--background-color', '#8B9635'); // Main background color + document.documentElement.style.setProperty('--text-color', '#474D22'); // Main text color + document.documentElement.style.setProperty('--input-background-color', '#ffffff'); // Input fields background + document.documentElement.style.setProperty('--input-button-color', '#8B9635'); // Button color + document.documentElement.style.setProperty('--input-button-hover-color', '#6b7c2b'); // Button hover color + document.documentElement.style.setProperty('--user-message-background-color', '#8B9635'); // User messages background + document.documentElement.style.setProperty('--user-message-text-color', '#000'); // User messages text color + document.documentElement.style.setProperty('--ai-message-background-color', '#FCFCEB'); // AI messages background + document.documentElement.style.setProperty('--ai-message-text-color', '#000'); // AI messages text color + document.documentElement.style.setProperty('--button-background-color', '#8B9635'); // Button background color + document.documentElement.style.setProperty('--button-hover-background-color', '#6b7c2b'); // Button hover color + document.documentElement.style.setProperty('--models-background-color', '#ffffff'); // Models section background + document.documentElement.style.setProperty('--history-background-color', '#f9f9f9'); // History background + document.documentElement.style.setProperty('--left-panel-background-color', '#79832e'); // Left panel background + document.documentElement.style.setProperty('--conversation-background-color', '#79832e'); // Conversation container background + document.documentElement.style.setProperty('--doc-background-color', '#ffffff'); // Documents background + document.documentElement.style.setProperty('--faq-background-color', '#474D22'); // FAQ section background + document.documentElement.style.setProperty('--faq-heading-color', '#8B9635'); // FAQ heading color + document.documentElement.style.setProperty('--faq-item-background-color', '#fefefe'); // FAQ items background + document.documentElement.style.setProperty('--faq-item-heading-color', '#474D22'); // FAQ items heading color + document.documentElement.style.setProperty('--faq-item-text-color', '#333'); // FAQ items text color + document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0'); // FAQ items hover background + document.documentElement.style.setProperty('--pop-up-text', '#000'); // Pop-up text color + document.documentElement.style.setProperty('--input-border-color', '#8B9635'); // Input border color + document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Font family + document.documentElement.style.setProperty('--font-size', '16px'); // Font size + document.documentElement.style.setProperty('--burger-menu-background-color', '#79832e'); // Font size +}; + +export const applyWhiteTheme = () => { + document.documentElement.style.setProperty('--header-background-color', '#ffffff'); // White header background + document.documentElement.style.setProperty('--header-text-color', '#000000'); // Header text color + document.documentElement.style.setProperty('--background-color', '#f0f0f0'); // Main background color + document.documentElement.style.setProperty('--text-color', '#000000'); // Main text color + document.documentElement.style.setProperty('--input-background-color', '#ffffff'); // Input fields background + document.documentElement.style.setProperty('--input-button-color', '#007bff'); // Button color + document.documentElement.style.setProperty('--input-button-hover-color', '#0056b3'); // Button hover color + document.documentElement.style.setProperty('--user-message-background-color', '#ffffff'); // User messages background + document.documentElement.style.setProperty('--user-message-text-color', '#000000'); // User messages text color + document.documentElement.style.setProperty('--ai-message-background-color', '#f9f9f9'); // AI messages background + document.documentElement.style.setProperty('--ai-message-text-color', '#000000'); // AI messages text color + document.documentElement.style.setProperty('--button-background-color', '#007bff'); // Button background color + document.documentElement.style.setProperty('--button-hover-background-color', '#0056b3'); // Button hover color + document.documentElement.style.setProperty('--models-background-color', '#ffffff'); // Models section background + document.documentElement.style.setProperty('--history-background-color', '#f9f9f9'); // History background + document.documentElement.style.setProperty('--left-panel-background-color', '#ffffff'); // Left panel background + document.documentElement.style.setProperty('--conversation-background-color', '#ffffff'); // Conversation container background + document.documentElement.style.setProperty('--doc-background-color', '#ffffff'); // Documents background + document.documentElement.style.setProperty('--faq-background-color', '#ffffff'); // FAQ section background + document.documentElement.style.setProperty('--faq-heading-color', '#007bff'); // FAQ heading color + document.documentElement.style.setProperty('--faq-item-background-color', '#f9f9f9'); // FAQ items background + document.documentElement.style.setProperty('--faq-item-heading-color', '#000000'); // FAQ items heading color + document.documentElement.style.setProperty('--faq-item-text-color', '#333333'); // FAQ items text color + document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0'); // FAQ items hover background + document.documentElement.style.setProperty('--pop-up-text', '#000000'); // Pop-up text color + document.documentElement.style.setProperty('--input-border-color', '#ced4da'); // Input border color + document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Font family + document.documentElement.style.setProperty('--font-size', '16px'); // Font size + document.documentElement.style.setProperty('--burger-menu-background-color', '#79832e'); // Font size +}; + +export const applyBlackTheme = () => { + document.documentElement.style.setProperty('--header-background-color', '#1a1a1a'); // Dark header background + document.documentElement.style.setProperty('--header-text-color', '#ffffff'); // Header text color + document.documentElement.style.setProperty('--background-color', '#121212'); // Main background color + document.documentElement.style.setProperty('--text-color', '#e0e0e0'); // Main text color + document.documentElement.style.setProperty('--input-background-color', '#1e1e1e'); // Input fields background + document.documentElement.style.setProperty('--input-button-color', '#3c3c3c'); // Button color + document.documentElement.style.setProperty('--input-button-hover-color', '#5a5a5a'); // Button hover color + document.documentElement.style.setProperty('--user-message-background-color', '#000000'); // User messages background + document.documentElement.style.setProperty('--user-message-text-color', '#ffffff'); // User messages text color + document.documentElement.style.setProperty('--ai-message-background-color', '#202020'); // AI messages background + document.documentElement.style.setProperty('--ai-message-text-color', '#ffffff'); // AI messages text color + document.documentElement.style.setProperty('--button-background-color', '#3c3c3c'); // Button background color + document.documentElement.style.setProperty('--button-hover-background-color', '#5a5a5a'); // Button hover color + document.documentElement.style.setProperty('--models-background-color', '#1e1e1e'); // Models section background + document.documentElement.style.setProperty('--history-background-color', '#1a1a1a'); // History background + document.documentElement.style.setProperty('--left-panel-background-color', '#1e1e1e'); // Left panel background + document.documentElement.style.setProperty('--conversation-background-color', '#2c2c2c'); // Conversation container background + document.documentElement.style.setProperty('--doc-background-color', '#1e1e1e'); // Documents background + document.documentElement.style.setProperty('--faq-background-color', '#2c2c2c'); // FAQ section background + document.documentElement.style.setProperty('--faq-heading-color', '#ffffff'); // FAQ heading color + document.documentElement.style.setProperty('--faq-item-background-color', '#3c3c3c'); // FAQ items background + document.documentElement.style.setProperty('--faq-item-heading-color', '#ffffff'); // FAQ items heading color + document.documentElement.style.setProperty('--faq-item-text-color', '#e0e0e0'); // FAQ items text color + document.documentElement.style.setProperty('--faq-item-hover-background-color', '#5a5a5a'); // FAQ items hover background + document.documentElement.style.setProperty('--pop-up-text', '#ffffff'); // Pop-up text color + document.documentElement.style.setProperty('--input-border-color', '#3c3c3c'); // Input border color + document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Font family + document.documentElement.style.setProperty('--font-size', '16px'); // Font size + document.documentElement.style.setProperty('--burger-menu-background-color', '#79832e'); // Font size +}; diff --git a/app/styles/variables.css b/app/styles/variables.css index 50847a8..5dfada4 100644 --- a/app/styles/variables.css +++ b/app/styles/variables.css @@ -29,7 +29,7 @@ --faq-item-text-color: #333; /* Text color for FAQ items */ --faq-item-hover-background-color: #e0e0e0; /* Hover background color for FAQ items */ - --popup-background-color: #8B9635 + --popup-background-color: #8B9635; --pop-up-text: #000; /* Text color for pop-ups */ --input-border-color: #8B9635; /* Input border color */ --font-family: 'Poppins', 'sans-serif';/* Default font family */