From 9290e3eb6fa46c7b32d80f37a8b598ab09e64998 Mon Sep 17 00:00:00 2001
From: Igor <nemytyshew@yandex.ru>
Date: Sat, 17 Apr 2021 23:17:36 +0300
Subject: [PATCH] form controls (#417)

---
 app/calendar/components/EventModal.tsx |  74 +++++-----
 app/freeagents/components/FAModal.tsx  |  42 +++---
 components/u/BuildModal.tsx            |  92 +++++++------
 components/u/ProfileModal.tsx          | 180 +++++++++++++------------
 pages/maps.tsx                         |  89 ++++++------
 pages/sr/leaderboards/new.tsx          |  26 ++--
 6 files changed, 265 insertions(+), 238 deletions(-)

diff --git a/app/calendar/components/EventModal.tsx b/app/calendar/components/EventModal.tsx
index cf889ee53..3b033d39a 100644
--- a/app/calendar/components/EventModal.tsx
+++ b/app/calendar/components/EventModal.tsx
@@ -148,11 +148,10 @@ export function EventModal({
                 </Stack>
               </RadioGroup> */}
 
-              <FormLabel htmlFor="name">
-                <Trans>Name</Trans>
-              </FormLabel>
-
               <FormControl isInvalid={!!errors.name}>
+                <FormLabel htmlFor="name">
+                  <Trans>Name</Trans>
+                </FormLabel>
                 <Input
                   name="name"
                   ref={register}
@@ -162,11 +161,10 @@ export function EventModal({
                 <FormErrorMessage>{errors.name}</FormErrorMessage>
               </FormControl>
 
-              <FormLabel htmlFor="date" mt={4}>
-                <Trans>Date</Trans>
-              </FormLabel>
-
               <FormControl isInvalid={!!errors.date}>
+                <FormLabel htmlFor="date" mt={4}>
+                  <Trans>Date</Trans>
+                </FormLabel>
                 <Controller
                   name="date"
                   control={control}
@@ -191,11 +189,10 @@ export function EventModal({
                 <FormErrorMessage>{errors.date?.message}</FormErrorMessage>
               </FormControl>
 
-              <FormLabel htmlFor="discordInviteUrl" mt={4}>
-                <Trans>Discord invite URL</Trans>
-              </FormLabel>
-
               <FormControl isInvalid={!!errors.discordInviteUrl}>
+                <FormLabel htmlFor="discordInviteUrl" mt={4}>
+                  <Trans>Discord invite URL</Trans>
+                </FormLabel>
                 <Input
                   name="discordInviteUrl"
                   ref={register}
@@ -207,11 +204,10 @@ export function EventModal({
                 </FormErrorMessage>
               </FormControl>
 
-              <FormLabel htmlFor="eventUrl" mt={4}>
-                <Trans>Registration URL</Trans>
-              </FormLabel>
-
               <FormControl isInvalid={!!errors.eventUrl}>
+                <FormLabel htmlFor="eventUrl" mt={4}>
+                  <Trans>Registration URL</Trans>
+                </FormLabel>
                 <Input
                   name="eventUrl"
                   ref={register}
@@ -221,17 +217,19 @@ export function EventModal({
                 <FormErrorMessage>{errors.eventUrl?.message}</FormErrorMessage>
               </FormControl>
 
-              <FormLabel htmlFor="format" mt={4}>
-                <Trans>Format</Trans>
-              </FormLabel>
+              <FormControl>
+                <FormLabel htmlFor="format" mt={4}>
+                  <Trans>Format</Trans>
+                </FormLabel>
 
-              <Select name="format" ref={register}>
-                {EVENT_FORMATS.map((format) => (
-                  <option key={format.code} value={format.code}>
-                    {format.name}
-                  </option>
-                ))}
-              </Select>
+                <Select name="format" ref={register}>
+                  {EVENT_FORMATS.map((format) => (
+                    <option key={format.code} value={format.code}>
+                      {format.name}
+                    </option>
+                  ))}
+                </Select>
+              </FormControl>
 
               <MarkdownTextarea
                 fieldName="description"
@@ -247,17 +245,19 @@ export function EventModal({
                 dataCy="description-markdown"
               />
 
-              <FormLabel htmlFor="tags" mt={4}>
-                <Trans>Tags</Trans>
-              </FormLabel>
-              <Controller
-                name="tags"
-                control={control}
-                defaultValue={[]}
-                render={({ onChange, value }) => (
-                  <TagsSelector value={value} setValue={onChange} />
-                )}
-              />
+              <FormControl>
+                <FormLabel htmlFor="tags" mt={4}>
+                  <Trans>Tags</Trans>
+                </FormLabel>
+                <Controller
+                  name="tags"
+                  control={control}
+                  defaultValue={[]}
+                  render={({ onChange, value }) => (
+                    <TagsSelector value={value} setValue={onChange} />
+                  )}
+                />
+              </FormControl>
             </ModalBody>
 
             <ModalFooter>
diff --git a/app/freeagents/components/FAModal.tsx b/app/freeagents/components/FAModal.tsx
index 9bc839a00..96871bd8d 100644
--- a/app/freeagents/components/FAModal.tsx
+++ b/app/freeagents/components/FAModal.tsx
@@ -124,11 +124,11 @@ const FAModal = ({ onClose, post, refetchQuery }: Props) => {
                   </FormControl>
                 </>
               )}
-              <FormLabel htmlFor="playstyles">
-                <Trans>Roles</Trans>
-              </FormLabel>
 
               <FormControl isInvalid={!!errors.playstyles}>
+                <FormLabel htmlFor="playstyles">
+                  <Trans>Roles</Trans>
+                </FormLabel>
                 <Controller
                   name="playstyles"
                   control={control}
@@ -155,23 +155,25 @@ const FAModal = ({ onClose, post, refetchQuery }: Props) => {
                 </FormErrorMessage>
               </FormControl>
 
-              <FormLabel htmlFor="canVC" mt={4}>
-                <Trans>Can you voice chat?</Trans>
-              </FormLabel>
-              <Controller
-                name="canVC"
-                control={control}
-                defaultValue="YES"
-                render={({ onChange, value }) => (
-                  <RadioGroup value={value} onChange={onChange}>
-                    <Stack direction="row">
-                      <Radio value="YES">Yes</Radio>
-                      <Radio value="MAYBE">Sometimes</Radio>
-                      <Radio value="NO">No</Radio>
-                    </Stack>
-                  </RadioGroup>
-                )}
-              />
+              <FormControl>
+                <FormLabel htmlFor="canVC" mt={4}>
+                  <Trans>Can you voice chat?</Trans>
+                </FormLabel>
+                <Controller
+                  name="canVC"
+                  control={control}
+                  defaultValue="YES"
+                  render={({ onChange, value }) => (
+                    <RadioGroup value={value} onChange={onChange}>
+                      <Stack direction="row">
+                        <Radio value="YES">Yes</Radio>
+                        <Radio value="MAYBE">Sometimes</Radio>
+                        <Radio value="NO">No</Radio>
+                      </Stack>
+                    </RadioGroup>
+                  )}
+                />
+              </FormControl>
 
               <MarkdownTextarea
                 fieldName="content"
diff --git a/components/u/BuildModal.tsx b/components/u/BuildModal.tsx
index 700fa8b07..dde3a55f1 100644
--- a/components/u/BuildModal.tsx
+++ b/components/u/BuildModal.tsx
@@ -298,49 +298,59 @@ const BuildModal: React.FC<Props> = ({ onClose, build, weaponFromQuery }) => {
                 </FormErrorMessage>
               </FormControl>
 
-              <FormLabel htmlFor="headGear" mt={4}>
-                <Trans>Head</Trans>
-              </FormLabel>
-              <Controller
-                name="headGear"
-                control={control}
-                defaultValue=""
-                render={({ onChange, value, name }) => (
-                  <GearSelector slot="head" value={value} setValue={onChange} />
-                )}
-              />
+              <FormControl>
+                <FormLabel htmlFor="headGear" mt={4}>
+                  <Trans>Head</Trans>
+                </FormLabel>
+                <Controller
+                  name="headGear"
+                  control={control}
+                  defaultValue=""
+                  render={({ onChange, value, name }) => (
+                    <GearSelector
+                      slot="head"
+                      value={value}
+                      setValue={onChange}
+                    />
+                  )}
+                />
+              </FormControl>
 
-              <FormLabel htmlFor="clothingGear" mt={4}>
-                <Trans>Clothing</Trans>
-              </FormLabel>
-              <Controller
-                name="clothingGear"
-                control={control}
-                defaultValue=""
-                render={({ onChange, value }) => (
-                  <GearSelector
-                    slot="clothing"
-                    value={value}
-                    setValue={onChange}
-                  />
-                )}
-              />
+              <FormControl>
+                <FormLabel htmlFor="clothingGear" mt={4}>
+                  <Trans>Clothing</Trans>
+                </FormLabel>
+                <Controller
+                  name="clothingGear"
+                  control={control}
+                  defaultValue=""
+                  render={({ onChange, value }) => (
+                    <GearSelector
+                      slot="clothing"
+                      value={value}
+                      setValue={onChange}
+                    />
+                  )}
+                />
+              </FormControl>
 
-              <FormLabel htmlFor="shoesGear" mt={4}>
-                <Trans>Shoes</Trans>
-              </FormLabel>
-              <Controller
-                name="shoesGear"
-                control={control}
-                defaultValue=""
-                render={({ onChange, value }) => (
-                  <GearSelector
-                    slot="shoes"
-                    value={value}
-                    setValue={onChange}
-                  />
-                )}
-              />
+              <FormControl>
+                <FormLabel htmlFor="shoesGear" mt={4}>
+                  <Trans>Shoes</Trans>
+                </FormLabel>
+                <Controller
+                  name="shoesGear"
+                  control={control}
+                  defaultValue=""
+                  render={({ onChange, value }) => (
+                    <GearSelector
+                      slot="shoes"
+                      value={value}
+                      setValue={onChange}
+                    />
+                  )}
+                />
+              </FormControl>
 
               <FormControl isInvalid={!!errors.modes}>
                 <FormLabel htmlFor="modes" mt={4}>
diff --git a/components/u/ProfileModal.tsx b/components/u/ProfileModal.tsx
index 2c8573b86..ff1846fb3 100644
--- a/components/u/ProfileModal.tsx
+++ b/components/u/ProfileModal.tsx
@@ -225,95 +225,103 @@ const ProfileModal: React.FC<Props> = ({ onClose, user }) => {
                 <FormErrorMessage>{errors.youtubeId?.message}</FormErrorMessage>
               </FormControl>
 
-              <FormLabel htmlFor="country" mt={4}>
-                <Trans>Country</Trans>
-              </FormLabel>
-              <Controller
-                name="country"
-                control={control}
-                defaultValue={""}
-                render={({ onChange, value }) => (
-                  <ChakraSelect
-                    value={value}
-                    setValue={onChange}
-                    placeholder={t`Select country`}
-                  >
-                    {(Object.keys(countries) as Array<keyof typeof countries>)
-                      .sort((a, b) =>
-                        countries[a].name.localeCompare(countries[b].name)
-                      )
-                      .map((countryCode) => (
-                        <option key={countryCode} value={countryCode}>
-                          {countries[countryCode].name}
+              <FormControl>
+                <FormLabel htmlFor="country" mt={4}>
+                  <Trans>Country</Trans>
+                </FormLabel>
+                <Controller
+                  name="country"
+                  control={control}
+                  defaultValue={""}
+                  render={({ onChange, value }) => (
+                    <ChakraSelect
+                      value={value}
+                      setValue={onChange}
+                      placeholder={t`Select country`}
+                    >
+                      {(Object.keys(countries) as Array<keyof typeof countries>)
+                        .sort((a, b) =>
+                          countries[a].name.localeCompare(countries[b].name)
+                        )
+                        .map((countryCode) => (
+                          <option key={countryCode} value={countryCode}>
+                            {countries[countryCode].name}
+                          </option>
+                        ))}
+                    </ChakraSelect>
+                  )}
+                />
+              </FormControl>
+
+              <FormControl>
+                <FormLabel htmlFor="weaponPool" mt={4}>
+                  <Trans>Weapon pool</Trans>
+                </FormLabel>
+                <Controller
+                  name="weaponPool"
+                  control={control}
+                  defaultValue={[]}
+                  render={({ onChange, value }) => (
+                    <WeaponSelector
+                      value={value}
+                      setValue={onChange}
+                      isMulti
+                      pool="WITH_ALTS"
+                      maxMultiCount={5}
+                    />
+                  )}
+                />
+              </FormControl>
+
+              <FormControl>
+                <FormLabel htmlFor="sensStick" mt={4}>
+                  <Box as={FaGamepad} display="inline-block" mr={2} mb={1} />
+                  <Trans>Stick sensitivity</Trans>
+                </FormLabel>
+                <Controller
+                  name="sensStick"
+                  control={control}
+                  render={({ onChange, value, name }) => (
+                    <ChakraSelect
+                      placeholder={t`Select stick sensitivity`}
+                      name={name}
+                      value={value}
+                      setValue={onChange}
+                    >
+                      {sensOptions.map((sens) => (
+                        <option key={sens} value={sens}>
+                          {sens}
                         </option>
                       ))}
-                  </ChakraSelect>
-                )}
-              />
+                    </ChakraSelect>
+                  )}
+                />
+              </FormControl>
 
-              <FormLabel htmlFor="weaponPool" mt={4}>
-                <Trans>Weapon pool</Trans>
-              </FormLabel>
-              <Controller
-                name="weaponPool"
-                control={control}
-                defaultValue={[]}
-                render={({ onChange, value }) => (
-                  <WeaponSelector
-                    value={value}
-                    setValue={onChange}
-                    isMulti
-                    pool="WITH_ALTS"
-                    maxMultiCount={5}
-                  />
-                )}
-              />
-
-              <FormLabel htmlFor="sensStick" mt={4}>
-                <Box as={FaGamepad} display="inline-block" mr={2} mb={1} />
-                <Trans>Stick sensitivity</Trans>
-              </FormLabel>
-              <Controller
-                name="sensStick"
-                control={control}
-                render={({ onChange, value, name }) => (
-                  <ChakraSelect
-                    placeholder={t`Select stick sensitivity`}
-                    name={name}
-                    value={value}
-                    setValue={onChange}
-                  >
-                    {sensOptions.map((sens) => (
-                      <option key={sens} value={sens}>
-                        {sens}
-                      </option>
-                    ))}
-                  </ChakraSelect>
-                )}
-              />
-
-              <FormLabel htmlFor="sensMotion" mt={4}>
-                <Box as={FaGamepad} display="inline-block" mr={2} mb={1} />
-                <Trans>Motion sensitivity</Trans>
-              </FormLabel>
-              <Controller
-                name="sensMotion"
-                control={control}
-                render={({ onChange, value, name }) => (
-                  <ChakraSelect
-                    placeholder={t`Select motion sensitivity`}
-                    name={name}
-                    value={value}
-                    setValue={onChange}
-                  >
-                    {sensOptions.map((sens) => (
-                      <option key={sens} value={sens}>
-                        {sens}
-                      </option>
-                    ))}
-                  </ChakraSelect>
-                )}
-              />
+              <FormControl>
+                <FormLabel htmlFor="sensMotion" mt={4}>
+                  <Box as={FaGamepad} display="inline-block" mr={2} mb={1} />
+                  <Trans>Motion sensitivity</Trans>
+                </FormLabel>
+                <Controller
+                  name="sensMotion"
+                  control={control}
+                  render={({ onChange, value, name }) => (
+                    <ChakraSelect
+                      placeholder={t`Select motion sensitivity`}
+                      name={name}
+                      value={value}
+                      setValue={onChange}
+                    >
+                      {sensOptions.map((sens) => (
+                        <option key={sens} value={sens}>
+                          {sens}
+                        </option>
+                      ))}
+                    </ChakraSelect>
+                  )}
+                />
+              </FormControl>
 
               <MarkdownTextarea
                 fieldName="bio"
diff --git a/pages/maps.tsx b/pages/maps.tsx
index f93195beb..8c8f9be6d 100644
--- a/pages/maps.tsx
+++ b/pages/maps.tsx
@@ -4,6 +4,7 @@ import {
   Box,
   Button,
   Checkbox,
+  FormControl,
   FormLabel,
   Grid,
   Input,
@@ -256,27 +257,29 @@ const MapsGeneratorPage = () => {
               );
             })}
           </Grid>
-          <FormLabel htmlFor="share" mt={4}>
-            <Trans>Share your map pool</Trans>
-          </FormLabel>
-          {window && (
-            <InputGroup size="md" mb={8}>
-              <Input name="share" value={window.location.href} readOnly />
-              <InputRightElement width="4.5rem">
-                <Button
-                  onClick={() => {
-                    navigator.clipboard.writeText(window.location.href);
-                    setCopied("URL");
-                  }}
-                  h="1.75rem"
-                  size="sm"
-                  disabled={copied === "URL"}
-                >
-                  {copied === "URL" ? <FiCheck /> : <Trans>Copy</Trans>}
-                </Button>
-              </InputRightElement>
-            </InputGroup>
-          )}
+          <FormControl>
+            <FormLabel htmlFor="share" mt={4}>
+              <Trans>Share your map pool</Trans>
+            </FormLabel>
+            {window && (
+              <InputGroup size="md" mb={8}>
+                <Input name="share" value={window.location.href} readOnly />
+                <InputRightElement width="4.5rem">
+                  <Button
+                    onClick={() => {
+                      navigator.clipboard.writeText(window.location.href);
+                      setCopied("URL");
+                    }}
+                    h="1.75rem"
+                    size="sm"
+                    disabled={copied === "URL"}
+                  >
+                    {copied === "URL" ? <FiCheck /> : <Trans>Copy</Trans>}
+                  </Button>
+                </InputRightElement>
+              </InputGroup>
+            )}
+          </FormControl>
         </>
       ) : (
         <Grid
@@ -380,27 +383,29 @@ const MapsGeneratorPage = () => {
           width={"90%"}
         />
       )}
-      <FormLabel htmlFor="count" fontSize="sm" mt={4}>
-        <Trans>Amount of maps to generate</Trans>
-      </FormLabel>
-      <NumberInput
-        name="count"
-        size="sm"
-        value={count}
-        min={1}
-        max={100}
-        onChange={(_, value) => {
-          if (!Number.isNaN(value)) setCount(value);
-        }}
-        mb={4}
-        width={24}
-      >
-        <NumberInputField />
-        <NumberInputStepper>
-          <NumberIncrementStepper />
-          <NumberDecrementStepper />
-        </NumberInputStepper>
-      </NumberInput>
+      <FormControl>
+        <FormLabel htmlFor="count" fontSize="sm" mt={4}>
+          <Trans>Amount of maps to generate</Trans>
+        </FormLabel>
+        <NumberInput
+          name="count"
+          size="sm"
+          value={count}
+          min={1}
+          max={100}
+          onChange={(_, value) => {
+            if (!Number.isNaN(value)) setCount(value);
+          }}
+          mb={4}
+          width={24}
+        >
+          <NumberInputField />
+          <NumberInputStepper>
+            <NumberIncrementStepper />
+            <NumberDecrementStepper />
+          </NumberInputStepper>
+        </NumberInput>
+      </FormControl>
       {maplist && (
         <>
           <Textarea value={maplist} readOnly rows={9} />
diff --git a/pages/sr/leaderboards/new.tsx b/pages/sr/leaderboards/new.tsx
index dbb4f2b2f..ced80f759 100644
--- a/pages/sr/leaderboards/new.tsx
+++ b/pages/sr/leaderboards/new.tsx
@@ -97,18 +97,20 @@ const AddRecordModal = () => {
 
         {watchRotationId && (
           <>
-            <FormLabel htmlFor="category" mt={4}>
-              <Trans>Category</Trans>
-            </FormLabel>
-            <Select name="category" ref={register}>
-              {Object.entries(salmonRunCategoryToNatural).map(
-                ([key, value]) => (
-                  <option key={key} value={key}>
-                    {i18n._(value)}
-                  </option>
-                )
-              )}
-            </Select>
+            <FormControl>
+              <FormLabel htmlFor="category" mt={4}>
+                <Trans>Category</Trans>
+              </FormLabel>
+              <Select name="category" ref={register}>
+                {Object.entries(salmonRunCategoryToNatural).map(
+                  ([key, value]) => (
+                    <option key={key} value={key}>
+                      {i18n._(value)}
+                    </option>
+                  )
+                )}
+              </Select>
+            </FormControl>
 
             <FormControl isInvalid={!!errors.goldenEggCount}>
               <FormLabel htmlFor="goldenEggCount" mt={4}>