fix: Fixes broken style in automation page (#6171)

* fix: Fixes broken style in automation page

* Fix the position of drag handle

Co-authored-by: fayazara <fayazara@gmail.com>
Co-authored-by: Fayaz Ahmed <15716057+fayazara@users.noreply.github.com>

app/javascript/dashboard/assets/scss/_foundation-settings.scss

@@ -75,7 +75,7 @@ Arial,
 sans-serif;
 $body-antialiased: true;
 $global-margin: $space-small;
-$global-padding: $space-micro;
+$global-padding: $space-small;
 $global-weight-normal: normal;
 $global-weight-bold: bold;
 $global-radius: 0;

app/javascript/dashboard/assets/scss/widgets/_modal.scss

@@ -82,8 +82,8 @@
     @include flex-align($x: flex-end, $y: middle);
     padding: $space-small $zero;
 
-    button {
+    .button {
-      font-size: $font-size-small;
+      margin-left: var(--space-small);
     }
 
     &.justify-content-end {

app/javascript/dashboard/components/ModalHeader.vue

@@ -39,6 +39,8 @@ export default {
 <style scoped lang="scss">
 .wrap-content {
   word-wrap: break-word;
+  margin-top: var(--space-small);
+
   .content-value {
     font-weight: var(--font-weight-bold);
   }

app/javascript/dashboard/components/widgets/modal/ConfirmationModal.vue

@@ -1,23 +1,14 @@
 <template>
   <modal :show.sync="show" :on-close="cancel">
     <div class="column content-box">
-      <woot-modal-header :header-title="title" />
+      <woot-modal-header :header-title="title" :header-content="description" />
-      <div class="row modal-content">
-        <div class="medium-12 columns">
-          <p>
-            {{ description }}
-          </p>
-        </div>
       <div class="modal-footer">
-          <div class="medium-12 columns">
+        <woot-button variant="clear" @click="cancel">
+          {{ cancelLabel }}
+        </woot-button>
         <woot-button @click="confirm">
           {{ confirmLabel }}
         </woot-button>
-            <button class="button clear" @click="cancel">
-              {{ cancelLabel }}
-            </button>
-          </div>
-        </div>
       </div>
     </div>
   </modal>
@@ -73,3 +64,8 @@ export default {
   },
 };
 </script>
+<style lang="scss" scoped>
+.modal-container .modal-footer {
+  padding: var(--space-normal) var(--space-medium);
+}
+</style>

app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue

@@ -107,7 +107,7 @@ export default {
 <style scoped lang="scss">
 .macros__node-drag-handle {
   position: absolute;
-  left: var(--space-minus-medium);
+  left: var(--space-minus-large);
   cursor: move;
 }
 .macro__node-action-container {