Add: Confirmation Dialog before Deletion

Author: firefinchdev

.gitignore

@@ -1,6 +1,6 @@
 # See https://help.github.com/ignore-files/ for more about ignoring files.
 
-#WebStorm local user files
+# WebStorm local user files
 /.idea/
 
 # compiled output

app/pods/questions/index/template.hbs

@@ -15,7 +15,12 @@
           {{question.description}}
         </p>
         <div class="button-solid">
+          {{#confirm-dialog
+            dialogClass="custom-confirm-dialog"
+            title="Delete Question"
+            text="Are you sure you want to delete this question?"}}
             <button {{action "deleteQuestion" question}}>Delete</button>
+          {{/confirm-dialog}}
         </div>
         <div class="button-solid">
           {{#link-to 'questions.id' question.id class="white"}}

app/styles/app.scss

@@ -1,4 +1,6 @@
 @import "ember-searchable-select/style";
+@import "ember-modal-dialog/ember-modal-structure";
+@import "ember-modal-dialog/ember-modal-appearance";
 
 .card {
   height: auto;
@@ -25,5 +27,22 @@
 }
 
 .correct {
-  background-color: rgba(0, 255, 0, 0.1); 
-}
+  background-color: rgba(0, 255, 0, 0.1);
+}
+.custom-confirm-dialog {
+
+  .dialog-title{
+    background-color: #bbc7bc;
+    font-weight: bold;
+    padding: 10px;
+  }
+
+  .dialog-text{
+    margin: 0px;
+  }
+
+  .dialog-footer{
+    background-color: #fcffb0;
+    padding: 5px;
+  }
+}