Merge pull request #1655 from code-corps/fix-modal-css

Fix modal CSS and remove modal-confirm

Author: joshsmith

app/components/modal-confirm.js

@@ -17,21 +17,13 @@
 // http://neat.bourbon.io/
 @import "neat";
 
-//ember-modal-dialog
-//The ember-modal-dialog addon provides components to implement modal dialogs throughout an Ember application using a simple, consistent pattern.
-//https://github.com/yapplabs/ember-modal-dialog
+// ember-modal-dialog
+// The ember-modal-dialog addon provides components to implement modal dialogs
+// throughout an Ember application using a simple, consistent pattern.
+// https://github.com/yapplabs/ember-modal-dialog
 @import "ember-modal-dialog/ember-modal-structure";
 @import "ember-modal-dialog/ember-modal-appearance";
 
-.ember-modal-overlay.translucent {
-  background: rgba(0,0,0, 0.70)
-}
-
-.ember-modal-dialog {
-  border-radius: 4px;
-  box-shadow: 0 3px 12px rgba(0,0,0,0.15);
-}
-
 //
 // HELPERS
 //
@@ -99,7 +91,6 @@
 @import "components/image-drop";
 @import "components/loading-bar";
 @import "components/loading-spinner";
-@import "components/modal-confirm";
 @import "components/pager-control";
 @import "components/progress-bar";
 @import "components/settings-menu";

app/styles/app.scss

@@ -8,12 +8,5 @@
 }
 
 .new-conversation-modal {
-  padding: 0 1em;
   width: 450px;
-
-  h3 {
-    font-size: $header-font-size-small;
-    margin: 0.7em;
-    text-align: center;
-  }
 }

app/styles/components/conversations/new-conversation-modal.scss

@@ -1,12 +1,14 @@
-.modal {
-  padding: 0;
-  width: 400px;
+.ember-modal-overlay.translucent {
+  background: rgba(0,0,0, 0.70)
+}
 
-  h2 {
-    font-size: 1.2em;
-    font-weight: 500;
-    margin: 0;
-  }
+.ember-modal-dialog {
+  border-radius: 4px;
+  box-shadow: 0 3px 12px rgba(0,0,0,0.15);
+}
+
+.modal {
+  padding: 0 1em;
 }
 
 .modal-close {
@@ -18,24 +20,26 @@
 }
 
 .modal__header {
-  margin-top: 10px;
-  padding: 10px;
+  h3 {
+    font-size: $header-font-size-small;
+    margin: 0.7em;
+    text-align: center;
+  }
 }
 
 .modal__warning {
   background: $red--light;
   border-top: 1px solid $red;
   border-bottom: 1px solid $red;
   padding: 0 20px;
-  margin-top: 9px;
-  margin-bottom: -10px;
+  margin: 9px -1em -10px -1em;
 }
 
 .modal__content {
-  margin-top: 10px;
-  padding: 1em;
   border-bottom: 1px solid $border-gray;
   border-top: 1px solid $border-gray;
+  margin: 10px -1em 0 -1em;
+  padding: 1em;
 
   &--no-vertical-padding {
     padding-top: 0;
@@ -66,6 +70,7 @@
   padding: 1em;
 
   span {
+    display: flex;
     padding-right: 5px;
   }
 
@@ -76,7 +81,7 @@
 }
 
 .modal__actions {
-  padding: 10px;
+  padding: 10px 0;
 
   p {
     margin-top: 0;

app/styles/components/modal-confirm.scss

@@ -4,7 +4,7 @@
 
 {{#if showModal}}
   {{#modal-dialog
-    containerClassNames="new-conversation-modal"
+    containerClassNames="modal new-conversation-modal"
     onClose=(action (pipe (action discardConversation) (action (mut showModal) false)))
     targetAttachment="center"
     translucentOverlay=true
@@ -13,7 +13,9 @@
       {{fa-icon "close"}}
     </span>
 
-    <h3>New Conversation</h3>
+    <div class="modal__header">
+      <h3>New Conversation</h3>
+    </div>
 
     <form data-test-message-form>
       <div class="modal__target-user">

app/styles/layout/_modals.scss

@@ -6,8 +6,12 @@
      targetAttachment="center"
      translucentOverlay=true
   }}
+    <span {{action (mut showModal) false}} class="modal-close">
+      {{fa-icon "close"}}
+    </span>
+
     <div class="modal__header">
-      <h2>Stop syncing this repository</h2>
+      <h3>Stop syncing this repository</h3>
     </div>
     <div class="modal__warning">
       <p>Heads up! This is a potentially destructive action.</p>

app/templates/components/conversations/new-conversation-modal.hbs

@@ -12,7 +12,7 @@
 {{/tooltip-on-element}}
 {{#if showModal}}
   {{#modal-dialog
-     containerClassNames="project-user-role-modal"
+     containerClassNames="modal project-user-role-modal"
      onClose=(action (mut showModal) false)
      targetAttachment="center"
      translucentOverlay=true
@@ -22,7 +22,7 @@
     </span>
 
     <div class="modal__header">
-      <h2>Change role</h2>
+      <h3>Change role</h3>
     </div>
     <div class="modal__content modal__content--no-vertical-padding modal__content--without-top-border">
       <div class="modal__target-user">