Automations feature frontend (#49)

Co-authored-by: Uros Marolt <uros@marolt.me>

Author: mariobalca

frontend/package-lock.json

@@ -41,6 +41,7 @@
     "uuid": "8.3.0",
     "vue": "^3.2.29",
     "vue-grid-layout": "3.0.0-beta1",
+    "vue-json-pretty": "^2.2.2",
     "vue-router": "^4.0.12",
     "vuedraggable": "^2.24.3",
     "vuex": "^4.0.2",

frontend/package.json

@@ -1,5 +1,5 @@
 .btn {
-  @apply px-4 py-3 rounded-lg shadow-sm font-semibold inline-flex items-center justify-center leading-none text-sm h-auto;
+  @apply px-4 py-3 rounded shadow-sm font-semibold inline-flex items-center justify-center leading-none text-sm h-auto;
   transition: all 0.2s;
 
   &.el-button {
@@ -36,7 +36,9 @@
     }
 
     &[disabled] {
-      @apply bg-primary-900 border border-primary-900 text-white;
+      @apply border text-white opacity-100;
+      border: 1px solid #F6B9AB;
+      background: #F6B9AB;
     }
   }
 
@@ -87,6 +89,14 @@
     }
   }
 
+  &--text {
+    @apply bg-transparent border-0 shadow-none text-primary-900;
+    &:hover, &:focus {
+      @apply text-primary-900;
+      background: #FDEDEA;
+    }
+  }
+
   &--full {
     @apply w-full;
   }

frontend/public/images/automations-empty-state.svg

@@ -0,0 +1,7 @@
+.el-drawer {
+  --el-drawer-padding-primary: 24px;
+
+  &__header {
+    @apply mb-4;
+  }
+}

frontend/src/assets/scss/buttons.scss

@@ -1,20 +1,20 @@
 .el-dropdown-menu__item, .el-dropdown-menu__item a {
-  @apply flex items-center text-gray-900;
+  @apply flex items-center text-gray-900 px-4 py-3;
 
   i {
     @apply mr-2;
   }
 
   &:focus, &:not(.is-disabled):hover, &:not(.is-disabled):focus {
-    @apply text-gray-900;
-    background-color: #fffbf8;
+    @apply text-gray-900 font-medium;
+    background: #F8FAFC;
   }
 }
 
 .el-dropdown-title {
-  @apply block font-semibold pb-2 px-4 text-sm text-gray-900;
+  @apply block font-bold pb-2 px-4 text-sm text-gray-900;
 }
 
 .el-dropdown-separator {
-  @apply mx-4 my-2 border-gray-100;
+  @apply mx-4 my-2 border-gray-50;
 }

frontend/src/assets/scss/drawer.scss

@@ -36,8 +36,7 @@
   }
 
   .el-form-item__label {
-    @apply font-semibold text-black h-6 leading-6;
-    float: none;
+    @apply font-medium text-black h-7 leading-6;
   }
   .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before {
     display: none;
@@ -62,7 +61,7 @@
 
 .el-checkbox {
   &__label {
-    @apply text-black;
+    @apply text-black font-normal;
   }
 
   &__input {
@@ -119,13 +118,6 @@
   @apply border-secondary-900;
 }
 
-.el-switch__label.is-active {
-  @apply text-secondary-900;
-}
-.el-switch.is-checked .el-switch__core {
-  @apply bg-secondary-900 border-secondary-900;
-}
-
 .el-form-item.is-error .el-input__inner,
 .el-form-item.is-error .el-input__inner:focus,
 .el-form-item.is-error .el-textarea__inner,

frontend/src/assets/scss/dropdown.scss

@@ -27,5 +27,6 @@
 @import 'pagination';
 @import 'toast';
 @import 'tabs';
+@import 'drawer';
 
 @import '~remixicon/fonts/remixicon.css';

frontend/src/assets/scss/form.scss

@@ -142,9 +142,9 @@ hr {
     @apply bg-transparent;
   }
   .el-loading-spinner  {
-    @apply relative top-auto mt-auto flex items-center justify-center;
+    @apply relative flex items-center justify-center h-full;
     .circular {
-      @apply w-5 h-5;
+      @apply w-10 h-10;
     }
   }
 }

frontend/src/assets/scss/index.scss

@@ -17,7 +17,4 @@
       box-shadow: none;
     }
   }
-  &__nav-wrap::after {
-    @apply hidden;
-  }
 }