From de30f3515bcdfc34ce21a8f16c3df1ad2f53e04e Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Fri, 23 Feb 2018 13:14:32 -0500
Subject: [PATCH] Updating modal headers to flexbox for better alignment

---
 app/assets/stylesheets/common/base/modal.scss | 10 ++++++++++
 app/assets/stylesheets/desktop/modal.scss     |  9 +--------
 app/assets/stylesheets/mobile/modal.scss      | 11 ++---------
 3 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/app/assets/stylesheets/common/base/modal.scss b/app/assets/stylesheets/common/base/modal.scss
index 50941f56afc..03d2cd55174 100644
--- a/app/assets/stylesheets/common/base/modal.scss
+++ b/app/assets/stylesheets/common/base/modal.scss
@@ -27,7 +27,17 @@
 }
 
 .modal-header {
+  display: flex;
+  align-items: center;
+  padding: 10px 15px;  
   border-bottom: 1px solid $primary-low;
+  h3 {
+    margin-bottom: 0;
+  }
+  .modal-close {
+    order: 2; 
+    margin-left: auto;
+  }
 }
 
 .modal-backdrop {
diff --git a/app/assets/stylesheets/desktop/modal.scss b/app/assets/stylesheets/desktop/modal.scss
index 5b35ce44ddd..e49ae388132 100644
--- a/app/assets/stylesheets/desktop/modal.scss
+++ b/app/assets/stylesheets/desktop/modal.scss
@@ -35,19 +35,12 @@
   margin-left: -1px;
 }
 
-.modal-close {
-  display: inline-block;
-  float: right;
-  margin: 7px;
-}
-
 .modal-header {
   h3 {
-    display: inline-block;;
     font-size: $font-up-3;
-    padding: 10px 15px 7px;
   }
 }
+
 .close {
   font-size: $font-up-3;
   text-decoration: none;
diff --git a/app/assets/stylesheets/mobile/modal.scss b/app/assets/stylesheets/mobile/modal.scss
index 2eb136e07f6..7469f8876cd 100644
--- a/app/assets/stylesheets/mobile/modal.scss
+++ b/app/assets/stylesheets/mobile/modal.scss
@@ -33,20 +33,13 @@
   padding: 15px 7px 10px 7px;
 }
 
-.modal-close {
-  display: inline-block;
-  float: right;
-}
-
 .modal-header {
-  padding: 10px 0 10px 10px;
-
+  padding: 10px;  
   h3 {
-    display: inline;
     font-size: $font-up-2;
-    margin: 0;
   }
 }
+
 .close {
   font-size: $font-up-4;
   padding: 10px 15px 5px 5px;