From 527a8a8b099faaa70617cccd1318b5424e134a7b Mon Sep 17 00:00:00 2001 From: jahooma <jahooma@gmail.com> Date: Thu, 30 Dec 2021 13:52:05 -0500 Subject: [PATCH] White panels, medium shadows --- web/components/bet-panel.tsx | 4 +--- web/components/contracts-list.tsx | 2 +- web/components/resolution-panel.tsx | 4 +--- web/pages/create.tsx | 4 ++-- 4 files changed, 5 insertions(+), 9 deletions(-) diff --git a/web/components/bet-panel.tsx b/web/components/bet-panel.tsx index 42f3abae..55467527 100644 --- a/web/components/bet-panel.tsx +++ b/web/components/bet-panel.tsx @@ -95,9 +95,7 @@ export function BetPanel(props: { contract: Contract; className?: string }) { const remainingBalance = (user?.balance || 0) - (betAmount || 0) return ( - <Col - className={clsx('bg-gray-100 shadow-xl px-8 py-6 rounded-md', className)} - > + <Col className={clsx('bg-white shadow-md px-8 py-6 rounded-md', className)}> <Title className="!mt-0 whitespace-nowrap" text="Place a trade" /> <div className="mt-2 mb-1 text-sm text-gray-400">Outcome</div> diff --git a/web/components/contracts-list.tsx b/web/components/contracts-list.tsx index b80ade7c..2902cccd 100644 --- a/web/components/contracts-list.tsx +++ b/web/components/contracts-list.tsx @@ -55,7 +55,7 @@ function ContractCard(props: { contract: Contract }) { return ( <Link href={path(contract)}> <a> - <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-md rounded-lg divide-y divide-gray-200"> <div className="card"> <div className="card-body p-6"> <Row className="justify-between gap-4 mb-2"> diff --git a/web/components/resolution-panel.tsx b/web/components/resolution-panel.tsx index 4e98a713..626480a7 100644 --- a/web/components/resolution-panel.tsx +++ b/web/components/resolution-panel.tsx @@ -51,9 +51,7 @@ export function ResolutionPanel(props: { : 'btn-disabled' return ( - <Col - className={clsx('bg-gray-100 shadow-xl px-8 py-6 rounded-md', className)} - > + <Col className={clsx('bg-white shadow-md px-8 py-6 rounded-md', className)}> <Title className="mt-0" text="Your market" /> <div className="pt-2 pb-1 text-sm text-gray-400">Resolve outcome</div> diff --git a/web/pages/create.tsx b/web/pages/create.tsx index d7ad6cae..0a66d14d 100644 --- a/web/pages/create.tsx +++ b/web/pages/create.tsx @@ -45,7 +45,7 @@ export default function NewContract() { <Page> <Title text="Create a new prediction market" /> - <div className="w-full bg-gray-100 rounded-lg shadow-xl px-6 py-4"> + <div className="w-full bg-white rounded-lg shadow-md px-6 py-4"> {/* Create a Tailwind form that takes in all the fields needed for a new contract */} {/* When the form is submitted, create a new contract in the database */} <form> @@ -57,7 +57,7 @@ export default function NewContract() { <input type="text" placeholder="e.g. Will the FDA approve Paxlovid before Jun 2nd, 2022?" - className="input" + className="input input-bordered" value={question} onChange={(e) => setQuestion(e.target.value || '')} />