New edit interface for auto resolution

web/components/contract/contract-info-dialog.tsx

@@ -1,4 +1,4 @@
-import { DotsHorizontalIcon, PencilIcon } from '@heroicons/react/outline'
+import { DotsHorizontalIcon, PencilIcon, CheckIcon } from '@heroicons/react/outline'
 import clsx from 'clsx'
 import dayjs from 'dayjs'
 import { uniqBy } from 'lodash'
@@ -83,23 +83,16 @@ export function ContractInfoDialog(props: { contract: Contract; bets: Bet[]; isC
 
               {autoResolutionTime && autoResolution && (
                 <>
+                  <EditableTime
+                    title ='Market autoresolves'
+                    time={autoResolutionTime}
+                    contract={contract}
+                    isCreator={isCreator}
+                    dateType='autoResolutionTime'
+                  />
                   <tr>
-                    <td>Automatic resolution</td>
+                  <td>Auto resolution</td>
-                    <EditableTime
+                  <td>{contract.autoResolution}</td>
-                      time={autoResolutionTime}
-                      contract={contract}
-                      isCreator={isCreator}
-                      dateType='autoResolutionTime'
-                    />
-                  </tr>
-                  <tr>
-                  <td>Default resolution</td>
-                  <EditableString
-                      value={autoResolution}
-                      contract={contract}
-                      isCreator={isCreator}
-                      dateType='autoResolution'
-                    />
                 </tr>
                 </>
               )}
@@ -173,12 +166,13 @@ const getTweetText = (contract: Contract, isCreator: boolean) => {
 }
 
 export function EditableTime(props: {
+  title: string
   time: number
   contract: Contract
   isCreator: boolean
   dateType: contractField
 }) {
-  const { time, contract, isCreator, dateType } = props
+  const { title, time, contract, isCreator, dateType } = props
 
   const [isEditing, setIsEditing] = useState(false)
   const [timeString, setTimeString] = useState(time && formatTime(time))
@@ -194,83 +188,37 @@ export function EditableTime(props: {
   }
 
   return (
-    <td>
+    <tr>
-      {isEditing ? (
+      <td>
-        <div className="form-control mr-1 items-start">
+        {title}
-          <input
+        {isCreator && (
-            type="datetime-local"
+          isEditing ? (
-            className="input input-xs"
+            <button className="btn btn-xs btn-ghost" onClick={onSave}>
-            onClick={(e) => e.stopPropagation()}
+              <CheckIcon className="inline h-4 w-4" />
-            onChange={(e) => setTimeString(e.target.value || '')}
+            </button>
-            min={contract.closeTime}
+          ):(
-            value={timeString}
+            <button className="btn btn-xs btn-ghost"
-          />
+            onClick={() => setIsEditing(true)}          >
-        </div>
+              <PencilIcon className="inline h-4 w-4" />
-      ) : (
+            </button>
-        <div className="form-control mr-1 items-start">{timeString}</div>
-      )}
-      {isCreator &&
-        (isEditing ? (
-          <button className="btn btn-xs btn-ghost" onClick={onSave}>
-            Done
-          </button>
-        ) : (
-          <button className="btn btn-xs btn-ghost"
-            onClick={() => setIsEditing(true)}
-          >
-            <PencilIcon className="mr-2 inline h-4 w-4" /> Edit
-          </button>
         ))}
-    </td>
+      </td>
-  )
+      <td>
-}
+        {isEditing ? (
-
+          <div className="form-control mr-1 items-start">
-export function EditableString(props: {
+            <input
-  value: string
+              type="datetime-local"
-  contract: Contract
+              className="input input-xs"
-  isCreator: boolean
+              onClick={(e) => e.stopPropagation()}
-  dateType: contractField
+              onChange={(e) => setTimeString(e.target.value || '')}
-}) {
+              min={contract.closeTime}
-  const { value, contract, isCreator, dateType } = props
+              value={timeString}
-
+            />
-  const [isEditing, setIsEditing] = useState(false)
+          </div>
-  const [newValue, setTimeString] = useState(value)
+        ) : (
-  const onSave = () => {
+          <div className="form-control mr-1 items-start">{timeString}</div>
-    if (newValue === value) setIsEditing(false)
+        )}
-    else {
+      </td>
-      updateContract(contract.id, {
+    </tr>
-        [dateType]: newValue
-      })
-      setIsEditing(false)
-    }
-  }
-
-  return (
-    <td>
-      {isEditing ? (
-          <input
-            style={{ maxWidth: 50 }}
-            className="input input-xs resize-none"
-            onClick={(e) => e.stopPropagation()}
-            onChange={(e) => setTimeString(e.target.value || '')}
-            min={contract.closeTime}
-            value={newValue}
-          />
-      ) : (
-        <>{newValue}</>
-      )}
-      {isCreator &&
-        (isEditing ? (
-          <button className="btn btn-xs btn-ghost" onClick={onSave}>
-            Done
-          </button>
-        ) : (
-          <button className="btn btn-xs btn-ghost"
-            onClick={() => setIsEditing(true)}
-          >
-            <PencilIcon className="mr-2 inline h-4 w-4" /> Edit
-          </button>
-        ))}
-    </td>
   )
 }

web/components/layout/modal.tsx

@@ -45,7 +45,7 @@ export function Modal(props: {
             leaveFrom="opacity-100 translate-y-0 sm:scale-100"
             leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
           >
-            <div className="inline-block transform overflow-hidden text-left align-bottom transition-all sm:my-8 sm:w-full sm:max-w-md sm:p-6 sm:align-middle">
+            <div className="inline-block transform overflow-hidden text-left align-bottom transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6 sm:align-middle">
               {children}
             </div>
           </Transition.Child>