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

Clean up hover areas

Browse Source
This commit is contained in:
Austin Chen 2022-05-21 16:30:50 -07:00
parent 13de5de24d
commit 3aad05e2a6
1 changed files with 15 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
web/components/contract/contract-card.tsx
View File

@ -87,19 +87,17 @@ export function ContractCard(props: {
const prob = getProb(contract) const prob = getProb(contract)
const color = getColor(contract) const color = getColor(contract)
const marketClosed = (contract.closeTime || Infinity) < Date.now()
const showTopBar = prob >= 0.5 || marketClosed
return ( return (
<div> <div>
<Col <Col
className={clsx( className={clsx(
'relative gap-3 rounded-lg bg-white py-4 pl-6 pr-7 shadow-md hover:bg-gray-100', 'relative gap-3 rounded-lg bg-white py-4 pl-6 pr-5 shadow-md hover:cursor-pointer',
className className
)} )}
> >
<Row className={clsx('justify-between gap-4')}> <Row className="justify-between">
<Col className="relative gap-3"> <Col className="relative gap-3 pr-1.5">
<AvatarDetails contract={contract} /> <AvatarDetails contract={contract} />
<p <p
className="break-words font-medium text-indigo-700" className="break-words font-medium text-indigo-700"
@ -121,27 +119,28 @@ export function ContractCard(props: {
showCloseTime={showCloseTime} showCloseTime={showCloseTime}
/> />
<Link href={contractPath(contract)}> <Link href={contractPath(contract)}>
<a className="absolute -left-6 right-0 -top-4 -bottom-4" /> <a className="absolute -left-6 right-0 -top-4 -bottom-4 rounded-l-lg hover:bg-gray-400 hover:bg-opacity-10" />
</Link> </Link>
</Col> </Col>
<Col className="relative -my-4 justify-center gap-2"> <Col className="relative -my-4 -mr-5 justify-center gap-2 pr-5 pl-3 ">
<div className="mt-4"> <div className="mt-4">
<div <div
className="peer absolute top-0 -left-4 -right-7 h-[50%]" className="peer absolute top-0 left-0 right-0 rounded-tr-lg hover:bg-gray-400 hover:bg-opacity-10"
onClick={(e) => { style={{ height: 'calc(50% + 0.5rem)' }}
onClick={() => {
// console.log('e', e) // console.log('e', e)
}} }}
></div> ></div>
{contract.createdTime % 3 == 0 ? ( {contract.createdTime % 3 == 0 ? (
<TriangleFillIcon <TriangleFillIcon
className={clsx( className={clsx(
'mx-auto h-5 w-5 peer-hover:text-opacity-60', 'mx-auto h-5 w-5 text-opacity-60 peer-hover:text-opacity-100',
`text-${color}` `text-${color}`
)} )}
/> />
) : ( ) : (
<TriangleFillIcon className="mx-auto h-5 w-5 text-gray-200 peer-hover:text-gray-400" /> <TriangleFillIcon className="mx-auto h-5 w-5 text-gray-200 peer-hover:text-gray-300" />
)} )}
</div> </div>
@ -169,15 +168,16 @@ export function ContractCard(props: {
<div className="mb-4"> <div className="mb-4">
<div <div
className="peer absolute bottom-0 -left-4 -right-7 h-[50%]" className="peer absolute bottom-0 left-0 right-0 rounded-br-lg hover:bg-gray-400 hover:bg-opacity-10"
onClick={(e) => { style={{ height: 'calc(50% - 0.5rem)' }}
onClick={() => {
// console.log('e2', e) // console.log('e2', e)
}} }}
></div> ></div>
{contract.createdTime % 3 == 2 ? ( {contract.createdTime % 3 == 2 ? (
<TriangleDownFillIcon <TriangleDownFillIcon
className={clsx( className={clsx(
'mx-auto h-5 w-5 peer-hover:text-opacity-60', 'mx-auto h-5 w-5 text-opacity-60 peer-hover:text-opacity-100',
`text-${color}` `text-${color}`
)} )}
/> />
@ -249,7 +249,7 @@ function FreeResponseTopAnswer(props: {
truncate: 'short' | 'long' | 'none' truncate: 'short' | 'long' | 'none'
className?: string className?: string
}) { }) {
const { contract, truncate, className } = props const { contract, truncate } = props
const { resolution } = contract const { resolution } = contract
const topAnswer = getTopAnswer(contract) const topAnswer = getTopAnswer(contract)