From 9f8bcd782f70f2dea415219d63f320bbf6520f3d Mon Sep 17 00:00:00 2001
From: Rostislav Wolny <rosta@mailpoet.com>
Date: Fri, 29 Jan 2021 10:03:41 +0100
Subject: [PATCH] Unify labels in form editor style settings panels

[MAILPOET-3382]
---
 .../_sidebar-style-settings.scss              | 29 ++++++++++++++-----
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/assets/css/src/components-form-editor/_sidebar-style-settings.scss b/assets/css/src/components-form-editor/_sidebar-style-settings.scss
index b2b6cf270c..52d0679fd0 100644
--- a/assets/css/src/components-form-editor/_sidebar-style-settings.scss
+++ b/assets/css/src/components-form-editor/_sidebar-style-settings.scss
@@ -27,14 +27,6 @@
   }
 }
 
-.mailpoet-styles-settings-heading {
-  font-size: 15px;
-
-  .component-color-indicator {
-    vertical-align: text-bottom;
-  }
-}
-
 .mailpoet-font-family-select {
   button {
     width: 100%;
@@ -104,3 +96,24 @@
     vertical-align: text-bottom;
   }
 }
+
+// Styles for labels and headings for style setting components
+// We override some styles from @wordpress/components to have unified labels appearance
+.mailpoet-styles-settings .mailpoet-styles-settings-heading,
+.mailpoet-styles-settings .components-base-control__label,
+.mailpoet-styles-settings .components-input-control__label,
+.mailpoet-styles-settings .components-custom-select-control__label,
+.mailpoet-styles-settings .components-font-size-picker label {
+  font-size: 13px;
+  font-weight: bold;
+  margin-bottom: .5em;
+
+  .component-color-indicator {
+    vertical-align: text-bottom;
+  }
+}
+
+// Fix for alignment of font size picker inputs
+.mailpoet-styles-settings .components-font-size-picker__number-container label {
+  margin-bottom: 0;
+}