refactor: update RepoFeedItem styles and structure for improved readability and consistency

Author: medyo

src/features/feed/components/feed.css

@@ -23,18 +23,29 @@
     display: flex;
     flex-direction: column;
     gap: 12px;
-    background: white;
+    background: var(--card-background-color);
     border-bottom: 12px solid green;
   }
   .feedItem .repo .title {
     font-size: 24px;
-    color: black;
+    color: var(--card-header-text-color);
     margin: 0;
     padding: 0;
   }
   .feedItem .repo .description {
-    font-size: 24px;
-    color: black;
+    font-size: 16px;
+    color: var(--primary-text-color);
+    margin: 0;
+    padding: 0 12px;
+    text-align: center;
+  }
+  .feedItem .repo .details {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+    font-size: 14px;
+  }
+  .feedItem .repo .details p {
     margin: 0;
     padding: 0;
   }

src/features/feed/components/feedItems/RepoFeedItem.tsx

@@ -25,24 +25,26 @@ export const RepoFeedItem = (props: BaseItemPropsType<FeedItemType>) => {
             item={item}
             fallbackImage={
               <div className="rowCover repo">
-                <SiGithub size={40} color="#000" />
+                <SiGithub size={40} />
                 <p className="title">{item.title}</p>
-                <p
-                  style={{
-                    textAlign: 'center',
-                    color: 'gray',
-                    margin: 0,
-                    padding: 0,
-                  }}>
-                  {item.description}
-                </p>
+                <p className="description">{item.description}</p>
+                <div className="details">
+                  <p>
+                    <VscStarFull className="rowItemIcon" /> {numberWithCommas(item.stars || 0)}{' '}
+                    stars
+                  </p>
+                  <p>
+                    <VscRepoForked className="rowItemIcon" /> {numberWithCommas(item?.forks || 0)}{' '}
+                    forks
+                  </p>
+                </div>
               </div>
             }
           />
 
           {listingMode === 'normal' && (
             <div className="rowDetails">
-              {numberWithCommas(item.stars || 0) && (
+              {item.stars && (
                 <span className="rowItem">
                   <VscStarFull className="rowItemIcon" /> {numberWithCommas(item.stars || 0)} stars
                 </span>