Updated "Show all" button design

refs https://github.com/TryGhost/Product/issues/3936
This commit is contained in:
Djordje Vlaisavljevic 2023-10-10 15:59:55 +01:00
parent 839b1e1b43
commit 17c0e3ee60
4 changed files with 5 additions and 5 deletions

View File

@ -23,7 +23,7 @@ const Hint: React.FC<HintProps> = ({children, color, className, ...props}) => {
} }
className = clsx( className = clsx(
'mt-1 inline-block text-xs', 'mt-2 inline-block text-xs',
colorClassName, colorClassName,
className className
); );

View File

@ -43,7 +43,7 @@ const OptionalShowMore = ({showMore}: {showMore?: ShowMoreData}) => {
} }
return ( return (
<div className={`mt-1 flex items-center gap-2 text-xs text-green`}> <div className={`mt-2 flex items-center gap-2 text-sm font-bold text-green hover:text-green-400`}>
<button type='button' onClick={showMore.loadMore}>Show all</button> <button type='button' onClick={showMore.loadMore}>Show all</button>
</div> </div>
); );
@ -131,9 +131,9 @@ const Table: React.FC<TableProps> = ({header, children, borderTop, hint, hintSep
<div className="-mt-px"> <div className="-mt-px">
{(hintSeparator || pagination) && <Separator />} {(hintSeparator || pagination) && <Separator />}
<div className="flex flex-col-reverse items-start justify-between gap-1 pt-2 md:flex-row md:items-center md:gap-0 md:pt-0"> <div className="flex flex-col-reverse items-start justify-between gap-1 pt-2 md:flex-row md:items-center md:gap-0 md:pt-0">
<OptionalShowMore showMore={showMore} />
<Hint>{hint ?? ' '}</Hint> <Hint>{hint ?? ' '}</Hint>
<OptionalPagination pagination={pagination} /> <OptionalPagination pagination={pagination} />
<OptionalShowMore showMore={showMore} />
</div> </div>
</div>} </div>}
</div> </div>

View File

@ -70,7 +70,7 @@ const IncomingRecommendationItem: React.FC<{incomingRecommendation: IncomingReco
<TableCell className='hidden align-middle md:!visible md:!table-cell' onClick={showDetails}> <TableCell className='hidden align-middle md:!visible md:!table-cell' onClick={showDetails}>
{signups === 0 ? <span className="text-grey-500">-</span> : (<div className='-mt-px flex grow items-end gap-1'><span>{signups}</span><span className='-mb-px whitespace-nowrap text-sm lowercase text-grey-700'>{freeMembersLabel}</span></div>)} {signups === 0 ? <span className="text-grey-500">-</span> : (<div className='-mt-px flex grow items-end gap-1'><span>{signups}</span><span className='-mb-px whitespace-nowrap text-sm lowercase text-grey-700'>{freeMembersLabel}</span></div>)}
</TableCell> </TableCell>
{incomingRecommendation.recommending_back && <TableCell className='group-hover/table-row:visible md:invisible'><div className='text-right text-sm leading-[1.8] text-grey-700'>Recommending back</div></TableCell>} {incomingRecommendation.recommending_back && <TableCell className='group-hover/table-row:visible md:invisible'><div className='mt-1 whitespace-nowrap text-right text-sm leading-[1.8] text-grey-700'>Recommending back</div></TableCell>}
</TableRow> </TableRow>
); );
}; };

View File

@ -73,7 +73,7 @@ const RecommendationDescriptionForm: React.FC<Props<EditOrAddRecommendation | Re
<div className="-mx-8 flex items-center justify-center overflow-hidden border border-grey-100 bg-grey-50 px-7 py-4"> <div className="-mx-8 flex items-center justify-center overflow-hidden border border-grey-100 bg-grey-50 px-7 py-4">
<div className="w-full rounded bg-white py-3 shadow"> <div className="w-full rounded bg-white py-3 shadow">
<div className=""> <div className="">
<a className='flex items-center justify-between bg-white p-3' href={formState.url} rel="noopener noreferrer" target="_blank"> <a className='flex items-center justify-between bg-white px-5 py-3' href={formState.url} rel="noopener noreferrer" target="_blank">
<div className='flex flex-col gap-[2px]'> <div className='flex flex-col gap-[2px]'>
<div className="flex items-start gap-2"> <div className="flex items-start gap-2">
<RecommendationIcon {...formState} /> <RecommendationIcon {...formState} />