From 09f2f2a9e7a9a3709f857a2a5948657501eb08e6 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Tue, 30 Jul 2024 18:01:49 +0530
Subject: [PATCH] (fix) dark theme,train modal

---
 frontend/src/App.tsx                          | 13 +---------
 frontend/src/Navigation.tsx                   |  5 ++--
 frontend/src/conversation/Conversation.tsx    |  2 +-
 .../src/conversation/ConversationTile.tsx     |  3 ++-
 .../src/conversation/SharedConversation.tsx   |  8 +++---
 frontend/src/hooks/index.ts                   | 25 +++----------------
 frontend/src/index.css                        |  3 +++
 frontend/src/upload/Upload.tsx                | 20 +++++++--------
 8 files changed, 26 insertions(+), 53 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 9bad8724..63f4ac62 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,5 +1,4 @@
 import { Routes, Route } from 'react-router-dom';
-import { useEffect } from 'react';
 import Navigation from './Navigation';
 import Conversation from './conversation/Conversation';
 import About from './About';
@@ -34,17 +33,7 @@ function MainLayout() {
 }
 
 export default function App() {
-  const [isDarkTheme] = useDarkTheme();
-  useEffect(() => {
-    localStorage.setItem('selectedTheme', isDarkTheme ? 'Dark' : 'Light');
-    if (isDarkTheme) {
-      document
-        .getElementById('root')
-        ?.classList.add('dark', 'dark:bg-raisin-black');
-    } else {
-      document.getElementById('root')?.classList.remove('dark');
-    }
-  }, [isDarkTheme]);
+  useDarkTheme();
   return (
     <>
       <Routes>
diff --git a/frontend/src/Navigation.tsx b/frontend/src/Navigation.tsx
index bd0d460c..cbfe5d95 100644
--- a/frontend/src/Navigation.tsx
+++ b/frontend/src/Navigation.tsx
@@ -10,7 +10,6 @@ import DocsGPT3 from './assets/cute_docsgpt3.svg';
 import Discord from './assets/discord.svg';
 import Expand from './assets/expand.svg';
 import Github from './assets/github.svg';
-import HamburgerDark from './assets/hamburger-dark.svg';
 import Hamburger from './assets/hamburger.svg';
 import Info from './assets/info.svg';
 import SettingGear from './assets/settingGear.svg';
@@ -393,9 +392,9 @@ export default function Navigation({ navOpen, setNavOpen }: NavigationProps) {
           onClick={() => setNavOpen(true)}
         >
           <img
-            src={isDarkTheme ? HamburgerDark : Hamburger}
+            src={Hamburger}
             alt="menu toggle"
-            className="w-7"
+            className="w-7 filter dark:invert"
           />
         </button>
       </div>
diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
index 1f57fee3..4588f73c 100644
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -266,7 +266,7 @@ export default function Conversation() {
         {queries.length === 0 && <Hero handleQuestion={handleQuestion} />}
       </div>
 
-      <div className="flex w-11/12 flex-col items-end self-center rounded-2xl bg-opacity-0 pb-1 sm:w-6/12">
+      <div className="flex w-11/12 flex-col items-end self-center rounded-2xl bg-opacity-0 pb-1 sm:w-8/12">
         <div className="flex h-full w-full items-center rounded-[40px] border border-silver bg-white py-1 dark:bg-raisin-black">
           <div
             id="inputbox"
diff --git a/frontend/src/conversation/ConversationTile.tsx b/frontend/src/conversation/ConversationTile.tsx
index 6f93dbb4..3a0b85e4 100644
--- a/frontend/src/conversation/ConversationTile.tsx
+++ b/frontend/src/conversation/ConversationTile.tsx
@@ -48,7 +48,8 @@ export default function ConversationTile({
     setConversationsName(conversation.name);
   }, [conversation.name]);
 
-  function handleEditConversation() {
+  function handleEditConversation(event: SyntheticEvent) {
+    event.stopPropagation();
     setIsEdit(true);
     setOpen(false);
   }
diff --git a/frontend/src/conversation/SharedConversation.tsx b/frontend/src/conversation/SharedConversation.tsx
index cbe80717..8619b0c2 100644
--- a/frontend/src/conversation/SharedConversation.tsx
+++ b/frontend/src/conversation/SharedConversation.tsx
@@ -203,7 +203,7 @@ export const SharedConversation = () => {
     <div className="flex h-full flex-col items-center justify-between gap-2 overflow-y-hidden dark:bg-raisin-black">
       <div className="flex w-full justify-center overflow-auto">
         <div className="mt-0 w-11/12 md:w-10/12 lg:w-6/12">
-          <div className="mb-2 w-full border-b pb-2">
+          <div className="mb-2 w-full border-b pb-2 dark:border-b-silver">
             <h1 className="font-semi-bold text-4xl text-chinese-black dark:text-chinese-silver">
               {title}
             </h1>
@@ -279,10 +279,10 @@ export const SharedConversation = () => {
             {t('sharedConv.button')}
           </button>
         )}
+        <span className="mb-2 hidden text-xs text-dark-charcoal dark:text-silver sm:inline">
+          {t('sharedConv.meta')}
+        </span>
       </div>
-      <span className="mb-2 hidden text-xs text-dark-charcoal dark:text-silver sm:inline">
-        {t('sharedConv.meta')}
-      </span>
     </div>
   );
 };
diff --git a/frontend/src/hooks/index.ts b/frontend/src/hooks/index.ts
index c8258ad2..a8bfe1da 100644
--- a/frontend/src/hooks/index.ts
+++ b/frontend/src/hooks/index.ts
@@ -70,35 +70,18 @@ export function useDarkTheme() {
     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
-        .getElementById('root')
-        ?.classList.add('dark', 'dark:bg-raisin-black');
-    } else {
-      // If no preference found, set to default (light mode)
-      setIsDarkTheme(false);
-      document.getElementById('root')?.classList.remove('dark');
-    }
-  }, []);
   useEffect(() => {
     localStorage.setItem('selectedTheme', isDarkTheme ? 'Dark' : 'Light');
     if (isDarkTheme) {
-      document
-        .getElementById('root')
-        ?.classList.add('dark', 'dark:bg-raisin-black');
+      document.body?.classList.add('dark');
     } else {
-      document.getElementById('root')?.classList.remove('dark');
+      document.body?.classList.remove('dark');
     }
   }, [isDarkTheme]);
-  //method to toggle theme
+
   const toggleTheme: any = () => {
     setIsDarkTheme(!isDarkTheme);
   };
+
   return [isDarkTheme, toggleTheme];
 }
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 37f946a3..618e2939 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -2,6 +2,9 @@
 @tailwind components;
 @tailwind utilities;
 
+body.dark {
+  background-color: #202124; /* raisin-black */
+}
 ::-webkit-scrollbar {
   width: 8px;
 }
diff --git a/frontend/src/upload/Upload.tsx b/frontend/src/upload/Upload.tsx
index 3bb3e7ae..5d5d1ac5 100644
--- a/frontend/src/upload/Upload.tsx
+++ b/frontend/src/upload/Upload.tsx
@@ -30,7 +30,7 @@ function Upload({
   const [activeTab, setActiveTab] = useState<string>('file');
   const [files, setfiles] = useState<File[]>([]);
   const [progress, setProgress] = useState<{
-    type: 'UPLOAD' | 'TRAINIING';
+    type: 'UPLOAD' | 'TRAINING';
     percentage: number;
     taskId?: string;
     failed?: boolean;
@@ -61,10 +61,10 @@ function Upload({
     return (
       <div className="my-5 w-[50%]">
         <div
-          className={`h-4 overflow-hidden rounded-lg border border-purple-30 text-xs text-white outline-none `}
+          className={`h-8 overflow-hidden rounded-xl border border-purple-30 text-xs text-bright-gray outline-none `}
         >
           <div
-            className={`h-full border-none p-1 w-${
+            className={`h-full border-none text-xl w-${
               progress || 0
             }%  flex items-center justify-center bg-purple-30 outline-none transition-all`}
             style={{ width: `${progressPercent || 0}%` }}
@@ -86,15 +86,13 @@ function Upload({
     isFailed?: boolean;
   }) {
     return (
-      <div className="mt-5 flex flex-col items-center gap-2">
-        <p className="text-xl tracking-[0.15px]">{title}...</p>
-        <p className="text-sm text-gray-2000">This may take several minutes</p>
+      <div className="mt-5 flex flex-col items-center gap-2 text-gray-2000 dark:text-bright-gray">
+        <p className="text-gra text-xl tracking-[0.15px]">{title}...</p>
+        <p className="text-sm">This may take several minutes</p>
         <p className={`ml-5 text-xl text-red-400 ${isFailed ? '' : 'hidden'}`}>
           Over the token limit, please consider uploading smaller document
         </p>
         {/* <p className="mt-10 text-2xl">{progress?.percentage || 0}%</p> */}
-
-        {/* progress bar */}
         <ProgressBar progressPercent={progress?.percentage as number} />
       </div>
     );
@@ -208,7 +206,7 @@ function Upload({
     xhr.onload = () => {
       const { task_id } = JSON.parse(xhr.responseText);
       setTimeoutRef.current = setTimeout(() => {
-        setProgress({ type: 'TRAINIING', percentage: 0, taskId: task_id });
+        setProgress({ type: 'TRAINING', percentage: 0, taskId: task_id });
       }, 3000);
     };
     xhr.open('POST', `${apiHost + '/api/upload'}`);
@@ -239,7 +237,7 @@ function Upload({
     xhr.onload = () => {
       const { task_id } = JSON.parse(xhr.responseText);
       setTimeoutRef.current = setTimeout(() => {
-        setProgress({ type: 'TRAINIING', percentage: 0, taskId: task_id });
+        setProgress({ type: 'TRAINING', percentage: 0, taskId: task_id });
       }, 3000);
     };
     xhr.open('POST', `${apiHost + '/api/remote'}`);
@@ -284,7 +282,7 @@ function Upload({
 
   if (progress?.type === 'UPLOAD') {
     view = <UploadProgress></UploadProgress>;
-  } else if (progress?.type === 'TRAINIING') {
+  } else if (progress?.type === 'TRAINING') {
     view = <TrainingProgress></TrainingProgress>;
   } else {
     view = (