From 89145e26ed04c60c3200ae3299d6a7ea084dd8cf Mon Sep 17 00:00:00 2001
From: Vesa Luusua <vesa.luusua@gmail.com>
Date: Thu, 21 Dec 2017 16:21:37 +0200
Subject: [PATCH] Form elements should be divisible by 8 (desktop) or 6px

---
 .../EditListingPhotosPanel.css                |  1 +
 .../TextInputField/TextInputField.css         |  4 --
 .../ValidationError/ValidationError.css       |  6 +++
 .../AuthenticationPage/AuthenticationPage.css |  1 +
 .../ContactDetailsForm/ContactDetailsForm.css | 16 +++----
 .../ContactDetailsPage/ContactDetailsPage.css |  4 ++
 .../EditListingDescriptionForm.css            | 36 ++++++++++++----
 .../EditListingDescriptionForm.js             |  7 +++-
 .../EditListingLocationForm.css               | 29 ++++++++++++-
 .../EditListingLocationForm.js                |  1 +
 .../EditListingPricingForm.css                |  5 +++
 .../PasswordChangeForm/PasswordChangeForm.css | 16 +++----
 .../PasswordChangePage/PasswordChangePage.css |  4 ++
 .../PayoutDetailsForm/PayoutDetailsForm.css   |  4 +-
 .../ProfileSettingsForm.css                   | 42 +++++++++++--------
 .../ProfileSettingsPage.css                   |  2 +-
 src/containers/SignupForm/SignupForm.css      |  2 +-
 src/marketplace.css                           |  8 +++-
 src/marketplaceIndex.css                      |  6 +++
 19 files changed, 136 insertions(+), 58 deletions(-)

diff --git a/src/components/EditListingPhotosPanel/EditListingPhotosPanel.css b/src/components/EditListingPhotosPanel/EditListingPhotosPanel.css
index ad083cbf..bd704afd 100644
--- a/src/components/EditListingPhotosPanel/EditListingPhotosPanel.css
+++ b/src/components/EditListingPhotosPanel/EditListingPhotosPanel.css
@@ -22,6 +22,7 @@
 
   @media (--viewportMedium) {
     margin-top: 0;
+    margin-bottom: 34px;
     padding: 0;
   }
 }
diff --git a/src/components/TextInputField/TextInputField.css b/src/components/TextInputField/TextInputField.css
index 84896276..2294a88d 100644
--- a/src/components/TextInputField/TextInputField.css
+++ b/src/components/TextInputField/TextInputField.css
@@ -16,8 +16,4 @@
 }
 
 .textarea {
-  @media (--viewportMedium) {
-    /* Fix baseline alignment */
-    padding-top: 6px;
-  }
 }
diff --git a/src/components/ValidationError/ValidationError.css b/src/components/ValidationError/ValidationError.css
index 44e10554..1a518f51 100644
--- a/src/components/ValidationError/ValidationError.css
+++ b/src/components/ValidationError/ValidationError.css
@@ -3,6 +3,12 @@
 .root {
   @apply --marketplaceH4FontStyles;
   margin-top: 6px;
+  margin-bottom: 12px;
   color: var(--failColor);
   overflow: hidden;
+
+  @media (--viewportMedium) {
+    margin-top: 6px;
+    margin-bottom: 10px;
+  }
 }
diff --git a/src/containers/AuthenticationPage/AuthenticationPage.css b/src/containers/AuthenticationPage/AuthenticationPage.css
index 93268acc..73b8ac16 100644
--- a/src/containers/AuthenticationPage/AuthenticationPage.css
+++ b/src/containers/AuthenticationPage/AuthenticationPage.css
@@ -44,6 +44,7 @@
 
   @media (--viewportMedium) {
     margin-top: 30px;
+    padding-top: 2px;
   }
 }
 
