open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

addressed James's comments

Browse Source
This commit is contained in:
ingawei 2022-07-21 18:17:43 -07:00
parent 706ca5a561
commit 6f6123eb2c
2 changed files with 77 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
web/components/manalink-card.tsx
View File

@ -27,11 +27,10 @@ export function ManalinkCard(props: {
const { expiresTime, maxUses, uses, amount, message } = info const { expiresTime, maxUses, uses, amount, message } = info
return ( return (
<Col> <Col>
<Col> <Col
<div
className={clsx( className={clsx(
className, className,
'min-h-20 group flex flex-col rounded-xl bg-gradient-to-br shadow-lg transition-all', 'min-h-20 group rounded-lg bg-gradient-to-br drop-shadow-sm transition-all',
getManalinkGradient(info.amount) getManalinkGradient(info.amount)
)} )}
> >
@ -55,8 +54,7 @@ export function ManalinkCard(props: {
)} )}
src="/logo-white.svg" src="/logo-white.svg"
/> />
<Row className="rounded-b-xl bg-white p-4"> <Row className="rounded-b-lg bg-white p-4">
<Col>
<div <div
className={clsx( className={clsx(
'mb-1 text-xl text-indigo-500', 'mb-1 text-xl text-indigo-500',
@ -65,11 +63,9 @@ export function ManalinkCard(props: {
> >
{formatMoney(amount)} {formatMoney(amount)}
</div> </div>
</Col>
</Row> </Row>
</div>
</Col> </Col>
<div className="text-md mx-4 mt-2 mb-4 text-gray-500">{message}</div> <div className="text-md mt-2 mb-4 text-gray-500">{message}</div>
</Col> </Col>
) )
} }
@ -81,7 +77,7 @@ export function ManalinkCardFromView(props: {
}) { }) {
const { className, link, highlightedSlug } = props const { className, link, highlightedSlug } = props
const { message, amount, expiresTime, maxUses, claims } = link const { message, amount, expiresTime, maxUses, claims } = link
const [details, setDetails] = useState(false) const [showDetails, setShowDetails] = useState(false)
return ( return (
<Col> <Col>
@ -92,14 +88,14 @@ export function ManalinkCardFromView(props: {
link.slug === highlightedSlug ? 'shadow-md shadow-indigo-400' : '' link.slug === highlightedSlug ? 'shadow-md shadow-indigo-400' : ''
)} )}
> >
<div <Col
className={clsx( className={clsx(
'relative flex flex-col rounded-t-lg bg-gradient-to-br transition-all', 'relative rounded-t-lg bg-gradient-to-br transition-all',
getManalinkGradient(link.amount) getManalinkGradient(link.amount)
)} )}
onClick={() => setDetails(!details)} onClick={() => setShowDetails(!showDetails)}
> >
{details && ( {showDetails && (
<ClaimsList <ClaimsList
className="absolute h-full w-full bg-white opacity-90" className="absolute h-full w-full bg-white opacity-90"
link={link} link={link}
@ -121,9 +117,8 @@ export function ManalinkCardFromView(props: {
className={clsx('my-auto block w-1/3 select-none self-center py-3')} className={clsx('my-auto block w-1/3 select-none self-center py-3')}
src="/logo-white.svg" src="/logo-white.svg"
/> />
</div> </Col>
<Col className="w-full rounded-b-lg bg-white px-4 py-2 text-lg"> <Row className="relative w-full gap-1 rounded-b-lg bg-white px-4 py-2 text-lg">
<Row className="relative gap-1">
<div <div
className={clsx( className={clsx(
'my-auto mb-1 w-full', 'my-auto mb-1 w-full',
@ -141,10 +136,10 @@ export function ManalinkCardFromView(props: {
copyPayload={getManalinkUrl(link.slug)} copyPayload={getManalinkUrl(link.slug)}
/> />
<button <button
onClick={() => setDetails(!details)} onClick={() => setShowDetails(!showDetails)}
className={clsx( className={clsx(
contractDetailsButtonClassName, contractDetailsButtonClassName,
details showDetails
? 'bg-gray-200 text-gray-600 hover:bg-gray-200 hover:text-gray-600' ? 'bg-gray-200 text-gray-600 hover:bg-gray-200 hover:text-gray-600'
: '' : ''
)} )}
@ -153,8 +148,7 @@ export function ManalinkCardFromView(props: {
</button> </button>
</Row> </Row>
</Col> </Col>
</Col> <div className="mt-2 mb-4 text-xs text-gray-500 md:text-sm">
<div className="mx-4 mt-2 mb-4 text-xs text-gray-500 md:text-sm">
{message || ''} {message || ''}
</div> </div>
</Col> </Col>

7
web/pages/links.tsx
View File

@ -98,14 +98,13 @@ function ManalinksDisplay(props: {
return ( return (
<> <>
<Col className="grid w-full gap-4 md:grid-cols-2"> <Col className="grid w-full gap-4 md:grid-cols-2">
{displayedLinks.map((link) => { {displayedLinks.map((link) => (
return (
<ManalinkCardFromView <ManalinkCardFromView
key={link.slug + link.createdTime}
link={link} link={link}
highlightedSlug={highlightedSlug} highlightedSlug={highlightedSlug}
/> />
) ))}
})}
</Col> </Col>
<Pagination <Pagination
page={page} page={page}