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 = {