Chore: UI Cleanup in modals (#873)

* Chore: UI Cleanup in modals

* Fix review comments

app/javascript/dashboard/components/Modal.vue

@@ -6,8 +6,8 @@
       transition="modal"
       @click="onBackDropClick"
     >
-      <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 />
       </div>
     </div>

app/javascript/dashboard/components/index.js

@@ -1,14 +1,15 @@
 /* eslint no-plusplus: 0 */
 /* eslint-env browser */
 
-import Spinner from 'shared/components/Spinner';
 import Bar from './widgets/chart/BarChart';
 import Code from './Code';
+import DeleteModal from './widgets/modal/DeleteModal.vue';
 import LoadingState from './widgets/LoadingState';
 import Modal from './Modal';
 import ModalHeader from './ModalHeader';
 import ReportStatsCard from './widgets/ReportStatsCard';
 import SidemenuIcon from './SidemenuIcon';
+import Spinner from 'shared/components/Spinner';
 import SubmitButton from './buttons/FormSubmitButton';
 import Tabs from './ui/Tabs/Tabs';
 import TabsItem from './ui/Tabs/TabsItem';
@@ -16,6 +17,7 @@ import TabsItem from './ui/Tabs/TabsItem';
 const WootUIKit = {
   Bar,
   Code,
+  DeleteModal,
   LoadingState,
   Modal,
   ModalHeader,

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

@@ -0,0 +1,32 @@
+<template>
+  <modal :show.sync="show" :on-close="onClose">
+    <woot-modal-header :header-title="title" :header-content="message" />
+    <div class="modal-footer delete-item">
+      <button class="alert button nice" @click="onConfirm">
+        {{ confirmText }}
+      </button>
+      <button class="button clear" @click="onClose">
+        {{ rejectText }}
+      </button>
+    </div>
+  </modal>
+</template>
+
+<script>
+import Modal from '../../Modal';
+
+export default {
+  components: {
+    Modal,
+  },
+  props: {
+    show: Boolean,
+    onClose: Function,
+    onConfirm: Function,
+    title: String,
+    message: String,
+    confirmText: String,
+    rejectText: String,
+  },
+};
+</script>