Tweak create page layout

web/components/choices-toggle-group.tsx

@@ -20,37 +20,31 @@ export function ChoicesToggleGroup(props: {
     children,
   } = props
   return (
-    <Row className={'mt-2 items-center gap-2'}>
+    <RadioGroup value={currentChoice.toString()} onChange={(str) => null}>
-      <RadioGroup
+      <Row className={'items-center flex-wrap gap-3'}>
-        value={currentChoice.toString()}
+        {Object.keys(choicesMap).map((choiceKey) => (
-        onChange={(str) => null}
+          <RadioGroup.Option
-        className="mt-2"
+            key={choiceKey}
-      >
+            value={choicesMap[choiceKey]}
-        <div className={`grid grid-cols-12 gap-3`}>
+            onClick={() => setChoice(choicesMap[choiceKey])}
-          {Object.keys(choicesMap).map((choiceKey) => (
+            className={({ active }) =>
-            <RadioGroup.Option
+              clsx(
-              key={choiceKey}
+                active ? 'ring-2 ring-indigo-500 ring-offset-2' : '',
-              value={choicesMap[choiceKey]}
+                currentChoice === choicesMap[choiceKey]
-              onClick={() => setChoice(choicesMap[choiceKey])}
+                  ? 'border-transparent bg-indigo-500 text-white hover:bg-indigo-600'
-              className={({ active }) =>
+                  : 'border-gray-200 bg-white text-gray-900 hover:bg-gray-50',
-                clsx(
+                'flex cursor-pointer items-center justify-center rounded-md border py-3 px-3 text-sm font-medium normal-case',
-                  active ? 'ring-2 ring-indigo-500 ring-offset-2' : '',
+                "hover:ring-offset-2' hover:ring-2 hover:ring-indigo-500",
-                  currentChoice === choicesMap[choiceKey]
+                className
-                    ? 'border-transparent bg-indigo-500 text-white hover:bg-indigo-600'
+              )
-                    : 'border-gray-200 bg-white text-gray-900 hover:bg-gray-50',
+            }
-                  'flex cursor-pointer items-center justify-center rounded-md border py-3 px-3 text-sm font-medium normal-case',
+            disabled={isSubmitting}
-                  "hover:ring-offset-2' hover:ring-2 hover:ring-indigo-500",
+          >
-                  className
+            <RadioGroup.Label as="span">{choiceKey}</RadioGroup.Label>
-                )
+          </RadioGroup.Option>
-              }
+        ))}
-              disabled={isSubmitting}
+        {children}
-            >
+      </Row>
-              <RadioGroup.Label as="span">{choiceKey}</RadioGroup.Label>
+    </RadioGroup>
-            </RadioGroup.Option>
-          ))}
-          {children}
-        </div>
-      </RadioGroup>
-    </Row>
   )
 }

web/pages/create.tsx

