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:
@@ -41,7 +41,7 @@ describe('ProjectCard', () => {
|
|||||||
it('card has hover transition classes', () => {
|
it('card has hover transition classes', () => {
|
||||||
const { container } = render(<ProjectCard {...DEFAULT_PROPS} />);
|
const { container } = render(<ProjectCard {...DEFAULT_PROPS} />);
|
||||||
const card = container.firstChild as HTMLElement;
|
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', () => {
|
it('year badge has correct classes', () => {
|
||||||
|
|||||||
@@ -30,12 +30,7 @@ type Props = {
|
|||||||
*/
|
*/
|
||||||
export function ProjectCard({ title, year, description, tags, imageUrl }: Props) {
|
export function ProjectCard({ title, year, description, tags, imageUrl }: Props) {
|
||||||
return (
|
return (
|
||||||
<Card
|
<Card className={cn('group hover:shadow-brutal-xl transition-shadow duration-300')}>
|
||||||
className={cn(
|
|
||||||
'group hover:translate-x-[2px] hover:translate-y-[2px]',
|
|
||||||
'hover:shadow-[10px_10px_0_var(--blue)] transition-all duration-300',
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<div className="flex flex-row justify-between items-start mb-3">
|
<div className="flex flex-row justify-between items-start mb-3">
|
||||||
<CardTitle className="flex-1">{title}</CardTitle>
|
<CardTitle className="flex-1">{title}</CardTitle>
|
||||||
|
|||||||
@@ -53,7 +53,7 @@ export function SidebarNav({ items }: Props) {
|
|||||||
className={cn(
|
className={cn(
|
||||||
'block w-full text-left brutal-border bg-cream px-6 py-4 transition-all duration-300',
|
'block w-full text-left brutal-border bg-cream px-6 py-4 transition-all duration-300',
|
||||||
isActive(item)
|
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',
|
: 'opacity-40 shadow-none hover:opacity-60',
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
|
|||||||
Reference in New Issue
Block a user