Setting changes (#85)

Co-authored-by: Patrick <patrick_pluto@noreply.localhost>
Reviewed-on: https://interstellardevelopment.org/code/code/React-Group/interstellar_ai/pulls/85
Co-authored-by: sageTheDm <info@photofuel.tech>
Co-committed-by: sageTheDm <info@photofuel.tech>

app/components/settings/DropDownTheme.tsx

@@ -10,6 +10,7 @@ const ThemeDropdown: React.FC<{
       { value: 'IOMARKET', label: 'IOMARKET' },
       { value: 'WHITE', label: 'WHITE' },
       { value: 'BLACK', label: 'BLACK' },
+      { value: 'BASIC-CUSTOM', label: 'BASIC-CUSTOM' },
       { value: 'CUSTOM', label: 'CUSTOM' },
     ];
 
@@ -23,7 +24,6 @@ const ThemeDropdown: React.FC<{
             if (theme !== 'default') {
               setSelectedTheme(theme);
               localStorage.setItem('selectedTheme', theme); 
-            applyTheme(theme); // Ensure you define applyTheme
             }
           }}
         >

app/components/settings/Settings.tsx

@@ -92,6 +92,7 @@ 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 [burgerMenuBackgroundColor, setBurgerMenuBackgroundColor] = 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());
@@ -100,7 +101,16 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
   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());
+  const [closeButtonColor, setCloseButtonColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--close-button-color').trim());
+  const [closeButtonHoverColor, setCloseButtonHoverColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--close-button-hover-color').trim());
+  const [applyButtonColor, setApplyButtonColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--apply-button-color').trim());
+  const [applyButtonHoverColor, setApplyButtonHoverColor] = useState(() => getComputedStyle(document.documentElement).getPropertyValue('--apply-button-hover-color').trim());
   
+  const [primaryColor, setPrimaryColor] = useState(localStorage.getItem("primaryColor") || "#fefefe");
+  const [secondaryColor, setSecondaryColor] = useState(localStorage.getItem("secondaryColor") || "#fefefe");
+  const [accentColor, setAccentColor] = useState(localStorage.getItem("accentColor") || "#fefefe");
+  const [basicBackgroundColor, setBasicBackgroundColor] = useState(localStorage.getItem("basicBackgroundColor") || "#fefefe");
+  const [basicTextColor, setBasicTextColor] = useState(localStorage.getItem("basicTextColor") || "#fefefe"); 
 
   // Theme selection
   const [selectedTheme, setSelectedTheme] = useState<string>('');
@@ -161,6 +171,11 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
         popupBackgroundColor,
         overlayTextColor,
       },
+      primaryColor,
+      secondaryColor,
+      accentColor,
+      basicBackgroundColor,
+      basicTextColor
     },
     apiKeys: {
       mistral,
@@ -200,8 +215,14 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
     { name: "FAQ Item Hover Background Color", value: faqItemHoverBackgroundColor, setValue: setFaqItemHoverBackgroundColor, cssVariable: "--faq-item-hover-background-color" },
     { name: "Popup Background Color", value: popupBackgroundColor, setValue: setPopupBackgroundColor, cssVariable: "--popup-background-color" },
     { name: "Overlay Text Color", value: overlayTextColor, setValue: setOverlayTextColor, cssVariable: "--overlay-text-color" },
+    { name: "Close Button Color", value: closeButtonColor, setValue: setCloseButtonColor, cssVariable: "--close-button-color" },
+    { name: "Close Button Hover Color", value: closeButtonHoverColor, setValue: setCloseButtonHoverColor, cssVariable: "--close-button-hover-color" },
+    { name: "Apply Button Color", value: applyButtonColor, setValue: setApplyButtonColor, cssVariable: "--apply-button-color" },
+    { name: "Apply Button Hover Color", value: applyButtonHoverColor, setValue: setApplyButtonHoverColor, cssVariable: "--apply-button-hover-color" },
+    { name: "Burger Menu Background Color", value: burgerMenuBackgroundColor, setValue: setBurgerMenuBackgroundColor, cssVariable: "--burger-menu-background-color" },
 ];
 
+
   const timeZoneOptions = [
     { value: 'GMT', label: 'GMT' },
     { value: 'EST', label: 'EST' },
@@ -287,7 +308,7 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
     const savedTheme = localStorage.getItem('selectedTheme');
     if (savedTheme) {
       setSelectedTheme(savedTheme);
-      applyTheme(savedTheme);
+      applyTheme(savedTheme, primaryColor, secondaryColor, accentColor, basicBackgroundColor, basicTextColor);
     }
   }, []); // Runs only once when the component mounts
 
@@ -463,9 +484,47 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
                   setSelectedTheme={setSelectedTheme}
                 />
           
+                {selectedTheme === 'BASIC-CUSTOM' && (
+                  <>
+                    <h3>Basic Colors</h3>
+                    {/* Basic Color Inputs using ColorSetting Component */}
+                    <ColorSetting
+                      name="Primary Color"
+                      value={primaryColor}
+                      setValue={setPrimaryColor}
+                      cssVariable=""
+                    />
+                    <ColorSetting
+                      name="Secondary Color"
+                      value={secondaryColor}
+                      setValue={setSecondaryColor}
+                      cssVariable=""
+                    />
+                    <ColorSetting
+                      name="Accent Color"
+                      value={accentColor}
+                      setValue={setAccentColor}
+                      cssVariable=""
+                    />
+                    <ColorSetting
+                      name="Background Color"
+                      value={basicBackgroundColor}
+                      setValue={setBasicBackgroundColor}
+                      cssVariable=""
+                    />
+                    <ColorSetting
+                      name="Text Color"
+                      value={basicTextColor}
+                      setValue={setBasicTextColor}
+                      cssVariable=""
+                    />
+                  </>
+                )}
+                
                 {selectedTheme === 'CUSTOM' && (
                   <>
-                {/* Font Size */}
+                    <h3>Additional Settings</h3>
+                    {/* Additional Font Size Setting */}
                     <FontSizeSetting
                       fontSize={fontSize}
                       setFontSize={setFontSize}
@@ -495,7 +554,6 @@ const Settings: React.FC<{ closeSettings: () => void; accountName: string }> = (
               </div>
             );       
 
-
       case 'foss':
         return (
           <div className="settings-section">

app/components/settings/theme.ts

@@ -92,7 +92,7 @@ export const applyBlackTheme = () => {
   document.documentElement.style.setProperty('--history-background-color', '#333333'); // Dark history background
   document.documentElement.style.setProperty('--left-panel-background-color', '#1a1a1a'); // Dark left panel background
   document.documentElement.style.setProperty('--conversation-background-color', '#1a1a1a'); // Dark conversation container
-  document.documentElement.style.setProperty('--doc-background-color', '#3d3d3d'); // Dark document background
+  document.documentElement.style.setProperty('--doc-background-color', '#000000'); // Dark document background  
   document.documentElement.style.setProperty('--close-button-color', '#f44336'); // Red close button color
   document.documentElement.style.setProperty('--close-button-hover-color', '#d32f2f'); // Darker red hover color
   document.documentElement.style.setProperty('--apply-button-color', '#4caf50'); // Apply button color
@@ -117,6 +117,7 @@ export const applyCustomTheme = () => {
   const themeVariables = {
     backgroundColor: localStorage.getItem('backgroundColor'),
     headerBackground: localStorage.getItem('headerBackground'),
+    headerTextColor: localStorage.getItem('headerTextColor'),
     textColor: localStorage.getItem('textColor'),
     inputBackgroundColor: localStorage.getItem('inputBackgroundColor'),
     inputButtonColor: localStorage.getItem('inputButtonColor'),
@@ -131,20 +132,29 @@ export const applyCustomTheme = () => {
     historyBackgroundColor: localStorage.getItem('historyBackgroundColor'),
     leftPanelBackgroundColor: localStorage.getItem('leftPanelBackgroundColor'),
     conversationBackgroundColor: localStorage.getItem('conversationBackgroundColor'),
+    docBackgroundColor: localStorage.getItem('docBackgroundColor'),
+    closeButtonColor: localStorage.getItem('closeButtonColor'),
+    closeButtonHoverColor: localStorage.getItem('closeButtonHoverColor'),
+    applyButtonColor: localStorage.getItem('applyButtonColor'),
+    applyButtonHoverColor: localStorage.getItem('applyButtonHoverColor'),
+    burgerMenu: localStorage.getItem('burgerMenu'),
+    overlayTextColor: localStorage.getItem('overlayTextColor'),
     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'),
+    popUpText: localStorage.getItem('popUpText'),
     inputBorderColor: localStorage.getItem('inputBorderColor'),
     fontFamily: localStorage.getItem('fontFamily'),
     fontSize: localStorage.getItem('fontSize'),
-      burgerMenu: localStorage.getItem('burgerMenu'),
   };
 
-  document.documentElement.style.setProperty('--background-color', themeVariables.backgroundColor || '#121212');
   document.documentElement.style.setProperty('--header-background-color', themeVariables.headerBackground || '#7e7e7e');
+  document.documentElement.style.setProperty('--header-text-color', themeVariables.headerTextColor || '#ffffff');
+  document.documentElement.style.setProperty('--background-color', themeVariables.backgroundColor || '#121212');
   document.documentElement.style.setProperty('--text-color', themeVariables.textColor || '#e0e0e0');
   document.documentElement.style.setProperty('--input-background-color', themeVariables.inputBackgroundColor || '#1e1e1e');
   document.documentElement.style.setProperty('--input-button-color', themeVariables.inputButtonColor || '#3c3c3c');
@@ -159,20 +169,112 @@ export const applyCustomTheme = () => {
   document.documentElement.style.setProperty('--history-background-color', themeVariables.historyBackgroundColor || '#1a1a1a');
   document.documentElement.style.setProperty('--left-panel-background-color', themeVariables.leftPanelBackgroundColor || '#1e1e1e');
   document.documentElement.style.setProperty('--conversation-background-color', themeVariables.conversationBackgroundColor || '#2c2c2c');
-  document.documentElement.style.setProperty('--faq-background-color', themeVariables.faqBackgroundColor || '#2c2c2c');
+  document.documentElement.style.setProperty('--doc-background-color', themeVariables.docBackgroundColor || '#000000');
-  document.documentElement.style.setProperty('--faq-heading-color', themeVariables.faqHeadingColor || '#ffffff');
+  document.documentElement.style.setProperty('--close-button-color', themeVariables.closeButtonColor || '#f44336');
-  document.documentElement.style.setProperty('--faq-item-background-color', themeVariables.faqItemBackgroundColor || '#3c3c3c');
+  document.documentElement.style.setProperty('--close-button-hover-color', themeVariables.closeButtonHoverColor || '#d32f2f');
+  document.documentElement.style.setProperty('--apply-button-color', themeVariables.applyButtonColor || '#4caf50');
+  document.documentElement.style.setProperty('--apply-button-hover-color', themeVariables.applyButtonHoverColor || '#66bb6a');
+  document.documentElement.style.setProperty('--burger-menu-background-color', themeVariables.burgerMenu || '#79832e');
+  document.documentElement.style.setProperty('--overlay-text-color', themeVariables.overlayTextColor || '#ffffff');
+  document.documentElement.style.setProperty('--faq-background-color', themeVariables.faqBackgroundColor || '#333333');
+  document.documentElement.style.setProperty('--faq-heading-color', themeVariables.faqHeadingColor || '#4caf50');
+  document.documentElement.style.setProperty('--faq-item-background-color', themeVariables.faqItemBackgroundColor || '#4c4c4c');
   document.documentElement.style.setProperty('--faq-item-heading-color', themeVariables.faqItemHeadingColor || '#ffffff');
   document.documentElement.style.setProperty('--faq-item-text-color', themeVariables.faqItemTextColor || '#e0e0e0');
-  document.documentElement.style.setProperty('--faq-item-hover-background-color', themeVariables.faqItemHoverBackgroundColor || '#5a5a5a');
+  document.documentElement.style.setProperty('--faq-item-hover-background-color', themeVariables.faqItemHoverBackgroundColor || '#555555');
+  document.documentElement.style.setProperty('--popup-background-color', themeVariables.popupBackgroundColor || '#4caf50');
+  document.documentElement.style.setProperty('--pop-up-text', themeVariables.popUpText || '#ffffff');
   document.documentElement.style.setProperty('--input-border-color', themeVariables.inputBorderColor || '#3c3c3c');
   document.documentElement.style.setProperty('--font-family', themeVariables.fontFamily || "'Poppins', 'sans-serif'");
   document.documentElement.style.setProperty('--font-size', themeVariables.fontSize || '16px');
-  document.documentElement.style.setProperty('--burger-menu-background-color', themeVariables.burgerMenu || '#79832e');
+};
+
+// TypeScript types for color parameters
+type Color = string;
+
+export const applyBasicCustomTheme = (
+  primaryColor: Color,
+  secondaryColor: Color,
+  accentColor: Color,
+  backgroundColor: Color,
+  textColor: Color
+) => {
+  // Calculate additional colors based on the provided colors
+  const headerBackgroundColor = secondaryColor; // Use secondary color for header background
+  const headerTextColor = lightenColor(textColor, 50); // Lighten text color for header
+  const inputButtonColor = primaryColor; // Use primary color for input buttons
+  const userMessageBackgroundColor = accentColor; // Use accent color for user messages
+  const aiMessageBackgroundColor = backgroundColor; // Use background color for AI messages
+  const buttonHoverBackgroundColor = darkenColor(primaryColor, 30); // Darken primary color for hover
+  const closeButtonColor = darkenColor(accentColor, 20); // Darkened accent color for close button
+  const closeButtonHoverColor = darkenColor(closeButtonColor, 10); // Darker close button hover color
+  const darkerAccentColor = darkenColor(accentColor, 20); // Darken accent color for contrast
+  const lightenedPrimaryColor = lightenColor(primaryColor, 10); // Lighten primary color for highlights
+  const lighterBackgroundColor = lightenColor(backgroundColor, 10); // Lighten background for contrast
+  const darkerBackgroundColor = darkenColor(backgroundColor, 20); // More pronounced dark background
+
+   // Set all CSS variables
+  document.documentElement.style.setProperty('--header-background-color', headerBackgroundColor);
+  document.documentElement.style.setProperty('--header-text-color', headerTextColor);
+  document.documentElement.style.setProperty('--background-color', backgroundColor);
+  document.documentElement.style.setProperty('--text-color', textColor);
+  document.documentElement.style.setProperty('--input-background-color', lightenColor(backgroundColor, 10));
+  document.documentElement.style.setProperty('--input-button-color', inputButtonColor);
+  document.documentElement.style.setProperty('--input-button-hover-color', buttonHoverBackgroundColor);
+  document.documentElement.style.setProperty('--user-message-background-color', userMessageBackgroundColor);
+  document.documentElement.style.setProperty('--user-message-text-color', lightenColor(textColor, 60));
+  document.documentElement.style.setProperty('--ai-message-background-color', aiMessageBackgroundColor);
+  document.documentElement.style.setProperty('--ai-message-text-color', lightenColor(textColor, 60));
+  document.documentElement.style.setProperty('--button-background-color', inputButtonColor);
+  document.documentElement.style.setProperty('--button-hover-background-color', buttonHoverBackgroundColor);
+  document.documentElement.style.setProperty('--models-background-color', darkerBackgroundColor);
+  document.documentElement.style.setProperty('--history-background-color', lighterBackgroundColor);
+  document.documentElement.style.setProperty('--left-panel-background-color', lightenColor(backgroundColor, 5));
+  document.documentElement.style.setProperty('--conversation-background-color', lightenColor(backgroundColor, 5));
+  document.documentElement.style.setProperty('--doc-background-color', lighterBackgroundColor);
+  document.documentElement.style.setProperty('--close-button-color', closeButtonColor);
+  document.documentElement.style.setProperty('--close-button-hover-color', closeButtonHoverColor);
+  document.documentElement.style.setProperty('--apply-button-color', inputButtonColor);
+  document.documentElement.style.setProperty('--apply-button-hover-color', buttonHoverBackgroundColor);
+  document.documentElement.style.setProperty('--burger-menu-background-color', lightenColor(backgroundColor, 5));
+  document.documentElement.style.setProperty('--overlay-text-color', lightenColor(textColor, 80));
+  document.documentElement.style.setProperty('--faq-background-color', lightenColor(backgroundColor, 10));
+  document.documentElement.style.setProperty('--faq-heading-color', lightenedPrimaryColor);
+  document.documentElement.style.setProperty('--faq-item-background-color', darkerAccentColor);
+  document.documentElement.style.setProperty('--faq-item-heading-color', '#000000');
+  document.documentElement.style.setProperty('--faq-item-text-color', '#000000');
+  document.documentElement.style.setProperty('--faq-item-hover-background-color', lightenColor(accentColor, 10));
+  document.documentElement.style.setProperty('--popup-background-color', accentColor);
+  document.documentElement.style.setProperty('--pop-up-text', lightenColor(textColor, 80));
+  document.documentElement.style.setProperty('--input-border-color', primaryColor);
+  document.documentElement.style.setProperty('--font-family', "'Poppins', 'sans-serif'");
+  document.documentElement.style.setProperty('--font-size', '16px');
+};
+
+// Helper function to darken a color (returns a darker version of the provided color)
+const darkenColor = (color: Color, percent: number): Color => {
+  let r = parseInt(color.slice(1, 3), 16);
+  let g = parseInt(color.slice(3, 5), 16);
+  let b = parseInt(color.slice(5, 7), 16);
+  r = Math.floor(r * (1 - percent / 100));
+  g = Math.floor(g * (1 - percent / 100));
+  b = Math.floor(b * (1 - percent / 100));
+  return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
+};
+
+// Helper function to lighten a color (returns a lighter version of the provided color)
+const lightenColor = (color: Color, percent: number): Color => {
+  let r = parseInt(color.slice(1, 3), 16);
+  let g = parseInt(color.slice(3, 5), 16);
+  let b = parseInt(color.slice(5, 7), 16);
+  r = Math.min(255, Math.floor(r * (1 + percent / 100)));
+  g = Math.min(255, Math.floor(g * (1 + percent / 100)));
+  b = Math.min(255, Math.floor(b * (1 + percent / 100)));
+  return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
 };
 
 // This is the new function that calls the appropriate theme application
-export const applyTheme = (theme: string) => {
+export const applyTheme = (theme: string, primary: string, secondary: string, accent: string, background: string, text: string) => {
   switch (theme) {
     case 'IOMARKET':
       applyIOMarketTheme();
@@ -186,9 +288,17 @@ export const applyTheme = (theme: string) => {
     case 'CUSTOM':
       applyCustomTheme();
       break;
+    case 'BASIC-CUSTOM':
+      applyBasicCustomTheme(
+          primary,
+          secondary,
+          accent,
+          background,
+          text
+        );
+      break;
     default:
       applyIOMarketTheme();
       break;
   }
 };
-

app/page.tsx

@@ -7,9 +7,7 @@ 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/Settings';
+import { applyIOMarketTheme, applyWhiteTheme, applyBlackTheme, applyCustomTheme, applyBasicCustomTheme } from './components/settings/theme'
-import { applyIOMarketTheme, applyWhiteTheme, applyBlackTheme, applyCustomTheme } from './components/settings/theme'
-import Head from 'next/head';
 import './styles/master.css';
 
 const LandingPage: React.FC = () => {
@@ -17,6 +15,22 @@ const LandingPage: React.FC = () => {
   const [view, setView] = useState<'AI' | 'FAQ' | 'Documentation' | 'Credits'>('AI'); // Added 'Credits' here
   const conversationRef = useRef<HTMLDivElement>(null);
 
+
+  const [primaryColor, setPrimaryColor] = useState(localStorage.getItem("primaryColor") || "#fefefe");
+  const [secondaryColor, setSecondaryColor] = useState(localStorage.getItem("secondaryColor") || "#fefefe");
+  const [accentColor, setAccentColor] = useState(localStorage.getItem("accentColor") || "#fefefe");
+  const [basicBackgroundColor, setBasicBackgroundColor] = useState(localStorage.getItem("basicBackgroundColor") || "#fefefe");
+  const [basicTextColor, setBasicTextColor] = useState(localStorage.getItem("basicTextColor") || "#fefefe");
+
+  useEffect(()=>{
+    setPrimaryColor(localStorage.getItem("primaryColor") || "#fefefe")
+    setSecondaryColor(localStorage.getItem("secondaryColor") || "#fefefe")
+    setAccentColor(localStorage.getItem("accentColor") || "#fefefe")
+    setBasicBackgroundColor(localStorage.getItem("basicBackgroundColor") || "#fefefe")
+    setBasicTextColor(localStorage.getItem("basicTextColor") || "#fefefe")
+  })
+  
+
   const toggleDivs = () => {
     setShowDivs(prevState => !prevState);
   };
@@ -48,6 +62,15 @@ const LandingPage: React.FC = () => {
           case 'CUSTOM':
             applyCustomTheme();
             break;
+          case 'BASIC-CUSTOM':
+            applyBasicCustomTheme(
+                primaryColor,
+                secondaryColor,
+                accentColor,
+                basicBackgroundColor,
+                basicTextColor
+              );
+            break;
           default:
             applyIOMarketTheme();
             break;