From cfd6af7c72f5d2e9dcfa4337a956a1af5e3dc289 Mon Sep 17 00:00:00 2001
From: James Grugett <jahooma@gmail.com>
Date: Sat, 4 Jun 2022 21:28:27 -0500
Subject: [PATCH] Tweak create page layout

---
 web/components/choices-toggle-group.tsx |  58 +++++-----
 web/pages/create.tsx                    | 143 +++++++++++-------------
 2 files changed, 92 insertions(+), 109 deletions(-)

diff --git a/web/components/choices-toggle-group.tsx b/web/components/choices-toggle-group.tsx
index 0120aea9..d467cb15 100644
--- a/web/components/choices-toggle-group.tsx
+++ b/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}
-        className="mt-2"
-      >
-        <div className={`grid grid-cols-12 gap-3`}>
-          {Object.keys(choicesMap).map((choiceKey) => (
-            <RadioGroup.Option
-              key={choiceKey}
-              value={choicesMap[choiceKey]}
-              onClick={() => setChoice(choicesMap[choiceKey])}
-              className={({ active }) =>
-                clsx(
-                  active ? 'ring-2 ring-indigo-500 ring-offset-2' : '',
-                  currentChoice === choicesMap[choiceKey]
-                    ? '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',
-                  "hover:ring-offset-2' hover:ring-2 hover:ring-indigo-500",
-                  className
-                )
-              }
-              disabled={isSubmitting}
-            >
-              <RadioGroup.Label as="span">{choiceKey}</RadioGroup.Label>
-            </RadioGroup.Option>
-          ))}
-          {children}
-        </div>
-      </RadioGroup>
-    </Row>
+    <RadioGroup value={currentChoice.toString()} onChange={(str) => null}>
+      <Row className={'items-center flex-wrap gap-3'}>
+        {Object.keys(choicesMap).map((choiceKey) => (
+          <RadioGroup.Option
+            key={choiceKey}
+            value={choicesMap[choiceKey]}
+            onClick={() => setChoice(choicesMap[choiceKey])}
+            className={({ active }) =>
+              clsx(
+                active ? 'ring-2 ring-indigo-500 ring-offset-2' : '',
+                currentChoice === choicesMap[choiceKey]
+                  ? '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',
+                "hover:ring-offset-2' hover:ring-2 hover:ring-indigo-500",
+                className
+              )
+            }
+            disabled={isSubmitting}
+          >
+            <RadioGroup.Label as="span">{choiceKey}</RadioGroup.Label>
+          </RadioGroup.Option>
+        ))}
+        {children}
+      </Row>
+    </RadioGroup>
   )
 }
diff --git a/web/pages/create.tsx b/web/pages/create.tsx
index e8d28083..78abfa10 100644
--- a/web/pages/create.tsx
+++ b/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">
-        <span className="mt-1">Answer type</span>
+      <label className="label">
+        <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>
-          {mustWaitForDailyFreeMarketStatus != 'loading' &&
-            mustWaitForDailyFreeMarketStatus && (
-              <InfoTooltip
-                text={`Cost to create your question. This amount is used to subsidize betting.`}
-              />
-            )}
+          <span className="mb-1">Description</span>
+          <InfoTooltip text="Optional. Describe how you will resolve this question." />
         </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>
-          )}
-
-        {/* <BuyAmountInput
-          amount={ante ?? undefined}
-          minimumAmount={MINIMUM_ANTE}
-          onChange={setAnte}
-          error={anteError}
-          setError={setAnteError}
+        <Textarea
+          className="textarea textarea-bordered w-full resize-none"
+          rows={3}
+          maxLength={MAX_DESCRIPTION_LENGTH}
+          placeholder={descriptionPlaceholder}
+          value={description}
           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>
   )
 }