From bb37175c028992ab952847cb50abe04cf6e9a7a6 Mon Sep 17 00:00:00 2001
From: dakota002 <dakota.d@live.com>
Date: Thu, 9 May 2024 11:40:42 -0400
Subject: [PATCH] UTC, Grid, and fix button height

---
 .../CircularEditForm.tsx                      | 336 +++++++++---------
 .../CircularsEditForm.module.scss             |   5 +
 2 files changed, 182 insertions(+), 159 deletions(-)
 create mode 100644 app/routes/circulars.edit.$circularId/CircularsEditForm.module.scss

diff --git a/app/routes/circulars.edit.$circularId/CircularEditForm.tsx b/app/routes/circulars.edit.$circularId/CircularEditForm.tsx
index ad3a207544..245b382caf 100644
--- a/app/routes/circulars.edit.$circularId/CircularEditForm.tsx
+++ b/app/routes/circulars.edit.$circularId/CircularEditForm.tsx
@@ -10,6 +10,7 @@ import {
   Button,
   ButtonGroup,
   DatePicker,
+  Grid,
   Icon,
   InputGroup,
   InputPrefix,
@@ -44,6 +45,8 @@ import CollapsableInfo from '~/components/CollapsableInfo'
 import Spinner from '~/components/Spinner'
 import { useFeature, useModStatus } from '~/root'
 
+import styles from './CircularsEditForm.module.css'
+
 function SyntaxExample({
   label,
   children,
@@ -186,7 +189,7 @@ export function CircularEditForm({
   const userIsModerator = useModStatus()
 
   useEffect(() => {
-    setDateString(`${date} ${time}`)
+    setDateString(`${date} ${time} UTC`)
   }, [date, time])
 
   return (
@@ -194,183 +197,198 @@ export function CircularEditForm({
       <h1>{headerText} GCN Circular</h1>
       <Form method="POST" action={`/circulars${formSearchString}`}>
         <input type="hidden" name="intent" value={intent} />
-        {circularId !== undefined && (
-          <>
-            <input type="hidden" name="circularId" value={circularId} />
-            <InputGroup className="maxw-full">
-              <InputPrefix className="wide-input-prefix">From</InputPrefix>
+        <Grid>
+          <Grid row>
+            {circularId !== undefined && (
+              <>
+                <input type="hidden" name="circularId" value={circularId} />
+                <InputGroup className="maxw-full">
+                  <InputPrefix className="wide-input-prefix">From</InputPrefix>
+                  <TextInput
+                    autoFocus
+                    className="maxw-full"
+                    name="submitter"
+                    id="submitter"
+                    type="text"
+                    defaultValue={submitter}
+                    onChange={(event) =>
+                      setUpdatedSubmitter(event.target.value)
+                    }
+                    required
+                    disabled={!userIsModerator}
+                  />
+                </InputGroup>
+              </>
+            )}
+          </Grid>
+          <Grid row>
+            <InputGroup className="border-0 maxw-full">
+              <InputPrefix className="wide-input-prefix">
+                {circularId === undefined ? 'From' : 'Editor'}
+              </InputPrefix>
+              <span className="padding-1">{formattedContributor} </span>
+              <Link
+                to="/user"
+                title="Adjust how your name and affiliation appear in new GCN Circulars"
+              >
+                <Button unstyled type="button">
+                  <Icon.Edit role="presentation" /> Edit
+                </Button>
+              </Link>
+            </InputGroup>
+          </Grid>
+          <Grid row>
+            <input
+              type="hidden"
+              name="createdOn"
+              id="createdOn"
+              value={dateNumber}
+            />
+            <InputGroup className="border-0">
+              <InputPrefix className="wide-input-prefix">Date</InputPrefix>
+              <DatePicker
+                defaultValue={date}
+                className={classnames(styles.DatePicker, 'border-1px ')}
+                onChange={(value) => {
+                  setDate(value ?? '')
+                }}
+                name="submissionDatePicker"
+                id="submissionDatePicker"
+              />
+            </InputGroup>
+            <InputGroup className="tablet:grid-col-auto">
+              <InputPrefix className="wide-input-prefix">Time</InputPrefix>
+              <TimePicker
+                id="submissionTimePicker"
+                name="submissionTimePicker"
+                defaultValue={time}
+                className="margin-top-neg-3"
+                onChange={(value) => {
+                  setTime(value ?? '')
+                }}
+                step={1}
+                label=""
+              />
+            </InputGroup>
+          </Grid>
+          <Grid row>
+            <InputGroup
+              className={classnames('maxw-full', {
+                'usa-input--error': subjectValid === false,
+                'usa-input--success': subjectValid,
+              })}
+            >
+              <InputPrefix className="wide-input-prefix">Subject</InputPrefix>
               <TextInput
                 autoFocus
+                aria-describedby="subjectDescription"
                 className="maxw-full"
-                name="submitter"
-                id="submitter"
+                name="subject"
+                id="subject"
                 type="text"
-                defaultValue={submitter}
-                onChange={(event) => setUpdatedSubmitter(event.target.value)}
+                placeholder={useSubjectPlaceholder()}
+                defaultValue={defaultSubject}
                 required
-                disabled={!userIsModerator}
+                onChange={({ target: { value } }) => {
+                  setSubject(value)
+                  setSubjectValid(subjectIsValid(value))
+                }}
               />
             </InputGroup>
-          </>
-        )}
-        <InputGroup className="border-0 maxw-full">
-          <InputPrefix className="wide-input-prefix">
-            {circularId === undefined ? 'From' : 'Editor'}
-          </InputPrefix>
-          <span className="padding-1">{formattedContributor} </span>
-          <Link
-            to="/user"
-            title="Adjust how your name and affiliation appear in new GCN Circulars"
+          </Grid>
+          <CollapsableInfo
+            id="subjectDescription"
+            preambleText="The subject line must contain (and should start with) the name of the transient, which must start with one of the"
+            buttonText="known keywords"
           >
-            <Button unstyled type="button">
-              <Icon.Edit role="presentation" /> Edit
-            </Button>
-          </Link>
-        </InputGroup>
-        <InputGroup className="display-flex flex-align-center border-0">
-          <input
-            type="hidden"
-            name="createdOn"
-            id="createdOn"
-            value={dateNumber}
-          />
-          <InputPrefix className="wide-input-prefix">Date</InputPrefix>
-          <DatePicker
-            defaultValue={date}
-            className="border-1px"
-            onChange={(value) => {
-              setDate(value ?? '')
-            }}
-            name="submissionDatePicker"
-            id="submissionDatePicker"
-          />
-          <TimePicker
-            id="submissionTimePicker"
-            name="submissionTimePicker"
-            defaultValue={time}
-            className="border-1px margin-top-neg-3 margin-x-1"
-            onChange={(value) => {
-              setTime(value ?? '')
-            }}
-            step={1}
-            label=""
-          />
-        </InputGroup>
-        <InputGroup
-          className={classnames('maxw-full', {
-            'usa-input--error': subjectValid === false,
-            'usa-input--success': subjectValid,
-          })}
-        >
-          <InputPrefix className="wide-input-prefix">Subject</InputPrefix>
-          <TextInput
-            autoFocus
-            aria-describedby="subjectDescription"
-            className="maxw-full"
-            name="subject"
-            id="subject"
-            type="text"
-            placeholder={useSubjectPlaceholder()}
-            defaultValue={defaultSubject}
-            required
-            onChange={({ target: { value } }) => {
-              setSubject(value)
-              setSubjectValid(subjectIsValid(value))
-            }}
-          />
-        </InputGroup>
-        <CollapsableInfo
-          id="subjectDescription"
-          preambleText="The subject line must contain (and should start with) the name of the transient, which must start with one of the"
-          buttonText="known keywords"
-        >
-          <CircularsKeywords />
-        </CollapsableInfo>
-        <label hidden htmlFor="body">
-          Body
-        </label>
-        {useFeature('CIRCULARS_MARKDOWN') ? (
-          <RichEditor
-            aria-describedby="bodyDescription"
-            placeholder={bodyPlaceholder}
-            defaultValue={defaultBody}
-            defaultMarkdown={defaultFormat === 'text/markdown'}
-            required
-            className={bodyValid ? 'usa-input--success' : undefined}
-            onChange={({ target: { value } }) => {
-              setBody(value)
-            }}
-            markdownStateSetter={setFormat}
-          />
-        ) : (
-          <>
-            <SegmentedRadioButtonGroup>
-              <SegmentedRadioButton
-                defaultChecked
-                onClick={() => setShowPreview(false)}
-              >
-                Edit
-              </SegmentedRadioButton>
-              <SegmentedRadioButton onClick={() => setShowPreview(true)}>
-                Preview
-              </SegmentedRadioButton>
-            </SegmentedRadioButtonGroup>
-            <Textarea
-              hidden={showPreview}
-              name="body"
-              id="body"
+            <CircularsKeywords />
+          </CollapsableInfo>
+          <label hidden htmlFor="body">
+            Body
+          </label>
+          {useFeature('CIRCULARS_MARKDOWN') ? (
+            <RichEditor
               aria-describedby="bodyDescription"
               placeholder={bodyPlaceholder}
               defaultValue={defaultBody}
+              defaultMarkdown={defaultFormat === 'text/markdown'}
               required
-              className={classnames('maxw-full', {
-                'usa-input--success': bodyValid,
-              })}
+              className={bodyValid ? 'usa-input--success' : undefined}
               onChange={({ target: { value } }) => {
                 setBody(value)
               }}
+              markdownStateSetter={setFormat}
             />
-            {showPreview && (
-              <PlainTextBody className="border padding-1 margin-top-1">
-                {body}
-              </PlainTextBody>
-            )}
-          </>
-        )}
-        <CollapsableInfo
-          id="bodyDescription"
-          preambleText={
+          ) : (
             <>
-              Body text. If this is your first Circular, please review the{' '}
-              <Link to="/docs/circulars/styleguide">style guide</Link>.
-              References to Circulars, DOIs, arXiv preprints, and transients are
-              automatically shown as links; see
+              <SegmentedRadioButtonGroup>
+                <SegmentedRadioButton
+                  defaultChecked
+                  onClick={() => setShowPreview(false)}
+                >
+                  Edit
+                </SegmentedRadioButton>
+                <SegmentedRadioButton onClick={() => setShowPreview(true)}>
+                  Preview
+                </SegmentedRadioButton>
+              </SegmentedRadioButtonGroup>
+              <Textarea
+                hidden={showPreview}
+                name="body"
+                id="body"
+                aria-describedby="bodyDescription"
+                placeholder={bodyPlaceholder}
+                defaultValue={defaultBody}
+                required
+                className={classnames('maxw-full', {
+                  'usa-input--success': bodyValid,
+                })}
+                onChange={({ target: { value } }) => {
+                  setBody(value)
+                }}
+              />
+              {showPreview && (
+                <PlainTextBody className="border padding-1 margin-top-1">
+                  {body}
+                </PlainTextBody>
+              )}
             </>
-          }
-          buttonText="syntax"
-        >
-          <SyntaxReference />
-        </CollapsableInfo>
-        <ButtonGroup>
-          <Link
-            to={`/circulars${searchString}`}
-            className="usa-button usa-button--outline"
-          >
-            Back
-          </Link>
-          <Button
-            disabled={sending || !valid || !changesHaveBeenMade}
-            type="submit"
-            value="save"
-          >
-            {saveButtonText}
-          </Button>
-          {sending && (
-            <div className="padding-top-1 padding-bottom-1">
-              <Spinner /> Sending...
-            </div>
           )}
-        </ButtonGroup>
+          <CollapsableInfo
+            id="bodyDescription"
+            preambleText={
+              <>
+                Body text. If this is your first Circular, please review the{' '}
+                <Link to="/docs/circulars/styleguide">style guide</Link>.
+                References to Circulars, DOIs, arXiv preprints, and transients
+                are automatically shown as links; see
+              </>
+            }
+            buttonText="syntax"
+          >
+            <SyntaxReference />
+          </CollapsableInfo>
+          <ButtonGroup>
+            <Link
+              to={`/circulars${searchString}`}
+              className="usa-button usa-button--outline"
+            >
+              Back
+            </Link>
+            <Button
+              disabled={sending || !valid || !changesHaveBeenMade}
+              type="submit"
+              value="save"
+            >
+              {saveButtonText}
+            </Button>
+            {sending && (
+              <div className="padding-top-1 padding-bottom-1">
+                <Spinner /> Sending...
+              </div>
+            )}
+          </ButtonGroup>
+        </Grid>
       </Form>
     </AstroDataContext.Provider>
   )
diff --git a/app/routes/circulars.edit.$circularId/CircularsEditForm.module.scss b/app/routes/circulars.edit.$circularId/CircularsEditForm.module.scss
new file mode 100644
index 0000000000..5d16e2d9fa
--- /dev/null
+++ b/app/routes/circulars.edit.$circularId/CircularsEditForm.module.scss
@@ -0,0 +1,5 @@
+.DatePicker {
+  button {
+    margin-top: 0;
+  }
+}