diff --git a/src/containers/ContactDetailsForm/ContactDetailsForm.css b/src/containers/ContactDetailsForm/ContactDetailsForm.css
index ca0e55be..af602f27 100644
--- a/src/containers/ContactDetailsForm/ContactDetailsForm.css
+++ b/src/containers/ContactDetailsForm/ContactDetailsForm.css
@@ -30,6 +30,7 @@
 
   @media (--viewportMedium) {
     margin-bottom: 56px;
+    padding-top: 0;
   }
 }
 
@@ -40,10 +41,6 @@
   margin-bottom: 60px;
   padding: 0;
   opacity: 0;
-
-  @media (--viewportLarge) {
-    padding: 4px 0 0 0;
-  }
 }
 
 .confirmChangesSectionVisible {
@@ -106,12 +103,9 @@
 
   @media (--viewportMedium) {
     margin-top: 0;
-    margin-bottom: 14px;
-  }
-
-  @media (--viewportMedium) {
-    margin-top: 0;
-    margin-bottom: 20px;
+    margin-bottom: 16px;
+    padding-top: 4px;
+    padding-bottom: 4px;
   }
 }
 
@@ -120,7 +114,7 @@
   margin-bottom: 37px;
 
   @media (--viewportMedium) {
-    margin-bottom: 46px;
+    margin-bottom: 48px;
   }
 }
 
diff --git a/src/containers/ContactDetailsPage/ContactDetailsPage.css b/src/containers/ContactDetailsPage/ContactDetailsPage.css
index 3adbf2c2..cdb535bf 100644
--- a/src/containers/ContactDetailsPage/ContactDetailsPage.css
+++ b/src/containers/ContactDetailsPage/ContactDetailsPage.css
@@ -24,4 +24,8 @@
     margin-top: 2px;
     margin-bottom: 47px;
   }
+
+  @media (--viewportLarge) {
+    margin-top: 4px;
+  }
 }
diff --git a/src/containers/EditListingDescriptionForm/EditListingDescriptionForm.css b/src/containers/EditListingDescriptionForm/EditListingDescriptionForm.css
index caa38623..122759b4 100644
--- a/src/containers/EditListingDescriptionForm/EditListingDescriptionForm.css
+++ b/src/containers/EditListingDescriptionForm/EditListingDescriptionForm.css
@@ -1,25 +1,47 @@
 @import '../../marketplace.css';
 
+:root {
+  --formMargins: {
+    margin-bottom: 24px;
+
+    @media (--viewportMedium) {
+      margin-bottom: 32px;
+    }
+  }
+}
+
 .root {
+  /* Dimensions */
   width: 100%;
   height: auto;
+
+  /* Layout */
   display: flex;
   flex: 1;
   flex-direction: column;
+
+  padding-top: 1px;
+
+  @media (--viewportMedium) {
+    padding-top: 2px;
+  }
 }
 
 .error {
   color: var(--failColor);
 }
 
