forked from React-Group/interstellar_ai
Preset color themes
This commit is contained in:
parent
6a1aabcbe8
commit
9cc89ffe61
1 changed files with 290 additions and 167 deletions
|
|
@ -44,6 +44,10 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
||||||
const [newEmail, setNewEmail] = useState<string>('');
|
const [newEmail, setNewEmail] = useState<string>('');
|
||||||
const [newPassword, setNewPassword] = useState<string>('');
|
const [newPassword, setNewPassword] = useState<string>('');
|
||||||
|
|
||||||
|
// Theme selection
|
||||||
|
const [selectedTheme, setSelectedTheme] = useState<string>('IOMARKET'); // Default value can be 'IOMARKET'
|
||||||
|
|
||||||
|
|
||||||
// Effect to update CSS variables on theme state change
|
// Effect to update CSS variables on theme state change
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
document.documentElement.style.setProperty('--background-color', backgroundColor);
|
document.documentElement.style.setProperty('--background-color', backgroundColor);
|
||||||
|
|
@ -84,7 +88,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
||||||
popUpTextColor,
|
popUpTextColor,
|
||||||
inputBorderColor,
|
inputBorderColor,
|
||||||
fontFamily,
|
fontFamily,
|
||||||
fontSize
|
fontSize,
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const renderSettingsContent = () => {
|
const renderSettingsContent = () => {
|
||||||
|
|
@ -171,7 +175,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div className="settings-option">
|
<div className="settings-option">
|
||||||
<button onClick={() => {/* Export data logic */}}>Export My Data</button>
|
<button onClick={() => { /* Export data logic */ }}>Export My Data</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
@ -180,177 +184,300 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
||||||
return (
|
return (
|
||||||
<div className="settings-section">
|
<div className="settings-section">
|
||||||
<h2>Theme Settings</h2>
|
<h2>Theme Settings</h2>
|
||||||
|
|
||||||
|
{/* Dropdown to select theme */}
|
||||||
<div className="settings-option">
|
<div className="settings-option">
|
||||||
<p>Font Size</p>
|
<p>Select Theme</p>
|
||||||
<input
|
|
||||||
type="range"
|
|
||||||
min="12"
|
|
||||||
max="30"
|
|
||||||
value={parseInt(fontSize, 10)} // Ensure value is a number
|
|
||||||
onChange={(e) => {
|
|
||||||
const newSize = `${e.target.value}px`;
|
|
||||||
setFontSize(newSize);
|
|
||||||
document.documentElement.style.setProperty('--font-size', newSize); // Update the CSS variable
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<span>{fontSize}</span>
|
|
||||||
</div>
|
|
||||||
<div className="settings-option">
|
|
||||||
<p>Background Color</p>
|
|
||||||
<input
|
|
||||||
type="color"
|
|
||||||
value={backgroundColor}
|
|
||||||
onChange={(e) => setBackgroundColor(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="settings-option">
|
|
||||||
<p>Text Color</p>
|
|
||||||
<input
|
|
||||||
type="color"
|
|
||||||
value={textColor}
|
|
||||||
onChange={(e) => setTextColor(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="settings-option">
|
|
||||||
<p>Input Background Color</p>
|
|
||||||
<input
|
|
||||||
type="color"
|
|
||||||
value={inputBackgroundColor}
|
|
||||||
onChange={(e) => setInputBackgroundColor(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="settings-option">
|
|
||||||
<p>Input Button Color</p>
|
|
||||||
<input
|
|
||||||
type="color"
|
|
||||||
value={inputButtonColor}
|
|
||||||
onChange={(e) => setInputButtonColor(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="settings-option">
|
|
||||||
<p>Input Button Hover Color</p>
|
|
||||||
<input
|
|
||||||
type="color"
|
|
||||||
value={inputButtonHoverColor}
|
|
||||||
onChange={(e) => setInputButtonHoverColor(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="settings-option">
|
|
||||||
<p>User Message Background Color</p>
|
|
||||||
<input
|
|
||||||
type="color"
|
|
||||||
value={userMessageBackgroundColor}
|
|
||||||
onChange={(e) => setUserMessageBackgroundColor(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="settings-option">
|
|
||||||
<p>User Message Text Color</p>
|
|
||||||
<input
|
|
||||||
type="color"
|
|
||||||
value={userMessageTextColor}
|
|
||||||
onChange={(e) => setUserMessageTextColor(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="settings-option">
|
|
||||||
<p>AI Message Background Color</p>
|
|
||||||
<input
|
|
||||||
type="color"
|
|
||||||
value={aiMessageBackgroundColor}
|
|
||||||
onChange={(e) => setAiMessageBackgroundColor(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="settings-option">
|
|
||||||
<p>AI Message Text Color</p>
|
|
||||||
<input
|
|
||||||
type="color"
|
|
||||||
value={aiMessageTextColor}
|
|
||||||
onChange={(e) => setAiMessageTextColor(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="settings-option">
|
|
||||||
<p>Button Background Color</p>
|
|
||||||
<input
|
|
||||||
type="color"
|
|
||||||
value={buttonBackgroundColor}
|
|
||||||
onChange={(e) => setButtonBackgroundColor(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="settings-option">
|
|
||||||
<p>Button Hover Background Color</p>
|
|
||||||
<input
|
|
||||||
type="color"
|
|
||||||
value={buttonHoverBackgroundColor}
|
|
||||||
onChange={(e) => setButtonHoverBackgroundColor(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="settings-option">
|
|
||||||
<p>Models Background Color</p>
|
|
||||||
<input
|
|
||||||
type="color"
|
|
||||||
value={modelsBackgroundColor}
|
|
||||||
onChange={(e) => setModelsBackgroundColor(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="settings-option">
|
|
||||||
<p>History Background Color</p>
|
|
||||||
<input
|
|
||||||
type="color"
|
|
||||||
value={historyBackgroundColor}
|
|
||||||
onChange={(e) => setHistoryBackgroundColor(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="settings-option">
|
|
||||||
<p>Left Panel Background Color</p>
|
|
||||||
<input
|
|
||||||
type="color"
|
|
||||||
value={leftPanelBackgroundColor}
|
|
||||||
onChange={(e) => setLeftPanelBackgroundColor(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="settings-option">
|
|
||||||
<p>Conversation Background Color</p>
|
|
||||||
<input
|
|
||||||
type="color"
|
|
||||||
value={conversationBackgroundColor}
|
|
||||||
onChange={(e) => setConversationBackgroundColor(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="settings-option">
|
|
||||||
<p>Pop-up Text Color</p>
|
|
||||||
<input
|
|
||||||
type="color"
|
|
||||||
value={popUpTextColor}
|
|
||||||
onChange={(e) => setPopUpTextColor(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="settings-option">
|
|
||||||
<p>Input Border Color</p>
|
|
||||||
<input
|
|
||||||
type="color"
|
|
||||||
value={inputBorderColor}
|
|
||||||
onChange={(e) => setInputBorderColor(e.target.value)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="settings-option">
|
|
||||||
<p>Font Family</p>
|
|
||||||
<select
|
<select
|
||||||
value={fontFamily}
|
value={selectedTheme}
|
||||||
onChange={(e) => setFontFamily(e.target.value)}
|
onChange={(e) => {
|
||||||
|
const theme = e.target.value;
|
||||||
|
setSelectedTheme(theme); // Update state for selected theme
|
||||||
|
|
||||||
|
// Apply the appropriate theme based on selection
|
||||||
|
switch (theme) {
|
||||||
|
case 'IOMARKET':
|
||||||
|
document.documentElement.style.setProperty('--header-background-color', '#7e7e7e'); // New 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'); // Background color for input fields
|
||||||
|
document.documentElement.style.setProperty('--input-button-color', '#8B9635'); // Button color
|
||||||
|
document.documentElement.style.setProperty('--input-button-hover-color', '#6b7c2b'); // Hover color for input buttons
|
||||||
|
document.documentElement.style.setProperty('--user-message-background-color', '#8B9635'); // Background color for user messages
|
||||||
|
document.documentElement.style.setProperty('--user-message-text-color', '#000'); // Text color for user messages
|
||||||
|
document.documentElement.style.setProperty('--ai-message-background-color', '#FCFCEB'); // Background color for AI messages
|
||||||
|
document.documentElement.style.setProperty('--ai-message-text-color', '#000'); // Text color for AI messages
|
||||||
|
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'); // Background for models section
|
||||||
|
document.documentElement.style.setProperty('--history-background-color', '#f9f9f9'); // Background color for history
|
||||||
|
document.documentElement.style.setProperty('--left-panel-background-color', '#79832e'); // Background color for left panel
|
||||||
|
document.documentElement.style.setProperty('--conversation-background-color', '#79832e'); // Background color for conversation container
|
||||||
|
document.documentElement.style.setProperty('--doc-background-color', '#ffffff'); // Background color for documents
|
||||||
|
document.documentElement.style.setProperty('--faq-background-color', '#474D22'); // Background color for FAQ section
|
||||||
|
document.documentElement.style.setProperty('--faq-heading-color', '#8B9635'); // Heading color for FAQ section
|
||||||
|
document.documentElement.style.setProperty('--faq-item-background-color', '#fefefe'); // Background color for FAQ items
|
||||||
|
document.documentElement.style.setProperty('--faq-item-heading-color', '#474D22'); // Heading color for FAQ items
|
||||||
|
document.documentElement.style.setProperty('--faq-item-text-color', '#333'); // Text color for FAQ items
|
||||||
|
document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0'); // Hover background color for FAQ items
|
||||||
|
document.documentElement.style.setProperty('--pop-up-text', '#000'); // Text color for pop-ups
|
||||||
|
document.documentElement.style.setProperty('--input-border-color', '#8B9635'); // Input border color
|
||||||
|
document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Default font family
|
||||||
|
document.documentElement.style.setProperty('--font-size', '16px'); // Font size
|
||||||
|
break;
|
||||||
|
case 'WHITE':
|
||||||
|
document.documentElement.style.setProperty('--header-background-color', '#ffffff'); // White header background color
|
||||||
|
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'); // Background color for input fields
|
||||||
|
document.documentElement.style.setProperty('--input-button-color', '#007bff'); // Button color
|
||||||
|
document.documentElement.style.setProperty('--input-button-hover-color', '#0056b3'); // Hover color for input buttons
|
||||||
|
document.documentElement.style.setProperty('--user-message-background-color', '#ffffff'); // Background color for user messages
|
||||||
|
document.documentElement.style.setProperty('--user-message-text-color', '#000000'); // Text color for user messages
|
||||||
|
document.documentElement.style.setProperty('--ai-message-background-color', '#f9f9f9'); // Background color for AI messages
|
||||||
|
document.documentElement.style.setProperty('--ai-message-text-color', '#000000'); // Text color for AI messages
|
||||||
|
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'); // Background for models section
|
||||||
|
document.documentElement.style.setProperty('--history-background-color', '#f9f9f9'); // Background color for history
|
||||||
|
document.documentElement.style.setProperty('--left-panel-background-color', '#ffffff'); // Background color for left panel
|
||||||
|
document.documentElement.style.setProperty('--conversation-background-color', '#ffffff'); // Background color for conversation container
|
||||||
|
document.documentElement.style.setProperty('--doc-background-color', '#ffffff'); // Background color for documents
|
||||||
|
document.documentElement.style.setProperty('--faq-background-color', '#ffffff'); // Background color for FAQ section
|
||||||
|
document.documentElement.style.setProperty('--faq-heading-color', '#007bff'); // Heading color for FAQ section
|
||||||
|
document.documentElement.style.setProperty('--faq-item-background-color', '#f9f9f9'); // Background color for FAQ items
|
||||||
|
document.documentElement.style.setProperty('--faq-item-heading-color', '#000000'); // Heading color for FAQ items
|
||||||
|
document.documentElement.style.setProperty('--faq-item-text-color', '#333333'); // Text color for FAQ items
|
||||||
|
document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0'); // Hover background color for FAQ items
|
||||||
|
document.documentElement.style.setProperty('--pop-up-text', '#000000'); // Text color for pop-ups
|
||||||
|
document.documentElement.style.setProperty('--input-border-color', '#ced4da'); // Input border color
|
||||||
|
document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Default font family
|
||||||
|
document.documentElement.style.setProperty('--font-size', '16px'); // Font size
|
||||||
|
|
||||||
|
break;
|
||||||
|
case 'BLACK':
|
||||||
|
document.documentElement.style.setProperty('--header-background-color', '#1a1a1a'); // Dark header background color
|
||||||
|
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'); // Background color for input fields
|
||||||
|
document.documentElement.style.setProperty('--input-button-color', '#3c3c3c'); // Button color
|
||||||
|
document.documentElement.style.setProperty('--input-button-hover-color', '#5a5a5a'); // Hover color for input buttons
|
||||||
|
document.documentElement.style.setProperty('--user-message-background-color', '#2c2c2c'); // Background color for user messages
|
||||||
|
document.documentElement.style.setProperty('--user-message-text-color', '#ffffff'); // Text color for user messages
|
||||||
|
document.documentElement.style.setProperty('--ai-message-background-color', '#2a2a2a'); // Background color for AI messages
|
||||||
|
document.documentElement.style.setProperty('--ai-message-text-color', '#ffffff'); // Text color for AI messages
|
||||||
|
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'); // Background for models section
|
||||||
|
document.documentElement.style.setProperty('--history-background-color', '#1a1a1a'); // Background color for history
|
||||||
|
document.documentElement.style.setProperty('--left-panel-background-color', '#1e1e1e'); // Background color for left panel
|
||||||
|
document.documentElement.style.setProperty('--conversation-background-color', '#2c2c2c'); // Background color for conversation container
|
||||||
|
document.documentElement.style.setProperty('--doc-background-color', '#1e1e1e'); // Background color for documents
|
||||||
|
document.documentElement.style.setProperty('--faq-background-color', '#2c2c2c'); // Background color for FAQ section
|
||||||
|
document.documentElement.style.setProperty('--faq-heading-color', '#ffffff'); // Heading color for FAQ section
|
||||||
|
document.documentElement.style.setProperty('--faq-item-background-color', '#3c3c3c'); // Background color for FAQ items
|
||||||
|
document.documentElement.style.setProperty('--faq-item-heading-color', '#ffffff'); // Heading color for FAQ items
|
||||||
|
document.documentElement.style.setProperty('--faq-item-text-color', '#e0e0e0'); // Text color for FAQ items
|
||||||
|
document.documentElement.style.setProperty('--faq-item-hover-background-color', '#5a5a5a'); // Hover background color for FAQ items
|
||||||
|
document.documentElement.style.setProperty('--pop-up-text', '#ffffff'); // Text color for pop-ups
|
||||||
|
document.documentElement.style.setProperty('--input-border-color', '#3c3c3c'); // Input border color
|
||||||
|
document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Default font family
|
||||||
|
document.documentElement.style.setProperty('--font-size', '16px'); // Font size
|
||||||
|
break;
|
||||||
|
case 'CUSTOM':
|
||||||
|
// Do nothing, CUSTOM will display the customization options
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}} // Handle theme selection
|
||||||
>
|
>
|
||||||
<option value="'Arial', sans-serif">Arial</option>
|
<option value="IOMARKET">IOMARKET</option>
|
||||||
<option value="'Calibri', sans-serif">Calibri</option>
|
<option value="WHITE">WHITE</option>
|
||||||
<option value="'Helvetica', sans-serif">Helvetica</option>
|
<option value="BLACK">BLACK</option>
|
||||||
<option value="'Times New Roman', serif">Times New Roman</option>
|
<option value="CUSTOM">CUSTOM</option>
|
||||||
<option value="'Poppins', sans-serif">Poppins</option>
|
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Conditionally render theme settings only if "CUSTOM" is selected */}
|
||||||
|
{selectedTheme === 'CUSTOM' && (
|
||||||
|
<>
|
||||||
|
<div className="settings-option">
|
||||||
|
<p>Font Size</p>
|
||||||
|
<input
|
||||||
|
type="range"
|
||||||
|
min="12"
|
||||||
|
max="30"
|
||||||
|
value={parseInt(fontSize, 10)} // Ensure value is a number
|
||||||
|
onChange={(e) => {
|
||||||
|
const newSize = `${e.target.value}px`;
|
||||||
|
setFontSize(newSize);
|
||||||
|
document.documentElement.style.setProperty('--font-size', newSize); // Update the CSS variable
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<span>{fontSize}</span>
|
||||||
|
</div>
|
||||||
|
<div className="settings-option">
|
||||||
|
<p>Background Color</p>
|
||||||
|
<input
|
||||||
|
type="color"
|
||||||
|
value={backgroundColor}
|
||||||
|
onChange={(e) => setBackgroundColor(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="settings-option">
|
||||||
|
<p>Text Color</p>
|
||||||
|
<input
|
||||||
|
type="color"
|
||||||
|
value={textColor}
|
||||||
|
onChange={(e) => setTextColor(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="settings-option">
|
||||||
|
<p>Input Background Color</p>
|
||||||
|
<input
|
||||||
|
type="color"
|
||||||
|
value={inputBackgroundColor}
|
||||||
|
onChange={(e) => setInputBackgroundColor(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="settings-option">
|
||||||
|
<p>Input Button Color</p>
|
||||||
|
<input
|
||||||
|
type="color"
|
||||||
|
value={inputButtonColor}
|
||||||
|
onChange={(e) => setInputButtonColor(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="settings-option">
|
||||||
|
<p>Input Button Hover Color</p>
|
||||||
|
<input
|
||||||
|
type="color"
|
||||||
|
value={inputButtonHoverColor}
|
||||||
|
onChange={(e) => setInputButtonHoverColor(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="settings-option">
|
||||||
|
<p>User Message Background Color</p>
|
||||||
|
<input
|
||||||
|
type="color"
|
||||||
|
value={userMessageBackgroundColor}
|
||||||
|
onChange={(e) => setUserMessageBackgroundColor(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="settings-option">
|
||||||
|
<p>User Message Text Color</p>
|
||||||
|
<input
|
||||||
|
type="color"
|
||||||
|
value={userMessageTextColor}
|
||||||
|
onChange={(e) => setUserMessageTextColor(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="settings-option">
|
||||||
|
<p>AI Message Background Color</p>
|
||||||
|
<input
|
||||||
|
type="color"
|
||||||
|
value={aiMessageBackgroundColor}
|
||||||
|
onChange={(e) => setAiMessageBackgroundColor(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="settings-option">
|
||||||
|
<p>AI Message Text Color</p>
|
||||||
|
<input
|
||||||
|
type="color"
|
||||||
|
value={aiMessageTextColor}
|
||||||
|
onChange={(e) => setAiMessageTextColor(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="settings-option">
|
||||||
|
<p>Button Background Color</p>
|
||||||
|
<input
|
||||||
|
type="color"
|
||||||
|
value={buttonBackgroundColor}
|
||||||
|
onChange={(e) => setButtonBackgroundColor(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="settings-option">
|
||||||
|
<p>Button Hover Background Color</p>
|
||||||
|
<input
|
||||||
|
type="color"
|
||||||
|
value={buttonHoverBackgroundColor}
|
||||||
|
onChange={(e) => setButtonHoverBackgroundColor(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="settings-option">
|
||||||
|
<p>Models Background Color</p>
|
||||||
|
<input
|
||||||
|
type="color"
|
||||||
|
value={modelsBackgroundColor}
|
||||||
|
onChange={(e) => setModelsBackgroundColor(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="settings-option">
|
||||||
|
<p>History Background Color</p>
|
||||||
|
<input
|
||||||
|
type="color"
|
||||||
|
value={historyBackgroundColor}
|
||||||
|
onChange={(e) => setHistoryBackgroundColor(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="settings-option">
|
||||||
|
<p>Left Panel Background Color</p>
|
||||||
|
<input
|
||||||
|
type="color"
|
||||||
|
value={leftPanelBackgroundColor}
|
||||||
|
onChange={(e) => setLeftPanelBackgroundColor(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="settings-option">
|
||||||
|
<p>Conversation Background Color</p>
|
||||||
|
<input
|
||||||
|
type="color"
|
||||||
|
value={conversationBackgroundColor}
|
||||||
|
onChange={(e) => setConversationBackgroundColor(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="settings-option">
|
||||||
|
<p>Pop-up Text Color</p>
|
||||||
|
<input
|
||||||
|
type="color"
|
||||||
|
value={popUpTextColor}
|
||||||
|
onChange={(e) => setPopUpTextColor(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="settings-option">
|
||||||
|
<p>Input Border Color</p>
|
||||||
|
<input
|
||||||
|
type="color"
|
||||||
|
value={inputBorderColor}
|
||||||
|
onChange={(e) => setInputBorderColor(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="settings-option">
|
||||||
|
<p>Font Family</p>
|
||||||
|
<select
|
||||||
|
value={fontFamily}
|
||||||
|
onChange={(e) => setFontFamily(e.target.value)}
|
||||||
|
>
|
||||||
|
<option value="'Poppins', sans-serif">Poppins</option>
|
||||||
|
<option value="'Arial', sans-serif">Arial</option>
|
||||||
|
<option value="'Calibri', sans-serif">Calibri</option>
|
||||||
|
<option value="'Helvetica', sans-serif">Helvetica</option>
|
||||||
|
<option value="'Times New Roman', serif">Times New Roman</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
case 'foss':
|
case 'foss':
|
||||||
return (
|
return (
|
||||||
<div className="settings-section">
|
<div className="settings-section">
|
||||||
<h2>FOSS Settings</h2>
|
<h2>Free and Open Source Software (FOSS) Settings</h2>
|
||||||
<div className="settings-option">
|
<div className="settings-option">
|
||||||
<label>
|
<label>
|
||||||
<input
|
<input
|
||||||
|
|
@ -360,7 +487,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
||||||
/>
|
/>
|
||||||
Enable Open Source Mode
|
Enable Open Source Mode
|
||||||
</label>
|
</label>
|
||||||
<p>(ONLY OPEN SOURCE MODULES WORK IN THERE)</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
@ -393,10 +519,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
||||||
onChange={(e) => setNewPassword(e.target.value)}
|
onChange={(e) => setNewPassword(e.target.value)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className="danger-zone">
|
|
||||||
<h3>DANGER ZONE</h3>
|
|
||||||
<button onClick={() => {/* Delete account logic */}}>Delete Account</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|
@ -426,6 +548,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue