Skip to content
34 changes: 18 additions & 16 deletions frontend/src/components/ToggleableList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -44,22 +44,24 @@ const ToggleableList = ({
</button>
))}
</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>
{items.length > limit && (
<div className="mt-4 flex justify-start">
<Button
disableAnimation
onPress={toggleShowAll}
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"
>
{showAll ? (
<>
Show less <FontAwesomeIcon icon={faChevronUp} className="ml-2 text-sm" />
</>
) : (
<>
Show more <FontAwesomeIcon icon={faChevronDown} className="ml-2 text-sm" />
</>
)}
</Button>
</div>
)}
</div>
)
Expand Down
32 changes: 17 additions & 15 deletions frontend/src/components/TopContributorsList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -67,21 +67,23 @@ 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>
<div className="mt-4 flex justify-start">
<Button
disableAnimation
onPress={toggleContributors}
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"
>
{showAllContributors ? (
<>
Show less <FontAwesomeIcon icon={faChevronUp} className="ml-2 text-sm" />
</>
) : (
<>
Show more <FontAwesomeIcon icon={faChevronDown} className="ml-2 text-sm" />
</>
)}
</Button>
</div>
)}
</SecondaryCard>
)
Expand Down