From f97b110e137f3f86ba4813794c2558a5310be62a Mon Sep 17 00:00:00 2001
From: Josh Smith <josh@codecorps.org>
Date: Tue, 26 Dec 2017 06:03:59 -0800
Subject: [PATCH] Fix modal CSS and remove modal-confirm

---
 app/components/modal-confirm.js               | 90 -------------------
 app/styles/app.scss                           | 17 +---
 .../conversations/new-conversation-modal.scss |  7 --
 app/styles/components/modal-confirm.scss      | 14 ---
 app/styles/layout/_modals.scss                | 35 ++++----
 .../conversations/new-conversation-modal.hbs  |  6 +-
 .../github/repo-disconnect-confirm-modal.hbs  |  6 +-
 app/templates/components/modal-confirm.hbs    | 13 ---
 .../components/project-user-role-modal.hbs    |  4 +-
 .../components/modal-confirm-test.js          | 74 ---------------
 10 files changed, 35 insertions(+), 231 deletions(-)
 delete mode 100644 app/components/modal-confirm.js
 delete mode 100644 app/styles/components/modal-confirm.scss
 delete mode 100644 app/templates/components/modal-confirm.hbs
 delete mode 100644 tests/integration/components/modal-confirm-test.js

diff --git a/app/components/modal-confirm.js b/app/components/modal-confirm.js
deleted file mode 100644
index 6ad1f257e..000000000
--- a/app/components/modal-confirm.js
+++ /dev/null
@@ -1,90 +0,0 @@
-import Component from '@ember/component';
-import { set, get } from '@ember/object';
-import { task } from 'ember-concurrency';
-
-/**
-  `modal-confirm` Replaces javascript confirm with a modal built with ember-modal-dialog
-
-  ## default usage
-
-  ```handlebars
-  {{modal-confirm dialogText='Confirm Text' okAction=(action 'deny' projectUser) showDialog=showConfirm}}
-  ```
-  ### Testing
-
-  For integration tests you need the modal-dialog service to set a container even when using it as a child component
-
-  ```javascript
-  let modalDialogService = this.container.lookup('service:modal-dialog');
-  modalDialogService.destinationElementId = 'modal-container';
-
-  this.render(hbs```<`div id='modal-container'`>` `<`/div`>`{{user-list-item projectUser=projectUser user=user}}``);
-  ```
-
-  For acceptance tests using a page object you need to specify a container of **body** since is uses ember-wormhole and its container is outside of
-  ember-view
-
-  ```javascript
-  modal: {
-    testContainer: 'body',
-    confirmOk: clickable('button#ok')
-  }
-  ```
-  ```javascript
-  page.modal.confirmOk();
-  ```
-
-  @module Component
-  @extends Ember.component
-  @class modal-confirm
- */
-export default Component.extend({
-  /**
-    Text for Cancel Button on dialog
-    @property cancelText
-    @type String
-    @default 'Cancel'
-  */
-  cancelText: 'Cancel',
-  /**
-    Text for Ok button on dialog
-
-    @property okText
-    @type String
-    @default 'Ok'
-  */
-  okText: 'Ok',
-  /**
-    @property showDialog
-    @type Boolean
-    @default false
-  */
-  showDialog: false,
-
-  actions: {
-    /**
-      Closes dialog
-      @method closeDialog
-    */
-    closeDialog() {
-      get(this, '_hideDialog').perform();
-    },
-
-    /**
-      Fires okAction closure action if one exists
-      and closes the dialog
-
-      @method okAction
-    */
-    okAction() {
-      if (this.attrs.okAction) {
-        get(this, 'okAction')();
-      }
-      this.send('closeDialog');
-    }
-  },
-
-  _hideDialog: task(function* () {
-    yield set(this, 'showDialog', false);
-  })
-});
diff --git a/app/styles/app.scss b/app/styles/app.scss
index 4276b1341..6063a37d3 100644
--- a/app/styles/app.scss
+++ b/app/styles/app.scss
@@ -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";
diff --git a/app/styles/components/conversations/new-conversation-modal.scss b/app/styles/components/conversations/new-conversation-modal.scss
index 27f03e26f..8a392498d 100644
--- a/app/styles/components/conversations/new-conversation-modal.scss
+++ b/app/styles/components/conversations/new-conversation-modal.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;
-  }
 }
diff --git a/app/styles/components/modal-confirm.scss b/app/styles/components/modal-confirm.scss
deleted file mode 100644
index b13f9a36e..000000000
--- a/app/styles/components/modal-confirm.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.modal-confirm {
-  @include span-columns(6);
-}
-
-a#cancel.modal-confirm-cancel {
-  color: $red;
-  text-decoration: none;
-  transition: color ease 0.3s;
-
-  &:hover {
-    color: $hidden-link-color;
-    cursor: pointer;
-  }
-}
diff --git a/app/styles/layout/_modals.scss b/app/styles/layout/_modals.scss
index 4e31715c4..8b676333e 100644
--- a/app/styles/layout/_modals.scss
+++ b/app/styles/layout/_modals.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,8 +20,11 @@
 }
 
 .modal__header {
-  margin-top: 10px;
-  padding: 10px;
+  h3 {
+    font-size: $header-font-size-small;
+    margin: 0.7em;
+    text-align: center;
+  }
 }
 
 .modal__warning {
@@ -27,15 +32,14 @@
   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;
diff --git a/app/templates/components/conversations/new-conversation-modal.hbs b/app/templates/components/conversations/new-conversation-modal.hbs
index 46409e0a5..2a1ea34fd 100644
--- a/app/templates/components/conversations/new-conversation-modal.hbs
+++ b/app/templates/components/conversations/new-conversation-modal.hbs
@@ -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">
diff --git a/app/templates/components/github/repo-disconnect-confirm-modal.hbs b/app/templates/components/github/repo-disconnect-confirm-modal.hbs
index 4c1fbac5a..a0f89f065 100644
--- a/app/templates/components/github/repo-disconnect-confirm-modal.hbs
+++ b/app/templates/components/github/repo-disconnect-confirm-modal.hbs
@@ -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>
diff --git a/app/templates/components/modal-confirm.hbs b/app/templates/components/modal-confirm.hbs
deleted file mode 100644
index 59634619d..000000000
--- a/app/templates/components/modal-confirm.hbs
+++ /dev/null
@@ -1,13 +0,0 @@
-{{#if showDialog}}
-<div class="modal-confirm">
-  {{#modal-dialog clickOutsideToClose=true onClose="closeDialog" translucentOverlay=true}}
-    <div class="dialog-text">
-      <p>{{dialogText}}</p>
-    </div>
-    <div class="actions">
-      <button id="ok" class="default small" {{action "okAction" }}>{{okText}}</button>
-      <a href id="cancel" class="modal-confirm-cancel" {{action "closeDialog" }}>{{cancelText}}</a>
-    </div>
-  {{/modal-dialog}}
-</div>
-{{/if}}
diff --git a/app/templates/components/project-user-role-modal.hbs b/app/templates/components/project-user-role-modal.hbs
index 3fa57a0b3..940d39a7b 100644
--- a/app/templates/components/project-user-role-modal.hbs
+++ b/app/templates/components/project-user-role-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">
diff --git a/tests/integration/components/modal-confirm-test.js b/tests/integration/components/modal-confirm-test.js
deleted file mode 100644
index 9d5b5c2e9..000000000
--- a/tests/integration/components/modal-confirm-test.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import { moduleForComponent, test } from 'ember-qunit';
-import hbs from 'htmlbars-inline-precompile';
-import page from '../../pages/components/modal-confirm';
-
-moduleForComponent('modal-confirm', 'Integration | Component | modal confirm', {
-  integration: true,
-  beforeEach() {
-    page.setContext(this);
-  },
-  afterEach() {
-    page.removeContext();
-  }
-});
-
-test('Render with defaults', function(assert) {
-  assert.expect(3);
-
-  let modalDialogService = this.container.lookup('service:modal-dialog');
-  modalDialogService.destinationElementId = 'modal-container';
-
-  page.render(hbs`<div id='modal-container'></div>{{modal-confirm showDialog=true}}`);
-  assert.equal(page.dialogText, '');
-  assert.equal(page.okText, 'Ok');
-  assert.equal(page.cancelText, 'Cancel');
-});
-
-test('Render with "cancelText", "dialogText", and "okText" options', function(assert) {
-  assert.expect(3);
-
-  let modalDialogService = this.container.lookup('service:modal-dialog');
-  modalDialogService.destinationElementId = 'modal-container';
-
-  page.render(hbs`<div id='modal-container'></div>{{modal-confirm cancelText='Dismiss' dialogText='Are you sure?' okText='Confirm' showDialog=true}}`);
-  assert.equal(page.dialogText, 'Are you sure?');
-  assert.equal(page.okText, 'Confirm');
-  assert.equal(page.cancelText, 'Dismiss');
-});
-
-test('test that dialog disappears when clicking "Cancel"', function(assert) {
-  assert.expect(1);
-
-  let modalDialogService = this.container.lookup('service:modal-dialog');
-  modalDialogService.destinationElementId = 'modal-container';
-
-  page.render(hbs`<div id='modal-container'></div>{{modal-confirm cancelText='Dismiss' dialogText='Are you sure?' okText='Confirm' showDialog=true}}`);
-  page.cancel();
-  assert.ok(page.dialogTextIsHidden, '');
-});
-
-test('test that dialog disappears when clicking "OK", test closure action when clicking "OK"', function(assert) {
-  assert.expect(3);
-
-  let modalDialogService = this.container.lookup('service:modal-dialog');
-  modalDialogService.destinationElementId = 'modal-container';
-
-  this.set('confirmActionArg', true);
-  this.set('showDialog', true);
-
-  this.set('confirmAction', (confirm) => {
-    this.set('confirmValue', confirm);
-  });
-
-  page.render(hbs`<div id='modal-container'></div>{{modal-confirm okAction=(action confirmAction confirmActionArg) showDialog=showDialog}}`);
-  page.ok();
-  assert.equal(this.get('confirmValue'), true);
-  assert.ok(page.dialogTextIsHidden);
-
-  this.set('showDialog', true);
-
-  page.render(hbs`<div id='modal-container'></div>{{modal-confirm showDialog=showDialog}}`);
-  page.ok();
-  assert.ok(page.dialogTextIsHidden);
-});
-