Fixed styles in forms

TIER · Apr 22, 2022 · 31e96be · 31e96be
1 parent a8f1459
commit 31e96be
Show file tree

Hide file tree

Showing 8 changed files with 11 additions and 12 deletions.
diff --git a/ui/src/app/form/component/fields/StringListWithDefaultField.js b/ui/src/app/form/component/fields/StringListWithDefaultField.js
@@ -132,7 +132,7 @@ const StringListWithDefaultField = ({
                                     className="flex-grow-1"
                                     value={p.value}
                                     onChange={({ target: { value } }) => setValue(p, value)}></Form.Control>
-                                <Form.Control className="mx-4" custom name="default" type="radio"
+                                <Form.Control className="mx-4" name="default" type="radio"
                                     checked={ p.default }
                                     onChange={ () => setDefault(p) }
                                 ></Form.Control>

diff --git a/ui/src/app/form/component/templates/FieldTemplate.js b/ui/src/app/form/component/templates/FieldTemplate.js
@@ -19,7 +19,7 @@ export function FieldTemplate ({
 
     return (
         <>{!props.hidden ?
-            <Form.Group>
+            <Form.Group className="mb-3">
                 <div>
                     {children}
                 </div>

diff --git a/ui/src/app/form/component/widgets/AttributeReleaseWidget.js b/ui/src/app/form/component/widgets/AttributeReleaseWidget.js
@@ -145,7 +145,6 @@ const AttributeReleaseWidget = ({
                                     <fieldset className="d-flex justify-content-end">
                                         <div className="custom-control custom-checkbox bordered-custom-checkbox pe-2">
                                             <Form.Check
-                                                custom
                                                 required={required}
                                                 checked={checked}
                                                 className="bg-transparent"

diff --git a/ui/src/app/form/component/widgets/TextWidget.js b/ui/src/app/form/component/widgets/TextWidget.js
@@ -40,7 +40,7 @@ const TextWidget = ({
 
     // const classNames = [rawErrors?.length > 0 ? "is-invalid" : "", type === 'file' ? 'custom-file-label': ""]
     return (
-        <Form.Group className="mb-3">
+        <Form.Group>
             <Form.Label className={`${rawErrors?.length > 0 && touched ? "text-danger" : ""}`} htmlFor={id}>
                 <span>
                     <Translate value={label || schema.title} />

diff --git a/ui/src/app/form/component/widgets/TextareaWidget.js b/ui/src/app/form/component/widgets/TextareaWidget.js
@@ -45,7 +45,7 @@ const TextareaWidget = ({
     };
 
     return (
-        <div className="mb-3">
+        <React.Fragment>
             <Form.Label className={`${touched && rawErrors?.length > 0 ? "text-danger" : ""}`}>
                 <span>
                     <Translate value={label || schema.title} />
@@ -82,7 +82,7 @@ const TextareaWidget = ({
                     })}
                 </ListGroup>
             )}
-        </div>
+        </React.Fragment>
     );
 };
 

diff --git a/ui/src/app/form/component/widgets/UpDownWidget.js b/ui/src/app/form/component/widgets/UpDownWidget.js
@@ -44,7 +44,7 @@ const UpDownWidget = ({
     };
 
     return (
-        <Form.Group className="mb-0">
+        <Form.Group>
             <Form.Label>
                 <span>
                     <Translate value={label || schema.title} />

diff --git a/ui/src/app/metadata/wizard/MetadataFilterTypeSelector.js b/ui/src/app/metadata/wizard/MetadataFilterTypeSelector.js
@@ -44,7 +44,7 @@ export function MetadataFilterTypeSelector({ types = [], children, actions}) {
                                         <span><Translate value={'label.metadata-provider-type'} /></span>
                                         <InfoIcon value="tooltip.metadata-provider-type" />
                                     </Form.Label>
-                                    <Form.Control custom as="select" defaultValue={''} placeholder={translator(`label.select-metadata-type`)} {...register('type', { required: true })}>
+                                    <Form.Control as="select" defaultValue={''} placeholder={translator(`label.select-metadata-type`)} {...register('type', { required: true })}>
                                         <option disabled value="">{translator(`label.select-metadata-type`)}</option>
                                         {types.map(t => <option key={t} value={t}>{t}</option>)}
                                     </Form.Control>

diff --git a/ui/src/app/metadata/wizard/MetadataProviderTypeSelector.js b/ui/src/app/metadata/wizard/MetadataProviderTypeSelector.js
@@ -81,7 +81,7 @@ export function MetadataProviderTypeSelector({ type, types = [], children}) {
                     <div className="col col-xl-6 col-lg-9 col-xs-12">
                         <div className="bg-light border rounded px-4 pt-4 pb-1">
                             <Form onSubmit={handleSubmit(onNext)}>
-                                <Form.Group className={errors.name ? 'text-danger' : ''}>
+                                <Form.Group className={`${errors.name ? 'text-danger' : ''} mb-3`}>
                                     <Form.Label>
                                         <span><Translate value={'label.metadata-provider-name-dashboard-display-only'} /></span>
                                         <InfoIcon value="tooltip.metadata-provider-name" />
@@ -96,18 +96,18 @@ export function MetadataProviderTypeSelector({ type, types = [], children}) {
                                         {errors?.name?.type === 'required' && <Translate value={`message.service-resolver-name-required`} />}
                                     </Form.Text>
                                 </Form.Group>
-                                <Form.Group>
+                                <Form.Group className="mb-3">
                                     <Form.Label>
                                         <span>
                                             <Translate value={'label.metadata-provider-type'} />
                                             {loading && <FontAwesomeIcon icon={faSpinner} size="lg" spin={true} pulse={true} className="ms-2" /> }
                                         </span>
                                         <InfoIcon value="tooltip.metadata-provider-type" />
                                     </Form.Label>
-                                    <Form.Control disabled={loading} custom as="select" defaultValue={''} placeholder={translator(`label.select-metadata-type`)} {...register('type', {required: true})}>
+                                    <Form.Select disabled={loading} defaultValue={''} placeholder={translator(`label.select-metadata-type`)} {...register('type', {required: true})}>
                                         <option disabled value="">{translator(`label.select-metadata-type`)}</option>
                                         {types.map(t => <option key={t} value={t}>{t}</option>)}
-                                    </Form.Control>
+                                    </Form.Select>
                                 </Form.Group>
                             </Form>
                         </div>