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

Set correct hover states the arrows

Browse Source
This commit is contained in:
Austin Chen 2022-05-21 15:34:18 -07:00
parent fd49ccea39
commit ba9411161d
1 changed files with 36 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -94,16 +94,12 @@ export function ContractCard(props: {
<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-7 shadow-md hover:cursor-pointer hover:bg-gray-100',
className className
)} )}
> >
<Link href={contractPath(contract)}>
<a className="absolute left-0 right-0 top-0 bottom-0" />
</Link>
<Row className={clsx('justify-between gap-4')}> <Row className={clsx('justify-between gap-4')}>
<Col className="gap-3"> <Col className="relative gap-3">
<AvatarDetails contract={contract} /> <AvatarDetails contract={contract} />
<p <p
className="break-words font-medium text-indigo-700" className="break-words font-medium text-indigo-700"
@ -124,15 +120,27 @@ export function ContractCard(props: {
showHotVolume={showHotVolume} showHotVolume={showHotVolume}
showCloseTime={showCloseTime} showCloseTime={showCloseTime}
/> />
<Link href={contractPath(contract)}>
<a className="absolute -left-6 right-0 -top-4 -bottom-4" />
</Link>
</Col> </Col>
<Col className="gap-2"> <Col className="relative -my-4 justify-center gap-2">
<div
className="peer absolute top-0 -left-4 -right-7 h-[50%]"
onClick={(e) => {
// console.log('e', e)
}}
></div>
{contract.createdTime % 3 == 0 ? ( {contract.createdTime % 3 == 0 ? (
<TriangleFillIcon <TriangleFillIcon
className={clsx('mx-auto h-5 w-5', `text-${color}`)} className={clsx(
'mx-auto h-5 w-5 peer-hover:text-opacity-60',
`text-${color}`
)}
/> />
) : ( ) : (
<TriangleFillIcon className="mx-auto h-5 w-5 text-gray-200" /> <TriangleFillIcon className="mx-auto h-5 w-5 text-gray-200 peer-hover:text-gray-400" />
)} )}
{outcomeType === 'BINARY' && ( {outcomeType === 'BINARY' && (
@ -157,13 +165,25 @@ export function ContractCard(props: {
/> />
)} )}
{contract.createdTime % 3 == 2 ? ( <div>
<TriangleFillIcon <div
className={clsx('mx-auto h-5 w-5 rotate-180', `text-${color}`)} className="peer absolute bottom-0 -left-4 -right-7 h-[50%]"
/> onClick={(e) => {
) : ( // console.log('e2', e)
<TriangleFillIcon className="mx-auto h-5 w-5 rotate-180 text-gray-200" /> }}
)} ></div>
{/* Note: Something about rotate-180 screws with the hitbox. Rotate the SVG instead. */}
{contract.createdTime % 3 == 2 ? (
<TriangleFillIcon
className={clsx(
'mx-auto h-5 w-5 rotate-180 peer-hover:text-opacity-60',
`text-${color}`
)}
/>
) : (
<TriangleFillIcon className="mx-auto h-5 w-5 rotate-180 text-gray-200 peer-hover:text-gray-400" />
)}
</div>
</Col> </Col>
</Row> </Row>