fix: match contact details page design to figma (#183)

* fix: match contact details page design to figma
* fix: added margin bottom

src/js/components/EditContact/index.jsx

@@ -1,7 +1,8 @@
 import React, {Component, Fragment} from 'react';
-import {FormGroup, Label, Button} from 'reactstrap';
+import {FormGroup, Button} from 'reactstrap';
 import Form from 'react-validation/build/form';
 import Input from 'react-validation/build/input';
+import Textarea from 'react-validation/build/textarea';
 import {withNamespaces} from "react-i18next";
 import PropTypes from 'prop-types';
 import {required, isContactCode} from "../../validators";
@@ -9,28 +10,26 @@ import {required, isContactCode} from "../../validators";
 class EditContact extends Component {
   render() {
     const {t, username, statusContactCode, isStatus} = this.props;
-
     return (
       <Fragment>
-        <h2>{t('contactForm.yourName')}</h2>
-        <p>{t('contactForm.bestWay')}</p>
-
+        <h2 className="mb-4">{t('contactForm.yourName')}</h2>
         <Form>
           <FormGroup>
-            <Label for="nickname" className="text-dark">Set nickname</Label>
             <Input type="text"
                    name="nickname"
                    id="nickname"
+                   placeholder="Set nickname"
                    value={username}
                    className="form-control"
                    onChange={(e) => this.props.changeUsername(e.target.value)}
                    validations={[required]}/>
           </FormGroup>
           <FormGroup>
-            <Label for="contactCode" className="text-dark">Status contact code or Status ENS name</Label>
-            <Input type="text"
+            <Textarea type="text"
                    name="contactCode"
                    id="contactCode"
+                   rows="5"
+                   placeholder="Status contact code or Status ENS name"
                    value={statusContactCode}
                    className="form-control"
                    onChange={(e) => this.props.changeStatusContactCode(e.target.value)}

src/js/locales/en.json

@@ -153,8 +153,7 @@
     }
   },
   "contactForm": {
-    "yourName": "Your name and how to contact you",
-    "bestWay": "What would be the best way to contact you"
+    "yourName": "Set your nickname and contact details"
   },
   "sellerLicenseInfo": {
     "title": "Value propositions/info about a seller license",