From 637cf60a9b62871c7e0b46e2f582aea412cf7cac Mon Sep 17 00:00:00 2001
From: sageTheDM <info@photofuel.tech>
Date: Mon, 23 Sep 2024 16:53:29 +0200
Subject: [PATCH] The css is working again (The responsive will be optimized on
a later date)
---
app/components/Login.tsx | 142 ++++++++++++----------
app/components/Settings.tsx | 203 +++++++++++++++++++-------------
app/styles/Login.css | 32 ++++-
app/styles/Settings.css | 16 +--
app/styles/container.css | 2 +
app/styles/global.css | 4 +
app/styles/history.css | 2 +-
app/styles/output.css | 3 +-
app/styles/user-ai-messages.css | 2 +-
app/styles/variables.css | 1 +
10 files changed, 246 insertions(+), 161 deletions(-)
diff --git a/app/components/Login.tsx b/app/components/Login.tsx
index c37a1fa..d98896e 100644
--- a/app/components/Login.tsx
+++ b/app/components/Login.tsx
@@ -3,8 +3,8 @@ import Settings from './Settings'; // Import the Settings component
const Login: React.FC = () => {
// State to handle popup visibility
- const [showPopup, setShowPopup] = useState(false);
- const [showSignInPopup, setShowSignInPopup] = useState(false);
+ const [showLoginPopup, setShowLoginPopup] = useState(false);
+ const [showSignUpPopup, setShowSignUpPopup] = useState(false);
const [isLoggedIn, setIsLoggedIn] = useState(false);
const [showSettingsPopup, setShowSettingsPopup] = useState(false);
@@ -12,26 +12,40 @@ const Login: React.FC = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [accountName, setAccountName] = useState('Pluto'); // Set the account name
+ const [newAccountEmail, setNewAccountEmail] = useState('');
+ const [newAccountPassword, setNewAccountPassword] = useState('');
- // Function to toggle the popup
- const togglePopup = () => setShowPopup(!showPopup);
+ // Fixed credentials
+ const fixedEmail = 'pluto@imareal.planet';
+ const fixedPassword = 'fuckTheSun1234';
+ const fixedAccount = 'Pluto';
- // Function to toggle the sign-in popup
- const toggleSignInPopup = () => {
- setShowSignInPopup(!showSignInPopup);
- setShowPopup(false); // Hide login popup when opening the sign-in popup
+ // Function to toggle the login popup
+ const toggleLoginPopup = () => setShowLoginPopup(!showLoginPopup);
+
+ // Function to toggle the sign-up popup
+ const toggleSignUpPopup = () => {
+ setShowSignUpPopup(!showSignUpPopup);
+ setShowLoginPopup(false); // Hide login popup when opening the sign-up popup
};
// Function to handle login
const handleLogin = () => {
- if ((email === 'pluto@imareal.planet' || accountName === 'Pluto') && password === 'fuckTheSun1234') {
+ if ((email === fixedEmail || accountName === fixedAccount) && password === fixedPassword) {
setIsLoggedIn(true); // Successful login
- setShowSignInPopup(false); // Close the sign-in popup
+ setShowLoginPopup(false); // Close the login popup
} else {
alert('Incorrect credentials');
}
};
+ // Function to handle account creation
+ const handleCreateAccount = () => {
+ console.log('New Account Created:', newAccountEmail, newAccountPassword);
+ alert('Account created successfully! You can now log in.');
+ toggleSignUpPopup(); // Close sign-up popup
+ };
+
// Function to toggle the settings popup
const toggleSettingsPopup = () => setShowSettingsPopup(!showSettingsPopup);
@@ -39,79 +53,38 @@ const Login: React.FC = () => {
<div>
{/* Login or Settings Button */}
<div className="login-button">
- <button onClick={isLoggedIn ? toggleSettingsPopup : togglePopup}>
- {isLoggedIn ? 'Settings' : 'Register'}
+ <button onClick={isLoggedIn ? toggleSettingsPopup : toggleLoginPopup}>
+ {isLoggedIn ? 'Settings' : 'Log In'}
</button>
</div>
- {/* Conditional rendering of the initial Popup */}
- {showPopup && (
+ {/* Conditional rendering of the Login Popup */}
+ {showLoginPopup && (
<div className="popup-overlay">
<div className="popup-content">
- <h2>Register</h2>
-
- {/* Name or Email Input */}
- <div>
- <input
- type="text"
- placeholder="Name or Email"
- onChange={(e) => setEmail(e.target.value)}
- />
- </div>
-
- {/* Password Input (displayed as asterisks) */}
- <div>
- <input
- type="password"
- placeholder="Password"
- onChange={(e) => setPassword(e.target.value)}
- />
- </div>
-
- {/* Create Account and Sign In buttons */}
- <div className="popup-footer">
- <button onClick={() => alert('Create Account clicked')}>
- Create Account
- </button>
- <p>
- Already have an account? Sign in {' '}
- <span
- style={{ color: 'blue', cursor: 'pointer' }}
- onClick={toggleSignInPopup}
- >
- here
- </span>
- </p>
- </div>
+ <h2>Log In</h2>
{/* Close Button */}
- <button className="close-popup" onClick={togglePopup}>
+ <button className="close-popup" onClick={toggleLoginPopup} aria-label="Close popup">
Close
</button>
- </div>
- </div>
- )}
-
- {/* Conditional rendering of the Sign-In Popup */}
- {showSignInPopup && (
- <div className="popup-overlay">
- <div className="popup-content">
- <h2>Sign In</h2>
{/* Name or Email Input */}
<div>
<input
type="text"
placeholder="Name or Email"
+ value={email}
onChange={(e) => setEmail(e.target.value)}
/>
</div>
- {/* Password Input (displayed as asterisks) */}
+ {/* Password Input */}
<div>
<input
type="password"
placeholder="Password"
+ value={password}
onChange={(e) => setPassword(e.target.value)}
/>
</div>
@@ -121,11 +94,56 @@ const Login: React.FC = () => {
<button className="log-into-account" onClick={handleLogin}>Log In</button>
</div>
+ {/* Text for creating an account */}
+ <p>
+ Don't have an account yet? Create one {' '}
+ <span
+ style={{ color: 'blue', cursor: 'pointer' }}
+ onClick={toggleSignUpPopup}
+ >
+ here
+ </span>
+ </p>
+ </div>
+ </div>
+ )}
+
+ {/* Conditional rendering of the Sign-Up Popup */}
+ {showSignUpPopup && (
+ <div className="popup-overlay">
+ <div className="popup-content">
+ <h2>Create Account</h2>
+
+ {/* New Account Email Input */}
+ <div>
+ <input
+ type="text"
+ placeholder="Email"
+ value={newAccountEmail}
+ onChange={(e) => setNewAccountEmail(e.target.value)}
+ />
+ </div>
+
+ {/* New Account Password Input */}
+ <div>
+ <input
+ type="password"
+ placeholder="Password"
+ value={newAccountPassword}
+ onChange={(e) => setNewAccountPassword(e.target.value)}
+ />
+ </div>
+
+ {/* Create Account Button */}
+ <div>
+ <button className="create-account" onClick={handleCreateAccount}>Create Account</button>
+ </div>
+
{/* Close Button */}
- <button className="close-popup" onClick={toggleSignInPopup}>
+ <button className="close-popup" onClick={toggleSignUpPopup} aria-label="Close popup">
Close
</button>
- </div>
+ </div>
</div>
)}
diff --git a/app/components/Settings.tsx b/app/components/Settings.tsx
index ea1a818..2f8b5d8 100644
--- a/app/components/Settings.tsx
+++ b/app/components/Settings.tsx
@@ -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' && (
<>
diff --git a/app/styles/Login.css b/app/styles/Login.css
index c8c559e..8c77229 100644
--- a/app/styles/Login.css
+++ b/app/styles/Login.css
@@ -1,3 +1,13 @@
+/* Container for the login layout */
+.login-container {
+ display: grid;
+ grid-template-columns: 1fr 3fr; /* 1fr for sidebar, 3fr for main content */
+ grid-auto-flow: column;
+ overflow-x: hidden;
+ height: 100%; /* Ensure it takes full height */
+}
+
+/* Button for login action */
.login-button {
position: absolute;
top: 5px;
@@ -43,6 +53,7 @@
width: 300px;
text-align: center;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+ position: relative; /* For positioning the close button */
}
/* Input styles */
@@ -61,20 +72,28 @@
outline: none; /* Remove default outline */
}
-/* Close button */
+/* Close button styles */
.close-popup {
background: var(--close-button-color); /* Use variable for close button color */
- color: var(--text-color);
+ color: white; /* Use white for text color */
border: none;
border-radius: 5px;
padding: 5px 10px;
cursor: pointer;
- margin-top: 20px;
+ position: absolute; /* Position the button absolutely */
+ top: 10px; /* Distance from the top */
+ right: 10px; /* Distance from the right */
+ transition: background 0.3s;
}
+.close-popup:hover {
+ background: darkred; /* Optional hover effect */
+}
+
+/* Log In button styles */
.log-into-account {
- background: var(--login-button-color); /* Use variable for login button color */
- color: var(--text-color);
+ background: green; /* Use variable for login button color */
+ color: white;
border: none;
border-radius: 5px;
padding: 5px 10px;
@@ -82,7 +101,7 @@
margin-top: 20px;
}
-/* Footer section */
+/* Footer section for popups */
.popup-footer {
margin-top: 15px;
}
@@ -110,6 +129,7 @@
text-decoration: underline;
}
+/* Paragraph styles within popup */
.popup-content p {
color: var(--popup-text-color); /* Use variable for paragraph text color */
margin: 10px;
diff --git a/app/styles/Settings.css b/app/styles/Settings.css
index 014a3a8..bf88759 100644
--- a/app/styles/Settings.css
+++ b/app/styles/Settings.css
@@ -97,23 +97,23 @@
/* Close button positioning */
.close-popup {
- background-color: var(--close-button-color);
- color: var(--user-message-text-color);
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
- padding: 10px 20px;
+ background: var(--close-button-color); /* Use variable for close button color */
+ color: white; /* Use white for text color */
border: none;
border-radius: 5px;
+ padding: 5px 10px;
cursor: pointer;
- position: absolute; /* Position absolute to top right */
- top: 20px; /* Distance from top */
- right: 20px; /* Distance from right */
+ position: absolute; /* Position the button absolutely */
+ top: 10px; /* Distance from the top */
+ right: 10px; /* Distance from the right */
transition: background 0.3s;
}
.close-popup:hover {
- background-color: var(--close-button-hover-color); /* Darker red on hover */
+ background: darkred; /* Optional hover effect */
}
+
/* Additional styles for inputs and options */
.settings-option {
margin-bottom: 20px; /* Adds space between each setting option */
diff --git a/app/styles/container.css b/app/styles/container.css
index 08f254a..e281216 100644
--- a/app/styles/container.css
+++ b/app/styles/container.css
@@ -14,6 +14,8 @@
transition: width 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; /* Smooth transitions for all properties */
background-color: var(--left-panel-background-color); /* Use variable for background color */
border-radius: 0 1em 0 0;
+ margin-left: 0;
+ padding-right: 1em;
}
.left-panel.hidden {
diff --git a/app/styles/global.css b/app/styles/global.css
index f1bcfdf..1db5ccb 100644
--- a/app/styles/global.css
+++ b/app/styles/global.css
@@ -45,3 +45,7 @@ input {
input:hover {
border-color: var(--button-hover-background-color);
}
+
+select{
+ background-color: var(--input-background-color);
+}
diff --git a/app/styles/history.css b/app/styles/history.css
index 7bc9bcd..83e5271 100644
--- a/app/styles/history.css
+++ b/app/styles/history.css
@@ -1,7 +1,7 @@
.history-background {
grid-column: 1/2;
grid-row: 1/2;
- height: 40vh;
+ height: 45vh;
overflow: hidden;
background-color: var(--history-background-color);
padding: 1em;
diff --git a/app/styles/output.css b/app/styles/output.css
index f5d7924..2abde1d 100644
--- a/app/styles/output.css
+++ b/app/styles/output.css
@@ -12,8 +12,7 @@
font-size: 1em;
overflow-y: auto;
width: calc(100% - 2em); /* Corrected calculation for width */
- height: 70vh;
- margin-bottom: 1vh;
+ height: 75vh;
}
#conversation {
diff --git a/app/styles/user-ai-messages.css b/app/styles/user-ai-messages.css
index ebb9da1..524e730 100644
--- a/app/styles/user-ai-messages.css
+++ b/app/styles/user-ai-messages.css
@@ -15,7 +15,7 @@
color: var(--text-color);
border-bottom-right-radius: 0;
margin-left: auto;
- text-align: right;
+ text-align: left;
}
.ai-message {
diff --git a/app/styles/variables.css b/app/styles/variables.css
index e5b3bbc..a051e6d 100644
--- a/app/styles/variables.css
+++ b/app/styles/variables.css
@@ -18,6 +18,7 @@
--left-panel-background-color: #79832e; /* Background color for left panel */
--conversation-background-color: #79832e; /* Background color for conversation container */
--doc-background-color: #ffffff; /* Background color for documents */
+ --close-button-color: red;
/* FAQ Colors */
--faq-background-color: #474D22; /* Background color for FAQ section */