mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-27 21:03:29 +03:00
Updated "Show all" button design
refs https://github.com/TryGhost/Product/issues/3936
This commit is contained in:
parent
839b1e1b43
commit
17c0e3ee60
@ -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
|
||||
);
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
@ -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} />
|
||||
|
Loading…
Reference in New Issue
Block a user