From ecf6cc27d6885d4be00a543139224422305512a8 Mon Sep 17 00:00:00 2001
From: Fred <fred@nextchat.dev>
Date: Tue, 30 Apr 2024 18:58:19 +0800
Subject: [PATCH 1/3] style: add transition

---
 app/components/ActionsBar/index.tsx            | 4 +++-
 app/containers/Chat/components/SessionItem.tsx | 1 +
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/app/components/ActionsBar/index.tsx b/app/components/ActionsBar/index.tsx
index 608fc379b..4aca4fe57 100644
--- a/app/components/ActionsBar/index.tsx
+++ b/app/components/ActionsBar/index.tsx
@@ -103,7 +103,9 @@ export default function ActionsBar(props: ActionsBarProps) {
               selected === action.id
                 ? `!bg-actions-bar-btn-default ${action.activeClassName}`
                 : "bg-transparent"
-            } rounded-md items-center ${action.className}`}
+            } rounded-md items-center ${
+              action.className
+            } transition duration-300 ease-in-out`}
             onClick={handlerClick(action)}
           >
             {selected === action.id ? activeIcon : inactiveIcon}
diff --git a/app/containers/Chat/components/SessionItem.tsx b/app/containers/Chat/components/SessionItem.tsx
index d93f7235a..73fc3d597 100644
--- a/app/containers/Chat/components/SessionItem.tsx
+++ b/app/containers/Chat/components/SessionItem.tsx
@@ -46,6 +46,7 @@ export default function SessionItem(props: {
               group/chat-menu-list relative flex p-3 items-center gap-2 self-stretch rounded-md mb-2 
               border 
               bg-chat-menu-session-unselected border-chat-menu-session-unselected cursor-pointer
+              transition-colors duration-300 ease-in-out
               ${
                 props.selected &&
                 (currentPath === Path.Chat || currentPath === Path.Home)

From 15d6ed252ff49abec7cb5972281037759ac96645 Mon Sep 17 00:00:00 2001
From: Fred <fred@nextchat.dev>
Date: Tue, 30 Apr 2024 19:02:18 +0800
Subject: [PATCH 2/3] style: add transition

---
 app/components/Input/index.tsx  | 2 +-
 app/components/Select/index.tsx | 2 +-
 app/components/Switch/index.tsx | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/components/Input/index.tsx b/app/components/Input/index.tsx
index 04f86a826..9e28e886a 100644
--- a/app/components/Input/index.tsx
+++ b/app/components/Input/index.tsx
@@ -57,7 +57,7 @@ export default function Input(props: CommonInputProps & InputProps) {
 
   return (
     <div
-      className={` group/input w-[100%] rounded-chat-input bg-input flex gap-3 items-center px-3 py-2 ${className} hover:bg-select-hover ${inputClassName}`}
+      className={` group/input w-[100%] rounded-chat-input bg-input transition-colors duration-300 ease-in-out flex gap-3 items-center px-3 py-2 ${className} hover:bg-select-hover ${inputClassName}`}
     >
       <input
         {...rest}
diff --git a/app/components/Select/index.tsx b/app/components/Select/index.tsx
index fe8581b77..50c60d1de 100644
--- a/app/components/Select/index.tsx
+++ b/app/components/Select/index.tsx
@@ -94,7 +94,7 @@ const Select = <Value extends number | string>(props: SearchProps<Value>) => {
       className={selectClassName}
     >
       <div
-        className={`flex items-center gap-3 py-2 px-3 bg-select rounded-action-btn font-time text-sm-title  cursor-pointer hover:bg-select-hover`}
+        className={`flex items-center gap-3 py-2 px-3 bg-select rounded-action-btn font-time text-sm-title  cursor-pointer hover:bg-select-hover transition duration-300 ease-in-out`}
         ref={contentRef}
       >
         <div className={`flex items-center gap-2 flex-1`}>
diff --git a/app/components/Switch/index.tsx b/app/components/Switch/index.tsx
index 5f88c3f43..395e58bb8 100644
--- a/app/components/Switch/index.tsx
+++ b/app/components/Switch/index.tsx
@@ -15,7 +15,7 @@ export default function Switch(props: SwitchProps) {
     <RadixSwitch.Root
       checked={value}
       onCheckedChange={onChange}
-      className={` cursor-pointer flex w-switch h-switch p-0.5 box-content rounded-md ${switchClassName} ${
+      className={` cursor-pointer flex w-switch h-switch p-0.5 box-content transition-colors duration-300 ease-in-out rounded-md ${switchClassName} ${
         value
           ? "bg-switch-checked justify-end"
           : "bg-switch-unchecked justify-start"

From 4d5a9476b649489b019c676889fb481095854db1 Mon Sep 17 00:00:00 2001
From: Fred <fred@nextchat.dev>
Date: Tue, 30 Apr 2024 19:04:17 +0800
Subject: [PATCH 3/3] style: add transition

---
 app/containers/Chat/components/ChatActions.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/containers/Chat/components/ChatActions.tsx b/app/containers/Chat/components/ChatActions.tsx
index f6bfeddfc..d8f3aeef1 100644
--- a/app/containers/Chat/components/ChatActions.tsx
+++ b/app/containers/Chat/components/ChatActions.tsx
@@ -230,7 +230,7 @@ export function ChatActions(props: {
               placement={ind ? "t" : "lt"}
             >
               <div
-                className=" cursor-pointer h-[32px] w-[32px] flex items-center justify-center hover:bg-chat-actions-btn-hovered hover:rounded-action-btn"
+                className=" cursor-pointer h-[32px] w-[32px] flex items-center transition duration-300 ease-in-out justify-center hover:bg-chat-actions-btn-hovered hover:rounded-action-btn"
                 onClick={act.onClick}
               >
                 {act.icon}
@@ -250,7 +250,7 @@ export function ChatActions(props: {
               placement={ind === arr.length - 1 ? "rt" : "t"}
             >
               <div
-                className=" cursor-pointer h-[32px] w-[32px] flex items-center justify-center hover:bg-chat-actions-btn-hovered hover:rounded-action-btn"
+                className=" cursor-pointer h-[32px] w-[32px] flex items-center transition duration-300 ease-in-out justify-center hover:bg-chat-actions-btn-hovered hover:rounded-action-btn"
                 onClick={act.onClick}
               >
                 {act.icon}