[Enhancement] Select widget_color while creating inbox (#362)

* [Enhancement] Select widget_color while creating inbox

* Fix codeclimate issues

* Fix !important

app/javascript/dashboard/components/Modal.vue

@@ -1,8 +1,8 @@
 <template>
   <transition name="modal-fade">
-    <div class="modal-mask" @click="close" v-if="show" transition="modal">
+    <div v-if="show" class="modal-mask" transition="modal" @click="close">
+      <i class="ion-android-close modal--close" @click="close"></i>
       <div class="modal-container" :class="className" @click.stop>
-        <i class="ion-android-close modal--close" @click="close"></i>
         <slot></slot>
       </div>
     </div>
@@ -10,24 +10,23 @@
 </template>
 
 <script>
-
 export default {
   props: {
     show: Boolean,
     onClose: Function,
     className: String,
   },
-  methods: {
-    close() {
-      this.onClose();
-    },
-  },
   mounted() {
-    document.addEventListener('keydown', (e) => {
+    document.addEventListener('keydown', e => {
       if (this.show && e.keyCode === 27) {
         this.onClose();
       }
     });
   },
+  methods: {
+    close() {
+      this.onClose();
+    },
+  },
 };
 </script>

app/javascript/dashboard/components/SettingsFormHeader.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="row settings--form--header">
+    <div class="medium-8">
+      <p class="title">
+        {{ title }}
+      </p>
+      <p class="sub-head">
+        {{ subTitle }}
+      </p>
+    </div>
+    <div v-if="buttonText" class="medium-4 text-right">
+      <woot-submit-button
+        class="small"
+        :button-text="buttonText"
+        :loading="isUpdating"
+        @click="onClick()"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    subTitle: {
+      type: String,
+      required: true,
+    },
+    buttonText: {
+      type: String,
+      required: true,
+    },
+    isUpdating: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  methods: {
+    onClick() {
+      this.$emit('update');
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import '~dashboard/assets/scss/variables';
+
+.settings--form--header {
+  border-bottom: 1px solid $color-border;
+  margin-bottom: $space-normal;
+  padding: $space-normal 0;
+}
+</style>

app/javascript/dashboard/components/buttons/FormSubmitButton.vue

@@ -1,5 +1,10 @@
 <template>
-  <button type="submit" :disabled="disabled" :class="computedClass">
+  <button
+    type="submit"
+    :disabled="disabled"
+    :class="computedClass"
+    @click="onClick"
+  >
     <i v-if="!!iconClass" :class="iconClass" class="icon"></i>
     <span>{{ buttonText }}</span>
     <spinner v-if="loading" />
@@ -40,5 +45,10 @@ export default {
       return `button nice ${this.buttonClass || ' '}`;
     },
   },
+  methods: {
+    onClick() {
+      this.$emit('click');
+    },
+  },
 };
 </script>