Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-06 22:40:14 -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>
</div> </div>
</TableCell> </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}>
{(signups === 0) ? (<span className="text-grey-500 dark:text-grey-900">-</span>) : (<div className='-mt-px text-right'> {(signups === 0) ? (
<span className='text-right'>{numberWithCommas(signups)}</span> <span className="text-grey-500 dark:text-grey-900">-</span>
</div>)} ) : (
<div className='-mt-px text-right'>
<span className='text-left'>{numberWithCommas(signups)}</span>
</div>
)}
</TableCell> </TableCell>
<TableCell className='hidden w-[1%] whitespace-nowrap align-middle md:!visible md:!table-cell' onClick={showDetails}> <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'> {(signups === 0) ? (null) : (
<span className='-mb-px inline-block min-w-[60px] whitespace-nowrap text-left text-sm lowercase text-grey-700'>{freeMembersLabel}</span> <div className='-mt-px text-left'>
</div>)} <span className='-mb-px inline-block min-w-[60px] whitespace-nowrap text-left text-sm lowercase text-grey-700'>{freeMembersLabel}</span>
</div>
)}
</TableCell> </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>} {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> </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'; const clicks = count === 1 ? 'click' : 'clicks';
return ( return (
<TableRow className="group" testId='recommendation-list-item'> <TableRow className='group' testId='recommendation-list-item'>
<TableCell onClick={showDetails}> <TableCell onClick={showDetails}>
<div className='flex items-center gap-3 hover:cursor-pointer'> <div className='flex items-center gap-3 hover:cursor-pointer'>
<div className={`flex grow flex-col`}> <div className={`flex grow flex-col`}>
@ -46,21 +46,21 @@ const RecommendationItem: React.FC<{recommendation: Recommendation}> = ({recomme
</div> </div>
</div> </div>
</TableCell> </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) ? ( {(count === 0) ? (
<span className="text-grey-500 dark:text-grey-900">-</span> <span className="text-grey-500 dark:text-grey-900">-</span>
) : ( ) : (
<div className='text-right'> <div className='-mt-px text-right'>
<span>{numberWithCommas(count)}</span> <span className='text-left'>{numberWithCommas(count)}</span>
</div> </div>
)} )}
</TableCell> </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 : ( {(count === 0) ? null : (
<div className='-mt-px'> <div className='text-left'>
<span className='-mb-px inline-block whitespace-nowrap text-sm text-grey-700'> <span className='text-sm lowercase text-grey-700'>
<span className='lowercase'>{showSubscribers ? newMembers : clicks}</span> <span>{showSubscribers ? newMembers : clicks}</span>
<span className='opacity-0 transition-opacity duration-200 group-hover:opacity-100'> from you</span> <span className='invisible group-hover:visible'> from you</span>
</span> </span>
</div> </div>
)} )}