fix: update hard-coded or inconsistent colors (#191)

* fix: update inconsistent chat colors and adjust styles

* fix: update sidebar submenu svg color

* fix: update auth-layout incorrect background

* fix: update sidebar and search hover state color

Author: satnaing

src/components/search.tsx

@@ -15,7 +15,7 @@ export function Search({ className = '', placeholder = 'Search' }: Props) {
     <Button
       variant='outline'
       className={cn(
-        'bg-muted/25 text-muted-foreground hover:bg-muted/50 relative h-8 w-full flex-1 justify-start rounded-md text-sm font-normal shadow-none sm:pe-12 md:w-40 md:flex-none lg:w-56 xl:w-64',
+        'bg-muted/25 group text-muted-foreground hover:bg-accent relative h-8 w-full flex-1 justify-start rounded-md text-sm font-normal shadow-none sm:pe-12 md:w-40 md:flex-none lg:w-56 xl:w-64',
         className
       )}
       onClick={() => setOpen(true)}
@@ -26,7 +26,7 @@ export function Search({ className = '', placeholder = 'Search' }: Props) {
         size={16}
       />
       <span className='ms-3'>{placeholder}</span>
-      <kbd className='bg-muted pointer-events-none absolute end-[0.3rem] top-[0.3rem] hidden h-5 items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100 select-none sm:flex'>
+      <kbd className='bg-muted group-hover:bg-accent pointer-events-none absolute end-[0.3rem] top-[0.3rem] hidden h-5 items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100 select-none sm:flex'>
         <span className='text-xs'>⌘</span>K
       </kbd>
     </Button>

src/components/ui/sidebar.tsx

@@ -688,7 +688,7 @@ function SidebarMenuSubButton({
       data-size={size}
       data-active={isActive}
       className={cn(
-        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+        'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-inherit',
         'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
         size === 'sm' && 'text-xs',
         size === 'md' && 'text-sm',

src/features/auth/auth-layout.tsx

@@ -4,7 +4,7 @@ interface Props {
 
 export default function AuthLayout({ children }: Props) {
   return (
-    <div className='bg-primary-foreground container grid h-svh max-w-none items-center justify-center'>
+    <div className='container grid h-svh max-w-none items-center justify-center'>
       <div className='mx-auto flex w-full flex-col justify-center space-y-2 py-8 sm:w-[480px] sm:p-8'>
         <div className='mb-4 flex items-center justify-center'>
           <svg

src/features/chats/components/new-chat.tsx

@@ -54,8 +54,8 @@ export function NewChat({ users, onOpenChange, open }: Props) {
           <DialogTitle>New message</DialogTitle>
         </DialogHeader>
         <div className='flex flex-col gap-4'>
-          <div className='flex flex-wrap items-center gap-2'>
-            <span className='text-muted-foreground text-sm'>To:</span>
+          <div className='flex flex-wrap items-baseline-last gap-2'>
+            <span className='text-muted-foreground min-h-6 text-sm'>To:</span>
             {selectedUsers.map((user) => (
               <Badge key={user.id} variant='default'>
                 {user.fullName}
@@ -85,7 +85,7 @@ export function NewChat({ users, onOpenChange, open }: Props) {
                   <CommandItem
                     key={user.id}
                     onSelect={() => handleSelectUser(user)}
-                    className='flex items-center justify-between gap-2'
+                    className='hover:bg-accent hover:text-accent-foreground flex items-center justify-between gap-2'
                   >
                     <div className='flex items-center gap-2'>
                       <img
@@ -97,8 +97,8 @@ export function NewChat({ users, onOpenChange, open }: Props) {
                         <span className='text-sm font-medium'>
                           {user.fullName}
                         </span>
-                        <span className='text-muted-foreground text-xs'>
-                          {user.username} aa
+                        <span className='text-accent-foreground/70 text-xs'>
+                          {user.username}
                         </span>
                       </div>
                     </div>

src/features/chats/index.tsx

@@ -94,7 +94,12 @@ export default function Chats() {
                 </Button>
               </div>
 
-              <label className='border-input focus-within:ring-ring flex h-12 w-full items-center space-x-0 rounded-md border ps-2 focus-within:ring-1 focus-within:outline-hidden'>
+              <label
+                className={cn(
+                  'focus-within:ring-ring focus-within:ring-1 focus-within:outline-hidden',
+                  'border-border flex h-10 w-full items-center space-x-0 rounded-md border ps-2'
+                )}
+              >
                 <SearchIcon size={15} className='me-2 stroke-slate-500' />
                 <span className='sr-only'>Search</span>
                 <input
@@ -120,7 +125,8 @@ export default function Chats() {
                     <button
                       type='button'
                       className={cn(
-                        `hover:bg-secondary/75 -mx-1 flex w-full rounded-md px-2 py-2 text-start text-sm`,
+                        'group hover:bg-accent hover:text-accent-foreground',
+                        `flex w-full rounded-md px-2 py-2 text-start text-sm`,
                         selectedUser?.id === id && 'sm:bg-muted'
                       )}
                       onClick={() => {
@@ -137,7 +143,7 @@ export default function Chats() {
                           <span className='col-start-2 row-span-2 font-medium'>
                             {fullName}
                           </span>
-                          <span className='text-muted-foreground col-start-2 row-span-2 row-start-2 line-clamp-2 text-ellipsis'>
+                          <span className='text-muted-foreground group-hover:text-accent-foreground/90 col-start-2 row-span-2 row-start-2 line-clamp-2 text-ellipsis'>
                             {lastMsg}
                           </span>
                         </div>
@@ -154,12 +160,12 @@ export default function Chats() {
           {selectedUser ? (
             <div
               className={cn(
-                'bg-primary-foreground absolute inset-0 start-full z-50 hidden w-full flex-1 flex-col rounded-md border shadow-xs transition-all duration-200 sm:static sm:z-auto sm:flex',
+                'bg-background absolute inset-0 start-full z-50 hidden w-full flex-1 flex-col rounded-md border shadow-xs sm:static sm:z-auto sm:flex',
                 mobileSelectedUser && 'start-0 flex'
               )}
             >
               {/* Top Part */}
-              <div className='bg-secondary mb-1 flex flex-none justify-between rounded-t-md p-4 shadow-lg'>
+              <div className='bg-card mb-1 flex flex-none justify-between rounded-t-md p-4 shadow-lg'>
                 {/* Left */}
                 <div className='flex gap-3'>
                   <Button
@@ -229,15 +235,16 @@ export default function Chats() {
                                 className={cn(
                                   'chat-box max-w-72 px-3 py-2 break-words shadow-lg',
                                   msg.sender === 'You'
-                                    ? 'bg-primary/85 text-primary-foreground/75 self-end rounded-[16px_16px_0_16px]'
-                                    : 'bg-secondary self-start rounded-[16px_16px_16px_0]'
+                                    ? 'bg-primary/90 text-primary-foreground/75 self-end rounded-[16px_16px_0_16px]'
+                                    : 'bg-muted self-start rounded-[16px_16px_16px_0]'
                                 )}
                               >
                                 {msg.message}{' '}
                                 <span
                                   className={cn(
-                                    'text-muted-foreground mt-1 block text-xs font-light italic',
-                                    msg.sender === 'You' && 'text-end'
+                                    'text-foreground/75 mt-1 block text-xs font-light italic',
+                                    msg.sender === 'You' &&
+                                      'text-primary-foreground/85 text-end'
                                   )}
                                 >
                                   {format(msg.timestamp, 'h:mm a')}
@@ -251,7 +258,7 @@ export default function Chats() {
                   </div>
                 </div>
                 <form className='flex w-full flex-none gap-2'>
-                  <div className='border-input focus-within:ring-ring flex flex-1 items-center gap-2 rounded-md border px-2 py-1 focus-within:ring-1 focus-within:outline-hidden lg:gap-4'>
+                  <div className='border-input bg-card focus-within:ring-ring flex flex-1 items-center gap-2 rounded-md border px-2 py-1 focus-within:ring-1 focus-within:outline-hidden lg:gap-4'>
                     <div className='space-x-1'>
                       <Button
                         size='icon'
@@ -309,7 +316,7 @@ export default function Chats() {
           ) : (
             <div
               className={cn(
-                'bg-primary-foreground absolute inset-0 start-full z-50 hidden w-full flex-1 flex-col justify-center rounded-md border shadow-xs transition-all duration-200 sm:static sm:z-auto sm:flex'
+                'bg-card absolute inset-0 start-full z-50 hidden w-full flex-1 flex-col justify-center rounded-md border shadow-xs sm:static sm:z-auto sm:flex'
               )}
             >
               <div className='flex flex-col items-center space-y-6'>
@@ -322,10 +329,7 @@ export default function Chats() {
                     Send a message to start a chat.
                   </p>
                 </div>
-                <Button
-                  className='bg-blue-500 px-6 text-white hover:bg-blue-600'
-                  onClick={() => setCreateConversationDialog(true)}
-                >
+                <Button onClick={() => setCreateConversationDialog(true)}>
                   Send message
                 </Button>
               </div>

src/features/settings/components/sidebar-nav.tsx

@@ -73,8 +73,8 @@ export default function SidebarNav({
               className={cn(
                 buttonVariants({ variant: 'ghost' }),
                 pathname === item.href
-                  ? 'bg-muted hover:bg-muted'
-                  : 'hover:bg-transparent hover:underline',
+                  ? 'bg-muted hover:bg-accent'
+                  : 'hover:bg-accent hover:underline',
                 'justify-start'
               )}
             >