More layout / style tweaks

This commit is contained in:
jahooma 2021-12-13 22:54:51 -06:00
parent 122e571179
commit 8d7f512248
5 changed files with 9 additions and 9 deletions

View File

@ -66,7 +66,7 @@ export function BetPanel(props: { contract: Contract; className?: string }) {
return (
<Col
className={clsx(
'bg-gray-200 shadow-xl px-8 py-6 rounded-md w-full md:w-auto',
'bg-gray-100 shadow-xl px-8 py-6 rounded-md w-full md:w-auto',
className
)}
>

View File

@ -20,7 +20,7 @@ export const ContractOverview = (props: {
return (
<Col className={className}>
<Row className="justify-between">
<Col className="justify-between md:flex-row">
<Col>
<div className="text-3xl font-medium p-2">{contract.question}</div>
@ -39,11 +39,11 @@ export const ContractOverview = (props: {
</Row>
</Col>
<Col className="text-4xl p-2 mx-2 text-primary items-end">
<Col className="text-4xl mt-4 md:mt-2 md:mx-4 text-primary items-end self-center md:self-start">
{probPercent}
<div className="text-xl">chance</div>
</Col>
</Row>
</Col>
<Spacer h={4} />

View File

@ -34,7 +34,7 @@ export function ResolutionPanel(props: {
return (
<Col
className={clsx(
'bg-gray-200 shadow-xl px-8 py-6 rounded-md w-full md:w-auto',
'bg-gray-100 shadow-xl px-8 py-6 rounded-md w-full md:w-auto',
className
)}
>

View File

@ -80,7 +80,7 @@ function Button(props: {
color === 'green' && 'btn-primary',
color === 'red' && 'bg-red-400 hover:bg-red-500',
color === 'yellow' && 'bg-yellow-400 hover:bg-yellow-500',
color === 'gray' && 'text-gray-700 bg-gray-300 hover:bg-gray-400',
color === 'gray' && 'text-gray-700 bg-gray-200 hover:bg-gray-300',
className
)}
onClick={onClick}

View File

@ -30,10 +30,10 @@ export default function ContractPage() {
<div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
<Header />
<Col className="w-full md:justify-between md:flex-row p-4 mt-4">
<ContractOverview contract={contract} className="max-w-4xl w-full" />
<Col className="w-full md:justify-between md:flex-row mt-4">
<ContractOverview contract={contract} className="max-w-4xl w-full p-4" />
<div className="mt-12 md:mt-0" />
<div className="mt-12 md:mt-0 md:ml-8" />
{isCreator ? (
<ResolutionPanel className="self-start" creator={user} contract={contract} />