From 892e7792bab88c640db6921515692464021ec8ec Mon Sep 17 00:00:00 2001
From: Jing Hua <tohjinghua123@gmail.com>
Date: Sun, 2 Apr 2023 21:29:25 +0800
Subject: [PATCH] style: gray-650 and gray-850

---
 src/components/Chat/ChatContent/Message/Message.tsx | 6 +++---
 src/components/Menu/ChatFolder.tsx                  | 2 +-
 src/components/Menu/ChatHistory.tsx                 | 4 ++--
 tailwind.config.cjs                                 | 2 ++
 4 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/Chat/ChatContent/Message/Message.tsx b/src/components/Chat/ChatContent/Message/Message.tsx
index 5caea6e..fbffd92 100644
--- a/src/components/Chat/ChatContent/Message/Message.tsx
+++ b/src/components/Chat/ChatContent/Message/Message.tsx
@@ -9,10 +9,10 @@ import RoleSelector from './RoleSelector';
 
 // const backgroundStyle: { [role in Role]: string } = {
 //   user: 'dark:bg-gray-800',
-//   assistant: 'bg-gray-50 dark:bg-[#444654]',
-//   system: 'bg-gray-50 dark:bg-[#444654]',
+//   assistant: 'bg-gray-50 dark:bg-gray-650',
+//   system: 'bg-gray-50 dark:bg-gray-650',
 // };
-const backgroundStyle = ['dark:bg-gray-800', 'bg-gray-50 dark:bg-[#444654]'];
+const backgroundStyle = ['dark:bg-gray-800', 'bg-gray-50 dark:bg-gray-650'];
 
 const Message = React.memo(
   ({
diff --git a/src/components/Menu/ChatFolder.tsx b/src/components/Menu/ChatFolder.tsx
index 59c7416..8cc894d 100644
--- a/src/components/Menu/ChatFolder.tsx
+++ b/src/components/Menu/ChatFolder.tsx
@@ -133,7 +133,7 @@ const ChatFolder = ({
       onDragLeave={handleDragLeave}
     >
       <div
-        className='flex py-3 px-3 items-center gap-3 relative rounded-md hover:bg-[#2A2B32] break-all cursor-pointer'
+        className='flex py-3 px-3 items-center gap-3 relative rounded-md hover:bg-gray-850 break-all cursor-pointer'
         onClick={toggleExpanded}
       >
         <FolderIcon className='h-4 w-4' />
diff --git a/src/components/Menu/ChatHistory.tsx b/src/components/Menu/ChatHistory.tsx
index 5d585ab..e047b2a 100644
--- a/src/components/Menu/ChatHistory.tsx
+++ b/src/components/Menu/ChatHistory.tsx
@@ -11,11 +11,11 @@ import useStore from '@store/store';
 
 const ChatHistoryClass = {
   normal:
-    'flex py-3 px-3 items-center gap-3 relative rounded-md bg-gray-900 hover:bg-[#2A2B32] break-all hover:pr-4 group transition-opacity',
+    'flex py-3 px-3 items-center gap-3 relative rounded-md bg-gray-900 hover:bg-gray-850 break-all hover:pr-4 group transition-opacity',
   active:
     'flex py-3 px-3 items-center gap-3 relative rounded-md break-all pr-14 bg-gray-800 hover:bg-gray-800 group transition-opacity',
   normalGradient:
-    'absolute inset-y-0 right-0 w-8 z-10 bg-gradient-to-l from-gray-900 group-hover:from-[#2A2B32]',
+    'absolute inset-y-0 right-0 w-8 z-10 bg-gradient-to-l from-gray-900 group-hover:from-gray-850',
   activeGradient:
     'absolute inset-y-0 right-0 w-8 z-10 bg-gradient-to-l from-gray-800',
 };
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 5e6d4e1..0cc6849 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -43,8 +43,10 @@ module.exports = {
           400: '#acacbe',
           500: '#8e8ea0',
           600: '#4b5563',
+          650: '#444654',
           700: '#40414f',
           800: '#343541',
+          850: '#2A2B32',
           900: '#202123',
         },
       },