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(
'mt-1 inline-block text-xs',
'mt-2 inline-block text-xs',
colorClassName,
className
);

View File

@ -43,7 +43,7 @@ const OptionalShowMore = ({showMore}: {showMore?: ShowMoreData}) => {
}
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>
</div>
);
@ -131,9 +131,9 @@ const Table: React.FC<TableProps> = ({header, children, borderTop, hint, hintSep
<div className="-mt-px">
{(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">
<OptionalShowMore showMore={showMore} />
<Hint>{hint ?? ' '}</Hint>
<OptionalPagination pagination={pagination} />
<OptionalShowMore showMore={showMore} />
</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}>
{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>
{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>
);
};

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="w-full rounded bg-white py-3 shadow">
<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 items-start gap-2">
<RecommendationIcon {...formState} />