From 531de6899e921bef093d7178e419bce5af819ba8 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Mon, 18 May 2026 13:20:47 +0300
Subject: [PATCH] refactor: ProjectCard sm button, left-border year matching
 ExperienceCard style

---
 .../project/ui/ProjectCard/ProjectCard.test.tsx      | 12 ++++++++++--
 src/entities/project/ui/ProjectCard/ProjectCard.tsx  |  4 ++--
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/entities/project/ui/ProjectCard/ProjectCard.test.tsx b/src/entities/project/ui/ProjectCard/ProjectCard.test.tsx
index 306a255..266222d 100644
--- a/src/entities/project/ui/ProjectCard/ProjectCard.test.tsx
+++ b/src/entities/project/ui/ProjectCard/ProjectCard.test.tsx
@@ -77,9 +77,17 @@ describe('ProjectCard', () => {
       expect(screen.getByRole('heading', { level: 3 })).toHaveTextContent('My Project');
     });
 
-    it('year has Badge default classes', () => {
+    it('year has period-style left border', () => {
       render(<ProjectCard {...DEFAULT_PROPS} />);
-      expect(screen.getByText('2024')).toHaveClass('brutal-border', 'bg-blue', 'text-cream');
+      const year = screen.getByText('2024');
+      expect(year.tagName).toBe('P');
+      expect(year).toHaveClass('brutal-border-left', 'text-sm');
+    });
+
+    it('View Project button uses sm size', () => {
+      render(<ProjectCard {...DEFAULT_PROPS} />);
+      const btn = screen.getByRole('button', { name: /view project/i });
+      expect(btn).toHaveClass('px-4', 'py-2', 'text-sm');
     });
 
     it('tags are xs outline badges', () => {
diff --git a/src/entities/project/ui/ProjectCard/ProjectCard.tsx b/src/entities/project/ui/ProjectCard/ProjectCard.tsx
index e0d708c..f92267a 100644
--- a/src/entities/project/ui/ProjectCard/ProjectCard.tsx
+++ b/src/entities/project/ui/ProjectCard/ProjectCard.tsx
@@ -36,7 +36,7 @@ export function ProjectCard({ title, year, description, tags, imageUrl }: Props)
       <CardSidebar
         sidebar={
           <div className="flex flex-col gap-4">
-            <Badge>{year}</Badge>
+            <p className="text-sm font-medium brutal-border-left pl-3">{year}</p>
             {tags.length > 0 && (
               <div className="flex flex-wrap gap-2">
                 {tags.map((tag) => (
@@ -46,7 +46,7 @@ export function ProjectCard({ title, year, description, tags, imageUrl }: Props)
                 ))}
               </div>
             )}
-            <Button variant="primary" className="w-full">
+            <Button variant="primary" size="sm" className="w-full">
               View Project
             </Button>
           </div>