chore(ui): linting

Author: kbzowski

ui/src/components/notifications/NotificationCard.tsx

@@ -30,9 +30,9 @@ export const NotificationCard = memo(function NotificationCard({
 	return (
 		<Card
 			className={cn(
-				"cursor-pointer transition-all hover:bg-accent/50",
-				!notification.read ? "border-l-8 bg-accent/30" : "border-l-4",
+				"cursor-pointer transition-colors hover:bg-accent/50 border-l-4",
 				borderColor,
+				!notification.read && "bg-accent/20",
 			)}
 			onClick={handleClick}
 		>

ui/src/components/notifications/NotificationHeader.tsx

@@ -35,10 +35,12 @@ export const NotificationHeader = memo(function NotificationHeader({
 	return (
 		<div className="flex items-start justify-between gap-3">
 			<div className="flex items-center gap-2 min-w-0">
-				<h3 className={cn(
-					"text-lg truncate transition-all",
-					!read ? "font-bold" : "font-semibold"
-				)}>
+				<h3
+					className={cn(
+						"text-lg truncate transition-all",
+						!read ? "font-bold" : "font-semibold",
+					)}
+				>
 					{title}
 				</h3>
 			</div>