feature-8986: Missing spacing in some areas like button of calendar a… (#9002)

* feature-8986: Missing spacing in some areas like button of calendar and badge preview area

* feature-8986: Missing spacing in some areas like button of calendar and badge preview area

* feature-8986: Missing spacing in some areas like button of calendar and badge preview area

* feature-8986: Missing spacing in some areas like button of calendar and badge preview area

---------

Co-authored-by: Khang On - TMA <[email protected]>

Author: ntthitrinh

app/components/forms/wizard/badge-forms/badge-preview.hbs

@@ -1,14 +1,14 @@
-<div class="badge-setting">
+<div class="badge-setting badge-preview">
   <div>
-    <form class="ui form">
-      <div class="field">
+    <form class="ui form form-preview">
+      <div class="field badge-preview-title">
         {{#if @headerText}}
         <h2 class="badge-setting-title">
           {{@headerText}}
         </h2>
         {{/if}}
       </div>
-      <div class="ui grid">
+      <div class="ui grid label-checkbox-sample">
         <div class="two column row">
           <div class="left floated column">
             <UiCheckbox @class="slider mt-2 ml-2 blog-icon-preview" @checked={{@data.isShowingSampleData}} @onChange={{action (mut

app/components/public/add-to-calender.hbs

@@ -1,4 +1,4 @@
-<div class="ui list basic segment m-0 pl-0 pr-0 pb-0">
+<div class="ui list basic segment pb-2">
   <div class="item mt-1">
     <i class="clock alternate outline icon pt-1"></i>
     <div class="content">

app/styles/components/forms/badge-form.scss

@@ -113,9 +113,18 @@ label.warning {
   }
 }
 
-.preview {
-  margin: unset !important;
-  padding: 50px !important;
-  border-top: 1px solid rgb(211, 211, 211);
-  margin-top: 5px !important;
+.badge-preview {
+  .badge-preview-title {
+    margin-bottom: unset !important;
+  }
+
+  .label-checkbox-sample {
+    margin: unset !important;
+  }
+
+  .preview {
+    padding: 50px !important;
+    border-top: 1px solid rgb(211, 211, 211);
+    margin-top: unset;
+  }
 }

app/styles/partials/utils.scss

@@ -241,3 +241,7 @@
 .mr-8 {
   margin-right: 2rem !important;
 }
+
+.pd-1 {
+  padding: 1rem !important;
+}

app/templates/components/public/social-links.hbs

@@ -1,4 +1,4 @@
-<div class="ui list mt-0 mb-0 pt-0 pb-0">
+<div class="ui list mt-0 mb-0 pt-0 pb-0 pl-4">
   <div class="social-links mt-0 mb-0 pt-0 pb-0">
     {{#if this.externalUrl}}
       <div>