Create page: Chance => Initial probabilty, description out of advanced, advanced arrow clickable

web/pages/create.tsx

@@ -8,7 +8,6 @@ import { useUser } from '../hooks/use-user'
 import { path } from '../lib/firebase/contracts'
 import { createContract } from '../lib/service/create-contract'
 import { Page } from '../components/page'
-import { Row } from '../components/layout/row'
 import clsx from 'clsx'
 import dayjs from 'dayjs'
 
@@ -75,7 +74,6 @@ export default function NewContract() {
         {/* Create a Tailwind form that takes in all the fields needed for a new contract */}
         {/* When the form is submitted, create a new contract in the database */}
         <form>
-          <div className="flex justify-between gap-4 items-center">
           <div className="form-control w-full">
             <label className="label">
               <span className="label-text">Prediction</span>
@@ -90,9 +88,11 @@ export default function NewContract() {
             />
           </div>
 
+          <Spacer h={4} />
+
           <div className="form-control">
             <label className="label">
-                <span className="label-text">Chance</span>
+              <span className="label-text">Initial probability</span>
             </label>
             <label className="input-group input-group-md w-fit">
               <input
@@ -106,29 +106,9 @@ export default function NewContract() {
               <span>%</span>
             </label>
           </div>
-          </div>
 
-          {/* Collapsible "Advanced" section */}
-          <div
-            tabIndex={0}
-            className={clsx(
-              'cursor-pointer relative collapse collapse-arrow',
-              collapsed ? 'collapse-close' : 'collapse-open'
-            )}
-          >
-            <div
-              className="mt-4 mr-6 text-sm text-gray-400 text-right"
-              onClick={() => setCollapsed((collapsed) => !collapsed)}
-            >
-              Advanced
-            </div>
-            <Row>
-              <div
-                className="collapse-title p-0 absolute w-0 h-0 min-h-0"
-                style={{ top: -2, right: -15, color: '#9ca3af' /* gray-400 */ }}
-              />
-            </Row>
-            <div className="collapse-content !p-0 m-0 !bg-transparent">
+          <Spacer h={4} />
+
           <div className="form-control">
             <label className="label">
               <span className="label-text">Description (optional)</span>
@@ -139,9 +119,31 @@ export default function NewContract() {
               value={description}
               onClick={(e) => e.stopPropagation()}
               onChange={(e) => setDescription(e.target.value || '')}
-                ></textarea>
+            />
           </div>
 
+          {/* Collapsible "Advanced" section */}
+          <div
+            tabIndex={0}
+            className={clsx(
+              'cursor-pointer relative collapse collapse-arrow',
+              collapsed ? 'collapse-close' : 'collapse-open'
+            )}
+          >
+            <div onClick={() => setCollapsed((collapsed) => !collapsed)}>
+              <div className="mt-4 mr-6 text-sm text-gray-400 text-right">
+                Advanced
+              </div>
+              <div
+                className="collapse-title p-0 absolute w-0 h-0 min-h-0"
+                style={{
+                  top: -2,
+                  right: -15,
+                  color: '#9ca3af' /* gray-400 */,
+                }}
+              />
+            </div>
+            <div className="collapse-content !p-0 m-0 !bg-transparent">
               <div className="form-control">
                 <label className="label">
                   <span className="label-text">Close date (optional)</span>