From c047365bb4c4ef9f36aa9bb0d9cf25b1919aa038 Mon Sep 17 00:00:00 2001
From: Austin Chen <akrolsmir@gmail.com>
Date: Wed, 26 Jan 2022 16:28:57 -0600
Subject: [PATCH] Include "Buy" tag inside buttons

---
 web/components/bet-row.tsx              | 13 ++++++++-----
 web/components/contract-feed.tsx        |  4 +++-
 web/components/yes-no-selector.tsx      |  4 ++--
 web/pages/[username]/[contractSlug].tsx |  4 +++-
 4 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/web/components/bet-row.tsx b/web/components/bet-row.tsx
index 5b140e27..cce66602 100644
--- a/web/components/bet-row.tsx
+++ b/web/components/bet-row.tsx
@@ -5,9 +5,13 @@ import { Contract } from '../lib/firebase/contracts'
 import { BetPanel } from './bet-panel'
 import { Row } from './layout/row'
 import { YesNoSelector } from './yes-no-selector'
+import clsx from 'clsx'
 
 // Inline version of a bet panel. Opens BetPanel in a new modal.
-export default function BetRow(props: { contract: Contract }) {
+export default function BetRow(props: {
+  contract: Contract
+  className?: string
+}) {
   const [open, setOpen] = useState(false)
   const [betChoice, setBetChoice] = useState<'YES' | 'NO' | undefined>(
     undefined
@@ -15,11 +19,10 @@ export default function BetRow(props: { contract: Contract }) {
 
   return (
     <>
-      <div className="-mt-2 text-xl -mx-4">
+      <div className={clsx(props.className)}>
         <Row className="items-center gap-2 justify-center">
-          Buy
           <YesNoSelector
-            className="w-72"
+            className="w-60"
             onSelect={(choice) => {
               setOpen(true)
               setBetChoice(choice)
@@ -50,7 +53,7 @@ export function Modal(props: {
     <Transition.Root show={open} as={Fragment}>
       <Dialog
         as="div"
-        className="fixed z-10 inset-0 overflow-y-auto"
+        className="fixed z-40 inset-0 overflow-y-auto"
         onClose={setOpen}
       >
         <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
diff --git a/web/components/contract-feed.tsx b/web/components/contract-feed.tsx
index ae518cce..ad1ea82c 100644
--- a/web/components/contract-feed.tsx
+++ b/web/components/contract-feed.tsx
@@ -697,7 +697,9 @@ export function ContractFeed(props: {
           </li>
         ))}
       </ul>
-      {tradingAllowed(contract) && <BetRow contract={contract} />}
+      {tradingAllowed(contract) && (
+        <BetRow contract={contract} className="-mt-2 -mx-4" />
+      )}
     </div>
   )
 }
diff --git a/web/components/yes-no-selector.tsx b/web/components/yes-no-selector.tsx
index a44bedf5..50d43560 100644
--- a/web/components/yes-no-selector.tsx
+++ b/web/components/yes-no-selector.tsx
@@ -22,7 +22,7 @@ export function YesNoSelector(props: {
         )}
         onClick={() => onSelect('YES')}
       >
-        YES
+        Buy YES
       </button>
       <button
         className={clsx(
@@ -33,7 +33,7 @@ export function YesNoSelector(props: {
         )}
         onClick={() => onSelect('NO')}
       >
-        NO
+        Buy NO
       </button>
     </Row>
   )
diff --git a/web/pages/[username]/[contractSlug].tsx b/web/pages/[username]/[contractSlug].tsx
index 93f28746..ab2356bd 100644
--- a/web/pages/[username]/[contractSlug].tsx
+++ b/web/pages/[username]/[contractSlug].tsx
@@ -112,7 +112,9 @@ export default function ContractPage(props: {
             <div className="md:ml-8" />
 
             <Col className="flex-1">
-              {allowTrade && <BetPanel contract={contract} />}
+              {allowTrade && (
+                <BetPanel className="hidden lg:inline" contract={contract} />
+              )}
               {allowResolve && (
                 <ResolutionPanel creator={user} contract={contract} />
               )}