From 613508a48895724c02724e9134a09f564f97df5f Mon Sep 17 00:00:00 2001
From: YasinOnm08 <onmazyasin4@gmail.com>
Date: Mon, 30 Sep 2024 13:46:58 +0200
Subject: [PATCH 1/4] css progress 3
---
app/styles/container.css | 6 ------
app/styles/global.css | 9 ---------
app/styles/reset.css | 1 +
3 files changed, 1 insertion(+), 15 deletions(-)
diff --git a/app/styles/container.css b/app/styles/container.css
index 3f094b2..f6d9c07 100644
--- a/app/styles/container.css
+++ b/app/styles/container.css
@@ -13,7 +13,6 @@
border-radius: 0 1em 0 0;
margin-left: 0;
padding-right: 1em;
- height: 100%;
}
.left-panel.hidden {
@@ -30,11 +29,6 @@
height: 100%;
}
-/* Adjust margin-left when panel is shown or hidden */
-.conversation-container.expanded {
- margin-left: 1vw;
-}
-
.conversation-container.collapsed {
margin-left: 1vw; /* Space for the left panel */
bottom: 0;
diff --git a/app/styles/global.css b/app/styles/global.css
index c9754e3..cf792c3 100644
--- a/app/styles/global.css
+++ b/app/styles/global.css
@@ -1,4 +1,3 @@
-html,
body {
height: 100vh;
overflow: hidden;
@@ -6,9 +5,6 @@ body {
}
body {
- display: flex;
- justify-content: center;
- align-items: center;
background-color: var(--background-color);
color: var(--text-color);
font-family: var(--font-family);
@@ -19,11 +15,6 @@ body {
header {
background-color: var(--header-background-color);
color: var(--header-text-color);
- padding: 1rem; /* Adjust padding as needed */
-}
-
-main{
- height: 100%;
}
button {
diff --git a/app/styles/reset.css b/app/styles/reset.css
index 23d8732..a77192e 100644
--- a/app/styles/reset.css
+++ b/app/styles/reset.css
@@ -2,4 +2,5 @@
margin: 0;
padding: 0;
box-sizing: border-box;
+ scroll-behavior: smooth;
}
From 1f35b83322ce2c38eaf99b501095515ece5b54f3 Mon Sep 17 00:00:00 2001
From: sageTheDM <info@photofuel.tech>
Date: Mon, 30 Sep 2024 16:07:01 +0200
Subject: [PATCH 2/4] Dear god have mercy
---
app/components/Settings.tsx | 1119 +++++++++++++++++++++--------------
app/components/theme.ts | 62 +-
app/page.tsx | 29 +
3 files changed, 757 insertions(+), 453 deletions(-)
diff --git a/app/components/Settings.tsx b/app/components/Settings.tsx
index 48e452c..bb203d3 100644
--- a/app/components/Settings.tsx
+++ b/app/components/Settings.tsx
@@ -11,6 +11,7 @@ import {
checkCredentials,
deleteAccount,
} from '../backend/database';
+import { equal } from 'assert';
const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = ({ closeSettings, accountName }) => {
@@ -85,9 +86,43 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
const [fontFamily, setFontFamily] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--font-family').trim());
const [fontSize, setFontSize] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--font-size').trim());
const [burgerMenu, setBurgerMenu] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--burger-menu-background-color').trim());
+ const [faqBackgroundColor, setFaqBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-background-color').trim());
+ const [faqHeadingColor, setFaqHeadingColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-heading-color').trim());
+ const [faqItemBackgroundColor, setFaqItemBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-item-background-color').trim());
+ const [faqItemHeadingColor, setFaqItemHeadingColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-item-heading-color').trim());
+ const [faqItemTextColor, setFaqItemTextColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-item-text-color').trim());
+ const [faqItemHoverBackgroundColor, setFaqItemHoverBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--faq-item-hover-background-color').trim());
+ const [popupBackgroundColor, setPopupBackgroundColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--popup-background-color').trim());
+ const [overlayTextColor, setOverlayTextColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--overlay-text-color').trim());
+
// Theme selection
- const [selectedTheme, setSelectedTheme] = useState(() => localStorage.getItem('selectedTheme') || 'default');
+ const [selectedTheme, setSelectedTheme] = useState<string>('');
+
+ useEffect(() => {
+ const savedTheme = localStorage.getItem('selectedTheme');
+ if (savedTheme) {
+ setSelectedTheme(savedTheme);
+ // Apply the saved theme on initial load
+ switch (savedTheme) {
+ case 'IOMARKET':
+ applyIOMarketTheme();
+ break;
+ case 'WHITE':
+ applyWhiteTheme();
+ break;
+ case 'BLACK':
+ applyBlackTheme();
+ break;
+ case 'CUSTOM':
+ // Handle custom theme application here if necessary
+ break;
+ default:
+ applyIOMarketTheme();
+ break;
+ }
+ }
+ }, []); // Runs only once when the component mounts
// API Keys
const [mistral, setmistral] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--online-la-plateforme').trim());
@@ -146,9 +181,17 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
openai,
anthropic,
google,
+ // Additional theme settings
+ faqBackgroundColor,
+ faqHeadingColor,
+ faqItemBackgroundColor,
+ faqItemHeadingColor,
+ faqItemTextColor,
+ faqItemHoverBackgroundColor,
+ popupBackgroundColor,
+ overlayTextColor,
};
-
- // Update local storage
+ // Update local storage
for (const [key, value] of Object.entries(settings)) {
if (typeof value === 'boolean') {
localStorage.setItem(key, JSON.stringify(value));
@@ -157,45 +200,54 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
}
}
}, [
- activeSection,
- preferredLanguage,
- preferredCurrency,
- dateFormat,
- timeFormat,
- timeZone,
- selectedOption,
- disableChatHistory,
- disableAIMemory,
- openSourceMode,
- newName,
- newEmail,
- newPassword,
- preferredMeasurement,
- backgroundColor,
- textColor,
- inputBackgroundColor,
- inputButtonColor,
- inputButtonHoverColor,
- userMessageBackgroundColor,
- userMessageTextColor,
- aiMessageBackgroundColor,
- aiMessageTextColor,
- buttonBackgroundColor,
- buttonHoverBackgroundColor,
- modelsBackgroundColor,
- historyBackgroundColor,
- leftPanelBackgroundColor,
- conversationBackgroundColor,
- popUpTextColor,
- inputBorderColor,
- fontFamily,
- fontSize,
- burgerMenu,
- selectedTheme,
- mistral,
- openai,
- anthropic,
- google,
+ activeSection,
+ preferredLanguage,
+ preferredCurrency,
+ dateFormat,
+ timeFormat,
+ timeZone,
+ selectedOption,
+ disableChatHistory,
+ disableAIMemory,
+ openSourceMode,
+ newName,
+ newEmail,
+ newPassword,
+ preferredMeasurement,
+ backgroundColor,
+ textColor,
+ inputBackgroundColor,
+ inputButtonColor,
+ inputButtonHoverColor,
+ userMessageBackgroundColor,
+ userMessageTextColor,
+ aiMessageBackgroundColor,
+ aiMessageTextColor,
+ buttonBackgroundColor,
+ buttonHoverBackgroundColor,
+ modelsBackgroundColor,
+ historyBackgroundColor,
+ leftPanelBackgroundColor,
+ conversationBackgroundColor,
+ popUpTextColor,
+ inputBorderColor,
+ fontFamily,
+ fontSize,
+ burgerMenu,
+ selectedTheme,
+ mistral,
+ openai,
+ anthropic,
+ google,
+ // Additional theme settings
+ faqBackgroundColor,
+ faqHeadingColor,
+ faqItemBackgroundColor,
+ faqItemHeadingColor,
+ faqItemTextColor,
+ faqItemHoverBackgroundColor,
+ popupBackgroundColor,
+ overlayTextColor,
]);
useEffect(() => {
@@ -214,107 +266,141 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
};
// Apply imported settings to the CSS variables
- const applySettings = (settings: any) => {
- if (settings.backgroundColor) {
- setBackgroundColor(settings.backgroundColor);
- document.documentElement.style.setProperty('--background-color', settings.backgroundColor);
- }
-
- if (settings.textColor) {
- setTextColor(settings.textColor);
- document.documentElement.style.setProperty('--text-color', settings.textColor);
- }
-
- if (settings.inputBackgroundColor) {
- setInputBackgroundColor(settings.inputBackgroundColor);
- document.documentElement.style.setProperty('--input-background-color', settings.inputBackgroundColor);
- }
-
- if (settings.inputButtonColor) {
- setInputButtonColor(settings.inputButtonColor);
- document.documentElement.style.setProperty('--input-button-color', settings.inputButtonColor);
- }
-
- if (settings.inputButtonHoverColor) {
- setInputButtonHoverColor(settings.inputButtonHoverColor);
- document.documentElement.style.setProperty('--input-button-hover-color', settings.inputButtonHoverColor);
- }
-
- if (settings.userMessageBackgroundColor) {
- setUserMessageBackgroundColor(settings.userMessageBackgroundColor);
- document.documentElement.style.setProperty('--user-message-background-color', settings.userMessageBackgroundColor);
- }
-
- if (settings.userMessageTextColor) {
- setUserMessageTextColor(settings.userMessageTextColor);
- document.documentElement.style.setProperty('--user-message-text-color', settings.userMessageTextColor);
- }
-
- if (settings.aiMessageBackgroundColor) {
- setAiMessageBackgroundColor(settings.aiMessageBackgroundColor);
- document.documentElement.style.setProperty('--ai-message-background-color', settings.aiMessageBackgroundColor);
- }
-
- if (settings.aiMessageTextColor) {
- setAiMessageTextColor(settings.aiMessageTextColor);
- document.documentElement.style.setProperty('--ai-message-text-color', settings.aiMessageTextColor);
- }
-
- if (settings.buttonBackgroundColor) {
- setButtonBackgroundColor(settings.buttonBackgroundColor);
- document.documentElement.style.setProperty('--button-background-color', settings.buttonBackgroundColor);
- }
-
- if (settings.buttonHoverBackgroundColor) {
- setButtonHoverBackgroundColor(settings.buttonHoverBackgroundColor);
- document.documentElement.style.setProperty('--button-hover-background-color', settings.buttonHoverBackgroundColor);
- }
-
- if (settings.modelsBackgroundColor) {
- setModelsBackgroundColor(settings.modelsBackgroundColor);
- document.documentElement.style.setProperty('--models-background-color', settings.modelsBackgroundColor);
- }
-
- if (settings.historyBackgroundColor) {
- setHistoryBackgroundColor(settings.historyBackgroundColor);
- document.documentElement.style.setProperty('--history-background-color', settings.historyBackgroundColor);
- }
-
- if (settings.leftPanelBackgroundColor) {
- setLeftPanelBackgroundColor(settings.leftPanelBackgroundColor);
- document.documentElement.style.setProperty('--left-panel-background-color', settings.leftPanelBackgroundColor);
- }
-
- if (settings.conversationBackgroundColor) {
- setConversationBackgroundColor(settings.conversationBackgroundColor);
- document.documentElement.style.setProperty('--conversation-background-color', settings.conversationBackgroundColor);
- }
-
- if (settings.popUpTextColor) {
- setPopUpTextColor(settings.popUpTextColor);
- document.documentElement.style.setProperty('--pop-up-text', settings.popUpTextColor);
- }
-
- if (settings.inputBorderColor) {
- setInputBorderColor(settings.inputBorderColor);
- document.documentElement.style.setProperty('--input-border-color', settings.inputBorderColor);
- }
-
- if (settings.fontFamily) {
- setFontFamily(settings.fontFamily);
- document.documentElement.style.setProperty('--font-family', settings.fontFamily);
- }
-
- if (settings.fontSize) {
- setFontSize(settings.fontSize);
- document.documentElement.style.setProperty('--font-size', settings.fontSize);
- }
-
- if (settings.burgerMenu) {
- setBurgerMenu(settings.fontSize);
- document.documentElement.style.setProperty('--burger-menu-background-color:', settings.burgerMenu);
- }
- };
+ const applySettings = (settings: any) => {
+ if (settings.backgroundColor) {
+ setBackgroundColor(settings.backgroundColor);
+ document.documentElement.style.setProperty('--background-color', settings.backgroundColor);
+ }
+
+ if (settings.textColor) {
+ setTextColor(settings.textColor);
+ document.documentElement.style.setProperty('--text-color', settings.textColor);
+ }
+
+ if (settings.inputBackgroundColor) {
+ setInputBackgroundColor(settings.inputBackgroundColor);
+ document.documentElement.style.setProperty('--input-background-color', settings.inputBackgroundColor);
+ }
+
+ if (settings.inputButtonColor) {
+ setInputButtonColor(settings.inputButtonColor);
+ document.documentElement.style.setProperty('--input-button-color', settings.inputButtonColor);
+ }
+
+ if (settings.inputButtonHoverColor) {
+ setInputButtonHoverColor(settings.inputButtonHoverColor);
+ document.documentElement.style.setProperty('--input-button-hover-color', settings.inputButtonHoverColor);
+ }
+
+ if (settings.userMessageBackgroundColor) {
+ setUserMessageBackgroundColor(settings.userMessageBackgroundColor);
+ document.documentElement.style.setProperty('--user-message-background-color', settings.userMessageBackgroundColor);
+ }
+
+ if (settings.userMessageTextColor) {
+ setUserMessageTextColor(settings.userMessageTextColor);
+ document.documentElement.style.setProperty('--user-message-text-color', settings.userMessageTextColor);
+ }
+
+ if (settings.aiMessageBackgroundColor) {
+ setAiMessageBackgroundColor(settings.aiMessageBackgroundColor);
+ document.documentElement.style.setProperty('--ai-message-background-color', settings.aiMessageBackgroundColor);
+ }
+
+ if (settings.aiMessageTextColor) {
+ setAiMessageTextColor(settings.aiMessageTextColor);
+ document.documentElement.style.setProperty('--ai-message-text-color', settings.aiMessageTextColor);
+ }
+
+ if (settings.buttonBackgroundColor) {
+ setButtonBackgroundColor(settings.buttonBackgroundColor);
+ document.documentElement.style.setProperty('--button-background-color', settings.buttonBackgroundColor);
+ }
+
+ if (settings.buttonHoverBackgroundColor) {
+ setButtonHoverBackgroundColor(settings.buttonHoverBackgroundColor);
+ document.documentElement.style.setProperty('--button-hover-background-color', settings.buttonHoverBackgroundColor);
+ }
+
+ if (settings.modelsBackgroundColor) {
+ setModelsBackgroundColor(settings.modelsBackgroundColor);
+ document.documentElement.style.setProperty('--models-background-color', settings.modelsBackgroundColor);
+ }
+
+ if (settings.historyBackgroundColor) {
+ setHistoryBackgroundColor(settings.historyBackgroundColor);
+ document.documentElement.style.setProperty('--history-background-color', settings.historyBackgroundColor);
+ }
+
+ if (settings.leftPanelBackgroundColor) {
+ setLeftPanelBackgroundColor(settings.leftPanelBackgroundColor);
+ document.documentElement.style.setProperty('--left-panel-background-color', settings.leftPanelBackgroundColor);
+ }
+
+ if (settings.conversationBackgroundColor) {
+ setConversationBackgroundColor(settings.conversationBackgroundColor);
+ document.documentElement.style.setProperty('--conversation-background-color', settings.conversationBackgroundColor);
+ }
+
+ if (settings.popUpTextColor) {
+ setPopUpTextColor(settings.popUpTextColor);
+ document.documentElement.style.setProperty('--pop-up-text', settings.popUpTextColor);
+ }
+
+ if (settings.inputBorderColor) {
+ setInputBorderColor(settings.inputBorderColor);
+ document.documentElement.style.setProperty('--input-border-color', settings.inputBorderColor);
+ }
+
+ if (settings.fontFamily) {
+ setFontFamily(settings.fontFamily);
+ document.documentElement.style.setProperty('--font-family', settings.fontFamily);
+ }
+
+ if (settings.fontSize) {
+ setFontSize(settings.fontSize);
+ document.documentElement.style.setProperty('--font-size', settings.fontSize);
+ }
+
+ if (settings.burgerMenu) {
+ setBurgerMenu(settings.burgerMenu);
+ document.documentElement.style.setProperty('--burger-menu-background-color', settings.burgerMenu);
+ }
+
+ // Additional theme settings
+ if (settings.faqBackgroundColor) {
+ document.documentElement.style.setProperty('--faq-background-color', settings.faqBackgroundColor);
+ }
+
+ if (settings.faqHeadingColor) {
+ document.documentElement.style.setProperty('--faq-heading-color', settings.faqHeadingColor);
+ }
+
+ if (settings.faqItemBackgroundColor) {
+ document.documentElement.style.setProperty('--faq-item-background-color', settings.faqItemBackgroundColor);
+ }
+
+ if (settings.faqItemHeadingColor) {
+ document.documentElement.style.setProperty('--faq-item-heading-color', settings.faqItemHeadingColor);
+ }
+
+ if (settings.faqItemTextColor) {
+ document.documentElement.style.setProperty('--faq-item-text-color', settings.faqItemTextColor);
+ }
+
+ if (settings.faqItemHoverBackgroundColor) {
+ document.documentElement.style.setProperty('--faq-item-hover-background-color', settings.faqItemHoverBackgroundColor);
+ }
+
+ if (settings.popupBackgroundColor) {
+ document.documentElement.style.setProperty('--popup-background-color', settings.popupBackgroundColor);
+ }
+
+ if (settings.overlayTextColor) {
+ document.documentElement.style.setProperty('--overlay-text-color', settings.overlayTextColor);
+ }
+ };
+
// Function to handle updating all credentials
const handleUpdateCredentials = async () => {
@@ -521,330 +607,449 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
);
- case 'theme':
- return (
- <div className="settings-section">
- <h2>Theme Settings</h2>
-
- {/* Dropdown to select theme */}
- <div className="settings-option">
- <p>Select Theme</p>
- <select
- value={selectedTheme}
- onChange={(e) => {
- const theme = e.target.value; // Get the selected value from the event
- setSelectedTheme(theme); // Update state for selected theme
-
- // Apply the appropriate theme based on selection
- switch (theme) { // Use 'theme' instead of 'selectedTheme'
- case 'IOMARKET':
- applyIOMarketTheme(); // Call the function to apply the IOMARKET theme
- break;
- case 'WHITE':
- applyWhiteTheme(); // Call the function to apply the WHITE theme
- break;
- case 'BLACK':
- applyBlackTheme(); // Call the function to apply the BLACK theme
- break;
- case 'CUSTOM':
- // Handle custom theme logic here if necessary
- break;
- default:
- applyIOMarketTheme(); // Fallback to the IOMARKET theme
- 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>
+ case 'theme':
+ return (
+ <div className="settings-section">
+ <h2>Theme Settings</h2>
+
+ {/* Dropdown to select theme */}
+ <div className="settings-option">
+ <p>Select Theme</p>
+ <select
+ value={selectedTheme}
+ onChange={(e) => {
+ const theme = e.target.value;
+ if (theme !== "default") {
+ setSelectedTheme(theme);
+ localStorage.setItem("selectedTheme", theme);
+
+ // Apply the appropriate theme based on selection
+ switch (theme) {
+ case 'IOMARKET':
+ applyIOMarketTheme();
+ break;
+ case 'WHITE':
+ applyWhiteTheme();
+ break;
+ case 'BLACK':
+ applyBlackTheme();
+ break;
+ case 'CUSTOM':
+ // Handle custom theme logic here if necessary
+ break;
+ default:
+ applyIOMarketTheme();
+ break;
+ }
+ }
+ }}
+ >
+ <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>
+ {/* Conditionally render theme settings only if "CUSTOM" is selected */}
+ {selectedTheme === 'CUSTOM' && (
+ <>
+ {/* Font Size */}
+ <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);
+ }}
+ />
+ <span>{fontSize}</span>
+ </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);
- }}
- />
- <span>{fontSize}</span>
- </div>
+ {/* Background Color */}
+ <div className="settings-option">
+ <p>Background Color</p>
+ <input
+ type="color"
+ value={backgroundColor}
+ onChange={(e) => {
+ const newColor = e.target.value;
+ setBackgroundColor(newColor);
+ document.documentElement.style.setProperty('--background-color', newColor);
+ }}
+ />
+ </div>
- <div className="settings-option">
- <p>Background Color</p>
- <input
- type="color"
- value={backgroundColor}
- onChange={(e) => {
- const newColor = e.target.value;
- setBackgroundColor(newColor);
- document.documentElement.style.setProperty('--background-color', newColor);
- }}
- />
- </div>
+ {/* Text Color */}
+ <div className="settings-option">
+ <p>Text Color</p>
+ <input
+ type="color"
+ value={textColor}
+ onChange={(e) => {
+ const newColor = e.target.value;
+ setTextColor(newColor);
+ document.documentElement.style.setProperty('--text-color', newColor);
+ }}
+ />
+ </div>
- <div className="settings-option">
- <p>Text Color</p>
- <input
- type="color"
- value={textColor}
- onChange={(e) => {
- const newColor = e.target.value;
- setTextColor(newColor);
- document.documentElement.style.setProperty('--text-color', newColor);
- }}
- />
- </div>
+ {/* Input Background Color */}
+ <div className="settings-option">
+ <p>Input Background Color</p>
+ <input
+ type="color"
+ value={inputBackgroundColor}
+ onChange={(e) => {
+ const newColor = e.target.value;
+ setInputBackgroundColor(newColor);
+ document.documentElement.style.setProperty('--input-background-color', newColor);
+ }}
+ />
+ </div>
- <div className="settings-option">
- <p>Input Background Color</p>
- <input
- type="color"
- value={inputBackgroundColor}
- onChange={(e) => {
- const newColor = e.target.value;
- setInputBackgroundColor(newColor);
- document.documentElement.style.setProperty('--input-background-color', newColor);
- }}
- />
- </div>
+ {/* Input Button Color */}
+ <div className="settings-option">
+ <p>Input Button Color</p>
+ <input
+ type="color"
+ value={inputButtonColor}
+ onChange={(e) => {
+ const newColor = e.target.value;
+ setInputButtonColor(newColor);
+ document.documentElement.style.setProperty('--input-button-color', newColor);
+ }}
+ />
+ </div>
- <div className="settings-option">
- <p>Input Button Color</p>
- <input
- type="color"
- value={inputButtonColor}
- onChange={(e) => {
- const newColor = e.target.value;
- setInputButtonColor(newColor);
- document.documentElement.style.setProperty('--input-button-color', newColor);
- }}
- />
- </div>
+ {/* Input Button Hover Color */}
+ <div className="settings-option">
+ <p>Input Button Hover Color</p>
+ <input
+ type="color"
+ value={inputButtonHoverColor}
+ onChange={(e) => {
+ const newColor = e.target.value;
+ setInputButtonHoverColor(newColor);
+ document.documentElement.style.setProperty('--input-button-hover-color', newColor);
+ }}
+ />
+ </div>
- <div className="settings-option">
- <p>Input Button Hover Color</p>
- <input
- type="color"
- value={inputButtonHoverColor}
- onChange={(e) => {
- const newColor = e.target.value;
- setInputButtonHoverColor(newColor);
- document.documentElement.style.setProperty('--input-button-hover-color', newColor);
- }}
- />
- </div>
+ {/* User Message Background Color */}
+ <div className="settings-option">
+ <p>User Message Background Color</p>
+ <input
+ type="color"
+ value={userMessageBackgroundColor}
+ onChange={(e) => {
+ const newColor = e.target.value;
+ setUserMessageBackgroundColor(newColor);
+ document.documentElement.style.setProperty('--user-message-background-color', newColor);
+ }}
+ />
+ </div>
- <div className="settings-option">
- <p>User Message Background Color</p>
- <input
- type="color"
- value={userMessageBackgroundColor}
- onChange={(e) => {
- const newColor = e.target.value;
- setUserMessageBackgroundColor(newColor);
- document.documentElement.style.setProperty('--user-message-background-color', newColor);
- }}
- />
- </div>
+ {/* User Message Text Color */}
+ <div className="settings-option">
+ <p>User Message Text Color</p>
+ <input
+ type="color"
+ value={userMessageTextColor}
+ onChange={(e) => {
+ const newColor = e.target.value;
+ setUserMessageTextColor(newColor);
+ document.documentElement.style.setProperty('--user-message-text-color', newColor);
+ }}
+ />
+ </div>
- <div className="settings-option">
- <p>User Message Text Color</p>
- <input
- type="color"
- value={userMessageTextColor}
- onChange={(e) => {
- const newColor = e.target.value;
- setUserMessageTextColor(newColor);
- document.documentElement.style.setProperty('--user-message-text-color', newColor);
- }}
- />
- </div>
+ {/* AI Message Background Color */}
+ <div className="settings-option">
+ <p>AI Message Background Color</p>
+ <input
+ type="color"
+ value={aiMessageBackgroundColor}
+ onChange={(e) => {
+ const newColor = e.target.value;
+ setAiMessageBackgroundColor(newColor);
+ document.documentElement.style.setProperty('--ai-message-background-color', newColor);
+ }}
+ />
+ </div>
- <div className="settings-option">
- <p>AI Message Background Color</p>
- <input
- type="color"
- value={aiMessageBackgroundColor}
- onChange={(e) => {
- const newColor = e.target.value;
- setAiMessageBackgroundColor(newColor);
- document.documentElement.style.setProperty('--ai-message-background-color', newColor);
- }}
- />
- </div>
+ {/* AI Message Text Color */}
+ <div className="settings-option">
+ <p>AI Message Text Color</p>
+ <input
+ type="color"
+ value={aiMessageTextColor}
+ onChange={(e) => {
+ const newColor = e.target.value;
+ setAiMessageTextColor(newColor);
+ document.documentElement.style.setProperty('--ai-message-text-color', newColor);
+ }}
+ />
+ </div>
- <div className="settings-option">
- <p>AI Message Text Color</p>
- <input
- type="color"
- value={aiMessageTextColor}
- onChange={(e) => {
- const newColor = e.target.value;
- setAiMessageTextColor(newColor);
- document.documentElement.style.setProperty('--ai-message-text-color', newColor);
- }}
- />
- </div>
+ {/* Button Background Color */}
+ <div className="settings-option">
+ <p>Button Background Color</p>
+ <input
+ type="color"
+ value={buttonBackgroundColor}
+ onChange={(e) => {
+ const newColor = e.target.value;
+ setButtonBackgroundColor(newColor);
+ document.documentElement.style.setProperty('--button-background-color', newColor);
+ }}
+ />
+ </div>
- <div className="settings-option">
- <p>Button Background Color</p>
- <input
- type="color"
- value={buttonBackgroundColor}
- onChange={(e) => {
- const newColor = e.target.value;
- setButtonBackgroundColor(newColor);
- document.documentElement.style.setProperty('--button-background-color', newColor);
- }}
- />
- </div>
+ {/* Button Hover Background Color */}
+ <div className="settings-option">
+ <p>Button Hover Background Color</p>
+ <input
+ type="color"
+ value={buttonHoverBackgroundColor}
+ onChange={(e) => {
+ const newColor = e.target.value;
+ setButtonHoverBackgroundColor(newColor);
+ document.documentElement.style.setProperty('--button-hover-background-color', newColor);
+ }}
+ />
+ </div>
- <div className="settings-option">
- <p>Button Hover Background Color</p>
- <input
- type="color"
- value={buttonHoverBackgroundColor}
- onChange={(e) => {
- const newColor = e.target.value;
- setButtonHoverBackgroundColor(newColor);
- document.documentElement.style.setProperty('--button-hover-background-color', newColor);
- }}
- />
- </div>
+ {/* Models Background Color */}
+ <div className="settings-option">
+ <p>Models Background Color</p>
+ <input
+ type="color"
+ value={modelsBackgroundColor}
+ onChange={(e) => {
+ const newColor = e.target.value;
+ setModelsBackgroundColor(newColor);
+ document.documentElement.style.setProperty('--models-background-color', newColor);
+ }}
+ />
+ </div>
- <div className="settings-option">
- <p>Models Background Color</p>
- <input
- type="color"
- value={modelsBackgroundColor}
- onChange={(e) => {
- const newColor = e.target.value;
- setModelsBackgroundColor(newColor);
- document.documentElement.style.setProperty('--models-background-color', newColor);
- }}
- />
- </div>
+ {/* History Background Color */}
+ <div className="settings-option">
+ <p>History Background Color</p>
+ <input
+ type="color"
+ value={historyBackgroundColor}
+ onChange={(e) => {
+ const newColor = e.target.value;
+ setHistoryBackgroundColor(newColor);
+ document.documentElement.style.setProperty('--history-background-color', newColor);
+ }}
+ />
+ </div>
- <div className="settings-option">
- <p>History Background Color</p>
- <input
- type="color"
- value={historyBackgroundColor}
- onChange={(e) => {
- const newColor = e.target.value;
- setHistoryBackgroundColor(newColor);
- document.documentElement.style.setProperty('--history-background-color', newColor);
- }}
- />
- </div>
+ {/* Left Panel Background Color */}
+ <div className="settings-option">
+ <p>Left Panel Background Color</p>
+ <input
+ type="color"
+ value={leftPanelBackgroundColor}
+ onChange={(e) => {
+ const newColor = e.target.value;
+ setLeftPanelBackgroundColor(newColor);
+ document.documentElement.style.setProperty('--left-panel-background-color', newColor);
+ }}
+ />
+ </div>
- <div className="settings-option">
- <p>Left Panel Background Color</p>
- <input
- type="color"
- value={leftPanelBackgroundColor}
- onChange={(e) => {
- const newColor = e.target.value;
- setLeftPanelBackgroundColor(newColor);
- document.documentElement.style.setProperty('--left-panel-background-color', newColor);
- }}
- />
- </div>
+ {/* Conversation Background Color */}
+ <div className="settings-option">
+ <p>Conversation Background Color</p>
+ <input
+ type="color"
+ value={conversationBackgroundColor}
+ onChange={(e) => {
+ const newColor = e.target.value;
+ setConversationBackgroundColor(newColor);
+ document.documentElement.style.setProperty('--conversation-background-color', newColor);
+ }}
+ />
+ </div>
- <div className="settings-option">
- <p>Conversation Background Color</p>
- <input
- type="color"
- value={conversationBackgroundColor}
- onChange={(e) => {
- const newColor = e.target.value;
- setConversationBackgroundColor(newColor);
- document.documentElement.style.setProperty('--conversation-background-color', newColor);
- }}
- />
- </div>
+ {/* Pop-up Text Color */}
+ <div className="settings-option">
+ <p>Pop-up Text Color</p>
+ <input
+ type="color"
+ value={popUpTextColor}
+ onChange={(e) => {
+ const newColor = e.target.value;
+ setPopUpTextColor(newColor);
+ document.documentElement.style.setProperty('--pop-up-text', newColor);
+ }}
+ />
+ </div>
- <div className="settings-option">
- <p>Pop-up Text Color</p>
- <input
- type="color"
- value={popUpTextColor}
- onChange={(e) => {
- const newColor = e.target.value;
- setPopUpTextColor(newColor);
- document.documentElement.style.setProperty('--pop-up-text', newColor);
- }}
- />
- </div>
+ {/* Input Border Color */}
+ <div className="settings-option">
+ <p>Input Border Color</p>
+ <input
+ type="color"
+ value={inputBorderColor}
+ onChange={(e) => {
+ const newColor = e.target.value;
+ setInputBorderColor(newColor);
+ document.documentElement.style.setProperty('--input-border-color', newColor);
+ }}
+ />
+ </div>
- <div className="settings-option">
- <p>Burger Menu Color</p>
- <input
- type="color"
- value={burgerMenu}
- onChange={(e) => {
- const newColor = e.target.value;
- setBurgerMenu(newColor);
- document.documentElement.style.setProperty('--burger-menu-background-color', newColor);
- }}
- />
- </div>
+ {/* Font Family */}
+ <div className="settings-option">
+ <p>Font Family</p>
+ <select
+ value={fontFamily}
+ onChange={(e) => {
+ const newFont = e.target.value;
+ setFontFamily(newFont);
+ document.documentElement.style.setProperty('--font-family', newFont);
+ }}
+ >
+ <option value="'Poppins', sans-serif">Poppins</option>
+ <option value="'Inconsolata', monospace">Inconsolata</option>
+ <option value="'Merriweather', serif">Merriweather</option>
+ <option value="'Noto Sans', sans-serif">Noto Sans</option>
+ <option value="'Noto Serif', serif">Noto Serif</option>
+ <option value="'Playfair Display', serif">Playfair Display</option>
+ <option value="'Roboto', sans-serif">Roboto</option>
+ <option value="'Ubuntu', sans-serif">Ubuntu</option>
+ <option value="'Bangers', cursive">Bangers</option>
+ <option value="'Caveat', cursive">Caveat</option>
+ <option value="'Frederika the Great', cursive">Frederika the Great</option>
+ <option value="'Rock Salt', cursive">Rock Salt</option>
+ <option value="'Sofadi One', sans-serif">Sofadi One</option>
+ <option value="'Zilla Slab Highlight', serif">Zilla Slab Highlight</option>
+ </select>
+ </div>
- <div className="settings-option">
- <p>Input Border Color</p>
- <input
- type="color"
- value={inputBorderColor}
- onChange={(e) => {
- const newColor = e.target.value;
- setInputBorderColor(newColor);
- document.documentElement.style.setProperty('--input-border-color', newColor);
- }}
- />
- </div>
+ {/* FAQ Background Color */}
+ <div className="settings-option">
+ <p>FAQ Background Color</p>
+ <input
+ type="color"
+ value={faqBackgroundColor}
+ onChange={(e) => {
+ const newColor = e.target.value;
+ setFaqBackgroundColor(newColor);
+ document.documentElement.style.setProperty('--faq-background-color', newColor);
+ }}
+ />
+ </div>
- <div className="settings-option">
- <p>Font Family</p>
- <select
- value={fontFamily}
- onChange={(e) => {
- const newFont = e.target.value;
- setFontFamily(newFont);
- document.documentElement.style.setProperty('--font-family', newFont);
- }}
- >
- <option value="'Poppins', sans-serif">Poppins</option>
- <option value="'Inconsolata', monospace">Inconsolata</option>
- <option value="'Merriweather', serif">Merriweather</option>
- <option value="'Noto Sans', sans-serif">Noto Sans</option>
- <option value="'Noto Serif', serif">Noto Serif</option>
- <option value="'Playfair Display', serif">Playfair Display</option>
- <option value="'Roboto', sans-serif">Roboto</option>
- <option value="'Ubuntu', sans-serif">Ubuntu</option>
- <option value="'Bangers', cursive">Bangers</option>
- <option value="'Caveat', cursive">Caveat</option>
- <option value="'Frederika the Great', cursive">Frederika the Great</option>
- <option value="'Rock Salt', cursive">Rock Salt</option>
- <option value="'Sofadi One', sans-serif">Sofadi One</option>
- <option value="'Zilla Slab Highlight', serif">Zilla Slab Highlight</option>
- </select>
- </div>
+ {/* FAQ Heading Color */}
+ <div className="settings-option">
+ <p>FAQ Heading Color</p>
+ <input
+ type="color"
+ value={faqHeadingColor}
+ onChange={(e) => {
+ const newColor = e.target.value;
+ setFaqHeadingColor(newColor);
+ document.documentElement.style.setProperty('--faq-heading-color', newColor);
+ }}
+ />
+ </div>
- </>
- )}
+ {/* FAQ Item Background Color */}
+ <div className="settings-option">
+ <p>FAQ Item Background Color</p>
+ <input
+ type="color"
+ value={faqItemBackgroundColor}
+ onChange={(e) => {
+ const newColor = e.target.value;
+ setFaqItemBackgroundColor(newColor);
+ document.documentElement.style.setProperty('--faq-item-background-color', newColor);
+ }}
+ />
+ </div>
+
+ {/* FAQ Item Heading Color */}
+ <div className="settings-option">
+ <p>FAQ Item Heading Color</p>
+ <input
+ type="color"
+ value={faqItemHeadingColor}
+ onChange={(e) => {
+ const newColor = e.target.value;
+ setFaqItemHeadingColor(newColor);
+ document.documentElement.style.setProperty('--faq-item-heading-color', newColor);
+ }}
+ />
+ </div>
+
+ {/* FAQ Item Text Color */}
+ <div className="settings-option">
+ <p>FAQ Item Text Color</p>
+ <input
+ type="color"
+ value={faqItemTextColor}
+ onChange={(e) => {
+ const newColor = e.target.value;
+ setFaqItemTextColor(newColor);
+ document.documentElement.style.setProperty('--faq-item-text-color', newColor);
+ }}
+ />
+ </div>
+
+ {/* FAQ Item Hover Background Color */}
+ <div className="settings-option">
+ <p>FAQ Item Hover Background Color</p>
+ <input
+ type="color"
+ value={faqItemHoverBackgroundColor}
+ onChange={(e) => {
+ const newColor = e.target.value;
+ setFaqItemHoverBackgroundColor(newColor);
+ document.documentElement.style.setProperty('--faq-item-hover-background-color', newColor);
+ }}
+ />
+ </div>
+
+ {/* Popup Background Color */}
+ <div className="settings-option">
+ <p>Popup Background Color</p>
+ <input
+ type="color"
+ value={popupBackgroundColor}
+ onChange={(e) => {
+ const newColor = e.target.value;
+ setPopupBackgroundColor(newColor);
+ document.documentElement.style.setProperty('--popup-background-color', newColor);
+ }}
+ />
+ </div>
+
+ {/* Overlay Text Color */}
+ <div className="settings-option">
+ <p>Overlay Text Color</p>
+ <input
+ type="color"
+ value={overlayTextColor}
+ onChange={(e) => {
+ const newColor = e.target.value;
+ setOverlayTextColor(newColor);
+ document.documentElement.style.setProperty('--overlay-text-color', newColor);
+ }}
+ />
+ </div>
+ </>
+ )}
</div>
);
@@ -1028,12 +1233,22 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
disableChatHistory,
disableAIMemory,
openSourceMode,
-
+
// API Keys
- mistral,
- openai,
- anthropic,
- google
+ mistral,
+ openai,
+ anthropic,
+ google,
+
+ // Additional theme settings if needed
+ faqBackgroundColor,
+ faqHeadingColor,
+ faqItemBackgroundColor,
+ faqItemHeadingColor,
+ faqItemTextColor,
+ faqItemHoverBackgroundColor,
+ popupBackgroundColor,
+ overlayTextColor,
};
@@ -1059,7 +1274,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
<button className="apply" onClick={() => {
applySettings;
getAllLocalStorageItems();
- closeSettings(); // This is invoked when the button is clicked
+ closeSettings();
}}>
Apply
</button>
diff --git a/app/components/theme.ts b/app/components/theme.ts
index f9367bd..bfd3d9a 100644
--- a/app/components/theme.ts
+++ b/app/components/theme.ts
@@ -92,5 +92,65 @@ export const applyBlackTheme = () => {
document.documentElement.style.setProperty('--input-border-color', '#3c3c3c'); // Input border color
document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Font family
document.documentElement.style.setProperty('--font-size', '16px'); // Font size
- document.documentElement.style.setProperty('--burger-menu-background-color', '#79832e'); // Font size
+ document.documentElement.style.setProperty('--burger-menu-background-color', '# 79832e'); // Font size
};
+
+export const applyCustomTheme = () => {
+ // fix that later ouh fuck what have I done
+ /*
+ const themeVariables = {
+ backgroundColor: localStorage.getItem('backgroundColor'),
+ textColor: localStorage.getItem('textColor'),
+ inputBackgroundColor: localStorage.getItem('inputBackgroundColor'),
+ inputButtonColor: localStorage.getItem('inputButtonColor'),
+ inputButtonHoverColor: localStorage.getItem('inputButtonHoverColor'),
+ userMessageBackgroundColor: localStorage.getItem('userMessageBackgroundColor'),
+ userMessageTextColor: localStorage.getItem('userMessageTextColor'),
+ aiMessageBackgroundColor: localStorage.getItem('aiMessageBackgroundColor'),
+ aiMessageTextColor: localStorage.getItem('aiMessageTextColor'),
+ buttonBackgroundColor: localStorage.getItem('buttonBackgroundColor'),
+ buttonHoverBackgroundColor: localStorage.getItem('buttonHoverBackgroundColor'),
+ modelsBackgroundColor: localStorage.getItem('modelsBackgroundColor'),
+ historyBackgroundColor: localStorage.getItem('historyBackgroundColor'),
+ leftPanelBackgroundColor: localStorage.getItem('leftPanelBackgroundColor'),
+ conversationBackgroundColor: localStorage.getItem('conversationBackgroundColor'),
+ popUpTextColor: localStorage.getItem('popUpTextColor'),
+ inputBorderColor: localStorage.getItem('inputBorderColor'),
+ fontFamily: localStorage.getItem('fontFamily'),
+ fontSize: localStorage.getItem('fontSize'),
+ };
+
+ document.documentElement.style.setProperty('--header-background-color', themeVariables[header]); // Dark header background
+ document.documentElement.style.setProperty('--header-text-color', '#ffffff'); // Header text color
+ document.documentElement.style.setProperty('--background-color', '#121212'); // Main background color
+ document.documentElement.style.setProperty('--text-color', '#e0e0e0'); // Main text color
+ document.documentElement.style.setProperty('--input-background-color', '#1e1e1e'); // Input fields background
+ document.documentElement.style.setProperty('--input-button-color', '#3c3c3c'); // Button color
+ document.documentElement.style.setProperty('--input-button-hover-color', '#5a5a5a'); // Button hover color
+ document.documentElement.style.setProperty('--user-message-background-color', '#000000'); // User messages background
+ document.documentElement.style.setProperty('--user-message-text-color', '#ffffff'); // User messages text color
+ document.documentElement.style.setProperty('--ai-message-background-color', '#202020'); // AI messages background
+ document.documentElement.style.setProperty('--ai-message-text-color', '#ffffff'); // AI messages text color
+ document.documentElement.style.setProperty('--button-background-color', '#3c3c3c'); // Button background color
+ document.documentElement.style.setProperty('--button-hover-background-color', '#5a5a5a'); // Button hover color
+ document.documentElement.style.setProperty('--models-background-color', '#1e1e1e'); // Models section background
+ document.documentElement.style.setProperty('--history-background-color', '#1a1a1a'); // History background
+ document.documentElement.style.setProperty('--left-panel-background-color', '#1e1e1e'); // Left panel background
+ document.documentElement.style.setProperty('--conversation-background-color', '#2c2c2c'); // Conversation container background
+ document.documentElement.style.setProperty('--doc-background-color', '#1e1e1e'); // Documents background
+ document.documentElement.style.setProperty('--faq-background-color', '#2c2c2c'); // FAQ section background
+ document.documentElement.style.setProperty('--faq-heading-color', '#ffffff'); // FAQ heading color
+ document.documentElement.style.setProperty('--faq-item-background-color', '#3c3c3c'); // FAQ items background
+ document.documentElement.style.setProperty('--faq-item-heading-color', '#ffffff'); // FAQ items heading color
+ document.documentElement.style.setProperty('--faq-item-text-color', '#e0e0e0'); // FAQ items text color
+ document.documentElement.style.setProperty('--faq-item-hover-background-color', '#5a5a5a'); // FAQ items hover background
+ document.documentElement.style.setProperty('--pop-up-text', '#ffffff'); // Pop-up text color
+ document.documentElement.style.setProperty('--input-border-color', '#3c3c3c'); // Input border color
+ document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Font family
+ document.documentElement.style.setProperty('--font-size', '16px'); // Font size
+ document.documentElement.style.setProperty('--burger-menu-background-color', '# 79832e'); // Font size
+
+
+ // Apply those settings
+ */
+}
diff --git a/app/page.tsx b/app/page.tsx
index 9afccc2..6bddf87 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -7,6 +7,8 @@ import Documentation from './components/Documentation'; // Ensure the import pat
import History from './components/History';
import Models from './components/Models';
import Credits from './components/Credits';
+import Settings from './components/Settings';
+import { applyIOMarketTheme, applyWhiteTheme, applyBlackTheme } from './components/theme'
import Head from 'next/head';
import './styles/master.css';
@@ -26,6 +28,33 @@ const LandingPage: React.FC = () => {
}
};
+ const [selectedTheme, setSelectedTheme] = useState<string>('');
+
+ useEffect(() => {
+ const savedTheme = localStorage.getItem('selectedTheme');
+ if (savedTheme) {
+ setSelectedTheme(savedTheme);
+ // Apply the saved theme on initial load
+ switch (savedTheme) {
+ case 'IOMARKET':
+ applyIOMarketTheme();
+ break;
+ case 'WHITE':
+ applyWhiteTheme();
+ break;
+ case 'BLACK':
+ applyBlackTheme();
+ break;
+ case 'CUSTOM':
+
+ break;
+ default:
+ applyIOMarketTheme();
+ break;
+ }
+ }
+ }, []); // Runs only once when the component mounts
+
return (
<>
<Header
From 4590593d735aee4ab292eed5e4c2012885193652 Mon Sep 17 00:00:00 2001
From: YasinOnm08 <onmazyasin4@gmail.com>
Date: Mon, 30 Sep 2024 16:11:01 +0200
Subject: [PATCH 3/4] css progress done
---
app/styles/container.css | 9 +++++----
app/styles/credit.css | 10 +++++-----
app/styles/doc.css | 12 ++++++------
app/styles/global.css | 2 +-
app/styles/header.css | 6 ++----
app/styles/history.css | 6 ++++--
app/styles/input.css | 13 ++++++++-----
app/styles/models.css | 10 ++++++++--
app/styles/output.css | 3 ++-
app/styles/reset.css | 1 +
app/styles/responsive.css | 8 ++++----
app/styles/user-ai-messages.css | 2 ++
12 files changed, 48 insertions(+), 34 deletions(-)
diff --git a/app/styles/container.css b/app/styles/container.css
index f6d9c07..40c97cc 100644
--- a/app/styles/container.css
+++ b/app/styles/container.css
@@ -2,8 +2,8 @@
.container{
display: flex;
width: 100vw;
- height: 100vh;
- padding-top: 12vh;
+ height: 90dvh;
+ padding-top: 1dvh;
}
.left-panel {
@@ -19,6 +19,7 @@
opacity: 0; /* Fade out when hidden */
width: 0; /* Collapse width to 0 */
visibility: hidden; /* Hide visibility while collapsing */
+
}
.conversation-container {
@@ -26,10 +27,10 @@
transition: margin-left 0.3s ease; /* Smooth margin adjustment */
background-color: var(--conversation-background-color); /* Use variable for background color */
border-radius: 1em 0 0 0;
- height: 100%;
}
+
+
.conversation-container.collapsed {
margin-left: 1vw; /* Space for the left panel */
- bottom: 0;
}
diff --git a/app/styles/credit.css b/app/styles/credit.css
index fb28dc3..1d6b206 100644
--- a/app/styles/credit.css
+++ b/app/styles/credit.css
@@ -5,8 +5,8 @@
.credits-section {
max-width: 900px;
- height: 80vh;
- margin: 0 auto;
+ height: 80dvh;
+ margin: auto;
background: var(--doc-background-color); /* Use variable for background */
padding: 2rem;
border-radius: 8px;
@@ -15,20 +15,20 @@
}
.title {
- font-size: 2rem;
+ font-size: calc(var(--font-size)*2);
color: var(--doc-title-color); /* Use variable for title color */
margin-bottom: 1.5rem;
}
.subtitle {
- font-size: 1.5rem;
+ font-size: calc(var(--font-size)*1.5);
color: var(--doc-subtitle-color); /* Use variable for subtitle color */
margin-top: 2rem;
margin-bottom: 1rem;
}
.paragraph {
- font-size: 1rem;
+ font-size: calc(var(--font-size));
color: var(--doc-paragraph-color); /* Use variable for paragraph color */
margin-bottom: 1.5rem;
line-height: 1.6;
diff --git a/app/styles/doc.css b/app/styles/doc.css
index eb06945..5b2988d 100644
--- a/app/styles/doc.css
+++ b/app/styles/doc.css
@@ -7,8 +7,8 @@
.documentation-section {
max-width: 900px;
- height: 80vh;
- margin: 0 auto;
+ height: 80dvh;
+ margin: auto;
background: var(--doc-background-color); /* Use variable for background */
padding: 2rem;
border-radius: 8px;
@@ -17,27 +17,27 @@
}
.title {
- font-size: 2rem;
+ font-size: calc(var(--font-size)*2);
color: var(--doc-title-color); /* Use variable for title color */
margin-bottom: 1.5rem;
}
.subtitle {
- font-size: 1.5rem;
+ font-size: calc(var(--font-size)*1.5);
color: var(--doc-subtitle-color); /* Use variable for subtitle color */
margin-top: 2rem;
margin-bottom: 1rem;
}
.subsection-title {
- font-size: 1.25rem;
+ font-size: calc(var(--font-size)*1.25);
color: var(--doc-subsection-title-color); /* Use variable for subsection title color */
margin-top: 1.5rem;
margin-bottom: 0.75rem;
}
.paragraph {
- font-size: 1rem;
+ font-size: calc(var(--font-size));
color: var(--doc-paragraph-color); /* Use variable for paragraph color */
margin-bottom: 1.5rem;
line-height: 1.6;
diff --git a/app/styles/global.css b/app/styles/global.css
index cf792c3..0acb073 100644
--- a/app/styles/global.css
+++ b/app/styles/global.css
@@ -1,5 +1,5 @@
body {
- height: 100vh;
+ height: 100dvh;
overflow: hidden;
position: relative;
}
diff --git a/app/styles/header.css b/app/styles/header.css
index 282beaa..a540ad3 100644
--- a/app/styles/header.css
+++ b/app/styles/header.css
@@ -1,10 +1,8 @@
header{
- position: absolute;
+ position: relative;
padding: 0 20px;
- top: 0;
- left: 0;
width: 100%;
- height: 10vh;
+ height: 10dvh;
display: flex;
align-items: center;
justify-content: center;
diff --git a/app/styles/history.css b/app/styles/history.css
index 7537d3a..8133955 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: 45%;
+ height: 40dvh;
overflow: hidden;
background-color: var(--history-background-color);
padding: 1em;
@@ -39,5 +39,7 @@
}
.history-models{
- height: 100%;
+ position: relative;
+ height: 90dvh;
+ /* padding-bottom: 3dvh; */
}
diff --git a/app/styles/input.css b/app/styles/input.css
index af821e8..3233b14 100644
--- a/app/styles/input.css
+++ b/app/styles/input.css
@@ -1,7 +1,5 @@
/* Input Section */
.input {
- grid-column: 2/3;
- grid-row: 4/5;
border-radius: 8px;
background-color: var(--input-background-color);
padding: 1em;
@@ -13,7 +11,12 @@
justify-content: space-between;
align-items: center;
height: auto;
- height: 10vh;
+ height: 10dvh;
+ position: absolute;
+ left: 0.25vw;
+ bottom: 3dvh;
+ right: 0.25vw;
+ box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.5);
}
.input input {
@@ -44,8 +47,8 @@
border-radius: 8px;
font-size: 1.5em;
cursor: pointer;
- height: 50px;
- width: 75px;
+ height: 8dvh;
+ width: 8vw;
display: flex;
justify-content: center;
align-items: center;
diff --git a/app/styles/models.css b/app/styles/models.css
index 7369e40..cb00319 100644
--- a/app/styles/models.css
+++ b/app/styles/models.css
@@ -1,13 +1,18 @@
.model-background {
+ position: absolute;
+ left: 1em;
+ bottom: 4dvh;
+ right: 0;
grid-column: 1/2;
grid-row: 1/2;
- height: 45%;
+ padding-bottom: 1px;
+ overflow: scroll;
overflow: hidden;
background-color: var(--history-background-color);
padding: 1em;
- margin: 0 1em;
margin-right: 0;
border-radius: 1em;
+ height: 45dvh;
}
.models {
@@ -69,6 +74,7 @@
transition: opacity 0.5s ease;
pointer-events: none;
opacity: 0;
+ border-radius: 5%;
}
.overlay img {
diff --git a/app/styles/output.css b/app/styles/output.css
index 19507cd..0f9ed42 100644
--- a/app/styles/output.css
+++ b/app/styles/output.css
@@ -4,13 +4,14 @@
grid-row: 1 / 4;
background-color: var(--output-background-color);
margin: 1em;
+ padding-bottom: 14dvh;
display: flex;
flex-direction: column;
justify-content: flex-start;
font-size: 1em;
overflow-y: auto;
width: calc(100% - 2em); /* Corrected calculation for width */
- height: 70vh;
+ height: 90dvh;
}
#conversation {
diff --git a/app/styles/reset.css b/app/styles/reset.css
index a77192e..6df5af5 100644
--- a/app/styles/reset.css
+++ b/app/styles/reset.css
@@ -3,4 +3,5 @@
padding: 0;
box-sizing: border-box;
scroll-behavior: smooth;
+ transition: all 0.2s ease-in-out;
}
diff --git a/app/styles/responsive.css b/app/styles/responsive.css
index 422725c..57ec871 100644
--- a/app/styles/responsive.css
+++ b/app/styles/responsive.css
@@ -8,7 +8,6 @@
/* Header styles */
header {
- position: fixed;
top: 0;
left: 0;
margin-top: 0px;
@@ -20,11 +19,10 @@
.container {
display: flex;
flex-direction: column;
- align-items: center;
width: 100vw;
- overflow: scroll;
+ overflow: hidden;
margin: 0;
- padding: 7em 0 0 0 ;
+ padding: 1dvh 0 0 0 ;
}
/* Left panel styles */
@@ -58,6 +56,7 @@
min-width: 100%;
margin-left: 0;
border-radius: none;
+ height: 10vh;
}
/* Grid styles */
@@ -79,6 +78,7 @@
margin: 0 auto;
align-items: center;
width: 90%;
+ bottom: 10dvh
}
.input input {
diff --git a/app/styles/user-ai-messages.css b/app/styles/user-ai-messages.css
index c79b71c..3dd4461 100644
--- a/app/styles/user-ai-messages.css
+++ b/app/styles/user-ai-messages.css
@@ -16,6 +16,7 @@
border-bottom-right-radius: 0;
margin-left: auto;
text-align: left;
+ margin-right: 1.5vw;
}
.ai-message {
@@ -27,6 +28,7 @@
}
.ai-container{
+ position: relative;
height: min-content;
bottom: 0;
width: 100%;
From f044028b479edd18632257a567444dddb1de9825 Mon Sep 17 00:00:00 2001
From: sageTheDM <info@photofuel.tech>
Date: Mon, 30 Sep 2024 16:12:04 +0200
Subject: [PATCH 4/4] In the name of the lord i once have done it again... it
finally works yay
---
app/components/theme.ts | 73 +++++++++++++++++++++--------------------
app/page.tsx | 4 +--
2 files changed, 39 insertions(+), 38 deletions(-)
diff --git a/app/components/theme.ts b/app/components/theme.ts
index bfd3d9a..b4f64e2 100644
--- a/app/components/theme.ts
+++ b/app/components/theme.ts
@@ -96,8 +96,7 @@ export const applyBlackTheme = () => {
};
export const applyCustomTheme = () => {
- // fix that later ouh fuck what have I done
- /*
+ // Theme variables
const themeVariables = {
backgroundColor: localStorage.getItem('backgroundColor'),
textColor: localStorage.getItem('textColor'),
@@ -118,39 +117,41 @@ export const applyCustomTheme = () => {
inputBorderColor: localStorage.getItem('inputBorderColor'),
fontFamily: localStorage.getItem('fontFamily'),
fontSize: localStorage.getItem('fontSize'),
- };
+ burgerMenu: localStorage.getItem('burgerMenu'),
+ faqBackgroundColor: localStorage.getItem('faqBackgroundColor'),
+ faqHeadingColor: localStorage.getItem('faqHeadingColor'),
+ faqItemBackgroundColor: localStorage.getItem('faqItemBackgroundColor'),
+ faqItemHeadingColor: localStorage.getItem('faqItemHeadingColor'),
+ faqItemTextColor: localStorage.getItem('faqItemTextColor'),
+ faqItemHoverBackgroundColor: localStorage.getItem('faqItemHoverBackgroundColor'),
+ popupBackgroundColor: localStorage.getItem('popupBackgroundColor'),
+ overlayTextColor: localStorage.getItem('overlayTextColor'),
+ };
+
+ document.documentElement.style.setProperty('--background-color', themeVariables.backgroundColor || '#121212'); // Main background color
+ document.documentElement.style.setProperty('--text-color', themeVariables.textColor || '#e0e0e0'); // Main text color
+ document.documentElement.style.setProperty('--input-background-color', themeVariables.inputBackgroundColor || '#1e1e1e'); // Input fields background
+ document.documentElement.style.setProperty('--input-button-color', themeVariables.inputButtonColor || '#3c3c3c'); // Button color
+ document.documentElement.style.setProperty('--input-button-hover-color', themeVariables.inputButtonHoverColor || '#5a5a5a'); // Button hover color
+ document.documentElement.style.setProperty('--user-message-background-color', themeVariables.userMessageBackgroundColor || '#000000'); // User messages background
+ document.documentElement.style.setProperty('--user-message-text-color', themeVariables.userMessageTextColor || '#ffffff'); // User messages text color
+ document.documentElement.style.setProperty('--ai-message-background-color', themeVariables.aiMessageBackgroundColor || '#202020'); // AI messages background
+ document.documentElement.style.setProperty('--ai-message-text-color', themeVariables.aiMessageTextColor || '#ffffff'); // AI messages text color
+ document.documentElement.style.setProperty('--button-background-color', themeVariables.buttonBackgroundColor || '#3c3c3c'); // Button background color
+ document.documentElement.style.setProperty('--button-hover-background-color', themeVariables.buttonHoverBackgroundColor || '#5a5a5a'); // Button hover color
+ document.documentElement.style.setProperty('--models-background-color', themeVariables.modelsBackgroundColor || '#1e1e1e'); // Models section background
+ document.documentElement.style.setProperty('--history-background-color', themeVariables.historyBackgroundColor || '#1a1a1a'); // History background
+ document.documentElement.style.setProperty('--left-panel-background-color', themeVariables.leftPanelBackgroundColor || '#1e1e1e'); // Left panel background
+ document.documentElement.style.setProperty('--conversation-background-color', themeVariables.conversationBackgroundColor || '#2c2c2c'); // Conversation container background
+ document.documentElement.style.setProperty('--faq-background-color', themeVariables.faqBackgroundColor || '#2c2c2c'); // FAQ section background
+ document.documentElement.style.setProperty('--faq-heading-color', themeVariables.faqHeadingColor || '#ffffff'); // FAQ heading color
+ document.documentElement.style.setProperty('--faq-item-background-color', themeVariables.faqItemBackgroundColor || '#3c3c3c'); // FAQ items background
+ document.documentElement.style.setProperty('--faq-item-heading-color', themeVariables.faqItemHeadingColor || '#ffffff'); // FAQ items heading color
+ document.documentElement.style.setProperty('--faq-item-text-color', themeVariables.faqItemTextColor || '#e0e0e0'); // FAQ items text color
+ document.documentElement.style.setProperty('--faq-item-hover-background-color', themeVariables.faqItemHoverBackgroundColor || '#5a5a5a'); // FAQ items hover background
+ document.documentElement.style.setProperty('--input-border-color', themeVariables.inputBorderColor || '#3c3c3c'); // Input border color
+ document.documentElement.style.setProperty('--font-family', themeVariables.fontFamily || "'Poppins', 'sans-serif'"); // Font family
+ document.documentElement.style.setProperty('--font-size', themeVariables.fontSize || '16px'); // Font size
+ document.documentElement.style.setProperty('--burger-menu-background-color', themeVariables.burgerMenu || '#79832e'); // Burger menu background color
- document.documentElement.style.setProperty('--header-background-color', themeVariables[header]); // Dark header background
- document.documentElement.style.setProperty('--header-text-color', '#ffffff'); // Header text color
- document.documentElement.style.setProperty('--background-color', '#121212'); // Main background color
- document.documentElement.style.setProperty('--text-color', '#e0e0e0'); // Main text color
- document.documentElement.style.setProperty('--input-background-color', '#1e1e1e'); // Input fields background
- document.documentElement.style.setProperty('--input-button-color', '#3c3c3c'); // Button color
- document.documentElement.style.setProperty('--input-button-hover-color', '#5a5a5a'); // Button hover color
- document.documentElement.style.setProperty('--user-message-background-color', '#000000'); // User messages background
- document.documentElement.style.setProperty('--user-message-text-color', '#ffffff'); // User messages text color
- document.documentElement.style.setProperty('--ai-message-background-color', '#202020'); // AI messages background
- document.documentElement.style.setProperty('--ai-message-text-color', '#ffffff'); // AI messages text color
- document.documentElement.style.setProperty('--button-background-color', '#3c3c3c'); // Button background color
- document.documentElement.style.setProperty('--button-hover-background-color', '#5a5a5a'); // Button hover color
- document.documentElement.style.setProperty('--models-background-color', '#1e1e1e'); // Models section background
- document.documentElement.style.setProperty('--history-background-color', '#1a1a1a'); // History background
- document.documentElement.style.setProperty('--left-panel-background-color', '#1e1e1e'); // Left panel background
- document.documentElement.style.setProperty('--conversation-background-color', '#2c2c2c'); // Conversation container background
- document.documentElement.style.setProperty('--doc-background-color', '#1e1e1e'); // Documents background
- document.documentElement.style.setProperty('--faq-background-color', '#2c2c2c'); // FAQ section background
- document.documentElement.style.setProperty('--faq-heading-color', '#ffffff'); // FAQ heading color
- document.documentElement.style.setProperty('--faq-item-background-color', '#3c3c3c'); // FAQ items background
- document.documentElement.style.setProperty('--faq-item-heading-color', '#ffffff'); // FAQ items heading color
- document.documentElement.style.setProperty('--faq-item-text-color', '#e0e0e0'); // FAQ items text color
- document.documentElement.style.setProperty('--faq-item-hover-background-color', '#5a5a5a'); // FAQ items hover background
- document.documentElement.style.setProperty('--pop-up-text', '#ffffff'); // Pop-up text color
- document.documentElement.style.setProperty('--input-border-color', '#3c3c3c'); // Input border color
- document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'"); // Font family
- document.documentElement.style.setProperty('--font-size', '16px'); // Font size
- document.documentElement.style.setProperty('--burger-menu-background-color', '# 79832e'); // Font size
-
-
- // Apply those settings
- */
}
diff --git a/app/page.tsx b/app/page.tsx
index 6bddf87..b2e6c90 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -8,7 +8,7 @@ import History from './components/History';
import Models from './components/Models';
import Credits from './components/Credits';
import Settings from './components/Settings';
-import { applyIOMarketTheme, applyWhiteTheme, applyBlackTheme } from './components/theme'
+import { applyIOMarketTheme, applyWhiteTheme, applyBlackTheme, applyCustomTheme } from './components/theme'
import Head from 'next/head';
import './styles/master.css';
@@ -46,7 +46,7 @@ const LandingPage: React.FC = () => {
applyBlackTheme();
break;
case 'CUSTOM':
-
+ applyCustomTheme();
break;
default:
applyIOMarketTheme();