Improve create page UI (#746)

* Adjust create page styles

* Keep answers when switching market type

web/components/answers/multiple-choice-answers.tsx

@@ -1,26 +1,23 @@
 import { MAX_ANSWER_LENGTH } from 'common/answer'
-import { useState } from 'react'
 import Textarea from 'react-expanding-textarea'
 import { XIcon } from '@heroicons/react/solid'
-
 import { Col } from '../layout/col'
 import { Row } from '../layout/row'
 
 export function MultipleChoiceAnswers(props: {
+  answers: string[]
   setAnswers: (answers: string[]) => void
 }) {
-  const [answers, setInternalAnswers] = useState(['', '', ''])
+  const { answers, setAnswers } = props
 
   const setAnswer = (i: number, answer: string) => {
     const newAnswers = setElement(answers, i, answer)
-    setInternalAnswers(newAnswers)
-    props.setAnswers(newAnswers)
+    setAnswers(newAnswers)
   }
 
   const removeAnswer = (i: number) => {
     const newAnswers = answers.slice(0, i).concat(answers.slice(i + 1))
-    setInternalAnswers(newAnswers)
-    props.setAnswers(newAnswers)
+    setAnswers(newAnswers)
   }
 
   const addAnswer = () => setAnswer(answers.length, '')
@@ -40,10 +37,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>

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}
     >

web/pages/create.tsx

@@ -120,7 +120,8 @@ export function NewContract(props: {
   const [isLogScale, setIsLogScale] = useState<boolean>(!!params?.isLogScale)
   const [initialValueString, setInitialValueString] = useState(initValue)
 
-  const [answers, setAnswers] = useState<string[]>([]) // for multiple choice
+  // for multiple choice, init to 3 empty answers
+  const [answers, setAnswers] = useState(['', '', ''])
 
   useEffect(() => {
     if (groupId)
@@ -285,7 +286,7 @@ export function NewContract(props: {
       <Spacer h={6} />
 
       {outcomeType === 'MULTIPLE_CHOICE' && (
-        <MultipleChoiceAnswers setAnswers={setAnswers} />
+        <MultipleChoiceAnswers answers={answers} setAnswers={setAnswers} />
       )}
 
       {outcomeType === 'PSEUDO_NUMERIC' && (
@@ -299,7 +300,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 +311,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)}