From 74c6db37b37acc69fd6da237b5cc89e479b7cbaa Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Date: Fri, 6 Jan 2023 15:37:28 +0530
Subject: [PATCH] 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>
---
 .../assets/scss/_foundation-settings.scss     |  2 +-
 .../dashboard/assets/scss/widgets/_modal.scss |  4 +--
 .../dashboard/components/ModalHeader.vue      |  2 ++
 .../widgets/modal/ConfirmationModal.vue       | 30 ++++++++-----------
 .../dashboard/settings/macros/MacroNode.vue   |  2 +-
 5 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/app/javascript/dashboard/assets/scss/_foundation-settings.scss b/app/javascript/dashboard/assets/scss/_foundation-settings.scss
index 414cb2539..28defb4fd 100644
--- a/app/javascript/dashboard/assets/scss/_foundation-settings.scss
+++ b/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;
diff --git a/app/javascript/dashboard/assets/scss/widgets/_modal.scss b/app/javascript/dashboard/assets/scss/widgets/_modal.scss
index 543a60797..c363d4220 100644
--- a/app/javascript/dashboard/assets/scss/widgets/_modal.scss
+++ b/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 {
-      font-size: $font-size-small;
+    .button {
+      margin-left: var(--space-small);
     }
 
     &.justify-content-end {
diff --git a/app/javascript/dashboard/components/ModalHeader.vue b/app/javascript/dashboard/components/ModalHeader.vue
index b60f5d851..18ff7e785 100644
--- a/app/javascript/dashboard/components/ModalHeader.vue
+++ b/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);
   }
diff --git a/app/javascript/dashboard/components/widgets/modal/ConfirmationModal.vue b/app/javascript/dashboard/components/widgets/modal/ConfirmationModal.vue
index 18d8783ee..5d968bfaa 100644
--- a/app/javascript/dashboard/components/widgets/modal/ConfirmationModal.vue
+++ b/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" />
-      <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 @click="confirm">
-              {{ confirmLabel }}
-            </woot-button>
-            <button class="button clear" @click="cancel">
-              {{ cancelLabel }}
-            </button>
-          </div>
-        </div>
+      <woot-modal-header :header-title="title" :header-content="description" />
+      <div class="modal-footer">
+        <woot-button variant="clear" @click="cancel">
+          {{ cancelLabel }}
+        </woot-button>
+        <woot-button @click="confirm">
+          {{ confirmLabel }}
+        </woot-button>
       </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>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue b/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue
index f03667cef..c16e95e67 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/macros/MacroNode.vue
+++ b/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 {