making bars smoller

web/components/answers/answers-panel.tsx

@@ -182,7 +182,7 @@ function OpenAnswer(props: {
   const [open, setOpen] = useState(false)
 
   return (
-    <Col className="border-base-200 bg-base-200 relative flex-1 rounded-md px-2">
+    <>
       <Modal open={open} setOpen={setOpen} position="center">
         <AnswerBetPanel
           answer={answer}
@@ -193,40 +193,46 @@ function OpenAnswer(props: {
         />
       </Modal>
 
-      <div
+      <Row className="justify-between">
-        className="pointer-events-none absolute -mx-2 h-full rounded-tl-md bg-green-600 bg-opacity-10"
+        <Col className="w-4/5">
+          <Row>
+            <Avatar
+              className="my-auto mr-2 h-5 w-5"
+              username={username}
+              avatarUrl={avatarUrl}
+            />
+            <Linkify
+              className="text-md whitespace-pre-line md:text-lg"
+              text={text}
+            />
+          </Row>
+          <div className="relative h-3">
+            <hr className="bg-greyscale-2 absolute z-0 h-3 w-full rounded-full" />
+            <hr
+              className="absolute z-20 h-3 rounded-l-full bg-green-600 text-green-600"
               style={{ width: `${100 * Math.max(prob, 0.01)}%` }}
             />
-
-      <Row className="my-4 gap-3">
-        <Avatar className="mx-1" username={username} avatarUrl={avatarUrl} />
-        <Col className="min-w-0 flex-1 lg:gap-1">
-          <div className="text-sm text-gray-500">
-            <UserLink username={username} name={name} /> answered
           </div>
-
+        </Col>
-          <Col className="align-items justify-between gap-4 sm:flex-row">
-            <Linkify className="whitespace-pre-line text-lg" text={text} />
         <Row className="align-items items-center justify-end gap-4">
           <span
             className={clsx(
               'text-2xl',
-                  tradingAllowed(contract) ? 'text-primary' : 'text-gray-500'
+              tradingAllowed(contract) ? 'text-greyscale-7' : 'text-gray-500'
             )}
           >
             {probPercent}
           </span>
-              <BuyButton
+          <Button
-                className={clsx(
+            className={clsx(tradingAllowed(contract) ? '' : '!hidden')}
-                  'btn-sm flex-initial !px-6 sm:flex',
+            color="indigo"
-                  tradingAllowed(contract) ? '' : '!hidden'
+            size="xs"
-                )}
             onClick={() => setOpen(true)}
-              />
+          >
+            Buy
+          </Button>
         </Row>
-          </Col>
-        </Col>
       </Row>
-    </Col>
+    </>
   )
 }

web/components/yes-no-selector.tsx

@@ -244,7 +244,7 @@ function Button(props: {
       type="button"
       className={clsx(
         'inline-flex flex-1 items-center justify-center rounded-md border border-transparent px-8 py-3 font-medium shadow-sm',
-        color === 'green' && 'bg-teal-500 bg-teal-600 text-white',
+        color === 'green' && 'bg-teal-500 text-white hover:bg-teal-600',
         color === 'red' && 'bg-red-400 text-white hover:bg-red-500',
         color === 'yellow' && 'bg-yellow-400 text-white hover:bg-yellow-500',
         color === 'blue' && 'bg-blue-400 text-white hover:bg-blue-500',