diff --git a/app/components/Settings.tsx b/app/components/Settings.tsx index bb203d3..4500b1f 100644 --- a/app/components/Settings.tsx +++ b/app/components/Settings.tsx @@ -1,17 +1,13 @@ import React, { useState, useEffect } from 'react'; -import { applyIOMarketTheme, applyWhiteTheme, applyBlackTheme } from './theme'; +import { applyTheme, applyCustomTheme } from './theme'; import { exportSettings, importSettings } from './settingUtils'; // Import utility functions import { getAllLocalStorageItems } from '../backend/GetLocalStorage'; import { - sendToDatabase, - createAccount, changePassword, - getData, changeData, - checkCredentials, deleteAccount, } from '../backend/database'; -import { equal } from 'assert'; + const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ({ closeSettings, accountName }) => { @@ -103,24 +99,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( const savedTheme = localStorage.getItem('selectedTheme'); if (savedTheme) { setSelectedTheme(savedTheme); - // Apply the saved theme on initial load - switch (savedTheme) { - case 'IOMARKET': - applyIOMarketTheme(); - break; - case 'WHITE': - applyWhiteTheme(); - break; - case 'BLACK': - applyBlackTheme(); - break; - case 'CUSTOM': - // Handle custom theme application here if necessary - break; - default: - applyIOMarketTheme(); - break; - } + applyTheme(savedTheme); } }, []); // Runs only once when the component mounts @@ -265,144 +244,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( localStorage.setItem('radioSelection', newValue); // Save the selection for persistence }; - // Apply imported settings to the CSS variables - const applySettings = (settings: any) => { - if (settings.backgroundColor) { - setBackgroundColor(settings.backgroundColor); - document.documentElement.style.setProperty('--background-color', settings.backgroundColor); - } - - if (settings.textColor) { - setTextColor(settings.textColor); - document.documentElement.style.setProperty('--text-color', settings.textColor); - } - - if (settings.inputBackgroundColor) { - setInputBackgroundColor(settings.inputBackgroundColor); - document.documentElement.style.setProperty('--input-background-color', settings.inputBackgroundColor); - } - - if (settings.inputButtonColor) { - setInputButtonColor(settings.inputButtonColor); - document.documentElement.style.setProperty('--input-button-color', settings.inputButtonColor); - } - - if (settings.inputButtonHoverColor) { - setInputButtonHoverColor(settings.inputButtonHoverColor); - document.documentElement.style.setProperty('--input-button-hover-color', settings.inputButtonHoverColor); - } - - if (settings.userMessageBackgroundColor) { - setUserMessageBackgroundColor(settings.userMessageBackgroundColor); - document.documentElement.style.setProperty('--user-message-background-color', settings.userMessageBackgroundColor); - } - - if (settings.userMessageTextColor) { - setUserMessageTextColor(settings.userMessageTextColor); - document.documentElement.style.setProperty('--user-message-text-color', settings.userMessageTextColor); - } - - if (settings.aiMessageBackgroundColor) { - setAiMessageBackgroundColor(settings.aiMessageBackgroundColor); - document.documentElement.style.setProperty('--ai-message-background-color', settings.aiMessageBackgroundColor); - } - - if (settings.aiMessageTextColor) { - setAiMessageTextColor(settings.aiMessageTextColor); - document.documentElement.style.setProperty('--ai-message-text-color', settings.aiMessageTextColor); - } - - if (settings.buttonBackgroundColor) { - setButtonBackgroundColor(settings.buttonBackgroundColor); - document.documentElement.style.setProperty('--button-background-color', settings.buttonBackgroundColor); - } - - if (settings.buttonHoverBackgroundColor) { - setButtonHoverBackgroundColor(settings.buttonHoverBackgroundColor); - document.documentElement.style.setProperty('--button-hover-background-color', settings.buttonHoverBackgroundColor); - } - - if (settings.modelsBackgroundColor) { - setModelsBackgroundColor(settings.modelsBackgroundColor); - document.documentElement.style.setProperty('--models-background-color', settings.modelsBackgroundColor); - } - - if (settings.historyBackgroundColor) { - setHistoryBackgroundColor(settings.historyBackgroundColor); - document.documentElement.style.setProperty('--history-background-color', settings.historyBackgroundColor); - } - - if (settings.leftPanelBackgroundColor) { - setLeftPanelBackgroundColor(settings.leftPanelBackgroundColor); - document.documentElement.style.setProperty('--left-panel-background-color', settings.leftPanelBackgroundColor); - } - - if (settings.conversationBackgroundColor) { - setConversationBackgroundColor(settings.conversationBackgroundColor); - document.documentElement.style.setProperty('--conversation-background-color', settings.conversationBackgroundColor); - } - - if (settings.popUpTextColor) { - setPopUpTextColor(settings.popUpTextColor); - document.documentElement.style.setProperty('--pop-up-text', settings.popUpTextColor); - } - - if (settings.inputBorderColor) { - setInputBorderColor(settings.inputBorderColor); - document.documentElement.style.setProperty('--input-border-color', settings.inputBorderColor); - } - - if (settings.fontFamily) { - setFontFamily(settings.fontFamily); - document.documentElement.style.setProperty('--font-family', settings.fontFamily); - } - - if (settings.fontSize) { - setFontSize(settings.fontSize); - document.documentElement.style.setProperty('--font-size', settings.fontSize); - } - - if (settings.burgerMenu) { - setBurgerMenu(settings.burgerMenu); - document.documentElement.style.setProperty('--burger-menu-background-color', settings.burgerMenu); - } - - // Additional theme settings - if (settings.faqBackgroundColor) { - document.documentElement.style.setProperty('--faq-background-color', settings.faqBackgroundColor); - } - - if (settings.faqHeadingColor) { - document.documentElement.style.setProperty('--faq-heading-color', settings.faqHeadingColor); - } - - if (settings.faqItemBackgroundColor) { - document.documentElement.style.setProperty('--faq-item-background-color', settings.faqItemBackgroundColor); - } - - if (settings.faqItemHeadingColor) { - document.documentElement.style.setProperty('--faq-item-heading-color', settings.faqItemHeadingColor); - } - - if (settings.faqItemTextColor) { - document.documentElement.style.setProperty('--faq-item-text-color', settings.faqItemTextColor); - } - - if (settings.faqItemHoverBackgroundColor) { - document.documentElement.style.setProperty('--faq-item-hover-background-color', settings.faqItemHoverBackgroundColor); - } - - if (settings.popupBackgroundColor) { - document.documentElement.style.setProperty('--popup-background-color', settings.popupBackgroundColor); - } - - if (settings.overlayTextColor) { - document.documentElement.style.setProperty('--overlay-text-color', settings.overlayTextColor); - } - }; - - - // Function to handle updating all credentials + // Function to handle updating all credentials const handleUpdateCredentials = async () => { // Update account information const newData = { @@ -624,23 +466,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( localStorage.setItem("selectedTheme", theme); // Apply the appropriate theme based on selection - switch (theme) { - case 'IOMARKET': - applyIOMarketTheme(); - break; - case 'WHITE': - applyWhiteTheme(); - break; - case 'BLACK': - applyBlackTheme(); - break; - case 'CUSTOM': - // Handle custom theme logic here if necessary - break; - default: - applyIOMarketTheme(); - break; - } + applyTheme(theme); } }} > @@ -1198,7 +1024,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( const handleImport = (event: React.ChangeEvent) => { if (event.target.files && event.target.files.length > 0) { const file = event.target.files[0]; - importSettings(file, applySettings); + importSettings(file, applyCustomTheme); } }; @@ -1272,7 +1098,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ( {renderSettingsContent()}