Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-30 22:34:01 -05:00
Code Issues Activity

Updated Recommendation styling

Browse source
This commit is contained in:
Daniël van der Winden 2024-10-15 16:30:00 +02:00
parent d483bc85b1
commit d1078d8778
2 changed files with 22 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
apps/admin-x-settings/src/components/settings/growth/recommendations/IncomingRecommendationList.tsx
View file

@ -63,15 +63,21 @@ const IncomingRecommendationItem: React.FC<{incomingRecommendation: IncomingReco
</div>
</div>
</TableCell>
<TableCell className='hidden w-[1%] whitespace-nowrap !pr-1 pl-0 text-right align-middle md:!visible md:!table-cell' padding={false} onClick={showDetails}>
{(signups === 0) ? (<span className="text-grey-500 dark:text-grey-900">-</span>) : (<div className='-mt-px text-right'>
<span className='text-right'>{numberWithCommas(signups)}</span>
</div>)}
<TableCell className='hidden w-[1%] whitespace-nowrap !pr-1 pl-0 text-left align-middle md:!visible md:!table-cell' padding={false} onClick={showDetails}>
{(signups === 0) ? (
<span className="text-grey-500 dark:text-grey-900">-</span>
) : (
<div className='-mt-px text-right'>
<span className='text-left'>{numberWithCommas(signups)}</span>
</div>
)}
</TableCell>
<TableCell className='hidden w-[1%] whitespace-nowrap align-middle md:!visible md:!table-cell' onClick={showDetails}>
{(signups === 0) ? (null) : (<div className='-mt-px text-left'>
<span className='-mb-px inline-block min-w-[60px] whitespace-nowrap text-left text-sm lowercase text-grey-700'>{freeMembersLabel}</span>
</div>)}
{(signups === 0) ? (null) : (
<div className='-mt-px text-left'>
<span className='-mb-px inline-block min-w-[60px] whitespace-nowrap text-left text-sm lowercase text-grey-700'>{freeMembersLabel}</span>
</div>
)}
</TableCell>
{incomingRecommendation.recommending_back && <TableCell className='w-[1%] whitespace-nowrap group-hover/table-row:visible md:invisible'><div className='mt-1 whitespace-nowrap text-right text-sm text-grey-700'>Recommending</div></TableCell>}
</TableRow>

18
apps/admin-x-settings/src/components/settings/growth/recommendations/RecommendationList.tsx
View file

@ -35,7 +35,7 @@ const RecommendationItem: React.FC<{recommendation: Recommendation}> = ({recomme
const clicks = count === 1 ? 'click' : 'clicks';
return (
<TableRow className="group" testId='recommendation-list-item'>
<TableRow className='group' testId='recommendation-list-item'>
<TableCell onClick={showDetails}>
<div className='flex items-center gap-3 hover:cursor-pointer'>
<div className={`flex grow flex-col`}>
@ -46,21 +46,21 @@ const RecommendationItem: React.FC<{recommendation: Recommendation}> = ({recomme
</div>
</div>
</TableCell>
<TableCell className='hidden w-[1%] whitespace-nowrap !pr-1 pl-0 text-right align-middle md:!visible md:!table-cell' padding={false} onClick={showDetails}>
<TableCell className='hidden w-[1%] whitespace-nowrap !pr-1 pl-0 text-left align-middle md:!visible md:!table-cell' padding={false} onClick={showDetails}>
{(count === 0) ? (
<span className="text-grey-500 dark:text-grey-900">-</span>
) : (
<div className='text-right'>
<span>{numberWithCommas(count)}</span>
<div className='-mt-px text-right'>
<span className='text-left'>{numberWithCommas(count)}</span>
</div>
)}
</TableCell>
<TableCell className='hidden w-[1%] whitespace-nowrap align-middle md:!visible md:!table-cell' onClick={showDetails}>
<TableCell className='hidden w-[1%] whitespace-nowrap text-left align-middle md:!visible md:!table-cell' onClick={showDetails}>
{(count === 0) ? null : (
<div className='-mt-px'>
<span className='-mb-px inline-block whitespace-nowrap text-sm text-grey-700'>
<span className='lowercase'>{showSubscribers ? newMembers : clicks}</span>
<span className='opacity-0 transition-opacity duration-200 group-hover:opacity-100'> from you</span>
<div className='text-left'>
<span className='text-sm lowercase text-grey-700'>
<span>{showSubscribers ? newMembers : clicks}</span>
<span className='invisible group-hover:visible'> from you</span>
</span>
</div>
)}