-.description {
-  flex-shrink: 0;
-  margin-top: 24px;
-  margin-bottom: 24px;
+.title {
+  @apply --formMargins;
+}
 
-  @media (--viewportMedium) {
-    margin-top: 30px;
-  }
+.description {
+  @apply --formMargins;
+  flex-shrink: 0;
+}
+
+.category {
+  @apply --formMargins;
 }
 
 .submitButton {
diff --git a/src/containers/EditListingDescriptionForm/EditListingDescriptionForm.js b/src/containers/EditListingDescriptionForm/EditListingDescriptionForm.js
index db87c9fa..6bafc60e 100644
--- a/src/containers/EditListingDescriptionForm/EditListingDescriptionForm.js
+++ b/src/containers/EditListingDescriptionForm/EditListingDescriptionForm.js
@@ -65,6 +65,7 @@ const EditListingDescriptionFormComponent = props => {
     <Form className={classes} onSubmit={handleSubmit}>
       {errorMessage}
       <TextInputField
+        className={css.title}
         type="text"
         name="title"
         id={`${form}.title`}
@@ -85,7 +86,11 @@ const EditListingDescriptionFormComponent = props => {
         validate={[required(descriptionRequiredMessage)]}
       />
 
-      <FieldCustomAttributeSelect id={`${form}.category`} customAttribute="category" />
+      <FieldCustomAttributeSelect
+        className={css.category}
+        id={`${form}.category`}
+        customAttribute="category"
+      />
 
       <Button
         className={css.submitButton}
diff --git a/src/containers/EditListingLocationForm/EditListingLocationForm.css b/src/containers/EditListingLocationForm/EditListingLocationForm.css
index e182bf83..e53377b9 100644
--- a/src/containers/EditListingLocationForm/EditListingLocationForm.css
+++ b/src/containers/EditListingLocationForm/EditListingLocationForm.css
@@ -1,11 +1,27 @@
 @import '../../marketplace.css';
 
+:root {
+  --formMargins: {
+    margin-bottom: 24px;
+
+    @media (--viewportMedium) {
+      margin-bottom: 32px;
+    }
+  }
+}
 .root {
+  /* Dimensions */
   width: 100%;
   height: auto;
+
+  /* Display format */
   display: flex;
   flex: 1;
   flex-direction: column;
+
+  @media (--viewportMedium) {
+    padding-top: 2px;
+  }
 }
 
 .error {
@@ -22,6 +38,10 @@
     border-bottom-color: var(--matterColorDark);
     outline: none;
   }
+
+  @media (--viewportMedium) {
+    height: 40px;
+  }
 }
 
 .locationAutocompleteInputIcon {
@@ -39,18 +59,23 @@
   border-bottom-right-radius: var(--borderRadius);
   box-shadow: var(--boxShadowPopup);
   z-index: var(--zIndexPopup + 1);
+
+  @media (--viewportMedium) {
+    top: 40px;
+  }
 }
 
 .validLocation {
   border-bottom-color: var(--successColor);
 }
 
+.locationAddress,
 .building {
   flex-shrink: 0;
-  margin-top: 24px;
+  margin-bottom: 24px;
 
   @media (--viewportMedium) {
-    margin-top: 28px;
+    margin-bottom: 32px;
   }
 }
 
diff --git a/src/containers/EditListingLocationForm/EditListingLocationForm.js b/src/containers/EditListingLocationForm/EditListingLocationForm.js
index 6ddeb34f..8b2c67dd 100644
--- a/src/containers/EditListingLocationForm/EditListingLocationForm.js
+++ b/src/containers/EditListingLocationForm/EditListingLocationForm.js
@@ -57,6 +57,7 @@ export const EditListingLocationFormComponent = props => {
     <Form className={classes} onSubmit={handleSubmit}>
       {errorMessage}
       <LocationAutocompleteInputField
+        className={css.locationAddress}
         inputClassName={css.locationAutocompleteInput}
         iconClassName={css.locationAutocompleteInputIcon}
         predictionsClassName={css.predictionsRoot}
diff --git a/src/containers/EditListingPricingForm/EditListingPricingForm.css b/src/containers/EditListingPricingForm/EditListingPricingForm.css
index d2091cd0..3843415c 100644
--- a/src/containers/EditListingPricingForm/EditListingPricingForm.css
+++ b/src/containers/EditListingPricingForm/EditListingPricingForm.css
@@ -1,12 +1,17 @@
 @import '../../marketplace.css';
 
 .root {
+  /* Dimensions */
   width: 100%;
   height: auto;
   display: flex;
   flex: 1;
   flex-direction: column;
   flex-grow: 1;
+
+  @media (--viewportMedium) {
+    padding-top: 2px;
+  }
 }
 
 .error {
diff --git a/src/containers/PasswordChangeForm/PasswordChangeForm.css b/src/containers/PasswordChangeForm/PasswordChangeForm.css
index ed7bc00a..2c30fce3 100644
--- a/src/containers/PasswordChangeForm/PasswordChangeForm.css
+++ b/src/containers/PasswordChangeForm/PasswordChangeForm.css
@@ -10,6 +10,7 @@
 
   @media (--viewportMedium) {
     margin-bottom: 56px;
+    padding-top: 0;
   }
 }
 
@@ -20,10 +21,6 @@
   margin-bottom: 60px;
   padding: 0;
   opacity: 0;
-
-  @media (--viewportLarge) {
-    padding: 4px 0 0 0;
-  }
 }
 
 .confirmChangesSectionVisible {
@@ -39,12 +36,9 @@
 
   @media (--viewportMedium) {
     margin-top: 0;
-    margin-bottom: 14px;
-  }
-
-  @media (--viewportMedium) {
-    margin-top: 0;
-    margin-bottom: 20px;
+    margin-bottom: 16px;
+    padding-top: 4px;
+    padding-bottom: 4px;
   }
 }
 
@@ -53,7 +47,7 @@
   margin-bottom: 37px;
 
   @media (--viewportMedium) {
-    margin-bottom: 46px;
+    margin-bottom: 48px;
   }
 }
 
diff --git a/src/containers/PasswordChangePage/PasswordChangePage.css b/src/containers/PasswordChangePage/PasswordChangePage.css
index 3adbf2c2..cdb535bf 100644
--- a/src/containers/PasswordChangePage/PasswordChangePage.css
+++ b/src/containers/PasswordChangePage/PasswordChangePage.css
@@ -24,4 +24,8 @@
     margin-top: 2px;
     margin-bottom: 47px;
   }
+
+  @media (--viewportLarge) {
+    margin-top: 4px;
+  }
 }
