refactor: use shadow theme tokens, remove ProjectCard translate-hover

Replace inline var(--blue) arbitrary shadow values with typed theme
tokens (shadow-brutal-xl, shadow-brutal-2xl). Remove translate on
ProjectCard hover — shadow-only interaction is less distracting in
a dense grid layout.
This commit is contained in:
Ilia Mashkov
2026-05-16 19:04:37 +03:00
parent b8b5e65497
commit 76f5b269f8
3 changed files with 3 additions and 8 deletions
@@ -41,7 +41,7 @@ describe('ProjectCard', () => {
it('card has hover transition classes', () => {
const { container } = render(<ProjectCard {...DEFAULT_PROPS} />);
const card = container.firstChild as HTMLElement;
expect(card).toHaveClass('group', 'transition-all', 'duration-300');
expect(card).toHaveClass('group', 'transition-shadow', 'duration-300');
});
it('year badge has correct classes', () => {
@@ -30,12 +30,7 @@ type Props = {
*/
export function ProjectCard({ title, year, description, tags, imageUrl }: Props) {
return (
<Card
className={cn(
'group hover:translate-x-[2px] hover:translate-y-[2px]',
'hover:shadow-[10px_10px_0_var(--blue)] transition-all duration-300',
)}
>
<Card className={cn('group hover:shadow-brutal-xl transition-shadow duration-300')}>
<CardHeader>
<div className="flex flex-row justify-between items-start mb-3">
<CardTitle className="flex-1">{title}</CardTitle>
+1 -1
View File
@@ -53,7 +53,7 @@ export function SidebarNav({ items }: Props) {
className={cn(
'block w-full text-left brutal-border bg-cream px-6 py-4 transition-all duration-300',
isActive(item)
? 'shadow-[12px_12px_0_var(--blue)] opacity-100 translate-x-0'
? 'shadow-brutal-2xl opacity-100 translate-x-0'
: 'opacity-40 shadow-none hover:opacity-60',
)}
>