@@ -28,7 +28,7 @@ export default function Create() {
   return (
     <Page>
       <div className="mx-auto w-full max-w-2xl">
-        <div className="rounded-lg  px-6 py-4">
+        <div className="rounded-lg px-6 py-4 sm:py-0">
           <form>
             <div className="form-control w-full">
               <label className="label">
@@ -47,6 +47,7 @@ export default function Create() {
               />
             </div>
           </form>
+          <Spacer h={6} />
           <NewContract question={question} />
         </div>
       </div>
@@ -168,8 +169,8 @@ export function NewContract(props: { question: string; tag?: string }) {
 
   return (
     <div>
-      <label className="label mt-1">
+      <label className="label">
-        <span className="mt-1">Answer type</span>
+        <span className="mb-1">Answer type</span>
       </label>
       <ChoicesToggleGroup
         currentChoice={outcomeType}
@@ -189,11 +190,12 @@ export function NewContract(props: { question: string; tag?: string }) {
         className={'col-span-4'}
       />
       {marketInfoText && (
-        <div className="mt-2 ml-1 text-sm text-indigo-700">
+        <div className="mt-3 ml-1 text-sm text-indigo-700">
           {marketInfoText}
         </div>
       )}
-      <Spacer h={4} />
+
+      <Spacer h={6} />
 
       {outcomeType === 'BINARY' && (
         <div className="form-control">
@@ -241,6 +243,7 @@ export function NewContract(props: { question: string; tag?: string }) {
           {probErrorText && (
             <div className="text-error mt-2 ml-1 text-sm">{probErrorText}</div>
           )}
+          <Spacer h={6} />
         </div>
       )}
 
@@ -278,27 +281,6 @@ export function NewContract(props: { question: string; tag?: string }) {
         </div>
       )}
 
-      <Spacer h={4} />
-
-      <div className="form-control mb-1 items-start">
-        <label className="label mb-1 gap-2">
-          <span className="mb-1">Description</span>
-          <InfoTooltip text="Optional. Describe how you will resolve this question." />
-        </label>
-        <Textarea
-          className="textarea textarea-bordered w-full resize-none"
-          rows={3}
-          maxLength={MAX_DESCRIPTION_LENGTH}
-          placeholder={descriptionPlaceholder}
-          value={description}
-          disabled={isSubmitting}
-          onClick={(e) => e.stopPropagation()}
-          onChange={(e) => setDescription(e.target.value || '')}
-        />
-      </div>
-
-      <Spacer h={4} />
-
       <div className="form-control max-w-sm items-start">
         <label className="label gap-2">
           <span className="mb-1">Category</span>
@@ -318,11 +300,11 @@ export function NewContract(props: { question: string; tag?: string }) {
         </select>
       </div>
 
-      <Spacer h={4} />
+      <Spacer h={6} />
 
       <div className="form-control mb-1 items-start">
         <label className="label mb-1 gap-2">
-          <span>Question closes in:</span>
+          <span>Question closes in</span>
           <InfoTooltip text="Betting will be halted after this time (local timezone)." />
         </label>
         <Row className={'w-full items-center gap-2'}>
@@ -365,65 +347,72 @@ export function NewContract(props: { question: string; tag?: string }) {
         </Row>
       </div>
 
-      <Spacer h={4} />
+      <Spacer h={6} />
 
       <div className="form-control mb-1 items-start">
         <label className="label mb-1 gap-2">
-          <span>Cost</span>
+          <span className="mb-1">Description</span>
-          {mustWaitForDailyFreeMarketStatus != 'loading' &&
+          <InfoTooltip text="Optional. Describe how you will resolve this question." />
-            mustWaitForDailyFreeMarketStatus && (
-              <InfoTooltip
-                text={`Cost to create your question. This amount is used to subsidize betting.`}
-              />
-            )}
         </label>
-        {mustWaitForDailyFreeMarketStatus != 'loading' &&
+        <Textarea
-        !mustWaitForDailyFreeMarketStatus ? (
+          className="textarea textarea-bordered w-full resize-none"
-          <div className="label-text text-primary pl-1">
+          rows={3}
-            <span className={'label-text text-neutral line-through '}>
+          maxLength={MAX_DESCRIPTION_LENGTH}
-              {formatMoney(ante)}
+          placeholder={descriptionPlaceholder}
-            </span>{' '}
+          value={description}
-            FREE
-          </div>
-        ) : (
-          mustWaitForDailyFreeMarketStatus != 'loading' && (
-            <div className="label-text text-neutral pl-1">
-              {formatMoney(ante)}
-            </div>
-          )
-        )}
-        {mustWaitForDailyFreeMarketStatus != 'loading' &&
-          mustWaitForDailyFreeMarketStatus &&
-          ante > balance && (
-            <div className="mb-2 mt-2 mr-auto self-center whitespace-nowrap text-xs font-medium tracking-wide">
-              <span className="mr-2 text-red-500">Insufficient balance</span>
-              <button
-                className="btn btn-xs btn-primary"
-                onClick={() => (window.location.href = '/add-funds')}
-              >
-                Add funds
-              </button>
-            </div>
-          )}
-
-        {/* <BuyAmountInput
-          amount={ante ?? undefined}
-          minimumAmount={MINIMUM_ANTE}
-          onChange={setAnte}
-          error={anteError}
-          setError={setAnteError}
           disabled={isSubmitting}
-          contractIdForLoan={undefined}
+          onClick={(e) => e.stopPropagation()}
-        /> */}
+          onChange={(e) => setDescription(e.target.value || '')}
+        />
       </div>
 
-      <Spacer h={4} />
+      <Spacer h={6} />
+
+      <Row className="items-end justify-between">
+        <div className="form-control mb-1 items-start">
+          <label className="label mb-1 gap-2">
+            <span>Cost</span>
+            {mustWaitForDailyFreeMarketStatus != 'loading' &&
+              mustWaitForDailyFreeMarketStatus && (
+                <InfoTooltip
+                  text={`Cost to create your question. This amount is used to subsidize betting.`}
+                />
+              )}
+          </label>
+          {mustWaitForDailyFreeMarketStatus != 'loading' &&
+          !mustWaitForDailyFreeMarketStatus ? (
+            <div className="label-text text-primary pl-1">
+              <span className={'label-text text-neutral line-through '}>
+                {formatMoney(ante)}
+              </span>{' '}
+              FREE
+            </div>
+          ) : (
+            mustWaitForDailyFreeMarketStatus != 'loading' && (
+              <div className="label-text text-neutral pl-1">
+                {formatMoney(ante)}
+              </div>
+            )
+          )}
+          {mustWaitForDailyFreeMarketStatus != 'loading' &&
+            mustWaitForDailyFreeMarketStatus &&
+            ante > balance && (
+              <div className="mb-2 mt-2 mr-auto self-center whitespace-nowrap text-xs font-medium tracking-wide">
+                <span className="mr-2 text-red-500">Insufficient balance</span>
+                <button
+                  className="btn btn-xs btn-primary"
+                  onClick={() => (window.location.href = '/add-funds')}
+                >
+                  Add funds
+                </button>
+              </div>
+            )}
+        </div>
 
-      <div className="my-4 flex justify-end">
         <button
           type="submit"
           className={clsx(
-            'btn btn-primary capitalize',
+            'btn btn-primary normal-case',
             isSubmitting && 'loading disabled'
           )}
           disabled={isSubmitting || !isValid}
@@ -434,7 +423,7 @@ export function NewContract(props: { question: string; tag?: string }) {
         >
           {isSubmitting ? 'Creating...' : 'Create question'}
         </button>
-      </div>
+      </Row>
     </div>
   )
 }