chore: Enable prototyping classes for foundation (#5945)

* chore: Enable prototyping classes for foundation

* Marcros css clean up

* Imports utilities separately

* Fix macro position

* Changes global margin

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>

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

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

app/javascript/dashboard/assets/scss/_woot.scss

@@ -20,6 +20,24 @@
 
 @include foundation-everything($flex: true);
 
+@include foundation-prototype-text-utilities;
+@include foundation-prototype-text-transformation;
+@include foundation-prototype-text-decoration;
+@include foundation-prototype-font-styling;
+@include foundation-prototype-list-style-type;
+@include foundation-prototype-rounded;
+@include foundation-prototype-bordered;
+@include foundation-prototype-shadow;
+@include foundation-prototype-separator;
+@include foundation-prototype-overflow;
+@include foundation-prototype-display;
+@include foundation-prototype-position;
+@include foundation-prototype-border-box;
+@include foundation-prototype-border-none;
+@include foundation-prototype-sizing;
+@include foundation-prototype-spacing;
+
+
 @import 'typography';
 @import 'layout';
 @import 'animations';

app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="macro">
+  <div class="macro button secondary clear ">
     <span class="text-truncate">{{ macro.name }}</span>
     <div class="macros-actions">
       <woot-button
@@ -91,20 +91,7 @@ export default {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin: 0;
+  line-height: var(--space-normal);
-  padding: var(--space-small);
-  font-weight: var(--font-weight-medium);
-  border-radius: var(--border-radius-normal);
-  color: var(--s-700);
-
-  &:hover {
-    background: var(--s-25);
-    color: var(--s-600);
-  }
-
-  &:focus {
-    border-color: var(--w-300);
-  }
 
   .macros-actions {
     display: flex;

app/javascript/dashboard/routes/dashboard/conversation/Macros/MacroPreview.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="macro-preview">
-    <p class="macro-title">{{ macro.name }}</p>
+    <h6 class="text-block-title macro-title">{{ macro.name }}</h6>
     <div v-for="(action, i) in resolvedMacro" :key="i" class="macro-block">
       <div v-if="i !== macro.actions.length - 1" class="macro-block-border" />
       <div class="macro-block-dot" />
@@ -69,37 +69,36 @@ export default {
 <style lang="scss" scoped>
 .macro-preview {
   position: absolute;
-  max-height: calc(var(--space-giga) * 1.5);
+  max-height: 36rem;
   min-height: var(--space-jumbo);
-  width: calc(var(--space-giga) + var(--space-large));
+  width: 27.2rem;
   border-radius: var(--border-radius-normal);
   background-color: var(--white);
   box-shadow: var(--shadow-dropdown-pane);
-  bottom: calc(var(--space-three) + var(--space-half));
+  bottom: var(--space-large);
-  right: calc(var(--space-three) + var(--space-half));
+  right: var(--space-large);
   overflow-y: auto;
-  padding: var(--space-slab);
+  padding: var(--space-normal);
+  text-align: left;
 
   .macro-title {
-    margin-bottom: var(--space-slab);
+    margin-bottom: var(--space-normal);
-    color: var(--s-900);
-    font-weight: var(--font-weight-bold);
   }
 
   .macro-block {
     position: relative;
-    padding-left: var(--space-slab);
+    padding-left: var(--space-normal);
     &:not(:last-child) {
-      padding-bottom: var(--space-slab);
+      padding-bottom: var(--space-small);
     }
 
     .macro-block-border {
       top: 0.625rem;
       position: absolute;
-      bottom: var(--space-minus-half);
+      bottom: var(--space-minus-smaller);
       left: 0;
       width: 1px;
-      background-color: var(--s-100);
+      background-color: var(--s-75);
     }
 
     .macro-block-dot {
@@ -117,6 +116,7 @@ export default {
   .macro-action-name {
     font-size: var(--font-size-mini);
     color: var(--s-500);
+    margin-bottom: var(--space-smaller);
   }
 }
 </style>

app/javascript/dashboard/routes/dashboard/conversation/labels/LabelBox.vue

@@ -90,7 +90,7 @@ export default {
 
 <style lang="scss" scoped>
 .sidebar-labels-wrap {
-  margin-bottom: var(--space-normal);
+  margin-bottom: 0;
 }
 .contact-conversation--list {
   width: 100%;

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

@@ -1,58 +0,0 @@
-<template>
-  <div>
-    <button
-      v-tooltip="tooltip"
-      class="macros__action-button"
-      :class="type"
-      @click="$emit('click')"
-    >
-      <fluent-icon :icon="icon" aria-hidden="true" />
-    </button>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    type: {
-      type: String,
-      default: 'add',
-    },
-    tooltip: {
-      type: String,
-      default: '',
-    },
-    icon: {
-      type: String,
-      required: true,
-    },
-  },
-};
-</script>
-
-<style scoped lang="scss">
-.macros__action-button {
-  height: var(--space-three);
-  width: var(--space-three);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  font-size: var(--font-size-default);
-  border-radius: var(--border-radius-rounded);
-  position: relative;
-  margin-left: var(--space-one);
-
-  &.add {
-    background-color: var(--g-100);
-    color: var(--g-600);
-  }
-  &.delete {
-    position: absolute;
-    top: calc(var(--space-three) / -2);
-    right: calc(var(--space-three) / -2);
-    background-color: var(--r-100);
-    color: var(--r-600);
-  }
-}
-</style>

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

@@ -130,11 +130,11 @@ export default {
   height: 100%;
 }
 .macros-canvas {
-  background-image: radial-gradient(var(--s-100) 1.2px, transparent 0);
+  background-image: radial-gradient(var(--s-75) 1.2px, transparent 0);
   background-size: var(--space-normal) var(--space-normal);
   height: 100%;
   max-height: 100%;
-  padding: var(--space-normal) var(--space-three);
+  padding: var(--space-normal) var(--space-larger);
   max-height: 100vh;
   overflow-y: auto;
 }

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

@@ -1,8 +1,10 @@
 <template>
   <div class="macro__node-action-container">
-    <fluent-icon
+    <woot-button
       v-if="!singleNode"
-      size="20"
+      size="small"
+      variant="clear"
+      color-scheme="secondary"
       icon="navigation"
       class="macros__node-drag-handle"
     />
@@ -23,28 +25,27 @@
         :initial-file-name="fileName"
         @resetAction="$emit('resetAction')"
       />
-      <macro-action-button
+    </div>
+    <woot-button
       v-if="!singleNode"
-        icon="dismiss-circle"
+      v-tooltip="$t('MACROS.EDITOR.DELETE_BTN_TOOLTIP')"
-        class="macro__node macro__node-action-button-delete"
+      icon="delete"
-        type="delete"
+      size="small"
-        :tooltip="$t('MACROS.EDITOR.DELETE_BTN_TOOLTIP')"
+      variant="smooth"
+      color-scheme="alert"
       @click="$emit('deleteNode')"
     />
   </div>
-  </div>
 </template>
 
 <script>
 import ActionInput from 'dashboard/components/widgets/AutomationActionInput';
-import MacroActionButton from './ActionButton.vue';
 import macrosMixin from 'dashboard/mixins/macrosMixin';
 import { mapGetters } from 'vuex';
 
 export default {
   components: {
     ActionInput,
-    MacroActionButton,
   },
   mixins: [macrosMixin],
   inject: ['macroActionTypes', '$v'],
@@ -104,30 +105,27 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.macro__node-action-container {
-  position: relative;
 .macros__node-drag-handle {
   position: absolute;
   left: var(--space-minus-medium);
-    top: var(--space-smaller);
   cursor: move;
-    color: var(--s-400);
 }
-  .macro__node-action-item {
+.macro__node-action-container {
-    background-color: var(--white);
+  position: relative;
-    padding: var(--space-slab);
-    border-radius: var(--border-radius-medium);
-    box-shadow: rgb(0 0 0 / 3%) 0px 6px 24px 0px,
-      rgb(0 0 0 / 6%) 0px 0px 0px 1px;
-
-    .macro__node-action-button-delete {
-      display: none;
-    }
-    &:hover {
-      .macro__node-action-button-delete {
   display: flex;
-      }
+  align-items: center;
-    }
+  flex-basis: 100%;
+  min-width: 0;
+  width: 100%;
+
+  .macro__node-action-item {
+    flex-grow: 1;
+    background-color: var(--white);
+    padding: var(--space-small);
+    margin-right: var(--space-small);
+    border-radius: var(--border-radius-medium);
+    box-shadow: var(--shadow);
+
     &.has-error {
       animation: shake 0.3s ease-in-out 0s 2;
       background-color: var(--r-50);

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

@@ -1,6 +1,13 @@
 <template>
   <div class="macros__nodes">
-    <macros-pill :label="$t('MACROS.EDITOR.START_FLOW')" class="macro__node" />
+    <div class="macro__node">
+      <div>
+        <woot-label
+          :title="$t('MACROS.EDITOR.START_FLOW')"
+          color-scheme="primary"
+        />
+      </div>
+    </div>
     <draggable
       :list="actionData"
       animation="200"
@@ -28,29 +35,39 @@
         />
       </div>
     </draggable>
-    <macro-action-button
+    <div class="macro__node">
+      <div>
+        <woot-button
+          :title="$t('MACROS.EDITOR.ADD_BTN_TOOLTIP')"
+          class="macros__action-button"
+          color-scheme="success"
+          variant="smooth"
           icon="add-circle"
-      class="macro__node"
-      :tooltip="$t('MACROS.EDITOR.ADD_BTN_TOOLTIP')"
-      type="add"
           @click="$emit('addNewNode')"
+        >
+          {{ $t('MACROS.EDITOR.ADD_BTN_TOOLTIP') }}
+        </woot-button>
+      </div>
+    </div>
+    <div class="macro__node">
+      <div>
+        <woot-label
+          :title="$t('MACROS.EDITOR.END_FLOW')"
+          color-scheme="primary"
         />
-    <macros-pill :label="$t('MACROS.EDITOR.END_FLOW')" class="macro__node" />
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-import MacrosPill from './Pill.vue';
 import Draggable from 'vuedraggable';
 import MacroNode from './MacroNode.vue';
-import MacroActionButton from './ActionButton.vue';
 import { getFileName } from './macroHelper';
 export default {
   components: {
     Draggable,
-    MacrosPill,
     MacroNode,
-    MacroActionButton,
   },
   props: {
     value: {
@@ -87,22 +104,27 @@ export default {
 
 .macro__node:not(:last-child) {
   position: relative;
-  padding-bottom: var(--space-three);
+  padding-bottom: var(--space-large);
 }
 
 .macro__node:not(:last-child):not(.sortable-chosen):after,
 .macros__nodes-draggable:after {
   content: '';
   position: absolute;
-  height: var(--space-three);
+  height: var(--space-large);
   width: var(--space-smaller);
   margin-left: var(--space-medium);
-  background-image: url("data:image/svg+xml,%3Csvg width='4' height='30' viewBox='0 0 4 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='1.50098' y1='0.579529' x2='1.50098' y2='30.5795' stroke='%2393afc8' stroke-width='2' stroke-dasharray='5 5'/%3E%3C/svg%3E%0A");
+
+  border-left: 1px dashed var(--s-500);
 }
 
 .macros__nodes-draggable {
   position: relative;
-  padding-bottom: var(--space-three);
+  padding-bottom: var(--space-large);
+}
+
+.macros__action-button {
+  box-shadow: var(--shadow);
 }
 
 .macros__node-action-container {

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

@@ -1,30 +0,0 @@
-<template>
-  <div>
-    <div class="macros-item macros-pill">
-      <span>{{ label }}</span>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    label: {
-      type: String,
-      required: true,
-    },
-  },
-};
-</script>
-
-<style scoped>
-.macros-pill {
-  padding: var(--space-slab);
-  background-color: var(--w-500);
-  max-width: max-content;
-  color: var(--white);
-  font-size: var(--font-size-small);
-  border-radius: var(--border-radius-full);
-  position: relative;
-}
-</style>

app/javascript/shared/assets/stylesheets/spacing.scss

@@ -3,14 +3,12 @@
   --space-zero: 0;
   --space-micro: 0.2rem;
   --space-smaller: 0.4rem;
-  --space-half: 0.5rem;
   --space-small: 0.8rem;
   --space-one: 1rem;
   --space-slab: 1.2rem;
   --space-normal: 1.6rem;
   --space-two: 2rem;
   --space-medium: 2.4rem;
-  --space-three: 3rem;
   --space-large: 3.2rem;
   --space-larger: 4.8rem;
   --space-jumbo: 6.4rem;