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

Simplify card

Browse Source
This commit is contained in:
jahooma 2021-12-16 00:11:14 -06:00
parent 4fd3f03fd3
commit 5d2e81f982
2 changed files with 16 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/components/bets-list.tsx
View File

@ -90,7 +90,7 @@ function MyContractBets(props: { contract: Contract; bets: Bet[] }) {
const { resolution } = contract const { resolution } = contract
return ( return (
<div className="p-6 bg-white card card-body shadow-xl "> <div className="p-6 bg-white card card-body shadow-xl">
<Link href={path(contract)}> <Link href={path(contract)}>
<a> <a>
<div className="font-medium text-indigo-700 mb-1 hover:underline hover:decoration-indigo-400 hover:decoration-2"> <div className="font-medium text-indigo-700 mb-1 hover:underline hover:decoration-indigo-400 hover:decoration-2">

39
web/components/contracts-list.tsx
View File

@ -1,5 +1,5 @@
import Link from 'next/link' import Link from 'next/link'
import { Col } from '../components/layout/col' import clsx from 'clsx'
import { Row } from '../components/layout/row' import { Row } from '../components/layout/row'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { import {
@ -26,7 +26,7 @@ export function ContractDetails(props: { contract: Contract }) {
{resolvedDate ? `${createdDate} - ${resolvedDate}` : createdDate} {resolvedDate ? `${createdDate} - ${resolvedDate}` : createdDate}
</div> </div>
<div className="mx-2">•</div> <div className="mx-2">•</div>
<div className="whitespace-nowrap">{formatMoney(volume)} bet</div> <div className="whitespace-nowrap">{formatMoney(volume)} volume</div>
</Row> </Row>
) )
} }
@ -55,29 +55,20 @@ function ContractCard(props: { contract: Contract }) {
<li className="col-span-1 bg-white hover:bg-gray-100 shadow-xl rounded-lg divide-y divide-gray-200"> <li className="col-span-1 bg-white hover:bg-gray-100 shadow-xl rounded-lg divide-y divide-gray-200">
<div className="card"> <div className="card">
<div className="card-body p-6"> <div className="card-body p-6">
<div className="flex justify-between gap-2"> <Row className="justify-between gap-2 mb-2">
{/* Left side of card */} <p className="font-medium text-indigo-700">
<div> {contract.question}
<p className="font-medium text-indigo-700 mb-8"> </p>
{contract.question} <div className={clsx('text-4xl', resolutionColor)}>
</p> {resolutionText || (
<ContractDetails contract={contract} /> <div className="text-primary">
{probPercent}
<div className="text-lg">chance</div>
</div>
)}
</div> </div>
</Row>
{/* Right side of card */} <ContractDetails contract={contract} />
<Col>
<Col
className={'text-4xl mx-auto items-end ' + resolutionColor}
>
{resolutionText || (
<div className="text-primary">
{probPercent}
<div className="text-lg">chance</div>
</div>
)}
</Col>
</Col>
</div>
</div> </div>
</div> </div>
</li> </li>