diff --git a/src/containers/PayoutDetailsForm/PayoutDetailsForm.css b/src/containers/PayoutDetailsForm/PayoutDetailsForm.css
index 6644139c..a3903c97 100644
--- a/src/containers/PayoutDetailsForm/PayoutDetailsForm.css
+++ b/src/containers/PayoutDetailsForm/PayoutDetailsForm.css
@@ -20,7 +20,9 @@
 
   @media (--viewportMedium) {
     margin-top: 0;
-    margin-bottom: 17px;
+    margin-bottom: 16px;
+    padding-top: 4px;
+    padding-bottom: 4px;
   }
 }
 
diff --git a/src/containers/ProfileSettingsForm/ProfileSettingsForm.css b/src/containers/ProfileSettingsForm/ProfileSettingsForm.css
index 970ac848..c3f6afd9 100644
--- a/src/containers/ProfileSettingsForm/ProfileSettingsForm.css
+++ b/src/containers/ProfileSettingsForm/ProfileSettingsForm.css
@@ -6,20 +6,20 @@
 }
 
 .root {
-  margin-top: 23px;
+  margin-top: 24px;
 
   @media (--viewportMedium) {
-    margin-top: 35px;
+    margin-top: 32px;
   }
 }
 
 .sectionContainer {
   padding: 0;
-  margin-bottom: 37px;
+  margin-bottom: 36px;
 
   @media (--viewportMedium) {
     padding: 0;
-    margin-bottom: 54px;
+    margin-bottom: 56px;
   }
 }
 
@@ -28,26 +28,26 @@
   color: var(--matterColorAnti);
 
   margin-top: 0;
-  margin-bottom: 13px;
+  margin-bottom: 12px;
+  padding-top: 3px;
+  padding-bottom: 3px;
 
   @media (--viewportMedium) {
     margin-top: 0;
-    margin-bottom: 20px;
+    margin-bottom: 24px;
+    padding-top: 4px;
+    padding-bottom: 4px;
   }
 }
 
 .lastSection {
-  /* Fix baseline alignment */
-  padding-top: 3px;
-
   margin-bottom: 69px;
 
   @media (--viewportMedium) {
-    padding-top: 6px;
     margin-bottom: 111px;
 
     & .sectionTitle {
-      margin-bottom: 18px;
+      margin-bottom: 16px;
     }
   }
 }
