Add styles for preview sidebar

[MAILPOET-2811]

assets/css/src/components-form-editor/_preview.scss

@@ -76,15 +76,32 @@
   flex-direction: row;
 
   .mailpoet_preview_sidebar {
-    padding: 10px 10px 10px 0;
+    padding: 35px 15px 10px 0;
     width: 300px;
-  }
+
+    .components-base-control__label {
+      display: block;
     }
 
-.mailpoet-size-settings-control {
     .components-radio-control__option {
       display: inline-block;
       margin-right: 1em;
       width: auto;
     }
+
+    .mailpoet-styles-settings-heading {
+      color: initial;
+      font-size: 13px;
+      font-weight: normal;
+      margin-bottom: 4px;
+    }
+  }
+}
+
+.mailpoet-toggle-list {
+  display: grid;
+  font-size: 13px;
+  grid-row-gap: 20px;
+  grid-template-columns: 1fr 45px;
+  margin-bottom: 1em;
 }

assets/css/src/components-form-editor/_sidebar.scss

@@ -101,13 +101,6 @@
   }
 }
 
-.mailpoet-toggle-list {
-  display: grid;
-  grid-row-gap: 20px;
-  grid-template-columns: 1fr 45px;
-  margin-bottom: 40px;
-}
-
 .components-button.mailpoet-save-button {
   background-color: #ff5301;
   border-radius: 4px;

assets/js/src/form_editor/components/size_settings.tsx

@@ -32,7 +32,7 @@ export const SizeSettings = ({
   const [localValue, setLocalValue] = useState(value ?? { unit: 'pixel', value: undefined });
   return (
     <div className="mailpoet-size-settings-control">
-      <h3>{label}</h3>
+      <h3 className="mailpoet-styles-settings-heading">{label}</h3>
       <RadioControl
         selected={localValue.unit || 'pixel'}
         options={[