julienfroidefond/towercontrol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance Card and TaskCard components with gradient backgrounds and hover effects

Browse Source 
- Updated `Card` component to include gradient backgrounds for different variants, improving visual depth.
- Modified `TaskCard` hover effects to include scaling and translation for a more dynamic user interaction experience.
This commit is contained in:
Julien Froidefond
2025-10-01 21:43:18 +02:00
parent a034e265fd
commit 0d20d602cb
2 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/ui/Card.tsx
View File

@@ -11,9 +11,9 @@ interface CardProps extends HTMLAttributes<HTMLDivElement> {
const Card = forwardRef<HTMLDivElement, CardProps>(
({ className, variant = 'default', shadow = 'sm', border = 'default', background = 'default', ...props }, ref) => {
const backgrounds = {
default: 'bg-[var(--card)]',
column: 'bg-[var(--card-column)]',
muted: 'bg-[var(--muted)]/10'
default: 'bg-[var(--card)] bg-gradient-to-b from-[var(--card)] to-[color-mix(in_srgb,var(--card)_80%,var(--background)_20%)]',
column: 'bg-[var(--card-column)] bg-gradient-to-b from-[var(--card-column)] to-[color-mix(in_srgb,var(--card-column)_80%,var(--background)_20%)]',
muted: 'bg-[var(--muted)]/10 bg-gradient-to-b from-[var(--muted)]/10 to-[color-mix(in_srgb,var(--muted)_4%,var(--background)_6%)]'
};
const borders = {

4
src/components/ui/TaskCard.tsx
View File

@@ -244,7 +244,7 @@ const TaskCard = forwardRef<HTMLDivElement, TaskCardProps>(
<Card
ref={ref}
className={cn(
'hover:border-[var(--primary)]/30 hover:shadow-lg hover:shadow-[var(--primary)]/10 transition-all duration-300 cursor-pointer group',
'hover:scale-[1.02] hover:shadow-lg hover:shadow-[var(--primary)]/10 hover:border-[var(--primary)]/20 hover:-translate-y-1 transition-all duration-300 ease-out cursor-pointer group',
isDragging && 'opacity-50 rotate-3 scale-105',
(status === 'done' || status === 'archived') && 'opacity-60',
status === 'freeze' && 'opacity-60 bg-gradient-to-br from-transparent via-[var(--muted)]/10 to-transparent bg-[length:4px_4px] bg-[linear-gradient(45deg,transparent_25%,var(--border)_25%,var(--border)_50%,transparent_50%,transparent_75%,var(--border)_75%,var(--border))]',
@@ -335,7 +335,7 @@ const TaskCard = forwardRef<HTMLDivElement, TaskCardProps>(
<Card
ref={ref}
className={cn(
'hover:border-[var(--primary)]/30 hover:shadow-lg hover:shadow-[var(--primary)]/10 transition-all duration-300 cursor-pointer group',
'hover:scale-[1.02] hover:shadow-lg hover:shadow-[var(--primary)]/10 hover:border-[var(--primary)]/20 hover:-translate-y-1 transition-all duration-300 ease-out cursor-pointer group',
isDragging && 'opacity-50 rotate-3 scale-105',
(status === 'done' || status === 'archived') && 'opacity-60',
status === 'freeze' && 'opacity-60 bg-gradient-to-br from-transparent via-[var(--muted)]/10 to-transparent bg-[length:4px_4px] bg-[linear-gradient(45deg,transparent_25%,var(--border)_25%,var(--border)_50%,transparent_50%,transparent_75%,var(--border)_75%,var(--border))]',