From 59142408387ab43d61e3773489f3ac1073a0afaf Mon Sep 17 00:00:00 2001
From: Kyle Spearrin <kyle.spearrin@gmail.com>
Date: Mon, 29 Jan 2018 12:14:19 -0500
Subject: [PATCH] modal adjustments

---
 src/app/modal.component.ts                    |  11 ++
 .../vault/password-generator.component.html   | 150 +-----------------
 src/scss/base.scss                            |   6 +-
 src/scss/buttons.scss                         |  35 ++++
 src/scss/modal.scss                           |  63 ++++++--
 src/scss/styles.scss                          |   1 +
 src/scss/vault.scss                           |  31 ----
 7 files changed, 105 insertions(+), 192 deletions(-)
 create mode 100644 src/scss/buttons.scss

diff --git a/src/app/modal.component.ts b/src/app/modal.component.ts
index 00ad833f71..7e00c63be9 100644
--- a/src/app/modal.component.ts
+++ b/src/app/modal.component.ts
@@ -39,6 +39,17 @@ export class ModalComponent implements OnDestroy {
 
         const factory = this.componentFactoryResolver.resolveComponentFactory<T>(type);
         const componentRef = this.container.createComponent<T>(factory);
+
+        document.querySelector('.modal-dialog').addEventListener('click', (e: Event) => {
+            e.stopPropagation();
+        });
+
+        for (const closeElement of document.querySelectorAll('.modal, .modal *[data-dismiss="modal"]')) {
+            closeElement.addEventListener('click', (event) => {
+                this.close();
+            });
+        }
+
         return componentRef.instance;
     }
 
diff --git a/src/app/vault/password-generator.component.html b/src/app/vault/password-generator.component.html
index 7fcf23a133..2450c4b799 100644
--- a/src/app/vault/password-generator.component.html
+++ b/src/app/vault/password-generator.component.html
@@ -1,149 +1,15 @@
 <div class="modal fade">
     <div class="modal-dialog">
         <div class="modal-content">
+            <div class="modal-header">
+                Password Generator
+                <button type="button" class="close" data-dismiss="modal">&times;</button>
+            </div>
             <div class="modal-body">
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
-                Some content<br />
+                Some content
+            </div>
+            <div class="modal-footer">
+                <button type="button" data-dismiss="modal">Close</button>
             </div>
         </div>
     </div>
diff --git a/src/scss/base.scss b/src/scss/base.scss
index 923c44c757..2d86b6e6dd 100644
--- a/src/scss/base.scss
+++ b/src/scss/base.scss
@@ -45,16 +45,16 @@ textarea {
     resize: vertical;
 }
 
