better card hover effect

Author: cyanff

src/renderer/src/App.tsx

@@ -24,14 +24,14 @@ function App({ ddbProp }): JSX.Element {
       {/* Sidebar */}
       <Squircle cornerRadius={16} cornerSmoothing={1} className="relative flex h-full w-80 flex-col bg-neutral-900">
         {/* Chat Cards */}
-        <div className="scroll-secondary group my-4 grow overflow-auto scroll-smooth">
+        <div className="scroll-secondary group/chat-cards my-4 grow overflow-auto scroll-smooth">
           <div className="-mt-2 flex h-full max-h-full flex-col p-2">
             {ddb.chat_cards.map((card, idx) => {
               return <ChatCard key={idx} id={card.id} name={card.name} avatar={card.avatar} msg={card.msg} />;
             })}
           </div>
           {/* Scrollbar Hover Fade In/Out Hack*/}
-          <div className="absolute right-0 top-0 h-full w-2 bg-neutral-900 transition duration-300 ease-out group-hover:opacity-0"></div>
+          <div className="absolute right-0 top-0 h-full w-2 bg-neutral-900 transition duration-300 ease-out group-hover/chat-cards:opacity-0"></div>
         </div>
 
         {/* Utility Bar */}

src/renderer/src/components/ChatBar.tsx

@@ -32,13 +32,12 @@ export default function ChatBar({ userInput, setUserInput, typing, className, ..
     // TODO
   }
 
-  const base = "flex min-h-fit w-full shrink-0 rounded-full space-x-2  bg-[#4F4F4F] py-3 px-4";
   return (
-    <>
+    <div className={className}>
       <div className="flex h-fit w-fit items-center ">
         <Typing className="mb-1 ml-4 mt-1" name="Saku" typing={typing} />
       </div>
-      <div className={cn(base, className)}>
+      <div className="flex min-h-fit w-full shrink-0 space-x-2 rounded-full  bg-[#4F4F4F] px-4 py-3">
         <div className="h-fit w-fit">
           <button className="flex size-6 items-center justify-center text-neutral-400 hover:text-neutral-300">
             <WrenchScrewdriverIcon className="size-6 fill-neutral-400 transition duration-300 ease-out hover:fill-neutral-200" />
@@ -65,6 +64,6 @@ export default function ChatBar({ userInput, setUserInput, typing, className, ..
           <PaperAirplaneIcon className="h-7 w-7 fill-[#E04B93]  transition duration-300 ease-out hover:fill-pink-400  " />
         </button>
       </div>
-    </>
+    </div>
   );
 }

src/renderer/src/components/ChatCard.tsx

@@ -14,14 +14,14 @@ export default function ChatCard({ id, name, avatar, msg, className, ...rest }:
     <div
       {...rest}
       className={cn(
-        "duration-400 flex h-[70px] w-full cursor-pointer items-center space-x-2 rounded-md p-1 transition ease-out hover:bg-neutral-600",
+        "duration-400 group flex h-[70px] w-full cursor-pointer items-center space-x-3 rounded-md p-1 transition ease-out hover:bg-neutral-600",
         className
       )}
     >
-      <img className="h-12 w-12 shrink-0 rounded-full object-cover object-top" src={avatar} alt="avatar" />
-      <div className="flex h-full max-w-full flex-col justify-center">
-        <h3 className="line-clamp-1 font-normal text-gray-100">{name}</h3>
-        <p className="line-clamp-1 text-[15px]  text-gray-400">{msg}</p>
+      <img className="size-12 shrink-0 rounded-full object-cover object-top" src={avatar} alt="avatar" />
+      <div className="flex h-full max-w-full flex-col justify-center text-gray-400 group-hover:text-gray-100">
+        <h3 className="line-clamp-1 font-[550]">{name}</h3>
+        <p className="line-clamp-1 text-[15px]">{msg}</p>
       </div>
     </div>
   );