From 0d92ea989372c67126c3bd5fdddc380323a04ea4 Mon Sep 17 00:00:00 2001
From: IluaAir <ilya@air.ru>
Date: Fri, 14 Nov 2025 23:30:12 +0300
Subject: [PATCH] Refactor Card component layout and styles, adding an image
 background and improving badge styles for better user experience.

---
 taskncoffee-app/src/components/Card.jsx | 21 ++++++++++++---------
 taskncoffee-app/src/lib/styles.js       | 10 +++++-----
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/taskncoffee-app/src/components/Card.jsx b/taskncoffee-app/src/components/Card.jsx
index c7369aa..d91dd33 100644
--- a/taskncoffee-app/src/components/Card.jsx
+++ b/taskncoffee-app/src/components/Card.jsx
@@ -3,16 +3,19 @@ import { cn } from '@/lib/utils'
 
 export default function CardComponent() {
     return (
-        <div className={cn(styles.card.filled, "flex flex-col gap-2 min-sm:w-1/3 p-4 h-fit")}>
-            <h1 className={styles.text.h1}>Card</h1>
-            <div className="flex items-center gap-2">
-                <span className={styles.badge.low}>Low</span>
-                <span className={styles.badge.medium}>Medium</span>
-                <span className={styles.badge.high}>High</span>
-                <span className={styles.badge.critical}>Critical</span>
+        <div className={cn(styles.card.filled, "flex flex-col min-sm:w-1/3 min-h-[300px] overflow-hidden relative")}>
+            <img src="/images/a.jpg" alt="Card image" className="absolute -mx-6 -mt-6" />
+            <div className="flex flex-col gap-2 p-6 relative z-10 pt-[calc(16rem+1.5rem)]">
+                <h1 className={styles.text.h1}>Card</h1>
+                <div className="flex items-center gap-2">
+                    <span className={cn(styles.badge.low)}>Low</span>
+                    <span className={cn(styles.badge.medium)}>Medium</span>
+                    <span className={cn(styles.badge.high)}>High</span>
+                    <span className={cn(styles.badge.critical)}>Critical</span>
+                </div>
+                <p className={cn(styles.text.smallMuted, "flex-1 line-clamp-2")}>Card description</p>
+                <button className={cn(styles.button.primaryNeon, "w-1/5")}><span className={styles.text.neonBlue}>Complete</span></button>
             </div>
-            <p className={styles.text.smallMuted}>Card description</p>
-            <button className={cn(styles.button.primaryNeon, "w-1/4")}><span className={styles.text.neonBlue}>Complete</span></button>
         </div>
     )
 }
\ No newline at end of file
diff --git a/taskncoffee-app/src/lib/styles.js b/taskncoffee-app/src/lib/styles.js
index c528bc1..0310452 100644
--- a/taskncoffee-app/src/lib/styles.js
+++ b/taskncoffee-app/src/lib/styles.js
@@ -104,13 +104,13 @@ export const textStyles = {
 // Badge/Chip Styles
 export const badgeStyles = {
   // Default badge
-  default: "inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-primary/20 text-primary border border-primary/30",
+  default: "inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-primary/20 text-primary border border-primary/30 cursor-default select-none",
   
   // Priority badges
-  low: "inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-green-500/20 text-green-400 border border-green-500/30",
-  medium: "inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-yellow-500/20 text-yellow-400 border border-yellow-500/30",
-  high: "inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-orange-500/20 text-orange-400 border border-orange-500/30",
-  critical: "inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-red-500/20 text-red-400 border border-red-500/30",
+  low: "inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-green-500/20 text-green-400 border border-green-500/30 cursor-default select-none",
+  medium: "inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-yellow-500/20 text-yellow-400 border border-yellow-500/30 cursor-default select-none",
+  high: "inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-orange-500/20 text-orange-400 border border-orange-500/30 cursor-default select-none",
+  critical: "inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-red-500/20 text-red-400 border border-red-500/30 cursor-default select-none",
   
   // Status badges
   success: "inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-green-500/20 text-green-400 border border-green-500/30",