Switch from Form Items to List Items

thewca · Jan 20, 2025 · a4f14ae · a4f14ae
1 parent 2f2d62c
commit a4f14ae
Showing 1 changed file with 49 additions and 43 deletions.
diff --git a/app/webpacker/components/RegistrationsV2/Register/RegistrationOverview.jsx b/app/webpacker/components/RegistrationsV2/Register/RegistrationOverview.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {
-  Button, ButtonGroup, Form, FormField, Header, Message, Segment,
+  Button, ButtonGroup, Form, FormField, Header, List, Message, Segment,
 } from 'semantic-ui-react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import I18n from '../../../lib/i18n';
@@ -63,6 +63,7 @@ export default function RegistrationOverview({
     event.preventDefault();
     // i18n-tasks-use t('registrations.delete_confirm')
     confirm({ content: I18n.t(deleteAllowed ? 'registrations.delete_confirm' : 'competitions.registration_v2.update.delete_confirm_contact') })
+      // eslint-disable-next-line no-return-assign
       .then(() => (deleteAllowed
         ? deleteRegistrationMutation()
         : window.location = contactCompetitionUrl(competitionInfo.id, encodeURIComponent(I18n.t('competitions.registration_v2.update.delete_contact_message')))))
@@ -84,49 +85,54 @@ export default function RegistrationOverview({
       <Segment loading={isDeleting}>
         <Header>{I18n.t('competitions.nav.menu.registration')}</Header>
         <Form onSubmit={nextStep} size="large">
-          <FormField>
-            <label>
-              {I18n.t('activerecord.attributes.registration.registration_competition_events')}
-              :
-            </label>
-            { /* Make sure to keep WCA Event order */}
-            {events.official
-              .filter((e) => registration.competing.event_ids.includes(e.id))
-              .map((e) => (<EventIcon key={e.id} id={e.id} hoverable={false} />))}
-          </FormField>
-          <FormField />
-          <FormField>
-            <label>
-              {I18n.t('activerecord.attributes.registration.comments')}
-              :
-            </label>
-            {registration.competing.comment.length > 0 ? registration.competing.comment : I18n.t('competitions.schedule.rooms_panel.none')}
-          </FormField>
-          <FormField />
-          {competitionInfo.guests_enabled && (
-            <FormField>
-              <label>
-                {I18n.t('activerecord.attributes.registration.guests')}
+          <List>
+            <List.Item>
+              <List.Header>
+                {I18n.t('activerecord.attributes.registration.registration_competition_events')}
                 :
-              </label>
-              {registration.guests}
-            </FormField>
-          )}
-          <ButtonGroup widths={2}>
-            <Button
-              primary
-              type="submit"
-              disabled={hasRegistrationEditDeadlinePassed}
-            >
-              {I18n.t(hasRegistrationEditDeadlinePassed ? 'competitions.registration_v2.errors.-4001' : 'registrations.update')}
-            </Button>
-            <Button
-              negative
-              onClick={deleteRegistration}
-            >
-              {I18n.t('registrations.delete_registration')}
-            </Button>
-          </ButtonGroup>
+              </List.Header>
+              { /* Make sure to keep WCA Event order */}
+              {events.official
+                .filter((e) => registration.competing.event_ids.includes(e.id))
+                .map((e) => (
+                  <React.Fragment key={e.id}>
+                    <EventIcon id={e.id} hoverable={false} />
+                    {' '}
+                  </React.Fragment>
+                ))}
+            </List.Item>
+            <List.Item>
+              <List.Header>
+                {I18n.t('activerecord.attributes.registration.comments')}
+                :
+              </List.Header>
+              {registration.competing.comment.length > 0 ? registration.competing.comment : I18n.t('competitions.schedule.rooms_panel.none')}
+            </List.Item>
+            {competitionInfo.guests_enabled && (
+              <List.Item>
+                <List.Header>
+                  {I18n.t('activerecord.attributes.registration.guests')}
+                  :
+                </List.Header>
+                {registration.guests}
+              </List.Item>
+            )}
+            <ButtonGroup widths={2}>
+              <Button
+                primary
+                type="submit"
+                disabled={hasRegistrationEditDeadlinePassed}
+              >
+                {I18n.t(hasRegistrationEditDeadlinePassed ? 'competitions.registration_v2.errors.-4001' : 'registrations.update')}
+              </Button>
+              <Button
+                negative
+                onClick={deleteRegistration}
+              >
+                {I18n.t('registrations.delete_registration')}
+              </Button>
+            </ButtonGroup>
+          </List>
         </Form>
       </Segment>
     </>