From 5c46d0b4391341ad006b558b31c439bb275a9560 Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Fri, 24 Jul 2020 08:53:45 +0200
Subject: [PATCH] feat: Use Stack to space parts of the personal info

---
 src/ducks/personal-info/Form.jsx | 42 +++++++++++++++++---------------
 1 file changed, 23 insertions(+), 19 deletions(-)

diff --git a/src/ducks/personal-info/Form.jsx b/src/ducks/personal-info/Form.jsx
index 43aa9b6429..2c761272cc 100644
--- 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,23 +46,27 @@ 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}
@@ -69,9 +74,8 @@ class PersonalInfoForm extends React.Component {
           onClick={this.handleSave}
           label={t('PersonalInfo.save-cta')}
           variant="primary"
-          className="u-mt-1"
         />
-      </>
+      </Stack>
     )
   }