-div::-webkit-scrollbar {
+div:not(.modal)::-webkit-scrollbar {
     width: 10px;
     height: 10px;
 }
 
-div::-webkit-scrollbar-track {
+div:not(.modal)::-webkit-scrollbar-track {
     background-color: transparent;
 }
 
-div::-webkit-scrollbar-thumb {
+div:not(.modal)::-webkit-scrollbar-thumb {
     background-color: rgba(100,100,100,.2);
     border-radius: 10px;
     margin-right: 1px;
diff --git a/src/scss/buttons.scss b/src/scss/buttons.scss
new file mode 100644
index 0000000000..cfe1dd2cf8
--- /dev/null
+++ b/src/scss/buttons.scss
@@ -0,0 +1,35 @@
+@import "variables.scss";
+
+.btn, #vault .footer button, .modal-footer button {
+    background-color: $button-backgound-color;
+    border-radius: $border-radius;
+    padding: 7px 15px;
+    border: 1px solid $button-border-color;
+    font-size: $font-size-base;
+    color: $button-color;
+
+    &:hover, &:focus {
+        cursor: pointer;
+        background-color: darken($button-backgound-color, 1.5%);
+        border-color: darken($button-border-color, 17%);
+    }
+
+    &:focus {
+        background-color: darken($button-backgound-color, 6%);
+        border-color: darken($button-border-color, 25%);
+        outline: 0;
+    }
+
+    &.primary {
+        color: $button-color-primary;
+    }
+
+    &.danger {
+        color: $button-color-danger;
+    }
+
+    &.block {
+        display: block;
+        width: 100%;
+    }
+}
diff --git a/src/scss/modal.scss b/src/scss/modal.scss
index d9dff0cf09..dc66997c00 100644
--- a/src/scss/modal.scss
+++ b/src/scss/modal.scss
@@ -2,9 +2,7 @@
 
 $white: white;
 $black: black;
-$border-width: 1px;
 $line-height-base: 14px;
-$gray-200: $gray;
 $border-radius-lg: $border-radius;
 
 // ref: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_variables.scss
@@ -24,13 +22,13 @@ $modal-title-line-height: $line-height-base !default;
 
 $modal-content-bg: $white !default;
 $modal-content-border-color: rgba($black, .2) !default;
-$modal-content-border-width: $border-width !default;
-$modal-content-box-shadow-xs: 0 .25rem .5rem rgba($black, .5) !default;
-$modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba($black, .5) !default;
+$modal-content-border-width: 1px !default;
+$modal-content-box-shadow-xs: none;
+$modal-content-box-shadow-sm-up: none;
 
-$modal-backdrop-bg: $background-color !default;
+$modal-backdrop-bg: $black !default;
 $modal-backdrop-opacity: .5 !default;
-$modal-header-border-color: $gray-200 !default;
+$modal-header-border-color: $border-color-dark !default;
 $modal-footer-border-color: $modal-header-border-color !default;
 $modal-header-border-width: $modal-content-border-width !default;
 $modal-footer-border-width: $modal-header-border-width !default;
@@ -42,6 +40,11 @@ $modal-sm: 300px !default;
 
 $modal-transition: transform .3s ease-out !default;
 
+$close-font-size: $font-size-base * 1.5 !default;
+$close-font-weight: bold !default;
+$close-color: $black !default;
+$close-text-shadow: 0 1px 0 $white !default;
+
 // ref: https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_breakpoints.scss
 
 @mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
@@ -86,14 +89,6 @@ $modal-transition: transform .3s ease-out !default;
     }
 }
 
-.modal::-webkit-scrollbar-thumb {
-    background-color: darken($modal-backdrop-bg, 20%);
-
-    &:hover {
-        background-color: darken($modal-backdrop-bg, 50%);
-    }
-}
-
 // ref: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_modal.scss
 
 // .modal-open      - body class for killing the scroll
@@ -231,7 +226,7 @@ $modal-transition: transform .3s ease-out !default;
 .modal-footer {
     display: flex;
     align-items: center; // vertically center
-    justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
+    //justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
     padding: $modal-inner-padding;
     border-top: $modal-footer-border-width solid $modal-footer-border-color;
     // Easily place margin between footer elements
@@ -280,3 +275,39 @@ $modal-transition: transform .3s ease-out !default;
         max-width: $modal-lg;
     }
 }
+
+// ref: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_close.scss
+
+.close {
+    float: right;
+    font-size: $close-font-size;
+    font-weight: $close-font-weight;
+    line-height: 1;
+    color: $close-color;
+    text-shadow: $close-text-shadow;
+    opacity: .5;
+
+    &:hover, &:focus {
+        color: $close-color;
+        text-decoration: none;
+        opacity: .75;
+    }
+    // Opinionated: add "hand" cursor to non-disabled .close elements
+    &:not(:disabled):not(.disabled) {
+        cursor: pointer;
+    }
+}
+
+// Additional properties for button version
+// iOS requires the button element instead of an anchor tag.
+// If you want the anchor version, it requires `href="#"`.
+// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
+
+// stylelint-disable property-no-vendor-prefix, selector-no-qualifying-type
+button.close {
+    padding: 0;
+    background-color: transparent;
+    border: 0;
+    -webkit-appearance: none;
+}
+// stylelint-enable
diff --git a/src/scss/styles.scss b/src/scss/styles.scss
index 4ba5ad8186..a26905cad2 100644
--- a/src/scss/styles.scss
+++ b/src/scss/styles.scss
@@ -3,6 +3,7 @@
 @import "vault.scss";
 @import "list.scss";
 @import "box.scss";
+@import "buttons.scss";
 @import "misc.scss";
 @import "modal.scss";
 @import "plugins.scss";
diff --git a/src/scss/vault.scss b/src/scss/vault.scss
index ea59649d60..86baab633c 100644
--- a/src/scss/vault.scss
+++ b/src/scss/vault.scss
@@ -260,38 +260,7 @@
         padding: 0 15px;
 
         button {
-            background-color: $button-backgound-color;
-            border-radius: $border-radius;
-            padding: 7px 15px;
-            border: 1px solid $button-border-color;
             margin-right: 10px;
-            font-size: $font-size-base;
-            color: $button-color;
-
-            &:hover, &:focus {
-                cursor: pointer;
-                background-color: darken($button-backgound-color, 1.5%);
-                border-color: darken($button-border-color, 17%);
-            }
-
-            &:focus {
-                background-color: darken($button-backgound-color, 6%);
-                border-color: darken($button-border-color, 25%);
-                outline: 0;
-            }
-
-            &.primary {
-                color: $button-color-primary;
-            }
-
-            &.danger {
-                color: $button-color-danger;
-            }
-
-            &.block {
-                display: block;
-                width: 100%;
-            }
 
             &.right {
                 margin-left: auto;