From 8d7f512248abb4e7d411b7c6741d77bd3f26e7e4 Mon Sep 17 00:00:00 2001
From: jahooma <jahooma@gmail.com>
Date: Mon, 13 Dec 2021 22:54:51 -0600
Subject: [PATCH] More layout / style tweaks

---
 web/components/bet-panel.tsx         | 2 +-
 web/components/contract-overview.tsx | 6 +++---
 web/components/resolution-panel.tsx  | 2 +-
 web/components/yes-no-selector.tsx   | 2 +-
 web/pages/contract/[contractId].tsx  | 6 +++---
 5 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/web/components/bet-panel.tsx b/web/components/bet-panel.tsx
index e8dab680..5aa9e9a0 100644
--- a/web/components/bet-panel.tsx
+++ b/web/components/bet-panel.tsx
@@ -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
       )}
     >
diff --git a/web/components/contract-overview.tsx b/web/components/contract-overview.tsx
index ae34c36f..30b9c747 100644
--- a/web/components/contract-overview.tsx
+++ b/web/components/contract-overview.tsx
@@ -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} />
 
diff --git a/web/components/resolution-panel.tsx b/web/components/resolution-panel.tsx
index fd612caf..acdd38e7 100644
--- a/web/components/resolution-panel.tsx
+++ b/web/components/resolution-panel.tsx
@@ -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
       )}
     >
diff --git a/web/components/yes-no-selector.tsx b/web/components/yes-no-selector.tsx
index f6e2fb61..f0258295 100644
--- a/web/components/yes-no-selector.tsx
+++ b/web/components/yes-no-selector.tsx
@@ -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}
diff --git a/web/pages/contract/[contractId].tsx b/web/pages/contract/[contractId].tsx
index 50eb63a6..83f696a5 100644
--- a/web/pages/contract/[contractId].tsx
+++ b/web/pages/contract/[contractId].tsx
@@ -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} />