@@ -57,7 +57,7 @@
 }
 
 .uploadAvatarWrapper {
-  margin-top: 19px;
+  margin-top: 18px;
   margin-bottom: 18px;
 
   @media (--viewportMedium) {
@@ -248,11 +248,15 @@
   @apply --marketplaceDefaultFontStyles;
   color: var(--matterColorAnti);
   margin-top: 0;
-  margin-bottom: 16px;
+  margin-bottom: 12px;
+  padding-top: 5px;
+  padding-bottom: 1px;
 
   @media (--viewportMedium) {
     margin-top: 0;
-    margin-bottom: 11px;
+    margin-bottom: 8px;
+    padding-top: 4px;
+    padding-bottom: 4px;
   }
 }
 
@@ -261,20 +265,24 @@
   color: var(--matterColorAnti);
   margin-top: 0;
   margin-bottom: 0;
+  padding-top: 5px;
+  padding-bottom: 1px;
 
   @media (--viewportMedium) {
     margin-top: 0;
     margin-bottom: 0;
+    padding-top: 6px;
+    padding-bottom: 2px;
   }
 }
 
 .nameContainer {
   display: flex;
   justify-content: space-between;
-  margin-top: 14px;
+  margin-top: 12px;
 
   @media (--viewportMedium) {
-    margin-top: 26px;
+    margin-top: 24px;
   }
 }
 
@@ -291,7 +299,7 @@
   margin-top: 11px;
 
   @media (--viewportMedium) {
-    margin-top: 13px;
+    margin-top: 16px;
   }
 }
 
diff --git a/src/containers/ProfileSettingsPage/ProfileSettingsPage.css b/src/containers/ProfileSettingsPage/ProfileSettingsPage.css
index 8f463453..99aa121e 100644
--- a/src/containers/ProfileSettingsPage/ProfileSettingsPage.css
+++ b/src/containers/ProfileSettingsPage/ProfileSettingsPage.css
@@ -9,7 +9,7 @@
 
   @media (--viewportMedium) {
     max-width: 565px;
-    margin: 56px auto;
+    margin: 55px auto 56px auto;
   }
 }
 
diff --git a/src/containers/SignupForm/SignupForm.css b/src/containers/SignupForm/SignupForm.css
index d439dedf..32e4e422 100644
--- a/src/containers/SignupForm/SignupForm.css
+++ b/src/containers/SignupForm/SignupForm.css
@@ -10,7 +10,7 @@
   margin-top: 24px;
 
   @media (--viewportMedium) {
-    margin-top: 30px;
+    margin-top: 32px;
   }
 }
 
diff --git a/src/marketplace.css b/src/marketplace.css
index b2b5fce6..3b18758e 100644
--- a/src/marketplace.css
+++ b/src/marketplace.css
@@ -266,7 +266,7 @@
     }
 
     @media (--viewportMedium) {
-      padding: 6px 0 10px 0;
+      padding: 4px 0 10px 0;
     }
   }
 
@@ -302,6 +302,10 @@
       border-bottom-color: var(--matterColor);
       outline: none;
     }
+
+    @media (--viewportMedium) {
+      padding: 4px 0 10px 0;
+    }
   }
 
   /* ================ Modals ================ */
@@ -538,7 +542,7 @@
     margin-top: 24px;
 
     @media (--viewportMedium) {
-      margin-top: 30px;
+      margin-top: 32px;
     }
   }
 }
diff --git a/src/marketplaceIndex.css b/src/marketplaceIndex.css
index 02164bc8..001ba023 100644
--- a/src/marketplaceIndex.css
+++ b/src/marketplaceIndex.css
@@ -83,6 +83,8 @@ label {
     font-weight: var(--fontWeightSemiBold);
     margin-top: 0;
     margin-bottom: 0;
+    padding-top: 6px;
+    padding-bottom: 2px;
   }
 }
 
@@ -108,6 +110,10 @@ textarea {
   &::placeholder {
     padding: 0 0 10px 0;
   }
+
+  @media (--viewportMedium) {
+    padding: 4px 0 10px 0;
+  }
 }
 
 :global(.fontsLoaded) {