From 148b1f1b381119f256f99354f3ae8983bff76cf8 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Tue, 27 Mar 2018 17:31:17 -0700
Subject: [PATCH] use flexbox for dialog button

---
 routes/_components/dialog/ModalDialog.html | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/routes/_components/dialog/ModalDialog.html b/routes/_components/dialog/ModalDialog.html
index 0c6faaf..b26733e 100644
--- a/routes/_components/dialog/ModalDialog.html
+++ b/routes/_components/dialog/ModalDialog.html
@@ -15,7 +15,7 @@
       <div class="close-dialog-button-wrapper">
         <button class="close-dialog-button"
                 data-a11y-dialog-hide aria-label="Close dialog">
-          <span aria-hidden="true">&times;</span>
+          <span class="close-dialog-button-span" aria-hidden="true">&times;</span>
         </button>
       </div>
     </div>
@@ -79,17 +79,22 @@
   }
   .close-dialog-button-wrapper {
     flex: 1;
-    text-align: right;
+    display: flex;
+    justify-content: flex-end;
   }
   .close-dialog-button {
-    padding: 0 0 7px;
+    padding: 0;
     background: none;
     border: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
   }
-  .close-dialog-button span {
-    padding: 0 10px 7px;
+  .close-dialog-button-span {
+    padding: 0 10px 5px;
     font-size: 32px;
     color: var(--button-primary-text);
+    flex: 1;
   }
   .muted-style .modal-dialog-header {
     background: var(--muted-modal-bg);