Add a confirmation modal: (#2279)

- Deleting a toot
- Muting, blocking someone
- Clearing notifications

Remove source map generation from development environment, as it is a huge
performance sink hole with little gains

1 files changed, 34 insertions, 2 deletions

diff --git a/app/assets/stylesheets/components.scss b/app/assets/stylesheets/components.scss
index 4e7309a02..ac9a264ee 100644
--- a/app/assets/stylesheets/components.scss
+++ b/app/assets/stylesheets/components.scss
@@ -2773,7 +2773,7 @@ button.icon-button.active i.fa-retweet {
   margin-left: 10px;
 }
 
-.boost-modal {
+.boost-modal, .confirmation-modal {
   background: lighten($color2, 8%);
   color: $color1;
   border-radius: 8px;
@@ -2808,7 +2808,7 @@ button.icon-button.active i.fa-retweet {
   }
 }
 
-.boost-modal__action-bar {
+.boost-modal__action-bar, .confirmation-modal__action-bar {
   display: flex;
   background: $color2;
   padding: 10px;
@@ -2835,6 +2835,38 @@ button.icon-button.active i.fa-retweet {
   font-size: 14px;
 }
 
+.confirmation-modal {
+  max-width: 380px;
+}
+
+.confirmation-modal__action-bar {
+  & > div {
+    text-align: left;
+    padding: 0 16px;
+  }
+
+  a {
+    color: darken($color2, 34%);
+    text-decoration: none;
+    font-size: 14px;
+    font-weight: 500;
+
+    &:hover, &:focus, &:active {
+      color: darken($color2, 38%);
+    }
+  }
+}
+
+.confirmation-modal__container {
+  padding: 30px;
+  font-size: 16px;
+  text-align: center;
+
+  strong {
+    font-weight: 500;
+  }
+}
+
 .loading-bar {
   background-color: $color4;
   height: 3px;