React-Group/interstellar_ai
1
1
Fork 2
Code Issues 8 Pull requests Projects Releases Packages Wiki Activity Actions

Changed the Settings

Browse source
This commit is contained in:
sageTheDM 2024-10-02 12:18:40 +02:00
parent 3788411d3a
commit 62155ec71f
4 changed files with 351 additions and 160 deletions
Download patch file Download diff file Expand all files Collapse all files

146
app/components/settings/Settings.tsx
View file

@ -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<string>('');
@ -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' },
@ -289,7 +310,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
@ -454,48 +475,85 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
);
case 'theme':
return (
<div className="settings-section">
<h2>Theme Settings</h2>
<ThemeDropdown
selectedTheme={selectedTheme}
setSelectedTheme={setSelectedTheme}
/>
{selectedTheme === 'CUSTOM' && (
<>
{/* Font Size */}
<FontSizeSetting
fontSize={fontSize}
setFontSize={setFontSize}
case 'theme':
return (
<div className="settings-section">
<h2>Theme Settings</h2>
<ThemeDropdown
selectedTheme={selectedTheme}
setSelectedTheme={setSelectedTheme}
/>
{colorSettings.map((setting) => (
<ColorSetting
key={setting.cssVariable}
name={setting.name}
value={setting.value}
setValue={setting.setValue}
cssVariable={setting.cssVariable}
/>
))}
<DropdownSetting
label="Font Family"
value={fontFamily}
setValue={(newFont) => {
setFontFamily(newFont);
document.documentElement.style.setProperty('--font-family', newFont);
}}
options={fontOptions}
/>
</>
)}
</div>
);
{selectedTheme === 'BASIC-CUSTOM' && (
<>
<h3>Basic Colors</h3>
{/* Basic Color Inputs using ColorSetting Component */}
<ColorSetting
name="Primary Color"
value={primaryColor}
setValue={setPrimaryColor}
cssVariable=""
/>
<ColorSetting
name="Secondary Color"
value={secondaryColor}
setValue={setSecondaryColor}
cssVariable=""
/>
<ColorSetting
name="Accent Color"
value={accentColor}
setValue={setAccentColor}
cssVariable=""
/>
<ColorSetting
name="Background Color"
value={basicBackgroundColor}
setValue={setBasicBackgroundColor}
cssVariable=""
/>
<ColorSetting
name="Text Color"
value={basicTextColor}
setValue={setBasicTextColor}
cssVariable=""
/>
</>
)}
{selectedTheme === 'CUSTOM' && (
<>
<h3>Additional Settings</h3>
{/* Additional Font Size Setting */}
<FontSizeSetting
fontSize={fontSize}
setFontSize={setFontSize}
/>
{colorSettings.map((setting) => (
<ColorSetting
key={setting.cssVariable}
name={setting.name}
value={setting.value}
setValue={setting.setValue}
cssVariable={setting.cssVariable}
/>
))}
<DropdownSetting
label="Font Family"
value={fontFamily}
setValue={(newFont) => {
setFontFamily(newFont);
document.documentElement.style.setProperty('--font-family', newFont);
}}
options={fontOptions}
/>
</>
)}
</div>
);
case 'foss':
return (