First step refactoring
This commit is contained in:
parent
2f84559ec2
commit
7a74e70520
2 changed files with 146 additions and 306 deletions
|
|
@ -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<HTMLInputElement>) => {
|
||||
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()}
|
||||
<button className="close-popup" onClick={closeSettings}>Close</button>
|
||||
<button className="apply" onClick={() => {
|
||||
applySettings;
|
||||
getAllLocalStorageItems();
|
||||
closeSettings();
|
||||
}}>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue