From 4a139c5cc22ff9310ab33533a6064cae002ac253 Mon Sep 17 00:00:00 2001
From: Sinclair Chen <abc.sinclair@gmail.com>
Date: Thu, 13 Oct 2022 14:55:48 -0700
Subject: [PATCH] Fix limit prob styling

---
 web/components/bet-panel.tsx         |  8 +++++---
 web/components/input.tsx             |  2 +-
 web/components/probability-input.tsx | 20 +++++++++-----------
 3 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/web/components/bet-panel.tsx b/web/components/bet-panel.tsx
index c661cef2..c9989185 100644
--- a/web/components/bet-panel.tsx
+++ b/web/components/bet-panel.tsx
@@ -631,9 +631,9 @@ function LimitOrderPanel(props: {
 
   return (
     <Col className={hidden ? 'hidden' : ''}>
-      <Row className="mt-1 items-center gap-4">
+      <Row className="mt-1 mb-4 items-center gap-4">
         <Col className="gap-2">
-          <div className="relative ml-1 text-sm text-gray-500">
+          <div className="text-sm text-gray-500">
             Buy {isPseudoNumeric ? <HigherLabel /> : <YesLabel />} up to
           </div>
           <ProbabilityOrNumericInput
@@ -641,10 +641,11 @@ function LimitOrderPanel(props: {
             prob={lowLimitProb}
             setProb={setLowLimitProb}
             isSubmitting={isSubmitting}
+            placeholder="10"
           />
         </Col>
         <Col className="gap-2">
-          <div className="ml-1 text-sm text-gray-500">
+          <div className="text-sm text-gray-500">
             Buy {isPseudoNumeric ? <LowerLabel /> : <NoLabel />} down to
           </div>
           <ProbabilityOrNumericInput
@@ -652,6 +653,7 @@ function LimitOrderPanel(props: {
             prob={highLimitProb}
             setProb={setHighLimitProb}
             isSubmitting={isSubmitting}
+            placeholder="90"
           />
         </Col>
       </Row>
diff --git a/web/components/input.tsx b/web/components/input.tsx
index e2209f8b..86305355 100644
--- a/web/components/input.tsx
+++ b/web/components/input.tsx
@@ -13,7 +13,7 @@ export const Input = (
         'h-12 rounded-md border bg-white px-4 shadow-sm transition-colors invalid:border-red-600 invalid:text-red-900 invalid:placeholder-red-300 focus:outline-none disabled:cursor-not-allowed disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 md:text-sm',
         error
           ? 'border-red-300 text-red-900 placeholder-red-300 focus:border-red-600 focus:ring-red-500' // matches invalid: styles
-          : 'border-gray-300 focus:border-indigo-500 focus:ring-indigo-500',
+          : 'placeholder-greyscale-4 border-gray-300 focus:border-indigo-500 focus:ring-indigo-500',
         className
       )}
       {...rest}
diff --git a/web/components/probability-input.tsx b/web/components/probability-input.tsx
index 447dcdb0..87e26acd 100644
--- a/web/components/probability-input.tsx
+++ b/web/components/probability-input.tsx
@@ -4,18 +4,15 @@ import { getPseudoProbability } from 'common/pseudo-numeric'
 import { BucketInput } from './bucket-input'
 import { Input } from './input'
 import { Col } from './layout/col'
-import { Spacer } from './layout/spacer'
 
-export function ProbabilityInput(props: {
+function ProbabilityInput(props: {
   prob: number | undefined
   onChange: (newProb: number | undefined) => void
   disabled?: boolean
   placeholder?: string
-  className?: string
   inputClassName?: string
 }) {
-  const { prob, onChange, disabled, placeholder, className, inputClassName } =
-    props
+  const { prob, onChange, disabled, placeholder, inputClassName } = props
 
   const onProbChange = (str: string) => {
     let prob = parseInt(str.replace(/\D/g, ''))
@@ -29,10 +26,10 @@ export function ProbabilityInput(props: {
   }
 
   return (
-    <Col className={className}>
-      <label className="flex w-full items-stretch">
+    <Col>
+      <label className="relative w-fit">
         <Input
-          className={clsx('max-w-[200px] !text-lg', inputClassName)}
+          className={clsx('pr-2 !text-lg', inputClassName)}
           type="number"
           max={99}
           min={1}
@@ -44,9 +41,10 @@ export function ProbabilityInput(props: {
           disabled={disabled}
           onChange={(e) => onProbChange(e.target.value)}
         />
-        <span className="bg-gray-200 text-sm">%</span>
+        <span className="text-greyscale-4 absolute top-1/2 right-10 my-auto -translate-y-1/2">
+          %
+        </span>
       </label>
-      <Spacer h={4} />
     </Col>
   )
 }
@@ -82,7 +80,7 @@ export function ProbabilityOrNumericInput(props: {
     />
   ) : (
     <ProbabilityInput
-      inputClassName="w-full max-w-none"
+      inputClassName="w-24"
       prob={prob}
       onChange={setProb}
       disabled={isSubmitting}