fix: align 'Show more' button in Projects page-#1329

frontend/src/components/ToggleButton.tsx

@@ -0,0 +1,37 @@
+import { Button } from '@heroui/button'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'
+
+interface ToggleButtonProps {
+  isExpanded: boolean
+  onToggle: () => void
+  showMoreText?: string
+  showLessText?: string
+}
+
+const ToggleButton = ({
+  isExpanded,
+  onToggle,
+  showMoreText = "Show more",
+  showLessText = "Show less",
+}: ToggleButtonProps) => (
+  <div className="mt-4 flex justify-start">
+    <Button
+      type="button"
+      disableAnimation
+      onPress={onToggle}
+      className="bg-blue-50 hover:bg-blue-100 dark:bg-blue-900/20 dark:hover:bg-blue-900/30 text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300 border border-blue-200 dark:border-blue-800 rounded-md px-4 py-2 font-medium transition-colors"
+    >
+      {isExpanded ? (
+        <>
+          {showLessText} <FontAwesomeIcon icon={faChevronUp} className="ml-2 text-sm" />
+        </>
+      ) : (
+        <>
+          {showMoreText} <FontAwesomeIcon icon={faChevronDown} className="ml-2 text-sm" />
+        </>
+      )}
+    </Button>
+  </div>
+)
+export default ToggleButton

frontend/src/components/ToggleableList.tsx

@@ -1,9 +1,9 @@
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core'
-import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'
+import type { IconDefinition } from "@fortawesome/fontawesome-svg-core"
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { Button } from '@heroui/button'
-import { useRouter } from 'next/navigation'
-import React, { useState } from 'react'
+import { useRouter } from "next/navigation"
+import type React from "react"
+import { useState } from "react"
+import ToggleButton from "components/ToggleButton"
 
 const ToggleableList = ({
   items,
@@ -45,21 +45,7 @@ const ToggleableList = ({
         ))}
       </div>
       {items.length > limit && (
-        <Button
-          disableAnimation
-          onPress={toggleShowAll}
-          className="mt-4 flex items-center bg-transparent text-blue-400 hover:underline"
-        >
-          {showAll ? (
-            <>
-              Show less <FontAwesomeIcon icon={faChevronUp} className="ml-1" />
-            </>
-          ) : (
-            <>
-              Show more <FontAwesomeIcon icon={faChevronDown} className="ml-1" />
-            </>
-          )}
-        </Button>
+        <ToggleButton isExpanded={showAll} onToggle={toggleShowAll} showMoreText="Show more" showLessText="Show less" />
       )}
     </div>
   )

frontend/src/components/TopContributorsList.tsx

@@ -1,7 +1,4 @@
-import { IconProp } from '@fortawesome/fontawesome-svg-core'
-import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { Button } from '@heroui/button'
+import type { IconProp } from "@fortawesome/fontawesome-svg-core"
 import Image from 'next/image'
 import Link from 'next/link'
 import { useState } from 'react'
@@ -10,6 +7,7 @@ import { capitalize } from 'utils/capitalize'
 import { getMemberUrl } from 'utils/urlFormatter'
 import AnchorTitle from 'components/AnchorTitle'
 import SecondaryCard from 'components/SecondaryCard'
+import ToggleButton from "components/ToggleButton"
 
 const TopContributorsList = ({
   contributors,
@@ -48,7 +46,7 @@ const TopContributorsList = ({
           <div key={index} className="overflow-hidden rounded-lg bg-gray-200 p-4 dark:bg-gray-700">
             <div className="flex w-full items-center gap-2">
               <Image
-                alt={item?.name || ''}
+                 alt={item?.name || ''}
                 className="rounded-full"
                 height={24}
                 src={`${item?.avatarUrl}&s=60`}
@@ -67,21 +65,12 @@ const TopContributorsList = ({
         ))}
       </div>
       {contributors.length > maxInitialDisplay && (
-        <Button
-          disableAnimation
-          onPress={toggleContributors}
-          className="mt-4 flex items-center bg-transparent text-blue-400 hover:underline"
-        >
-          {showAllContributors ? (
-            <>
-              Show less <FontAwesomeIcon icon={faChevronUp} className="ml-1" />
-            </>
-          ) : (
-            <>
-              Show more <FontAwesomeIcon icon={faChevronDown} className="ml-1" />
-            </>
-          )}
-        </Button>
+        <ToggleButton
+          isExpanded={showAllContributors}
+          onToggle={toggleContributors}
+          showMoreText="Show more"
+          showLessText="Show less"
+        />
       )}
     </SecondaryCard>
   )