diff --git a/app/backend/ChatHistory.ts b/app/backend/ChatHistory.ts index f050898..62c9a50 100644 --- a/app/backend/ChatHistory.ts +++ b/app/backend/ChatHistory.ts @@ -1,22 +1,22 @@ type ChatMessage = { name: string; - message: any; + messages: any; timestamp: number; }; let chatHistory: ChatMessage[] = []; -function addMessage(name: string, message: any): void { +function addMessageHistory(name: string, message: any): void { const newMessage: ChatMessage = { name: name, - message: message, + messages: message, timestamp: Date.now() }; chatHistory.push(newMessage); console.log(`Added message from ${name}: ${message}`); } -function removeMessage(timestamp: number): void { +function removeMessageHistory(timestamp: number): void { const index = chatHistory.findIndex((msg) => msg.timestamp === timestamp); if (index > -1) { chatHistory.splice(index, 1); diff --git a/app/components/settings/DropDownTheme.tsx b/app/components/settings/DropDownTheme.tsx index 955158f..c816129 100644 --- a/app/components/settings/DropDownTheme.tsx +++ b/app/components/settings/DropDownTheme.tsx @@ -1,41 +1,41 @@ -// ThemeDropdown.tsx -import React from 'react'; -import { applyTheme, applyCustomTheme } from './theme'; + // ThemeDropdown.tsx + import React from 'react'; + import { applyTheme, applyCustomTheme } from './theme'; -const ThemeDropdown: React.FC<{ - selectedTheme: string; - setSelectedTheme: (theme: string) => void; -}> = ({ selectedTheme, setSelectedTheme }) => { - const themeOptions = [ - { value: 'IOMARKET', label: 'IOMARKET' }, - { value: 'WHITE', label: 'WHITE' }, - { value: 'BLACK', label: 'BLACK' }, - { value: 'CUSTOM', label: 'CUSTOM' }, - ]; + const ThemeDropdown: React.FC<{ + selectedTheme: string; + setSelectedTheme: (theme: string) => void; + }> = ({ selectedTheme, setSelectedTheme }) => { + const themeOptions = [ + { value: 'IOMARKET', label: 'IOMARKET' }, + { value: 'WHITE', label: 'WHITE' }, + { value: 'BLACK', label: 'BLACK' }, + { value: 'BASIC-CUSTOM', label: 'BASIC-CUSTOM' }, + { value: 'CUSTOM', label: 'CUSTOM' }, + ]; - return ( -
-

Select Theme

- -
- ); -}; + return ( +
+

Select Theme

+ +
+ ); + }; -export default ThemeDropdown; + export default ThemeDropdown; diff --git a/app/components/settings/Settings.tsx b/app/components/settings/Settings.tsx index 38e7862..7bce4cc 100644 --- a/app/components/settings/Settings.tsx +++ b/app/components/settings/Settings.tsx @@ -92,6 +92,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( 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()); + const [burgerMenuBackgroundColor, setBurgerMenuBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--burger-menu-background-color').trim()); const [faqBackgroundColor, setFaqBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-background-color').trim()); const [faqHeadingColor, setFaqHeadingColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-heading-color').trim()); const [faqItemBackgroundColor, setFaqItemBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-item-background-color').trim()); @@ -100,7 +101,16 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( const [faqItemHoverBackgroundColor, setFaqItemHoverBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-item-hover-background-color').trim()); const [popupBackgroundColor, setPopupBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--popup-background-color').trim()); const [overlayTextColor, setOverlayTextColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--overlay-text-color').trim()); - + const [closeButtonColor, setCloseButtonColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--close-button-color').trim()); + const [closeButtonHoverColor, setCloseButtonHoverColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--close-button-hover-color').trim()); + const [applyButtonColor, setApplyButtonColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--apply-button-color').trim()); + const [applyButtonHoverColor, setApplyButtonHoverColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--apply-button-hover-color').trim()); + + const [primaryColor, setPrimaryColor] = useState(localStorage.getItem("primaryColor") || "#fefefe"); + const [secondaryColor, setSecondaryColor] = useState(localStorage.getItem("secondaryColor") || "#fefefe"); + const [accentColor, setAccentColor] = useState(localStorage.getItem("accentColor") || "#fefefe"); + const [basicBackgroundColor, setBasicBackgroundColor] = useState(localStorage.getItem("basicBackgroundColor") || "#fefefe"); + const [basicTextColor, setBasicTextColor] = useState(localStorage.getItem("basicTextColor") || "#fefefe"); // Theme selection const [selectedTheme, setSelectedTheme] = useState(''); @@ -161,6 +171,11 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( popupBackgroundColor, overlayTextColor, }, + primaryColor, + secondaryColor, + accentColor, + basicBackgroundColor, + basicTextColor }, apiKeys: { mistral, @@ -200,7 +215,13 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( { name: "FAQ Item Hover Background Color", value: faqItemHoverBackgroundColor, setValue: setFaqItemHoverBackgroundColor, cssVariable: "--faq-item-hover-background-color" }, { name: "Popup Background Color", value: popupBackgroundColor, setValue: setPopupBackgroundColor, cssVariable: "--popup-background-color" }, { name: "Overlay Text Color", value: overlayTextColor, setValue: setOverlayTextColor, cssVariable: "--overlay-text-color" }, - ]; + { name: "Close Button Color", value: closeButtonColor, setValue: setCloseButtonColor, cssVariable: "--close-button-color" }, + { name: "Close Button Hover Color", value: closeButtonHoverColor, setValue: setCloseButtonHoverColor, cssVariable: "--close-button-hover-color" }, + { name: "Apply Button Color", value: applyButtonColor, setValue: setApplyButtonColor, cssVariable: "--apply-button-color" }, + { name: "Apply Button Hover Color", value: applyButtonHoverColor, setValue: setApplyButtonHoverColor, cssVariable: "--apply-button-hover-color" }, + { name: "Burger Menu Background Color", value: burgerMenuBackgroundColor, setValue: setBurgerMenuBackgroundColor, cssVariable: "--burger-menu-background-color" }, +]; + const timeZoneOptions = [ { value: 'GMT', label: 'GMT' }, @@ -287,7 +308,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( const savedTheme = localStorage.getItem('selectedTheme'); if (savedTheme) { setSelectedTheme(savedTheme); - applyTheme(savedTheme); + applyTheme(savedTheme, primaryColor, secondaryColor, accentColor, basicBackgroundColor, basicTextColor); } }, []); // Runs only once when the component mounts @@ -453,48 +474,85 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( ); - case 'theme': - return ( -
-

Theme Settings

- - - - {selectedTheme === 'CUSTOM' && ( - <> - {/* Font Size */} - +

Theme Settings

+ + - - {colorSettings.map((setting) => ( - - ))} - - { - setFontFamily(newFont); - document.documentElement.style.setProperty('--font-family', newFont); - }} - options={fontOptions} - /> - - )} -
- ); - + + {selectedTheme === 'BASIC-CUSTOM' && ( + <> +

Basic Colors

+ {/* Basic Color Inputs using ColorSetting Component */} + + + + + + + )} + + {selectedTheme === 'CUSTOM' && ( + <> +

Additional Settings

+ {/* Additional Font Size Setting */} + + + {colorSettings.map((setting) => ( + + ))} + + { + setFontFamily(newFont); + document.documentElement.style.setProperty('--font-family', newFont); + }} + options={fontOptions} + /> + + )} + + ); case 'foss': return ( diff --git a/app/components/settings/theme.ts b/app/components/settings/theme.ts index e88ca18..2cef5cc 100644 --- a/app/components/settings/theme.ts +++ b/app/components/settings/theme.ts @@ -92,7 +92,7 @@ export const applyBlackTheme = () => { document.documentElement.style.setProperty('--history-background-color', '#333333'); // Dark history background document.documentElement.style.setProperty('--left-panel-background-color', '#1a1a1a'); // Dark left panel background document.documentElement.style.setProperty('--conversation-background-color', '#1a1a1a'); // Dark conversation container - document.documentElement.style.setProperty('--doc-background-color', '#3d3d3d'); // Dark document background + document.documentElement.style.setProperty('--doc-background-color', '#000000'); // Dark document background document.documentElement.style.setProperty('--close-button-color', '#f44336'); // Red close button color document.documentElement.style.setProperty('--close-button-hover-color', '#d32f2f'); // Darker red hover color document.documentElement.style.setProperty('--apply-button-color', '#4caf50'); // Apply button color @@ -115,36 +115,46 @@ export const applyBlackTheme = () => { export const applyCustomTheme = () => { const themeVariables = { - backgroundColor: localStorage.getItem('backgroundColor'), - headerBackground: localStorage.getItem('headerBackground'), - textColor: localStorage.getItem('textColor'), - inputBackgroundColor: localStorage.getItem('inputBackgroundColor'), - inputButtonColor: localStorage.getItem('inputButtonColor'), - inputButtonHoverColor: localStorage.getItem('inputButtonHoverColor'), - userMessageBackgroundColor: localStorage.getItem('userMessageBackgroundColor'), - userMessageTextColor: localStorage.getItem('userMessageTextColor'), - aiMessageBackgroundColor: localStorage.getItem('aiMessageBackgroundColor'), - aiMessageTextColor: localStorage.getItem('aiMessageTextColor'), - buttonBackgroundColor: localStorage.getItem('buttonBackgroundColor'), - buttonHoverBackgroundColor: localStorage.getItem('buttonHoverBackgroundColor'), - modelsBackgroundColor: localStorage.getItem('modelsBackgroundColor'), - historyBackgroundColor: localStorage.getItem('historyBackgroundColor'), - leftPanelBackgroundColor: localStorage.getItem('leftPanelBackgroundColor'), - conversationBackgroundColor: localStorage.getItem('conversationBackgroundColor'), - faqBackgroundColor: localStorage.getItem('faqBackgroundColor'), - faqHeadingColor: localStorage.getItem('faqHeadingColor'), - faqItemBackgroundColor: localStorage.getItem('faqItemBackgroundColor'), - faqItemHeadingColor: localStorage.getItem('faqItemHeadingColor'), - faqItemTextColor: localStorage.getItem('faqItemTextColor'), - faqItemHoverBackgroundColor: localStorage.getItem('faqItemHoverBackgroundColor'), - inputBorderColor: localStorage.getItem('inputBorderColor'), - fontFamily: localStorage.getItem('fontFamily'), - fontSize: localStorage.getItem('fontSize'), - burgerMenu: localStorage.getItem('burgerMenu'), + backgroundColor: localStorage.getItem('backgroundColor'), + headerBackground: localStorage.getItem('headerBackground'), + headerTextColor: localStorage.getItem('headerTextColor'), + textColor: localStorage.getItem('textColor'), + inputBackgroundColor: localStorage.getItem('inputBackgroundColor'), + inputButtonColor: localStorage.getItem('inputButtonColor'), + inputButtonHoverColor: localStorage.getItem('inputButtonHoverColor'), + userMessageBackgroundColor: localStorage.getItem('userMessageBackgroundColor'), + userMessageTextColor: localStorage.getItem('userMessageTextColor'), + aiMessageBackgroundColor: localStorage.getItem('aiMessageBackgroundColor'), + aiMessageTextColor: localStorage.getItem('aiMessageTextColor'), + buttonBackgroundColor: localStorage.getItem('buttonBackgroundColor'), + buttonHoverBackgroundColor: localStorage.getItem('buttonHoverBackgroundColor'), + modelsBackgroundColor: localStorage.getItem('modelsBackgroundColor'), + historyBackgroundColor: localStorage.getItem('historyBackgroundColor'), + leftPanelBackgroundColor: localStorage.getItem('leftPanelBackgroundColor'), + conversationBackgroundColor: localStorage.getItem('conversationBackgroundColor'), + docBackgroundColor: localStorage.getItem('docBackgroundColor'), + closeButtonColor: localStorage.getItem('closeButtonColor'), + closeButtonHoverColor: localStorage.getItem('closeButtonHoverColor'), + applyButtonColor: localStorage.getItem('applyButtonColor'), + applyButtonHoverColor: localStorage.getItem('applyButtonHoverColor'), + burgerMenu: localStorage.getItem('burgerMenu'), + overlayTextColor: localStorage.getItem('overlayTextColor'), + faqBackgroundColor: localStorage.getItem('faqBackgroundColor'), + faqHeadingColor: localStorage.getItem('faqHeadingColor'), + faqItemBackgroundColor: localStorage.getItem('faqItemBackgroundColor'), + faqItemHeadingColor: localStorage.getItem('faqItemHeadingColor'), + faqItemTextColor: localStorage.getItem('faqItemTextColor'), + faqItemHoverBackgroundColor: localStorage.getItem('faqItemHoverBackgroundColor'), + popupBackgroundColor: localStorage.getItem('popupBackgroundColor'), + popUpText: localStorage.getItem('popUpText'), + inputBorderColor: localStorage.getItem('inputBorderColor'), + fontFamily: localStorage.getItem('fontFamily'), + fontSize: localStorage.getItem('fontSize'), }; - document.documentElement.style.setProperty('--background-color', themeVariables.backgroundColor || '#121212'); document.documentElement.style.setProperty('--header-background-color', themeVariables.headerBackground || '#7e7e7e'); + document.documentElement.style.setProperty('--header-text-color', themeVariables.headerTextColor || '#ffffff'); + document.documentElement.style.setProperty('--background-color', themeVariables.backgroundColor || '#121212'); document.documentElement.style.setProperty('--text-color', themeVariables.textColor || '#e0e0e0'); document.documentElement.style.setProperty('--input-background-color', themeVariables.inputBackgroundColor || '#1e1e1e'); document.documentElement.style.setProperty('--input-button-color', themeVariables.inputButtonColor || '#3c3c3c'); @@ -159,36 +169,136 @@ export const applyCustomTheme = () => { document.documentElement.style.setProperty('--history-background-color', themeVariables.historyBackgroundColor || '#1a1a1a'); document.documentElement.style.setProperty('--left-panel-background-color', themeVariables.leftPanelBackgroundColor || '#1e1e1e'); document.documentElement.style.setProperty('--conversation-background-color', themeVariables.conversationBackgroundColor || '#2c2c2c'); - document.documentElement.style.setProperty('--faq-background-color', themeVariables.faqBackgroundColor || '#2c2c2c'); - document.documentElement.style.setProperty('--faq-heading-color', themeVariables.faqHeadingColor || '#ffffff'); - document.documentElement.style.setProperty('--faq-item-background-color', themeVariables.faqItemBackgroundColor || '#3c3c3c'); + document.documentElement.style.setProperty('--doc-background-color', themeVariables.docBackgroundColor || '#000000'); + document.documentElement.style.setProperty('--close-button-color', themeVariables.closeButtonColor || '#f44336'); + document.documentElement.style.setProperty('--close-button-hover-color', themeVariables.closeButtonHoverColor || '#d32f2f'); + document.documentElement.style.setProperty('--apply-button-color', themeVariables.applyButtonColor || '#4caf50'); + document.documentElement.style.setProperty('--apply-button-hover-color', themeVariables.applyButtonHoverColor || '#66bb6a'); + document.documentElement.style.setProperty('--burger-menu-background-color', themeVariables.burgerMenu || '#79832e'); + document.documentElement.style.setProperty('--overlay-text-color', themeVariables.overlayTextColor || '#ffffff'); + document.documentElement.style.setProperty('--faq-background-color', themeVariables.faqBackgroundColor || '#333333'); + document.documentElement.style.setProperty('--faq-heading-color', themeVariables.faqHeadingColor || '#4caf50'); + document.documentElement.style.setProperty('--faq-item-background-color', themeVariables.faqItemBackgroundColor || '#4c4c4c'); document.documentElement.style.setProperty('--faq-item-heading-color', themeVariables.faqItemHeadingColor || '#ffffff'); document.documentElement.style.setProperty('--faq-item-text-color', themeVariables.faqItemTextColor || '#e0e0e0'); - document.documentElement.style.setProperty('--faq-item-hover-background-color', themeVariables.faqItemHoverBackgroundColor || '#5a5a5a'); + document.documentElement.style.setProperty('--faq-item-hover-background-color', themeVariables.faqItemHoverBackgroundColor || '#555555'); + document.documentElement.style.setProperty('--popup-background-color', themeVariables.popupBackgroundColor || '#4caf50'); + document.documentElement.style.setProperty('--pop-up-text', themeVariables.popUpText || '#ffffff'); document.documentElement.style.setProperty('--input-border-color', themeVariables.inputBorderColor || '#3c3c3c'); document.documentElement.style.setProperty('--font-family', themeVariables.fontFamily || "'Poppins', 'sans-serif'"); document.documentElement.style.setProperty('--font-size', themeVariables.fontSize || '16px'); - document.documentElement.style.setProperty('--burger-menu-background-color', themeVariables.burgerMenu || '#79832e'); +}; + +// TypeScript types for color parameters +type Color = string; + +export const applyBasicCustomTheme = ( + primaryColor: Color, + secondaryColor: Color, + accentColor: Color, + backgroundColor: Color, + textColor: Color +) => { + // Calculate additional colors based on the provided colors + const headerBackgroundColor = secondaryColor; // Use secondary color for header background + const headerTextColor = lightenColor(textColor, 50); // Lighten text color for header + const inputButtonColor = primaryColor; // Use primary color for input buttons + const userMessageBackgroundColor = accentColor; // Use accent color for user messages + const aiMessageBackgroundColor = backgroundColor; // Use background color for AI messages + const buttonHoverBackgroundColor = darkenColor(primaryColor, 30); // Darken primary color for hover + const closeButtonColor = darkenColor(accentColor, 20); // Darkened accent color for close button + const closeButtonHoverColor = darkenColor(closeButtonColor, 10); // Darker close button hover color + const darkerAccentColor = darkenColor(accentColor, 20); // Darken accent color for contrast + const lightenedPrimaryColor = lightenColor(primaryColor, 10); // Lighten primary color for highlights + const lighterBackgroundColor = lightenColor(backgroundColor, 10); // Lighten background for contrast + const darkerBackgroundColor = darkenColor(backgroundColor, 20); // More pronounced dark background + + // Set all CSS variables + document.documentElement.style.setProperty('--header-background-color', headerBackgroundColor); + document.documentElement.style.setProperty('--header-text-color', headerTextColor); + document.documentElement.style.setProperty('--background-color', backgroundColor); + document.documentElement.style.setProperty('--text-color', textColor); + document.documentElement.style.setProperty('--input-background-color', lightenColor(backgroundColor, 10)); + document.documentElement.style.setProperty('--input-button-color', inputButtonColor); + document.documentElement.style.setProperty('--input-button-hover-color', buttonHoverBackgroundColor); + document.documentElement.style.setProperty('--user-message-background-color', userMessageBackgroundColor); + document.documentElement.style.setProperty('--user-message-text-color', lightenColor(textColor, 60)); + document.documentElement.style.setProperty('--ai-message-background-color', aiMessageBackgroundColor); + document.documentElement.style.setProperty('--ai-message-text-color', lightenColor(textColor, 60)); + document.documentElement.style.setProperty('--button-background-color', inputButtonColor); + document.documentElement.style.setProperty('--button-hover-background-color', buttonHoverBackgroundColor); + document.documentElement.style.setProperty('--models-background-color', darkerBackgroundColor); + document.documentElement.style.setProperty('--history-background-color', lighterBackgroundColor); + document.documentElement.style.setProperty('--left-panel-background-color', lightenColor(backgroundColor, 5)); + document.documentElement.style.setProperty('--conversation-background-color', lightenColor(backgroundColor, 5)); + document.documentElement.style.setProperty('--doc-background-color', lighterBackgroundColor); + document.documentElement.style.setProperty('--close-button-color', closeButtonColor); + document.documentElement.style.setProperty('--close-button-hover-color', closeButtonHoverColor); + document.documentElement.style.setProperty('--apply-button-color', inputButtonColor); + document.documentElement.style.setProperty('--apply-button-hover-color', buttonHoverBackgroundColor); + document.documentElement.style.setProperty('--burger-menu-background-color', lightenColor(backgroundColor, 5)); + document.documentElement.style.setProperty('--overlay-text-color', lightenColor(textColor, 80)); + document.documentElement.style.setProperty('--faq-background-color', lightenColor(backgroundColor, 10)); + document.documentElement.style.setProperty('--faq-heading-color', lightenedPrimaryColor); + document.documentElement.style.setProperty('--faq-item-background-color', darkerAccentColor); + document.documentElement.style.setProperty('--faq-item-heading-color', '#000000'); + document.documentElement.style.setProperty('--faq-item-text-color', '#000000'); + document.documentElement.style.setProperty('--faq-item-hover-background-color', lightenColor(accentColor, 10)); + document.documentElement.style.setProperty('--popup-background-color', accentColor); + document.documentElement.style.setProperty('--pop-up-text', lightenColor(textColor, 80)); + document.documentElement.style.setProperty('--input-border-color', primaryColor); + document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); + document.documentElement.style.setProperty('--font-size', '16px'); +}; + +// Helper function to darken a color (returns a darker version of the provided color) +const darkenColor = (color: Color, percent: number): Color => { + let r = parseInt(color.slice(1, 3), 16); + let g = parseInt(color.slice(3, 5), 16); + let b = parseInt(color.slice(5, 7), 16); + r = Math.floor(r * (1 - percent / 100)); + g = Math.floor(g * (1 - percent / 100)); + b = Math.floor(b * (1 - percent / 100)); + return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`; +}; + +// Helper function to lighten a color (returns a lighter version of the provided color) +const lightenColor = (color: Color, percent: number): Color => { + let r = parseInt(color.slice(1, 3), 16); + let g = parseInt(color.slice(3, 5), 16); + let b = parseInt(color.slice(5, 7), 16); + r = Math.min(255, Math.floor(r * (1 + percent / 100))); + g = Math.min(255, Math.floor(g * (1 + percent / 100))); + b = Math.min(255, Math.floor(b * (1 + percent / 100))); + return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`; }; // This is the new function that calls the appropriate theme application -export const applyTheme = (theme: string) => { +export const applyTheme = (theme: string, primary: string, secondary: string, accent: string, background: string, text: string) => { switch (theme) { - case 'IOMARKET': - applyIOMarketTheme(); - break; - case 'WHITE': - applyWhiteTheme(); - break; - case 'BLACK': - applyBlackTheme(); - break; - case 'CUSTOM': - applyCustomTheme(); - break; - default: - applyIOMarketTheme(); - break; + case 'IOMARKET': + applyIOMarketTheme(); + break; + case 'WHITE': + applyWhiteTheme(); + break; + case 'BLACK': + applyBlackTheme(); + break; + case 'CUSTOM': + applyCustomTheme(); + break; + case 'BASIC-CUSTOM': + applyBasicCustomTheme( + primary, + secondary, + accent, + background, + text + ); + break; + default: + applyIOMarketTheme(); + break; } }; - diff --git a/app/page.tsx b/app/page.tsx index cca5ac1..02bcf6c 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -7,9 +7,7 @@ import Documentation from './components/Documentation'; // Ensure the import pat import History from './components/History'; import Models from './components/Models'; import Credits from './components/Credits'; -import Settings from './components/settings/Settings'; -import { applyIOMarketTheme, applyWhiteTheme, applyBlackTheme, applyCustomTheme } from './components/settings/theme' -import Head from 'next/head'; +import { applyIOMarketTheme, applyWhiteTheme, applyBlackTheme, applyCustomTheme, applyBasicCustomTheme } from './components/settings/theme' import './styles/master.css'; const LandingPage: React.FC = () => { @@ -17,6 +15,22 @@ const LandingPage: React.FC = () => { const [view, setView] = useState<'AI' | 'FAQ' | 'Documentation' | 'Credits'>('AI'); // Added 'Credits' here const conversationRef = useRef(null); + + const [primaryColor, setPrimaryColor] = useState(localStorage.getItem("primaryColor") || "#fefefe"); + const [secondaryColor, setSecondaryColor] = useState(localStorage.getItem("secondaryColor") || "#fefefe"); + const [accentColor, setAccentColor] = useState(localStorage.getItem("accentColor") || "#fefefe"); + const [basicBackgroundColor, setBasicBackgroundColor] = useState(localStorage.getItem("basicBackgroundColor") || "#fefefe"); + const [basicTextColor, setBasicTextColor] = useState(localStorage.getItem("basicTextColor") || "#fefefe"); + + useEffect(()=>{ + setPrimaryColor(localStorage.getItem("primaryColor") || "#fefefe") + setSecondaryColor(localStorage.getItem("secondaryColor") || "#fefefe") + setAccentColor(localStorage.getItem("accentColor") || "#fefefe") + setBasicBackgroundColor(localStorage.getItem("basicBackgroundColor") || "#fefefe") + setBasicTextColor(localStorage.getItem("basicTextColor") || "#fefefe") + }) + + const toggleDivs = () => { setShowDivs(prevState => !prevState); }; @@ -48,6 +62,15 @@ const LandingPage: React.FC = () => { case 'CUSTOM': applyCustomTheme(); break; + case 'BASIC-CUSTOM': + applyBasicCustomTheme( + primaryColor, + secondaryColor, + accentColor, + basicBackgroundColor, + basicTextColor + ); + break; default: applyIOMarketTheme(); break; diff --git a/app/styles/Settings.css b/app/styles/Settings.css index b0aae8c..981a794 100644 --- a/app/styles/Settings.css +++ b/app/styles/Settings.css @@ -13,7 +13,7 @@ .settings-main h2 { margin-bottom: 1em; -} +} .settings-main p { padding-bottom: 7px; @@ -22,10 +22,12 @@ /* Main container for the settings */ .settings-container { display: grid; - grid-template-columns: 1fr 3fr; /* 1fr for sidebar, 3fr for main content */ + grid-template-columns: 1fr 3fr; + /* 1fr for sidebar, 3fr for main content */ grid-auto-flow: column; overflow-x: hidden; - height: 100%; /* Ensure it takes full height */ + height: 100%; + /* Ensure it takes full height */ } /* Settings content */ @@ -39,23 +41,30 @@ height: 90%; max-height: 600px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); - overflow: hidden; /* Prevents overflow of the content */ - position: relative; /* Needed for absolute positioning of close button */ + 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 */ + flex-direction: column; + /* Flexbox for vertical stacking */ } /* Sidebar styles */ .sidebar { background: var(--settings-background-color); padding: 20px; - border-radius: 10px 0 0 10px; /* Rounded corners on the left side */ + border-radius: 10px 0 0 10px; + /* Rounded corners on the left side */ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); - overflow-y: auto; /* Scroll if content exceeds height */ + overflow-y: auto; + /* Scroll if content exceeds height */ display: flex; flex-direction: column; - grid-column: 1; /* Places sidebar in the first grid column */ - height: 100%; /* Ensures sidebar takes full height */ + grid-column: 1; + /* Places sidebar in the first grid column */ + height: 100%; + /* Ensures sidebar takes full height */ } /* Sidebar item styles */ @@ -64,8 +73,10 @@ padding: 0; margin: 0; display: flex; - flex-direction: column; /* Make the ul a column */ - flex-grow: 1; /* Allows the list to take available space */ + flex-direction: column; + /* Make the ul a column */ + flex-grow: 1; + /* Allows the list to take available space */ } .sidebar li { @@ -77,66 +88,88 @@ } .sidebar li:hover { - background: var(--input-button-hover-color); /* Highlight on hover */ + background: var(--input-button-hover-color); + /* Highlight on hover */ } .sidebar li.active { - background: var(--button-hover-background-color); /* Active section highlight */ + background: var(--button-hover-background-color); + /* Active section highlight */ } /* Main settings area */ .settings-main { - grid-column: 2; /* Places main settings in the second grid column */ + grid-column: 2; + /* Places main settings in the second grid column */ padding: 20px; - border-radius: 0 10px 10px 0; /* Rounded corners on the right side */ - overflow-y: auto; /* Scroll if content exceeds height */ + border-radius: 0 10px 10px 0; + /* Rounded corners on the right side */ + overflow-y: auto; + /* Scroll if content exceeds height */ display: flex; - flex-direction: column; /* Stack content vertically */ + flex-direction: column; + /* Stack content vertically */ } /* Close button positioning */ .close-popup { - background: var(--close-button-color); /* Use variable for close button color */ - color: white; /* Use white for text color */ + background: var(--close-button-color); + /* Use variable for close button color */ + color: white; + /* Use white for text color */ border: none; border-radius: 5px; padding: 5px 10px; cursor: pointer; - position: absolute; /* Position the button absolutely */ - top: 15px; /* Distance from the top */ - right: 40px; /* Distance from the right */ + position: absolute; + /* Position the button absolutely */ + top: 15px; + /* Distance from the top */ + right: 40px; + /* Distance from the right */ transition: background 0.3s; } /* Close button positioning */ .apply { - background: var(--apply-button-color); /* Use variable for close button color */ - color: white; /* Use white for text color */ + background: var(--apply-button-color); + /* Use variable for close button color */ + color: white; + /* Use white for text color */ border: none; border-radius: 5px; padding: 5px 10px; cursor: pointer; - position: absolute; /* Position the button absolutely */ - top: 50px; /* Distance from the top */ - right: 40px; /* Distance from the right */ + position: absolute; + /* Position the button absolutely */ + top: 50px; + /* Distance from the top */ + right: 40px; + /* Distance from the right */ transition: background 0.3s; } .close-popup:hover { - background: darkred; /* Optional hover effect */ + background: darkred; + /* Optional hover effect */ } /* 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 */ + 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 */ + margin-bottom: 0; + /* Removes bottom margin from last option */ + border-bottom: none; + /* Removes separator from last option */ } .settings-option input[type="text"], @@ -151,7 +184,9 @@ padding: 10px; border-radius: 5px; width: 100%; - margin-bottom: 10px; /* Adds spacing between inputs */ + height: 40px; + margin-bottom: 10px; + /* Adds spacing between inputs */ } /* Optional additional spacing for labels */ @@ -161,14 +196,14 @@ font-weight: bold; } -.export-button{ +.export-button { background-color: var(--button-hover-background-color); padding: 10px; margin: 10px; border-radius: 10px; } -.import-file{ +.import-file { background-color: var(--button-hover-background-color); padding: 10px; margin: 10px; @@ -179,7 +214,7 @@ justify-content: space-between; margin-top: 10px; } - + .slider-option { cursor: pointer; padding: 10px; @@ -187,19 +222,22 @@ border-radius: 5px; transition: background-color 0.3s; } - + .slider-option.active { - background-color: #007bff; /* Change to your active color */ + background-color: #007bff; + /* Change to your active color */ color: white; border-color: #007bff; } - + input[type="radio"] { - display: none; /* Hide the default radio buttons */ + display: none; + /* Hide the default radio buttons */ } .slider-option.disabled { - opacity: 0.5; /* Make the option appear greyed out */ - pointer-events: none; /* Prevent clicks */ -} - \ No newline at end of file + opacity: 0.5; + /* Make the option appear greyed out */ + pointer-events: none; + /* Prevent clicks */ +} \ No newline at end of file diff --git a/main.js b/main.js index f221306..91e416f 100644 --- a/main.js +++ b/main.js @@ -2,12 +2,12 @@ const { app, BrowserWindow } = require('electron'); function createWindow() { const win = new BrowserWindow({ - width: 800, - height: 600, + width: 1280, + height: 720, webPreferences: { nodeIntegration: true, }, - autoHideMenuBar: true, + autoHideMenuBar: true, }); win.loadURL('http://localhost:3000');