Improving button-select input adjacency on create exercise form.

ReCodEx · Nov 3, 2021 · a30c539 · a30c539
1 parent 0d3b486
commit a30c539
Showing 1 changed file with 25 additions and 32 deletions.
diff --git a/src/components/forms/CreateExerciseForm/CreateExerciseForm.js b/src/components/forms/CreateExerciseForm/CreateExerciseForm.js
@@ -35,38 +35,31 @@ class CreateExerciseForm extends Component {
         title={<FormattedMessage id="app.createExerciseForm.title" defaultMessage="Create New Exercise" />}
         type={submitSucceeded ? 'success' : undefined}>
         <>
-          <table>
-            <tbody>
-              <tr>
-                <td className="valign-top full-width">
-                  <Field
-                    name="groupId"
-                    component={SelectField}
-                    label=""
-                    ignoreDirty
-                    addEmptyOption
-                    emptyOptionCaption={formatMessage(messages.emptyOption)}
-                    options={groups}
-                  />
-                </td>
-                <td className="valign-top">
-                  <SubmitButton
-                    id="createExercise"
-                    disabled={invalid}
-                    submitting={submitting}
-                    hasSucceeded={submitSucceeded}
-                    hasFailed={submitFailed}
-                    handleSubmit={handleSubmit}
-                    messages={{
-                      submit: <FormattedMessage id="generic.create" defaultMessage="Create" />,
-                      submitting: <FormattedMessage id="generic.creating" defaultMessage="Creating..." />,
-                      success: <FormattedMessage id="generic.created" defaultMessage="Created" />,
-                    }}
-                  />
-                </td>
-              </tr>
-            </tbody>
-          </table>
+          <Field
+            name="groupId"
+            component={SelectField}
+            label=""
+            ignoreDirty
+            addEmptyOption
+            emptyOptionCaption={formatMessage(messages.emptyOption)}
+            options={groups}
+            append={
+              <SubmitButton
+                id="createExercise"
+                disabled={invalid}
+                submitting={submitting}
+                hasSucceeded={submitSucceeded}
+                hasFailed={submitFailed}
+                handleSubmit={handleSubmit}
+                noShadow
+                messages={{
+                  submit: <FormattedMessage id="generic.create" defaultMessage="Create" />,
+                  submitting: <FormattedMessage id="generic.creating" defaultMessage="Creating..." />,
+                  success: <FormattedMessage id="generic.created" defaultMessage="Created" />,
+                }}
+              />
+            }
+          />
 
           {submitFailed && (
             <Callout variant="danger">