Fixed issue: 1082 Fixing the top contributors card to make it similar to recent issues card.

frontend/__tests__/e2e/pages/Home.spec.ts

@@ -50,9 +50,8 @@ test.describe('Home Page', () => {
   test('should have top contributors', async ({ page }) => {
     await expect(page.getByRole('heading', { name: 'Top Contributors' })).toBeVisible()
     await expect(page.getByRole('img', { name: 'Contributor 1' })).toBeVisible()
-    await expect(page.getByRole('link', { name: 'Project 21' })).toBeVisible()
-    await page.getByText('Contributor 1').click()
-    expect(page.url()).toContain('community/users/contributor1')
+    await expect(page.getByText('Contributor 1')).toBeVisible()
+    await expect(page.getByText('Project 21')).toBeVisible()
   })
 
   test('should have recent issues', async ({ page }) => {

frontend/__tests__/unit/pages/ChapterDetails.test.tsx

@@ -87,7 +87,7 @@ describe('chapterDetailsPage Component', () => {
       ...mockChapterDetailsData,
       topContributors: [
         {
-          name: 'user1',
+          name: 'Contributor 1',
           avatarUrl: 'https://example.com/avatar1.jpg',
           contributionsCount: 30,
         },
@@ -100,7 +100,7 @@ describe('chapterDetailsPage Component', () => {
     render(<ChapterDetailsPage />)
 
     await waitFor(() => {
-      expect(screen.getByText('user1')).toBeInTheDocument()
+      expect(screen.getByText('Contributor 1')).toBeInTheDocument()
     })
   })
 })

frontend/__tests__/unit/pages/CommitteeDetails.test.tsx

@@ -80,7 +80,7 @@ describe('CommitteeDetailsPage Component', () => {
           {
             avatarUrl: 'https://example.com/avatar1.jpg',
             contributionsCount: 30,
-            login: 'user1',
+            login: 'Contributor 1',
             name: '',
             __typename: 'UserNode',
           },
@@ -94,7 +94,7 @@ describe('CommitteeDetailsPage Component', () => {
     render(<CommitteeDetailsPage />)
 
     await waitFor(() => {
-      expect(screen.getByText('user1')).toBeInTheDocument()
+      expect(screen.getByText('Contributor 1')).toBeInTheDocument()
     })
   })
 

frontend/src/components/CardDetailsPage.tsx

@@ -87,7 +87,7 @@ const DetailsCard = ({
             {topics.length !== 0 && <ToggleableList items={topics} label="Topics" />}
           </div>
         )}
-        <TopContributors contributors={topContributors} maxInitialDisplay={6} />
+        <TopContributors contributors={topContributors} type="contributor" maxInitialDisplay={6} />
         {(type === 'project' || type === 'repository') && (
           <div className="grid-cols-2 gap-4 lg:grid">
             <ItemCardList

frontend/src/components/ToggleContributors.tsx

@@ -2,18 +2,22 @@ import { Button } from '@chakra-ui/react'
 import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { useState } from 'react'
+
 import { useNavigate } from 'react-router-dom'
 import { TopContributorsTypeGraphql } from 'types/contributor'
+import { capitalize } from 'utils/capitalize'
 const TopContributors = ({
   contributors,
   label = 'Top Contributors',
   maxInitialDisplay = 6,
   className = '',
+  type,
 }: {
   contributors: TopContributorsTypeGraphql[]
   label?: string
   maxInitialDisplay?: number
   className?: string
+  type: string
 }) => {
   const navigate = useNavigate()
   const [showAllContributors, setShowAllContributors] = useState(false)
@@ -30,44 +34,31 @@ const TopContributors = ({
   return (
     <div className={`mb-8 rounded-lg bg-gray-100 p-6 shadow-md dark:bg-gray-800 ${className}`}>
       <h2 className="mb-4 text-2xl font-semibold">{label}</h2>
-      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3">
-        {displayContributors.map((contributor, index) => (
-          <div
+      <div className="grid gap-x-5 sm:grid-cols-2 md:grid-cols-3">
+        {displayContributors.map((item, index) => (
+          <button
             key={index}
-            className="flex cursor-pointer items-center space-x-3 rounded-lg p-3 hover:bg-gray-200 dark:hover:bg-gray-700"
+            onClick={() => navigate(`/community/users/${item.login}`)}
+            className="mb-4 w-full rounded-lg bg-gray-200 p-4 dark:bg-gray-700"
           >
-            <img
-              src={`${contributor?.avatarUrl}&s=60`}
-              alt={contributor.name || contributor.login}
-              className="mr-3 h-10 w-10 rounded-full"
-            />
-            <div>
-              <button
-                onClick={() => navigate(`/community/users/${contributor.login}`)}
-                className="m-0 border-none bg-transparent p-0 font-semibold text-blue-600 hover:underline dark:text-sky-400"
-                style={{ all: 'unset', cursor: 'pointer' }}
-              >
-                {contributor.name || contributor.login}
-              </button>
-
-              {contributor?.projectName ? (
-                <p className="text-sm text-gray-600 dark:text-gray-400">
-                  <a
-                    href={contributor.projectUrl}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="text-blue-600 hover:underline dark:text-sky-400"
-                  >
-                    {contributor.projectName}
-                  </a>
-                </p>
-              ) : (
-                <p className="text-sm text-gray-600 dark:text-gray-400">
-                  {contributor?.contributionsCount} contributions
-                </p>
-              )}
+            <div className="flex w-full flex-col justify-between">
+              <div className="flex w-full items-center gap-2">
+                <img src={item?.avatarUrl} alt={item?.name} className="h-6 w-6 rounded-full" />
+                <h3 className="overflow-hidden text-ellipsis whitespace-nowrap font-semibold text-blue-500">
+                  {capitalize(item.name) || capitalize(item.login)}
+                </h3>
+              </div>
+              <div className="ml-0.5 w-full">
+                <div className="mt-2 flex flex-shrink-0 items-center text-sm text-gray-600 dark:text-gray-300">
+                  <span className="overflow-hidden text-ellipsis whitespace-nowrap">
+                    {type === 'contributor'
+                      ? `${item.contributionsCount ?? 0} contributions`
+                      : item.projectName}
+                  </span>
+                </div>
+              </div>
             </div>
-          </div>
+          </button>
         ))}
       </div>
       {contributors.length > maxInitialDisplay && (

frontend/src/pages/Home.tsx

@@ -249,7 +249,7 @@ export default function Home() {
             }}
           />
         </div>
-        <TopContributors contributors={data.topContributors} maxInitialDisplay={6} />
+        <TopContributors contributors={data.topContributors} type="company" maxInitialDisplay={9} />
         <div className="grid-cols-2 gap-4 lg:grid">
           <ItemCardList
             title="Recent Issues"