feat: Use Stack to space parts of the personal info

cozy · Jul 24, 2020 · 5c46d0b · 5c46d0b
1 parent 7ea78c8
commit 5c46d0b
Showing 1 changed file with 23 additions and 19 deletions.
diff --git a/src/ducks/personal-info/Form.jsx b/src/ducks/personal-info/Form.jsx
@@ -3,6 +3,7 @@ import { translate } from 'cozy-ui/transpiled/react/I18n'
 import { withClient } from 'cozy-client'
 import Button from 'cozy-ui/transpiled/react/Button'
 import Field from 'cozy-ui/transpiled/react/Field'
+import Stack from 'cozy-ui/transpiled/react/Stack'
 import compose from 'lodash/flowRight'
 
 import countries from './countries.json'
@@ -45,33 +46,36 @@ class PersonalInfoForm extends React.Component {
     const { saving, formData } = this.state
 
     return (
-      <>
-        <Field
-          value={formData.birthcity}
-          onChange={ev => this.handleChangeField('birthcity', ev.target.value)}
-          type="text"
-          name="birthcity"
-          label={t('PersonalInfo.birthcity')}
-          placeholder={t('PersonalInfo.birthcity-placeholder')}
-        />
-        <Field
-          onChange={option => this.handleChangeField('nationality', option)}
-          value={formData.nationality}
-          type="select"
-          name="nationality"
-          options={nationalities}
-          label={t('PersonalInfo.nationality')}
-        />
+      <Stack spacing="xl">
+        <div>
+          <Field
+            value={formData.birthcity}
+            onChange={ev =>
+              this.handleChangeField('birthcity', ev.target.value)
+            }
+            type="text"
+            name="birthcity"
+            label={t('PersonalInfo.birthcity')}
+            placeholder={t('PersonalInfo.birthcity-placeholder')}
+          />
+          <Field
+            onChange={option => this.handleChangeField('nationality', option)}
+            value={formData.nationality}
+            type="select"
+            name="nationality"
+            options={nationalities}
+            label={t('PersonalInfo.nationality')}
+          />
+        </div>
         <PersonalInfoInfos />
         <Button
           busy={saving}
           disabled={saving}
           onClick={this.handleSave}
           label={t('PersonalInfo.save-cta')}
           variant="primary"
-          className="u-mt-1"
         />
-      </>
+      </Stack>
     )
   }