From 7c798a063c3dc1f783fd31c7c8b90cc6b60ec6bb Mon Sep 17 00:00:00 2001
From: James Grugett <jahooma@gmail.com>
Date: Sun, 28 Aug 2022 00:35:22 -0500
Subject: [PATCH] Improve edit close date UI

---
 web/components/contract/contract-details.tsx | 35 ++++++++++++++------
 1 file changed, 25 insertions(+), 10 deletions(-)

diff --git a/web/components/contract/contract-details.tsx b/web/components/contract/contract-details.tsx
index 354f4394..7705b538 100644
--- a/web/components/contract/contract-details.tsx
+++ b/web/components/contract/contract-details.tsx
@@ -191,7 +191,7 @@ export function ContractDetails(props: {
           <Row>
             <Button
               size={'xs'}
-              className={'max-w-[200px] pr-1'}
+              className={'max-w-[200px] pr-2'}
               color={'gray-white'}
               onClick={() =>
                 groupToDisplay
@@ -203,11 +203,10 @@ export function ContractDetails(props: {
             </Button>
             <Button
               size={'xs'}
-              className={'!px-2'}
               color={'gray-white'}
               onClick={() => setOpen(!open)}
             >
-              <PencilIcon className="inline h-5 w-5 shrink-0" />
+              <PencilIcon className="mb-0.5 mr-0.5 inline h-4 w-4 shrink-0" />
             </Button>
           </Row>
         )}
@@ -277,14 +276,22 @@ function EditableCloseDate(props: {
 
   const [isEditingCloseTime, setIsEditingCloseTime] = useState(false)
   const [closeDate, setCloseDate] = useState(
-    closeTime && dayJsCloseTime.format('YYYY-MM-DDTHH:mm')
+    closeTime && dayJsCloseTime.format('YYYY-MM-DD')
   )
+  const [closeHoursMinutes, setCloseHoursMinutes] = useState(
+    closeTime && dayJsCloseTime.format('HH:mm')
+  )
+
+  const newCloseTime = closeDate
+    ? dayjs(`${closeDate}T${closeHoursMinutes}`).valueOf()
+    : undefined
 
   const isSameYear = dayJsCloseTime.isSame(dayJsNow, 'year')
   const isSameDay = dayJsCloseTime.isSame(dayJsNow, 'day')
 
   const onSave = () => {
-    const newCloseTime = dayjs(closeDate).valueOf()
+    if (!newCloseTime) return
+
     if (newCloseTime === closeTime) setIsEditingCloseTime(false)
     else if (newCloseTime > Date.now()) {
       const content = contract.description
@@ -309,16 +316,24 @@ function EditableCloseDate(props: {
   return (
     <>
       {isEditingCloseTime ? (
-        <div className="form-control mr-1 items-start">
+        <Row className="mr-1 items-start">
           <input
-            type="datetime-local"
+            type="date"
             className="input input-bordered"
             onClick={(e) => e.stopPropagation()}
-            onChange={(e) => setCloseDate(e.target.value || '')}
+            onChange={(e) => setCloseDate(e.target.value)}
             min={Date.now()}
             value={closeDate}
           />
-        </div>
+          <input
+            type="time"
+            className="input input-bordered ml-2"
+            onClick={(e) => e.stopPropagation()}
+            onChange={(e) => setCloseHoursMinutes(e.target.value)}
+            min="00:00"
+            value={closeHoursMinutes}
+          />
+        </Row>
       ) : (
         <DateTimeTooltip
           text={closeTime > Date.now() ? 'Trading ends:' : 'Trading ended:'}
@@ -342,7 +357,7 @@ function EditableCloseDate(props: {
             color={'gray-white'}
             onClick={() => setIsEditingCloseTime(true)}
           >
-            <PencilIcon className="mr-0.5 inline h-4 w-4" /> Edit
+            <PencilIcon className="!container mr-0.5 mb-0.5 inline h-4 w-4" />
           </Button>
         ))}
     </>