fix(ui): correct color mapping in sidebar and chat-input components (iflabx#233)

Author: lyzno1

components/chat-input/button.tsx

@@ -41,7 +41,7 @@ export const ChatButton = ({
         disabled={disabled}
         className={cn(
           'flex h-8 w-8 items-center justify-center rounded-lg',
-          'border border-gray-200 text-gray-600 hover:bg-gray-50 dark:border-stone-600 dark:bg-stone-600/30 dark:text-stone-300 dark:hover:bg-stone-700/50',
+          'border border-gray-200 text-gray-600 hover:bg-gray-50 dark:border-stone-600 dark:bg-stone-600/30 dark:text-gray-100 dark:hover:bg-stone-600',
           'bg-transparent',
           'cursor-pointer',
           className
@@ -63,7 +63,7 @@ export const ChatButton = ({
         'flex h-8 w-8 items-center justify-center rounded-full',
         forceActiveStyle || !disabled
           ? 'bg-black text-white hover:bg-gray-800 dark:bg-stone-900 dark:hover:bg-stone-800'
-          : 'bg-gray-200 text-gray-400 dark:bg-stone-600 dark:text-stone-300',
+          : 'bg-gray-200 text-gray-400 dark:bg-stone-600 dark:text-gray-100',
         'cursor-pointer shadow-sm',
         className
       )}

components/chat-input/container.tsx

@@ -62,7 +62,7 @@ export const ChatContainer = ({
       <div
         className={cn(
           'flex flex-col rounded-2xl',
-          'bg-white dark:bg-stone-800',
+          'bg-white dark:bg-stone-700',
           'shadow-[0_0_15px_rgba(0,0,0,0.1)]'
         )}
       >

components/sidebar/sidebar-container.tsx

@@ -83,14 +83,13 @@ export function SidebarContainer() {
         isMobile ? 'z-50' : 'z-30',
 
         isExpanded
-          ? 'bg-stone-100/80 dark:bg-stone-800/80'
-          : 'bg-stone-50/80 dark:bg-stone-900/80',
-        'backdrop-blur-sm',
+          ? 'bg-stone-200 dark:bg-stone-700'
+          : 'bg-stone-100 dark:bg-stone-800',
         'border-r-stone-300/60 dark:border-r-stone-700/50',
         'text-stone-700 dark:text-stone-300',
         !isExpanded &&
           !isMobile &&
-          'hover:bg-stone-200 dark:hover:bg-stone-700',
+          'hover:bg-stone-300 dark:hover:bg-stone-600',
         'select-none',
         (!isExpanded && !isMobile) || (isAnimating && !isMobile)
           ? 'cursor-e-resize'