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', () => {

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>