From 05c22cf073be01ba3b2e07376d283b70f31abf93 Mon Sep 17 00:00:00 2001
From: Kimmo Puputti <git@kimmo.kpuputti.fi>
Date: Thu, 2 Nov 2017 15:51:57 +0200
Subject: [PATCH] Fix baseline alignment

---
 .../TextInputField/TextInputField.css         |  7 +++++++
 .../TextInputField/TextInputField.js          |  1 +
 .../EditListingDescriptionForm.test.js.snap   |  2 +-
 .../ProfileSettingsForm.css                   | 19 +++++++++++++++++--
 4 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/src/components/TextInputField/TextInputField.css b/src/components/TextInputField/TextInputField.css
index 57177cec..84896276 100644
--- a/src/components/TextInputField/TextInputField.css
+++ b/src/components/TextInputField/TextInputField.css
@@ -14,3 +14,10 @@
 .inputError {
   border-bottom-color: var(--failColor);
 }
+
+.textarea {
+  @media (--viewportMedium) {
+    /* Fix baseline alignment */
+    padding-top: 6px;
+  }
+}
diff --git a/src/components/TextInputField/TextInputField.js b/src/components/TextInputField/TextInputField.js
index df923969..f843d2a7 100644
--- a/src/components/TextInputField/TextInputField.js
+++ b/src/components/TextInputField/TextInputField.js
@@ -46,6 +46,7 @@ class TextInputFieldComponent extends Component {
     const inputClasses = classNames(css.input, {
       [css.inputSuccess]: valid,
       [css.inputError]: hasError,
+      [css.textarea]: isTextarea,
     });
     const inputProps = isTextarea
       ? { className: inputClasses, id, ...input, ...rest }
diff --git a/src/containers/EditListingDescriptionForm/__snapshots__/EditListingDescriptionForm.test.js.snap b/src/containers/EditListingDescriptionForm/__snapshots__/EditListingDescriptionForm.test.js.snap
index cc2a4ded..17ea5742 100644
--- a/src/containers/EditListingDescriptionForm/__snapshots__/EditListingDescriptionForm.test.js.snap
+++ b/src/containers/EditListingDescriptionForm/__snapshots__/EditListingDescriptionForm.test.js.snap
@@ -40,7 +40,7 @@ exports[`EditListingDescriptionForm matches snapshot 1`] = `
       Describe your sauna
     </label>
     <textarea
-      className=""
+      className="undefined"
       id="fakeTestForm.description"
       name="description"
       onBlur={[Function]}
diff --git a/src/containers/ProfileSettingsForm/ProfileSettingsForm.css b/src/containers/ProfileSettingsForm/ProfileSettingsForm.css
index 30d89982..970ac848 100644
--- a/src/containers/ProfileSettingsForm/ProfileSettingsForm.css
+++ b/src/containers/ProfileSettingsForm/ProfileSettingsForm.css
@@ -15,7 +15,7 @@
 
 .sectionContainer {
   padding: 0;
-  margin-bottom: 36px;
+  margin-bottom: 37px;
 
   @media (--viewportMedium) {
     padding: 0;
@@ -29,6 +29,7 @@
 
   margin-top: 0;
   margin-bottom: 13px;
+
   @media (--viewportMedium) {
     margin-top: 0;
     margin-bottom: 20px;
@@ -36,9 +37,18 @@
 }
 
 .lastSection {
-  margin-bottom: 66px;
+  /* Fix baseline alignment */
+  padding-top: 3px;
+
+  margin-bottom: 69px;
+
   @media (--viewportMedium) {
+    padding-top: 6px;
     margin-bottom: 111px;
+
+    & .sectionTitle {
+      margin-bottom: 18px;
+    }
   }
 }
 
@@ -278,6 +288,11 @@
 
 .bioInfo {
   color: var(--matterColorAnti);
+  margin-top: 11px;
+
+  @media (--viewportMedium) {
+    margin-top: 13px;
+  }
 }
 
 .submitButton {