From 67e4d40c4964da0ab94e9ac01b694f50c6235176 Mon Sep 17 00:00:00 2001
From: ManishMadan2882 <manishmadan321@gmail.com>
Date: Mon, 22 Jan 2024 16:11:26 +0530
Subject: [PATCH] added dark mode, About page and bubble icons

---
 frontend/src/About.tsx                        | 14 +++----
 frontend/src/assets/dislike.svg               |  2 +-
 frontend/src/assets/like.svg                  |  2 +-
 frontend/src/assets/spinner.svg               |  2 +-
 frontend/src/conversation/Conversation.tsx    |  2 +-
 .../src/conversation/ConversationBubble.tsx   | 37 +++++--------------
 6 files changed, 20 insertions(+), 39 deletions(-)

diff --git a/frontend/src/About.tsx b/frontend/src/About.tsx
index eaffafdc..b144ce80 100644
--- a/frontend/src/About.tsx
+++ b/frontend/src/About.tsx
@@ -5,7 +5,7 @@ import DocsGPT3 from './assets/cute_docsgpt3.svg';
 export default function About() {
   return (
     <div className="mx-5 grid min-h-screen md:mx-36">
-      <article className="place-items-left mx-auto my-auto flex w-full max-w-6xl flex-col gap-4 rounded-3xl bg-gray-100 p-6 text-jet lg:p-6 xl:p-10">
+      <article className="place-items-left mx-auto my-auto flex w-full max-w-6xl flex-col gap-4 rounded-3xl bg-gray-100 dark:bg-gun-metal p-6 text-jet dark:text-bright-gray lg:p-6 xl:p-10">
         <div className="flex items-center">
           <p className="mr-2 text-3xl">About DocsGPT</p>
           <img className="h14 mb-2" src={DocsGPT3} alt="DocsGPT" />
@@ -31,23 +31,23 @@ export default function About() {
           </p>
           <p className="mt-4 ml-2">
             1. Navigate to{' '}
-            <span className="bg-gray-200 italic"> /application</span> folder
+            <span className="bg-gray-200 dark:bg-outer-space italic"> /application</span> folder
           </p>
           <p className="mt-4 ml-2">
             2. Install dependencies from{' '}
-            <span className="bg-gray-200 italic">
+            <span className="bg-gray-200 dark:bg-outer-space italic">
               pip install -r requirements.txt
             </span>
           </p>
           <p className="mt-4 ml-2">
-            3. Prepare a <span className="bg-gray-200 italic">.env</span> file.
-            Copy <span className="bg-gray-200 italic">.env_sample</span> and
-            create <span className="bg-gray-200 italic">.env</span> with your
+            3. Prepare a <span className="bg-gray-200 dark:bg-outer-space italic">.env</span> file.
+            Copy <span className="bg-gray-200 dark:bg-outer-space italic">.env_sample</span> and
+            create <span className="bg-gray-200 dark:bg-outer-space italic">.env</span> with your
             OpenAI API token
           </p>
           <p className="mt-4 ml-2">
             4. Run the app with{' '}
-            <span className="bg-gray-200 italic">python app.py</span>
+            <span className="bg-gray-200 dark:bg-outer-space italic">python app.py</span>
           </p>
         </div>
 
diff --git a/frontend/src/assets/dislike.svg b/frontend/src/assets/dislike.svg
index 9a51f1e2..9d4009b4 100644
--- a/frontend/src/assets/dislike.svg
+++ b/frontend/src/assets/dislike.svg
@@ -1,4 +1,4 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="current" xmlns="http://www.w3.org/2000/svg">
-<path d="M6.37776 10.1001V12.9C6.37776 13.457 6.599 13.9911 6.99282 14.3849C7.38664 14.7788 7.92077 15 8.47772 15L11.2777 8.70011V1.00025H3.38181C3.04419 0.996436 2.71656 1.11477 2.45929 1.33344C2.20203 1.55212 2.03246 1.8564 1.98184 2.19023L1.01585 8.49012C0.985398 8.69076 0.998931 8.89563 1.05551 9.09053C1.1121 9.28543 1.21038 9.46569 1.34355 9.61884C1.47671 9.77198 1.64159 9.89434 1.82674 9.97744C2.01189 10.0605 2.2129 10.1024 2.41583 10.1001H6.37776ZM11.2777 1.00025H13.1466C13.5428 0.993247 13.9277 1.13195 14.2284 1.39002C14.5291 1.64809 14.7245 2.00758 14.7776 2.40023V7.30014C14.7245 7.69279 14.5291 8.05227 14.2284 8.31035C13.9277 8.56842 13.5428 8.70712 13.1466 8.70011H11.2777" fill="white"/>
+<path d="M6.37776 10.1001V12.9C6.37776 13.457 6.599 13.9911 6.99282 14.3849C7.38664 14.7788 7.92077 15 8.47772 15L11.2777 8.70011V1.00025H3.38181C3.04419 0.996436 2.71656 1.11477 2.45929 1.33344C2.20203 1.55212 2.03246 1.8564 1.98184 2.19023L1.01585 8.49012C0.985398 8.69076 0.998931 8.89563 1.05551 9.09053C1.1121 9.28543 1.21038 9.46569 1.34355 9.61884C1.47671 9.77198 1.64159 9.89434 1.82674 9.97744C2.01189 10.0605 2.2129 10.1024 2.41583 10.1001H6.37776ZM11.2777 1.00025H13.1466C13.5428 0.993247 13.9277 1.13195 14.2284 1.39002C14.5291 1.64809 14.7245 2.00758 14.7776 2.40023V7.30014C14.7245 7.69279 14.5291 8.05227 14.2284 8.31035C13.9277 8.56842 13.5428 8.70712 13.1466 8.70011H11.2777" fill="none"/>
 <path d="M11.2777 8.70011L8.47772 15C7.92077 15 7.38664 14.7788 6.99282 14.3849C6.599 13.9911 6.37776 13.457 6.37776 12.9V10.1001H2.41583C2.2129 10.1024 2.01189 10.0605 1.82674 9.97744C1.64159 9.89434 1.47671 9.77198 1.34355 9.61884C1.21038 9.46569 1.1121 9.28543 1.05551 9.09053C0.998931 8.89563 0.985398 8.69076 1.01585 8.49012L1.98184 2.19023C2.03246 1.8564 2.20203 1.55212 2.45929 1.33344C2.71656 1.11477 3.04419 0.996436 3.38181 1.00025H11.2777M11.2777 8.70011V1.00025M11.2777 8.70011H13.1466C13.5428 8.70712 13.9277 8.56842 14.2284 8.31035C14.5291 8.05227 14.7245 7.69279 14.7776 7.30014V2.40023C14.7245 2.00758 14.5291 1.64809 14.2284 1.39002C13.9277 1.13195 13.5428 0.993247 13.1466 1.00025H11.2777" stroke="current" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/frontend/src/assets/like.svg b/frontend/src/assets/like.svg
index 9c2902f7..0bbe7416 100644
--- a/frontend/src/assets/like.svg
+++ b/frontend/src/assets/like.svg
@@ -1,4 +1,4 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="current" xmlns="http://www.w3.org/2000/svg">
-<path d="M9.39995 5.89997V3.09999C9.39995 2.54304 9.1787 2.0089 8.78487 1.61507C8.39105 1.22125 7.85691 1 7.29996 1L4.49998 7.29996V14.9999H12.3959C12.7336 15.0037 13.0612 14.8854 13.3185 14.6667C13.5757 14.448 13.7453 14.1437 13.7959 13.8099L14.7619 7.50996C14.7924 7.30931 14.7788 7.10444 14.7222 6.90954C14.6657 6.71464 14.5674 6.53437 14.4342 6.38123C14.301 6.22808 14.1362 6.10572 13.951 6.02262C13.7659 5.93952 13.5649 5.89767 13.3619 5.89997H9.39995ZM4.49998 14.9999H2.39999C2.02869 14.9999 1.6726 14.8524 1.41005 14.5899C1.1475 14.3273 1 13.9712 1 13.5999V8.69995C1 8.32865 1.1475 7.97256 1.41005 7.71001C1.6726 7.44746 2.02869 7.29996 2.39999 7.29996H4.49998" fill="white"/>
+<path d="M9.39995 5.89997V3.09999C9.39995 2.54304 9.1787 2.0089 8.78487 1.61507C8.39105 1.22125 7.85691 1 7.29996 1L4.49998 7.29996V14.9999H12.3959C12.7336 15.0037 13.0612 14.8854 13.3185 14.6667C13.5757 14.448 13.7453 14.1437 13.7959 13.8099L14.7619 7.50996C14.7924 7.30931 14.7788 7.10444 14.7222 6.90954C14.6657 6.71464 14.5674 6.53437 14.4342 6.38123C14.301 6.22808 14.1362 6.10572 13.951 6.02262C13.7659 5.93952 13.5649 5.89767 13.3619 5.89997H9.39995ZM4.49998 14.9999H2.39999C2.02869 14.9999 1.6726 14.8524 1.41005 14.5899C1.1475 14.3273 1 13.9712 1 13.5999V8.69995C1 8.32865 1.1475 7.97256 1.41005 7.71001C1.6726 7.44746 2.02869 7.29996 2.39999 7.29996H4.49998" fill="none"/>
 <path d="M4.49998 7.29996L7.29996 1C7.85691 1 8.39105 1.22125 8.78487 1.61507C9.1787 2.0089 9.39995 2.54304 9.39995 3.09999V5.89997H13.3619C13.5649 5.89767 13.7659 5.93952 13.951 6.02262C14.1362 6.10572 14.301 6.22808 14.4342 6.38123C14.5674 6.53437 14.6657 6.71464 14.7223 6.90954C14.7788 7.10444 14.7924 7.30931 14.7619 7.50996L13.7959 13.8099C13.7453 14.1437 13.5757 14.448 13.3185 14.6667C13.0612 14.8854 12.7336 15.0037 12.3959 14.9999H4.49998M4.49998 7.29996V14.9999M4.49998 7.29996H2.39999C2.02869 7.29996 1.6726 7.44746 1.41005 7.71001C1.1475 7.97256 1 8.32865 1 8.69995V13.5999C1 13.9712 1.1475 14.3273 1.41005 14.5899C1.6726 14.8524 2.02869 14.9999 2.39999 14.9999H4.49998" stroke="current" stroke-width="1.39999" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/frontend/src/assets/spinner.svg b/frontend/src/assets/spinner.svg
index e18eaac2..64b815aa 100644
--- a/frontend/src/assets/spinner.svg
+++ b/frontend/src/assets/spinner.svg
@@ -1,5 +1,5 @@
 <svg width="30" height="33" viewBox="0 0 30 33" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<rect width="30" height="33" fill="url(#pattern0)"/>
+<rect width="30" height="33" fill="none"/>
 <defs>
 <pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
 <use xlink:href="#image0_1_917" transform="scale(0.0166667 0.0151515)"/>
diff --git a/frontend/src/conversation/Conversation.tsx b/frontend/src/conversation/Conversation.tsx
index 36c9c476..17a9468c 100644
--- a/frontend/src/conversation/Conversation.tsx
+++ b/frontend/src/conversation/Conversation.tsx
@@ -176,7 +176,7 @@ export default function Conversation() {
           {status === 'loading' ? (
             <img
               src={Spinner}
-              className="relative right-[38px] bottom-[7px] -mr-[30px] animate-spin cursor-pointer self-end"
+              className="relative right-[38px] bottom-[7px] -mr-[30px] animate-spin cursor-pointer self-end bg-transparent"
             ></img>
           ) : (
             <div className="relative right-[43px] bottom-[7px] -mr-[35px] h-[35px] w-[35px] cursor-pointer self-end rounded-full hover:bg-gray-3000">
diff --git a/frontend/src/conversation/ConversationBubble.tsx b/frontend/src/conversation/ConversationBubble.tsx
index 431468fb..51f4a845 100644
--- a/frontend/src/conversation/ConversationBubble.tsx
+++ b/frontend/src/conversation/ConversationBubble.tsx
@@ -202,10 +202,8 @@ const ConversationBubble = forwardRef<
           >
             <div className="absolute left-2 top-4">
               <div
-                className="flex items-center justify-center rounded-full p-2"
-                style={{
-                  backgroundColor: isCopyHovered ? '#EEEEEE' : '#ffffff',
-                }}
+                className={`flex items-center justify-center rounded-full p-2 
+                ${isCopyHovered ? 'bg-[#EEEEEE] dark:bg-purple-taupe' : 'bg-[#ffffff] dark:bg-transparent'}`}
               >
                 {copied ? (
                   <CheckMark
@@ -237,21 +235,12 @@ const ConversationBubble = forwardRef<
           >
             <div className="absolute left-6 top-4">
               <div
-                className="flex items-center justify-center rounded-full p-2 dark:bg-transparent"
-                style={{
-                  backgroundColor: isLikeHovered
-                    ? isLikeClicked
-                      ? 'rgba(125, 84, 209, 0.3)'
-                      : '#EEEEEE'
-                    : isLikeClicked
-                    ? 'rgba(125, 84, 209, 0.3)'
-                    : '#ffffff',
-                }}
+                className={`flex items-center justify-center rounded-full p-2 dark:bg-transparent ${isLikeHovered ? 'bg-[#EEEEEE] dark:bg-purple-taupe' : 'bg-[#ffffff] dark:bg-transparent'}`}
               >
                 <Like
-                  className={`cursor-pointer ${
-                    isLikeClicked || feedback === 'LIKE'
-                      ? 'fill-white-3000 stroke-purple-30'
+                  className={`cursor-pointer 
+                  ${isLikeClicked || feedback === 'LIKE'
+                      ? 'fill-white-3000 stroke-purple-30 dark:fill-transparent'
                       : 'fill-none  stroke-gray-4000'
                   }`}
                   onClick={() => {
@@ -276,21 +265,13 @@ const ConversationBubble = forwardRef<
           >
             <div className="absolute left-10 top-4">
               <div
-                className="flex items-center justify-center rounded-full p-2"
-                style={{
-                  backgroundColor: isDislikeHovered
-                    ? isDislikeClicked
-                      ? 'rgba(248, 113, 113, 0.3)'
-                      : '#EEEEEE'
-                    : isDislikeClicked
-                    ? 'rgba(248, 113, 113, 0.3)'
-                    : '#ffffff',
-                }}
+                
+                className={`flex items-center justify-center rounded-full p-2 ${isDislikeHovered ? 'bg-[#EEEEEE] dark:bg-purple-taupe' : 'bg-[#ffffff] dark:bg-transparent'}`}
               >
                 <Dislike
                   className={`cursor-pointer ${
                     isDislikeClicked || feedback === 'DISLIKE'
-                      ? 'fill-white-3000 stroke-red-2000'
+                      ? 'fill-white-3000 dark:fill-transparent stroke-red-2000'
                       : 'fill-none  stroke-gray-4000'
                   }`}
                   onClick={() => {