From 8392bb29443cb859954d37a6bd110c34e159b9ef Mon Sep 17 00:00:00 2001
From: Sinclair Chen <abc.sinclair@gmail.com>
Date: Thu, 11 Aug 2022 14:29:45 -0700
Subject: [PATCH] Adjust create page styles

---
 web/components/answers/multiple-choice-answers.tsx | 4 ++--
 web/components/choices-toggle-group.tsx            | 5 ++++-
 web/pages/create.tsx                               | 4 ++--
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/web/components/answers/multiple-choice-answers.tsx b/web/components/answers/multiple-choice-answers.tsx
index 450c221a..e1b5f1a6 100644
--- a/web/components/answers/multiple-choice-answers.tsx
+++ b/web/components/answers/multiple-choice-answers.tsx
@@ -40,10 +40,10 @@ export function MultipleChoiceAnswers(props: {
           />
           {answers.length > 2 && (
             <button
-              className="btn btn-xs btn-outline ml-2"
+              className="-mr-2 rounded p-2"
               onClick={() => removeAnswer(i)}
             >
-              <XIcon className="h-4 w-4 flex-shrink-0" />
+              <XIcon className="h-5 w-5 flex-shrink-0" />
             </button>
           )}
         </Row>
diff --git a/web/components/choices-toggle-group.tsx b/web/components/choices-toggle-group.tsx
index 61c4e4fd..1e918eda 100644
--- a/web/components/choices-toggle-group.tsx
+++ b/web/components/choices-toggle-group.tsx
@@ -22,7 +22,10 @@ export function ChoicesToggleGroup(props: {
   } = props
   return (
     <RadioGroup
-      className={clsx(className, 'flex flex-row flex-wrap items-center gap-3')}
+      className={clsx(
+        className,
+        'flex flex-row flex-wrap items-center gap-2 sm:gap-3'
+      )}
       value={currentChoice.toString()}
       onChange={setChoice}
     >
diff --git a/web/pages/create.tsx b/web/pages/create.tsx
index 19ab2fe0..5f87fea1 100644
--- a/web/pages/create.tsx
+++ b/web/pages/create.tsx
@@ -299,7 +299,7 @@ export function NewContract(props: {
             <Row className="gap-2">
               <input
                 type="number"
-                className="input input-bordered"
+                className="input input-bordered w-32"
                 placeholder="MIN"
                 onClick={(e) => e.stopPropagation()}
                 onChange={(e) => setMinString(e.target.value)}
@@ -310,7 +310,7 @@ export function NewContract(props: {
               />
               <input
                 type="number"
-                className="input input-bordered"
+                className="input input-bordered w-32"
                 placeholder="MAX"
                 onClick={(e) => e.stopPropagation()}
                 onChange={(e) => setMaxString(e.target.value)}