From 1d8053de88394155b296b546bfc9364cb91361f4 Mon Sep 17 00:00:00 2001
From: Taehee Yoon <th.yoon.dev@gmail.com>
Date: Sun, 19 Nov 2023 14:34:36 +0300
Subject: [PATCH] fix : remove light theme

---
 src/components/Chat.tsx    | 22 +++++++++++-----------
 src/components/Message.tsx | 16 +++++-----------
 2 files changed, 16 insertions(+), 22 deletions(-)

diff --git a/src/components/Chat.tsx b/src/components/Chat.tsx
index 7970e50..4f948ea 100644
--- a/src/components/Chat.tsx
+++ b/src/components/Chat.tsx
@@ -113,7 +113,7 @@ const Chat = (props: any) => {
       <div className="sticky top-0 z-10 flex items-center border-b border-white/20 bg-black pl-1 pt-1 text-gray-200 sm:pl-3 md:hidden">
         <button
           type="button"
-          className="-ml-0.5 -mt-0.5 inline-flex h-10 w-10 items-center justify-center rounded-md hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white dark:hover:text-white"
+          className="-ml-0.5 -mt-0.5 inline-flex h-10 w-10 items-center justify-center rounded-md  focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white hover:text-white"
           onClick={toggleComponentVisibility}
         >
           <span className="sr-only">Open sidebar</span>
@@ -126,11 +126,11 @@ const Chat = (props: any) => {
       </div>
       <div className="relative h-full w-full transition-width flex flex-col overflow-hidden items-stretch flex-1">
         <div className="flex-1 overflow-hidden">
-          <div className="react-scroll-to-bottom--css-ikyem-79elbk h-full dark:bg-bg-stars z-40">
+          <div className="react-scroll-to-bottom--css-ikyem-79elbk h-full bg-bg-stars z-40">
             <div className="react-scroll-to-bottom--css-ikyem-1n7m0yu">
               {!showEmptyChat && conversation.length > 0 ? (
                 <div className="flex flex-col items-center text-sm bg-black">
-                  <div className="flex w-full items-center justify-center gap-1 border-b border-black/10 bg-gray-50 p-3 text-gray-500 dark:border-gray-900/50 dark:bg-black dark:text-gray-300">
+                  <div className="flex w-full items-center justify-center gap-1 border-b  p-3  border-gray-900/50 bg-black text-gray-300">
                     Model: {selectedModel.name}
                   </div>
                   {conversation.map((message, index) => (
@@ -145,7 +145,7 @@ const Chat = (props: any) => {
                   <div className="flex items-center justify-center gap-2">
                     <div className="relative w-full md:w-1/2 lg:w-1/3 xl:w-1/4">
                       <button
-                        className="relative flex w-full cursor-default flex-col rounded-md border border-black/10 bg-white py-2 pl-3 pr-10 text-left focus:border-gray-400 focus:outline-none focus:ring-1 focus:ring-gray-400 dark:border-white/20 dark:bg-black sm:text-sm align-center"
+                        className="relative flex w-full cursor-default flex-col rounded-md border  py-2 pl-3 pr-10 text-left focus:border-gray-400 focus:outline-none focus:ring-1 focus:ring-gray-400 border-white/20 bg-black sm:text-sm align-center"
                         id="headlessui-listbox-button-:r0:"
                         type="button"
                         aria-haspopup="true"
@@ -154,7 +154,7 @@ const Chat = (props: any) => {
                         aria-labelledby="headlessui-listbox-label-:r1: headlessui-listbox-button-:r0:"
                       >
                         <label
-                          className="block text-xs text-gray-700 dark:text-gray-500 text-center"
+                          className="block text-xs text-gray-500 text-center"
                           id="headlessui-listbox-label-:r1:"
                           data-headlessui-state=""
                         >
@@ -171,17 +171,17 @@ const Chat = (props: any) => {
                       </button>
                     </div>
                   </div>
-                  <h1 className="text-2xl sm:text-4xl font-semibold text-center text-gray-200 dark:text-gray-800 flex gap-2 items-center justify-center h-screen">
+                  <h1 className="text-2xl sm:text-4xl font-semibold text-center text-gray-800 flex gap-2 items-center justify-center h-screen">
                     ChatSwap
                   </h1>
                 </div>
               ) : null}
-              <div className="flex flex-col items-center text-sm dark:bg-black"></div>
+              <div className="flex flex-col items-center text-sm bg-black"></div>
             </div>
           </div>
         </div>
 
-        <div className="absolute  z-50 bottom-0 left-0 w-full border-t md:border-t-0 dark:border-white/20 md:border-transparent md:dark:border-transparent md:bg-vert-light-gradient bg-white dark:bg-black md:!bg-transparent dark:md:bg-black pt-2">
+        <div className="absolute  z-50 bottom-0 left-0 w-full border-t md:border-t-0 border-white/20 md:border-transparent md:bg-vert-light-gradient :bg-black md:!bg-transparent md:bg-black pt-2">
           <form className="stretch mx-2 flex flex-row gap-3 last:mb-2 md:mx-4 md:last:mb-6 lg:mx-auto lg:max-w-2xl xl:max-w-3xl">
             <div className="relative flex flex-col h-full flex-1 items-stretch md:flex-col">
               {errorMessage ? (
@@ -191,7 +191,7 @@ const Chat = (props: any) => {
                   </div>
                 </div>
               ) : null}
-              <div className="flex flex-col w-full py-2 flex-grow md:py-6 md:px-6 relative border border-black/10 bg-white dark:border-[#C1C7D0] dark:text-white dark:bg-gray-700 dark:opacity-80 rounded-full shadow-[0_0_10px_rgba(0,0,0,0.10)] dark:shadow-[0_0_15px_rgba(0,0,0,0.10)]">
+              <div className="flex flex-col w-full py-2 flex-grow md:py-6 md:px-6 relative border border-[#C1C7D0] text-white bg-gray-700 opacity-80 rounded-full shadow-[0_0_15px_rgba(0,0,0,0.10)]">
                 <textarea
                   ref={textAreaRef}
                   value={message}
@@ -204,7 +204,7 @@ const Chat = (props: any) => {
                   }}
                   // rows={1}
                   placeholder={"Send a message..."}
-                  className="m-0 w-full resize-none border-0 bg-transparent p-0 pr-7 focus:ring-0 focus-visible:ring-0 dark:bg-transparent pl-2 md:pl-0"
+                  className="m-0 w-full resize-none border-0 p-0 pr-7 focus:ring-0 focus-visible:ring-0 bg-transparent pl-2 md:pl-0"
                   onChange={(e) => setMessage(e.target.value)}
                   onKeyDown={handleKeypress}
                   // disabled={!isConnected}
@@ -219,7 +219,7 @@ const Chat = (props: any) => {
               </div>
             </div>
           </form>
-          <div className="px-3 pt-2 pb-3 text-center text-xs text-black/50 dark:text-white/50 md:px-4 md:pt-3 md:pb-6">
+          <div className="px-3 pt-2 pb-3 text-center text-xs text-white/50 md:px-4 md:pt-3 md:pb-6">
             {/* <span>
               ChatGPT Clone may produce inaccurate information about people,
               places, or facts.
diff --git a/src/components/Message.tsx b/src/components/Message.tsx
index c1125f3..d5af413 100644
--- a/src/components/Message.tsx
+++ b/src/components/Message.tsx
@@ -193,8 +193,8 @@ const Message = (props: any) => {
 
   return (
     <div
-      className={`group w-full text-gray-800 dark:text-gray-100 border-b border-black/10 dark:border-gray-900/50 ${
-        isUser ? "dark:bg-black" : "bg-gray-50 dark:bg-black"
+      className={`group w-full text-gray-100 border-b border-gray-900/50 ${
+        isUser ? ":bg-black" : "bg-black"
       }`}
     >
       <div className="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl flex lg:px-0 m-auto w-full">
@@ -208,21 +208,15 @@ const Message = (props: any) => {
               )}
             </div>
             <div className="text-xs flex items-center justify-center gap-1 absolute left-0 top-2 -ml-4 -translate-x-full group-hover:visible !invisible">
-              <button
-                disabled
-                className="text-gray-300 dark:text-gray-400"
-              ></button>
+              <button disabled className="text-gray-400"></button>
               <span className="flex-grow flex-shrink-0">1 / 1</span>
-              <button
-                disabled
-                className="text-gray-300 dark:text-gray-400"
-              ></button>
+              <button disabled className="text-gray-400"></button>
             </div>
           </div>
           <div className="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]">
             <div className="flex flex-grow flex-col gap-3">
               <div className="min-h-20 flex flex-col items-start gap-4 whitespace-pre-wrap break-words">
-                <div className="markdown prose w-full break-words dark:prose-invert dark">
+                <div className="markdown prose w-full break-words prose-invert dark">
                   {!isUser && text === null ? (
                     <Skeleton className="w-3/5 rounded-lg">
                       <div className="h-6 w-2/5 rounded-lg bg-default-200"></div>