The css is working again (The responsive will be optimized on a later date)
This commit is contained in:
parent
aaedab54cb
commit
637cf60a9b
10 changed files with 246 additions and 161 deletions
|
|
@ -45,7 +45,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
const [newPassword, setNewPassword] = useState<string>('');
|
||||
|
||||
// Theme selection
|
||||
const [selectedTheme, setSelectedTheme] = useState<string>('IOMARKET'); // Default value can be 'IOMARKET'
|
||||
const [selectedTheme, setSelectedTheme] = useState<string>('default');
|
||||
|
||||
|
||||
// Effect to update CSS variables on theme state change
|
||||
|
|
@ -99,43 +99,85 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
<h2>General Settings</h2>
|
||||
<div className="settings-option">
|
||||
<label>Preferred Language</label>
|
||||
<input
|
||||
type="text"
|
||||
<select
|
||||
value={preferredLanguage}
|
||||
onChange={(e) => setPreferredLanguage(e.target.value)}
|
||||
/>
|
||||
>
|
||||
<option value="en">English</option>
|
||||
<option value="es">Spanish</option>
|
||||
<option value="fr">French</option>
|
||||
<option value="de">German</option>
|
||||
<option value="it">Italian</option>
|
||||
<option value="pt">Portuguese</option>
|
||||
<option value="zh">Chinese</option>
|
||||
<option value="ja">Japanese</option>
|
||||
<option value="ru">Russian</option>
|
||||
<option value="ar">Arabic</option>
|
||||
{/* Add more languages as needed */}
|
||||
</select>
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<label>Preferred Currency</label>
|
||||
<input
|
||||
type="text"
|
||||
<select
|
||||
value={preferredCurrency}
|
||||
onChange={(e) => setPreferredCurrency(e.target.value)}
|
||||
/>
|
||||
>
|
||||
<option value="usd">USD</option>
|
||||
<option value="eur">EUR</option>
|
||||
<option value="gbp">GBP</option>
|
||||
<option value="jpy">JPY</option>
|
||||
<option value="cad">CAD</option>
|
||||
<option value="aud">AUD</option>
|
||||
<option value="chf">CHF</option>
|
||||
<option value="cny">CNY</option>
|
||||
<option value="inr">INR</option>
|
||||
{/* Add more currencies as needed */}
|
||||
</select>
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<label>Date Format</label>
|
||||
<input
|
||||
type="text"
|
||||
<select
|
||||
value={dateFormat}
|
||||
onChange={(e) => setDateFormat(e.target.value)}
|
||||
/>
|
||||
>
|
||||
<option value="mm/dd/yyyy">MM/DD/YYYY</option>
|
||||
<option value="dd/mm/yyyy">DD/MM/YYYY</option>
|
||||
<option value="yyyy-mm-dd">YYYY-MM-DD</option>
|
||||
<option value="mm-dd-yyyy">MM-DD-YYYY</option>
|
||||
<option value="dd-mm-yyyy">DD-MM-YYYY</option>
|
||||
{/* Add more formats as needed */}
|
||||
</select>
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<label>Time Format</label>
|
||||
<input
|
||||
type="text"
|
||||
<select
|
||||
value={timeFormat}
|
||||
onChange={(e) => setTimeFormat(e.target.value)}
|
||||
/>
|
||||
>
|
||||
<option value="12-hour">12 Hour</option>
|
||||
<option value="24-hour">24 Hour</option>
|
||||
<option value="am-pm">AM/PM Format</option>
|
||||
{/* Add more formats if necessary */}
|
||||
</select>
|
||||
</div>
|
||||
<div className="settings-option">
|
||||
<label>Time Zone</label>
|
||||
<input
|
||||
type="text"
|
||||
<select
|
||||
value={timeZone}
|
||||
onChange={(e) => setTimeZone(e.target.value)}
|
||||
/>
|
||||
>
|
||||
<option value="GMT">GMT</option>
|
||||
<option value="EST">EST</option>
|
||||
<option value="CST">CST</option>
|
||||
<option value="MST">MST</option>
|
||||
<option value="PST">PST</option>
|
||||
<option value="UTC">UTC</option>
|
||||
<option value="BST">BST</option>
|
||||
<option value="IST">IST</option>
|
||||
<option value="CET">CET</option>
|
||||
<option value="JST">JST</option>
|
||||
{/* Add more time zones as needed */}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -197,111 +239,110 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
|
|||
// 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-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'); // Background color for input fields
|
||||
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'); // 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('--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'); // 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('--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'"); // Default font family
|
||||
document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // 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-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'); // Background color for input fields
|
||||
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'); // 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('--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'); // 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('--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'"); // Default font family
|
||||
document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // 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-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'); // Background color for input fields
|
||||
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'); // 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('--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'); // 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('--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'"); // Default font family
|
||||
document.documentElement.style.setProperty('--font-size', '16px'); // Font size
|
||||
document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Font family
|
||||
document.documentElement.style.setProperty('--font-size', '16px'); // Font size
|
||||
break;
|
||||
case 'CUSTOM':
|
||||
// Do nothing, CUSTOM will display the customization options
|
||||
// Handle custom theme logic here
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}} // Handle theme selection
|
||||
>
|
||||
<option value="default">Select your style...</option>
|
||||
<option value="IOMARKET">IOMARKET</option>
|
||||
<option value="WHITE">WHITE</option>
|
||||
<option value="BLACK">BLACK</option>
|
||||
<option value="CUSTOM">CUSTOM</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{/* Conditionally render theme settings only if "CUSTOM" is selected */}
|
||||
{selectedTheme === 'CUSTOM' && (
|
||||
<>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue