Merge pull request #844 from ManishMadan2882/main

Fix: Sidebar Icons update on changing theme
arc53 · Feb 1, 2024 · 510b517 · 510b517
2 parents 2be523c + dea3853
commit 510b517
Show file tree

Hide file tree

Showing 7 changed files with 77 additions and 45 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -13,15 +13,6 @@ inject();
 export default function App() {
   const { isMobile } = useMediaQuery();
   const [navOpen, setNavOpen] = useState(!isMobile);
-  const selectedTheme = localStorage.getItem('selectedTheme');
-  useEffect(()=>{
-    if (selectedTheme === 'Dark') {
-      document.documentElement.classList.add('dark');
-      document.body.classList.add('dark:bg-raisin-black');
-    } else {
-      document.documentElement.classList.remove('dark');
-    }
-  },[])
   return (
     <div className="min-h-full min-w-full dark:bg-raisin-black">
       <Navigation navOpen={navOpen} setNavOpen={setNavOpen} />

diff --git a/frontend/src/Hero.tsx b/frontend/src/Hero.tsx
@@ -1,11 +1,10 @@
-import { useMediaQuery } from './hooks';
+import { useDarkTheme, useMediaQuery } from './hooks';
 import DocsGPT3 from './assets/cute_docsgpt3.svg';
 
 export default function Hero({ className = '' }: { className?: string }) {
   // const isMobile = window.innerWidth <= 768;
   const { isMobile } = useMediaQuery();
-  const isDarkTheme = document.documentElement.classList.contains('dark');
-  console.log(isDarkTheme)
+  const [isDarkTheme] = useDarkTheme()
   return (
     <div className={`mt-14 ${isMobile ? 'mb-2' : 'mb-12'}flex flex-col text-black-1000 dark:text-bright-gray`}>
       <div className=" mb-2 flex items-center justify-center sm:mb-10">

diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx
@@ -41,20 +41,36 @@ import Upload from './upload/Upload';
 import { Doc, getConversations } from './preferences/preferenceApi';
 import SelectDocsModal from './preferences/SelectDocsModal';
 import ConversationTile from './conversation/ConversationTile';
+import { useDarkTheme } from './hooks';
 
 interface NavigationProps {
   navOpen: boolean;
   setNavOpen: React.Dispatch<React.SetStateAction<boolean>>;
 }
-
+const NavImage: React.FC<{ Light: string, Dark: string }> = ({ Light, Dark }) => {
+  return (
+    <>
+      <img
+        src={Dark}
+        alt="icon"
+        className="ml-2 w-5 hidden dark:block "
+      />
+      <img
+        src={Light}
+        alt="icon"
+        className="ml-2 w-5 dark:hidden "
+      />
+    </>
+  )
+}
 export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
   const dispatch = useDispatch();
   const docs = useSelector(selectSourceDocs);
   const selectedDocs = useSelector(selectSelectedDocs);
   const conversations = useSelector(selectConversations);
   const conversationId = useSelector(selectConversationId);
   const { isMobile } = useMediaQuery();
-  const isDarkTheme = document.documentElement.classList.contains('dark');
+  const [isDarkTheme] = useDarkTheme();
   const [isDocsListOpen, setIsDocsListOpen] = useState(false);
 
   const isApiKeySet = useSelector(selectApiKeyStatus);
@@ -176,7 +192,6 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
   useEffect(() => {
     setNavOpen(!isMobile);
   }, [isMobile]);
-
   return (
     <>
       {!navOpen && (
@@ -340,11 +355,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
                 }`
               }
             >
-              <img
-                src={isDarkTheme ? SettingGearDark : SettingGear}
-                alt="settings"
-                className="ml-2 w-5 opacity-60"
-              />
+              <NavImage Light={SettingGear} Dark={SettingGearDark} />
               <p className="my-auto text-sm text-eerie-black  dark:text-white">Settings</p>
             </NavLink>
           </div>
@@ -357,7 +368,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
                 }`
               }
             >
-              <img src={isDarkTheme ? InfoDark : Info} alt="info" className="ml-2 w-5" />
+              <NavImage Light={Info} Dark={InfoDark} />
               <p className="my-auto text-sm">About</p>
             </NavLink>
 
@@ -367,11 +378,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
               rel="noreferrer"
               className="my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-purple-taupe"
             >
-              <img
-                src={isDarkTheme ? DocumentationDark : Documentation}
-                alt="documentation"
-                className="ml-2 w-5"
-              />
+              <NavImage Light={Documentation} Dark={DocumentationDark} />
               <p className="my-auto text-sm ">Documentation</p>
             </a>
             <a
@@ -380,7 +387,8 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
               rel="noreferrer"
               className="my-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-purple-taupe"
             >
-              <img src={isDarkTheme ? DiscordDark : Discord} alt="discord-link" className="ml-2 w-5" />
+              <NavImage Light={Discord} Dark={DiscordDark} />
+              {/*  <img src={isDarkTheme ? DiscordDark : Discord} alt="discord-link" className="ml-2 w-5" /> */}
               <p className="my-auto text-sm">
                 Visit our Discord
               </p>
@@ -392,7 +400,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
               rel="noreferrer"
               className="mt-auto mx-4 flex h-9 cursor-pointer gap-4 rounded-3xl hover:bg-gray-100 dark:hover:bg-purple-taupe"
             >
-              <img src={isDarkTheme ? GithubDark : Github} alt="github-link" className="ml-2 w-5" />
+              <NavImage Light={Github} Dark={GithubDark} />
               <p className="my-auto text-sm">
                 Visit our Github
               </p>
@@ -405,7 +413,7 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
           className="mt-5 ml-6 h-6 w-6 md:hidden"
           onClick={() => setNavOpen(true)}
         >
-          <img src={isDarkTheme ? HamburgerDark :Hamburger} alt="menu toggle" className="w-7" />
+          <img src={isDarkTheme ? HamburgerDark : Hamburger} alt="menu toggle" className="w-7" />
         </button>
       </div>
       <SelectDocsModal

diff --git a/frontend/src/Setting.tsx b/frontend/src/Setting.tsx
@@ -10,6 +10,8 @@ import {
   selectSourceDocs,
 } from './preferences/preferenceSlice';
 import { Doc } from './preferences/preferenceApi';
+import { useDarkTheme } from './hooks';
+import { Light } from 'react-syntax-highlighter';
 type PromptProps = {
   prompts: { name: string; id: string; type: string }[];
   selectedPrompt: { name: string; id: string; type: string };
@@ -187,27 +189,20 @@ const Setting: React.FC = () => {
 const General: React.FC = () => {
   const themes = ['Light', 'Dark'];
   const languages = ['English'];
-  const [selectedTheme, setSelectedTheme] = useState(localStorage.getItem('selectedTheme') || themes[0]);
+  const [isDarkTheme, toggleTheme] = useDarkTheme();
+  const [selectedTheme, setSelectedTheme] = useState(isDarkTheme ? 'Dark' : 'Light');
   const [selectedLanguage, setSelectedLanguage] = useState(languages[0]);
-
-  useEffect(() => {
-    if (selectedTheme === 'Dark') {
-      document.documentElement.classList.add('dark');
-      document.documentElement.classList.add('dark:bg-raisin-black');
-    } else {
-      document.documentElement.classList.remove('dark');
-    }
-    localStorage.setItem('selectedTheme', selectedTheme);
-  }, [selectedTheme]);
-
   return (
     <div className="mt-[59px]">
       <div className="mb-4">
         <p className="font-bold text-jet dark:text-bright-gray">Select Theme</p>
         <Dropdown
           options={themes}
           selectedValue={selectedTheme}
-          onSelect={setSelectedTheme}
+          onSelect={(option:string)=>{
+              setSelectedTheme(option);
+              option !==selectedTheme && toggleTheme();
+            }}
         />
       </div>
       <div>

diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
@@ -1,5 +1,6 @@
 import { Fragment, useEffect, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import { useDarkTheme } from '../hooks';
 import Hero from '../Hero';
 import { AppDispatch } from '../store';
 import ConversationBubble from './ConversationBubble';
@@ -23,7 +24,7 @@ export default function Conversation() {
   const dispatch = useDispatch<AppDispatch>();
   const endMessageRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLDivElement>(null);
-  const isDarkTheme = document.documentElement.classList.contains('dark');
+  const [isDarkTheme]= useDarkTheme();
   const [hasScrolledToLast, setHasScrolledToLast] = useState(true);
 
   useEffect(() => {

diff --git a/frontend/src/conversation/ConversationTile.tsx b/frontend/src/conversation/ConversationTile.tsx
@@ -4,7 +4,7 @@ import Edit from '../assets/edit.svg';
 import Exit from '../assets/exit.svg';
 import Message from '../assets/message.svg';
 import MessageDark from '../assets/message-dark.svg';
-
+import { useDarkTheme } from '../hooks';
 import CheckMark2 from '../assets/checkMark2.svg';
 import Trash from '../assets/trash.svg';
 
@@ -29,7 +29,7 @@ export default function ConversationTile({
 }: ConversationTileProps) {
   const conversationId = useSelector(selectConversationId);
   const tileRef = useRef<HTMLInputElement>(null);
-  const isDarkTheme = document.documentElement.classList.contains('dark');
+  const [isDarkTheme]= useDarkTheme();
   const [isEdit, setIsEdit] = useState(false);
   const [conversationName, setConversationsName] = useState('');
   // useOutsideAlerter(

diff --git a/frontend/src/hooks/index.ts b/frontend/src/hooks/index.ts
@@ -64,3 +64,41 @@ export function useMediaQuery() {
 
   return { isMobile, isDesktop, isDarkMode };
 }
+
+export function useDarkTheme() {
+  const [isDarkTheme, setIsDarkTheme] = useState<boolean>(localStorage.getItem('selectedTheme') === "Dark" || false);
+
+  useEffect(() => {
+    // Check if dark mode preference exists in local storage
+    const savedMode:string | null = localStorage.getItem('selectedTheme');
+
+    // Set dark mode based on local storage preference
+    if (savedMode === 'Dark') {
+      setIsDarkTheme(true);
+      document.documentElement.classList.add('dark');
+      document.documentElement.classList.add('dark:bg-raisin-black');
+    } else {
+      // If no preference found, set to default (light mode)
+      setIsDarkTheme(false);
+      document.documentElement.classList.remove('dark');
+    }
+  }, []);
+  useEffect(()=>{
+    localStorage.setItem('selectedTheme',isDarkTheme ? 'Dark' : 'Light');
+    if(isDarkTheme){
+      document.documentElement.classList.add('dark');
+      document.documentElement.classList.add('dark:bg-raisin-black');
+    }
+    else{
+      document.documentElement.classList.remove('dark');
+    }
+  })
+
+  // Function to toggle dark mode
+  const toggleTheme:any = () => {
+    setIsDarkTheme(!isDarkTheme)
+
+  };
+
+  return [isDarkTheme, toggleTheme];
+}