YasinOnm08/interstellar_ai
0
0
Fork 0
forked from React-Group/interstellar_ai
Code Pull requests Activity

Backend & CSS tweaks #17

Merged
YasinOnm08 merged 5 commits from React-Group/interstellar_ai:main into main 2024-09-23 16:58:15 +02:00
Conversation 0 Commits 5 Files changed 10 +246 -161
10 changed files with 246 additions and 161 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

142
app/components/Login.tsx
View file

@ -3,8 +3,8 @@ import Settings from './Settings'; // Import the Settings component
const Login: React.FC = () => { const Login: React.FC = () => {
// State to handle popup visibility // State to handle popup visibility
const [showPopup, setShowPopup] = useState(false); const [showLoginPopup, setShowLoginPopup] = useState(false);
const [showSignInPopup, setShowSignInPopup] = useState(false); const [showSignUpPopup, setShowSignUpPopup] = useState(false);
const [isLoggedIn, setIsLoggedIn] = useState(false); const [isLoggedIn, setIsLoggedIn] = useState(false);
const [showSettingsPopup, setShowSettingsPopup] = useState(false); const [showSettingsPopup, setShowSettingsPopup] = useState(false);
@ -12,26 +12,40 @@ const Login: React.FC = () => {
const [email, setEmail] = useState(''); const [email, setEmail] = useState('');
const [password, setPassword] = useState(''); const [password, setPassword] = useState('');
const [accountName, setAccountName] = useState('Pluto'); // Set the account name const [accountName, setAccountName] = useState('Pluto'); // Set the account name
const [newAccountEmail, setNewAccountEmail] = useState('');
const [newAccountPassword, setNewAccountPassword] = useState('');
// Function to toggle the popup // Fixed credentials
const togglePopup = () => setShowPopup(!showPopup); const fixedEmail = 'pluto@imareal.planet';
const fixedPassword = 'fuckTheSun1234';
const fixedAccount = 'Pluto';
// Function to toggle the sign-in popup // Function to toggle the login popup
const toggleSignInPopup = () => { const toggleLoginPopup = () => setShowLoginPopup(!showLoginPopup);
setShowSignInPopup(!showSignInPopup);
setShowPopup(false); // Hide login popup when opening the sign-in popup // 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 // Function to handle login
const handleLogin = () => { const handleLogin = () => {
if ((email === 'pluto@imareal.planet' || accountName === 'Pluto') && password === 'fuckTheSun1234') { if ((email === fixedEmail || accountName === fixedAccount) && password === fixedPassword) {
setIsLoggedIn(true); // Successful login setIsLoggedIn(true); // Successful login
setShowSignInPopup(false); // Close the sign-in popup setShowLoginPopup(false); // Close the login popup
} else { } else {
alert('Incorrect credentials'); 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 // Function to toggle the settings popup
const toggleSettingsPopup = () => setShowSettingsPopup(!showSettingsPopup); const toggleSettingsPopup = () => setShowSettingsPopup(!showSettingsPopup);
@ -39,79 +53,38 @@ const Login: React.FC = () => {
<div> <div>
{/* Login or Settings Button */} {/* Login or Settings Button */}
<div className="login-button"> <div className="login-button">
<button onClick={isLoggedIn ? toggleSettingsPopup : togglePopup}> <button onClick={isLoggedIn ? toggleSettingsPopup : toggleLoginPopup}>
{isLoggedIn ? 'Settings' : 'Register'} {isLoggedIn ? 'Settings' : 'Log In'}
</button> </button>
</div> </div>
{/* Conditional rendering of the initial Popup */} {/* Conditional rendering of the Login Popup */}
{showPopup && ( {showLoginPopup && (
<div className="popup-overlay"> <div className="popup-overlay">
<div className="popup-content"> <div className="popup-content">
<h2>Register</h2> <h2>Log In</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>
{/* Close Button */} {/* Close Button */}
<button className="close-popup" onClick={togglePopup}> <button className="close-popup" onClick={toggleLoginPopup} aria-label="Close popup">
Close Close
</button> </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 */} {/* Name or Email Input */}
<div> <div>
<input <input
type="text" type="text"
placeholder="Name or Email" placeholder="Name or Email"
value={email}
onChange={(e) => setEmail(e.target.value)} onChange={(e) => setEmail(e.target.value)}
/> />
</div> </div>
{/* Password Input (displayed as asterisks) */} {/* Password Input */}
<div> <div>
<input <input
type="password" type="password"
placeholder="Password" placeholder="Password"
value={password}
onChange={(e) => setPassword(e.target.value)} onChange={(e) => setPassword(e.target.value)}
/> />
</div> </div>
@ -121,11 +94,56 @@ const Login: React.FC = () => {
<button className="log-into-account" onClick={handleLogin}>Log In</button> <button className="log-into-account" onClick={handleLogin}>Log In</button>
</div> </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 */} {/* Close Button */}
<button className="close-popup" onClick={toggleSignInPopup}> <button className="close-popup" onClick={toggleSignUpPopup} aria-label="Close popup">
Close Close
</button> </button>
</div> </div>
</div> </div>
)} )}

203
app/components/Settings.tsx
View file

@ -45,7 +45,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
const [newPassword, setNewPassword] = useState<string>(''); const [newPassword, setNewPassword] = useState<string>('');
// Theme selection // 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 // 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> <h2>General Settings</h2>
<div className="settings-option"> <div className="settings-option">
<label>Preferred Language</label> <label>Preferred Language</label>
<input <select
type="text"
value={preferredLanguage} value={preferredLanguage}
onChange={(e) => setPreferredLanguage(e.target.value)} 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>
<div className="settings-option"> <div className="settings-option">
<label>Preferred Currency</label> <label>Preferred Currency</label>
<input <select
type="text"
value={preferredCurrency} value={preferredCurrency}
onChange={(e) => setPreferredCurrency(e.target.value)} 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>
<div className="settings-option"> <div className="settings-option">
<label>Date Format</label> <label>Date Format</label>
<input <select
type="text"
value={dateFormat} value={dateFormat}
onChange={(e) => setDateFormat(e.target.value)} 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>
<div className="settings-option"> <div className="settings-option">
<label>Time Format</label> <label>Time Format</label>
<input <select
type="text"
value={timeFormat} value={timeFormat}
onChange={(e) => setTimeFormat(e.target.value)} 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>
<div className="settings-option"> <div className="settings-option">
<label>Time Zone</label> <label>Time Zone</label>
<input <select
type="text"
value={timeZone} value={timeZone}
onChange={(e) => setTimeZone(e.target.value)} 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>
</div> </div>
); );
@ -197,111 +239,110 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
// Apply the appropriate theme based on selection // Apply the appropriate theme based on selection
switch (theme) { switch (theme) {
case 'IOMARKET': 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('--header-text-color', '#ffffff'); // Header text color
document.documentElement.style.setProperty('--background-color', '#8B9635'); // Main background 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('--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-color', '#8B9635'); // Button color
document.documentElement.style.setProperty('--input-button-hover-color', '#6b7c2b'); // Hover color for input buttons document.documentElement.style.setProperty('--input-button-hover-color', '#6b7c2b'); // Button hover color
document.documentElement.style.setProperty('--user-message-background-color', '#8B9635'); // Background color for user messages document.documentElement.style.setProperty('--user-message-background-color', '#8B9635'); // User messages background
document.documentElement.style.setProperty('--user-message-text-color', '#000'); // Text color for user messages document.documentElement.style.setProperty('--user-message-text-color', '#000'); // User messages text color
document.documentElement.style.setProperty('--ai-message-background-color', '#FCFCEB'); // Background color for AI messages document.documentElement.style.setProperty('--ai-message-background-color', '#FCFCEB'); // AI messages background
document.documentElement.style.setProperty('--ai-message-text-color', '#000'); // Text color for AI messages 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-background-color', '#8B9635'); // Button background color
document.documentElement.style.setProperty('--button-hover-background-color', '#6b7c2b'); // Button hover 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('--models-background-color', '#ffffff'); // Models section background
document.documentElement.style.setProperty('--history-background-color', '#f9f9f9'); // Background color for history document.documentElement.style.setProperty('--history-background-color', '#f9f9f9'); // History background
document.documentElement.style.setProperty('--left-panel-background-color', '#79832e'); // Background color for left panel document.documentElement.style.setProperty('--left-panel-background-color', '#79832e'); // Left panel background
document.documentElement.style.setProperty('--conversation-background-color', '#79832e'); // Background color for conversation container document.documentElement.style.setProperty('--conversation-background-color', '#79832e'); // Conversation container background
document.documentElement.style.setProperty('--doc-background-color', '#ffffff'); // Background color for documents document.documentElement.style.setProperty('--doc-background-color', '#ffffff'); // Documents background
document.documentElement.style.setProperty('--faq-background-color', '#474D22'); // Background color for FAQ section document.documentElement.style.setProperty('--faq-background-color', '#474D22'); // FAQ section background
document.documentElement.style.setProperty('--faq-heading-color', '#8B9635'); // Heading color for FAQ section document.documentElement.style.setProperty('--faq-heading-color', '#8B9635'); // FAQ heading color
document.documentElement.style.setProperty('--faq-item-background-color', '#fefefe'); // Background color for FAQ items document.documentElement.style.setProperty('--faq-item-background-color', '#fefefe'); // FAQ items background
document.documentElement.style.setProperty('--faq-item-heading-color', '#474D22'); // Heading color for FAQ items document.documentElement.style.setProperty('--faq-item-heading-color', '#474D22'); // FAQ items heading color
document.documentElement.style.setProperty('--faq-item-text-color', '#333'); // Text color for FAQ items document.documentElement.style.setProperty('--faq-item-text-color', '#333'); // FAQ items text color
document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0'); // Hover background color for FAQ items document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0'); // FAQ items hover background
document.documentElement.style.setProperty('--pop-up-text', '#000'); // Text color for pop-ups 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('--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 document.documentElement.style.setProperty('--font-size', '16px'); // Font size
break; break;
case 'WHITE': 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('--header-text-color', '#000000'); // Header text color
document.documentElement.style.setProperty('--background-color', '#f0f0f0'); // Main background 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('--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-color', '#007bff'); // Button color
document.documentElement.style.setProperty('--input-button-hover-color', '#0056b3'); // Hover color for input buttons document.documentElement.style.setProperty('--input-button-hover-color', '#0056b3'); // Button hover color
document.documentElement.style.setProperty('--user-message-background-color', '#ffffff'); // Background color for user messages document.documentElement.style.setProperty('--user-message-background-color', '#ffffff'); // User messages background
document.documentElement.style.setProperty('--user-message-text-color', '#000000'); // Text color for user messages document.documentElement.style.setProperty('--user-message-text-color', '#000000'); // User messages text color
document.documentElement.style.setProperty('--ai-message-background-color', '#f9f9f9'); // Background color for AI messages document.documentElement.style.setProperty('--ai-message-background-color', '#f9f9f9'); // AI messages background
document.documentElement.style.setProperty('--ai-message-text-color', '#000000'); // Text color for AI messages 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-background-color', '#007bff'); // Button background color
document.documentElement.style.setProperty('--button-hover-background-color', '#0056b3'); // Button hover 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('--models-background-color', '#ffffff'); // Models section background
document.documentElement.style.setProperty('--history-background-color', '#f9f9f9'); // Background color for history document.documentElement.style.setProperty('--history-background-color', '#f9f9f9'); // History background
document.documentElement.style.setProperty('--left-panel-background-color', '#ffffff'); // Background color for left panel document.documentElement.style.setProperty('--left-panel-background-color', '#ffffff'); // Left panel background
document.documentElement.style.setProperty('--conversation-background-color', '#ffffff'); // Background color for conversation container document.documentElement.style.setProperty('--conversation-background-color', '#ffffff'); // Conversation container background
document.documentElement.style.setProperty('--doc-background-color', '#ffffff'); // Background color for documents document.documentElement.style.setProperty('--doc-background-color', '#ffffff'); // Documents background
document.documentElement.style.setProperty('--faq-background-color', '#ffffff'); // Background color for FAQ section document.documentElement.style.setProperty('--faq-background-color', '#ffffff'); // FAQ section background
document.documentElement.style.setProperty('--faq-heading-color', '#007bff'); // Heading color for FAQ section document.documentElement.style.setProperty('--faq-heading-color', '#007bff'); // FAQ heading color
document.documentElement.style.setProperty('--faq-item-background-color', '#f9f9f9'); // Background color for FAQ items document.documentElement.style.setProperty('--faq-item-background-color', '#f9f9f9'); // FAQ items background
document.documentElement.style.setProperty('--faq-item-heading-color', '#000000'); // Heading color for FAQ items document.documentElement.style.setProperty('--faq-item-heading-color', '#000000'); // FAQ items heading color
document.documentElement.style.setProperty('--faq-item-text-color', '#333333'); // Text color for FAQ items document.documentElement.style.setProperty('--faq-item-text-color', '#333333'); // FAQ items text color
document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0'); // Hover background color for FAQ items document.documentElement.style.setProperty('--faq-item-hover-background-color', '#e0e0e0'); // FAQ items hover background
document.documentElement.style.setProperty('--pop-up-text', '#000000'); // Text color for pop-ups 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('--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 document.documentElement.style.setProperty('--font-size', '16px'); // Font size
break; break;
case 'BLACK': 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('--header-text-color', '#ffffff'); // Header text color
document.documentElement.style.setProperty('--background-color', '#121212'); // Main background 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('--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-color', '#3c3c3c'); // Button color
document.documentElement.style.setProperty('--input-button-hover-color', '#5a5a5a'); // Hover color for input buttons document.documentElement.style.setProperty('--input-button-hover-color', '#5a5a5a'); // Button hover color
document.documentElement.style.setProperty('--user-message-background-color', '#2c2c2c'); // Background color for user messages document.documentElement.style.setProperty('--user-message-background-color', '#000000'); // User messages background
document.documentElement.style.setProperty('--user-message-text-color', '#ffffff'); // Text color for user messages document.documentElement.style.setProperty('--user-message-text-color', '#ffffff'); // User messages text color
document.documentElement.style.setProperty('--ai-message-background-color', '#2a2a2a'); // Background color for AI messages document.documentElement.style.setProperty('--ai-message-background-color', '#202020'); // AI messages background
document.documentElement.style.setProperty('--ai-message-text-color', '#ffffff'); // Text color for AI messages 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-background-color', '#3c3c3c'); // Button background color
document.documentElement.style.setProperty('--button-hover-background-color', '#5a5a5a'); // Button hover 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('--models-background-color', '#1e1e1e'); // Models section background
document.documentElement.style.setProperty('--history-background-color', '#1a1a1a'); // Background color for history document.documentElement.style.setProperty('--history-background-color', '#1a1a1a'); // History background
document.documentElement.style.setProperty('--left-panel-background-color', '#1e1e1e'); // Background color for left panel document.documentElement.style.setProperty('--left-panel-background-color', '#1e1e1e'); // Left panel background
document.documentElement.style.setProperty('--conversation-background-color', '#2c2c2c'); // Background color for conversation container document.documentElement.style.setProperty('--conversation-background-color', '#2c2c2c'); // Conversation container background
document.documentElement.style.setProperty('--doc-background-color', '#1e1e1e'); // Background color for documents document.documentElement.style.setProperty('--doc-background-color', '#1e1e1e'); // Documents background
document.documentElement.style.setProperty('--faq-background-color', '#2c2c2c'); // Background color for FAQ section document.documentElement.style.setProperty('--faq-background-color', '#2c2c2c'); // FAQ section background
document.documentElement.style.setProperty('--faq-heading-color', '#ffffff'); // Heading color for FAQ section document.documentElement.style.setProperty('--faq-heading-color', '#ffffff'); // FAQ heading color
document.documentElement.style.setProperty('--faq-item-background-color', '#3c3c3c'); // Background color for FAQ items document.documentElement.style.setProperty('--faq-item-background-color', '#3c3c3c'); // FAQ items background
document.documentElement.style.setProperty('--faq-item-heading-color', '#ffffff'); // Heading color for FAQ items document.documentElement.style.setProperty('--faq-item-heading-color', '#ffffff'); // FAQ items heading color
document.documentElement.style.setProperty('--faq-item-text-color', '#e0e0e0'); // Text color for FAQ items document.documentElement.style.setProperty('--faq-item-text-color', '#e0e0e0'); // FAQ items text color
document.documentElement.style.setProperty('--faq-item-hover-background-color', '#5a5a5a'); // Hover background color for FAQ items document.documentElement.style.setProperty('--faq-item-hover-background-color', '#5a5a5a'); // FAQ items hover background
document.documentElement.style.setProperty('--pop-up-text', '#ffffff'); // Text color for pop-ups 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('--input-border-color', '#3c3c3c'); // 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 document.documentElement.style.setProperty('--font-size', '16px'); // Font size
break; break;
case 'CUSTOM': case 'CUSTOM':
// Do nothing, CUSTOM will display the customization options // Handle custom theme logic here
break; break;
default: default:
break; break;
} }
}} // Handle theme selection }} // Handle theme selection
> >
<option value="default">Select your style...</option>
<option value="IOMARKET">IOMARKET</option> <option value="IOMARKET">IOMARKET</option>
<option value="WHITE">WHITE</option> <option value="WHITE">WHITE</option>
<option value="BLACK">BLACK</option> <option value="BLACK">BLACK</option>
<option value="CUSTOM">CUSTOM</option> <option value="CUSTOM">CUSTOM</option>
</select> </select>
</div> </div>
{/* Conditionally render theme settings only if "CUSTOM" is selected */} {/* Conditionally render theme settings only if "CUSTOM" is selected */}
{selectedTheme === 'CUSTOM' && ( {selectedTheme === 'CUSTOM' && (
<> <>

32
app/styles/Login.css
View file

@ -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 { .login-button {
position: absolute; position: absolute;
top: 5px; top: 5px;
@ -43,6 +53,7 @@
width: 300px; width: 300px;
text-align: center; text-align: center;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
position: relative; /* For positioning the close button */
} }
/* Input styles */ /* Input styles */
@ -61,20 +72,28 @@
outline: none; /* Remove default outline */ outline: none; /* Remove default outline */
} }
/* Close button */ /* Close button styles */
.close-popup { .close-popup {
background: var(--close-button-color); /* Use variable for close button color */ 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: none;
border-radius: 5px; border-radius: 5px;
padding: 5px 10px; padding: 5px 10px;
cursor: pointer; 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 { .log-into-account {
background: var(--login-button-color); /* Use variable for login button color */ background: green; /* Use variable for login button color */
color: var(--text-color); color: white;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
padding: 5px 10px; padding: 5px 10px;
@ -82,7 +101,7 @@
margin-top: 20px; margin-top: 20px;
} }
/* Footer section */ /* Footer section for popups */
.popup-footer { .popup-footer {
margin-top: 15px; margin-top: 15px;
} }
@ -110,6 +129,7 @@
text-decoration: underline; text-decoration: underline;
} }
/* Paragraph styles within popup */
.popup-content p { .popup-content p {
color: var(--popup-text-color); /* Use variable for paragraph text color */ color: var(--popup-text-color); /* Use variable for paragraph text color */
margin: 10px; margin: 10px;

16
app/styles/Settings.css
View file

@ -97,23 +97,23 @@
/* Close button positioning */ /* Close button positioning */
.close-popup { .close-popup {
background-color: var(--close-button-color); background: var(--close-button-color); /* Use variable for close button color */
color: var(--user-message-text-color); color: white; /* Use white for text color */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 10px 20px;
border: none; border: none;
border-radius: 5px; border-radius: 5px;
padding: 5px 10px;
cursor: pointer; cursor: pointer;
position: absolute; /* Position absolute to top right */ position: absolute; /* Position the button absolutely */
top: 20px; /* Distance from top */ top: 10px; /* Distance from the top */
right: 20px; /* Distance from right */ right: 10px; /* Distance from the right */
transition: background 0.3s; transition: background 0.3s;
} }
.close-popup:hover { .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 */ /* Additional styles for inputs and options */
.settings-option { .settings-option {
margin-bottom: 20px; /* Adds space between each setting option */ margin-bottom: 20px; /* Adds space between each setting option */

2
app/styles/container.css
View file

@ -14,6 +14,8 @@
transition: width 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; /* Smooth transitions for all properties */ 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 */ background-color: var(--left-panel-background-color); /* Use variable for background color */
border-radius: 0 1em 0 0; border-radius: 0 1em 0 0;
margin-left: 0;
padding-right: 1em;
} }
.left-panel.hidden { .left-panel.hidden {

4
app/styles/global.css
View file

@ -45,3 +45,7 @@ input {
input:hover { input:hover {
border-color: var(--button-hover-background-color); border-color: var(--button-hover-background-color);
} }
select{
background-color: var(--input-background-color);
}

2
app/styles/history.css
View file

@ -1,7 +1,7 @@
.history-background { .history-background {
grid-column: 1/2; grid-column: 1/2;
grid-row: 1/2; grid-row: 1/2;
height: 40vh; height: 45vh;
overflow: hidden; overflow: hidden;
background-color: var(--history-background-color); background-color: var(--history-background-color);
padding: 1em; padding: 1em;

3
app/styles/output.css
View file

@ -12,8 +12,7 @@
font-size: 1em; font-size: 1em;
overflow-y: auto; overflow-y: auto;
width: calc(100% - 2em); /* Corrected calculation for width */ width: calc(100% - 2em); /* Corrected calculation for width */
height: 70vh; height: 75vh;
margin-bottom: 1vh;
} }
#conversation { #conversation {

2
app/styles/user-ai-messages.css
View file

@ -15,7 +15,7 @@
color: var(--text-color); color: var(--text-color);
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
margin-left: auto; margin-left: auto;
text-align: right; text-align: left;
} }
.ai-message { .ai-message {

1
app/styles/variables.css
View file

@ -18,6 +18,7 @@
--left-panel-background-color: #79832e; /* Background color for left panel */ --left-panel-background-color: #79832e; /* Background color for left panel */
--conversation-background-color: #79832e; /* Background color for conversation container */ --conversation-background-color: #79832e; /* Background color for conversation container */
--doc-background-color: #ffffff; /* Background color for documents */ --doc-background-color: #ffffff; /* Background color for documents */
--close-button-color: red;
/* FAQ Colors */ /* FAQ Colors */
--faq-background-color: #474D22; /* Background color for FAQ section */ --faq-background-color: #474D22; /* Background color for FAQ section */