Merge pull request 'main' (#21) from React-Group/interstellar_ai:main into main #51
4 changed files with 138 additions and 91 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
96
app/components/theme.ts
Normal file
96
app/components/theme.ts
Normal file
|
|
@ -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
|
||||
};
|
||||
|
|
@ -30,7 +30,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 */
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue