From 396544e8797bc5a1e55ba6a2c9e437a981ab7a6e Mon Sep 17 00:00:00 2001
From: Gisle Aune <dev@gisle.me>
Date: Wed, 19 Sep 2018 19:20:02 +0200
Subject: [PATCH] components/modal: Fixed ugly overlap and no styles for
 logging in/out modals

---
 marko/components/menu/index.marko  | 19 +++++++++----------
 marko/components/modal/index.marko | 20 +++++++++++---------
 2 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/marko/components/menu/index.marko b/marko/components/menu/index.marko
index bacb2fe..84dc66e 100644
--- a/marko/components/menu/index.marko
+++ b/marko/components/menu/index.marko
@@ -5,17 +5,16 @@
     <menu-header>User</menu-header>
     <menu-link if(!input.user.loggedIn) icon="L" href="/auth/login" on-click("loginClicked")>Login</menu-link>
     <menu-link if(input.user.loggedIn) icon="L" href="/auth/logout" on-click("logoutClicked")>Logout <span class="weak">(${input.user.name})</span></menu-link>
-  
-    <modal enabled=state.loggingIn notification on-close("closeModal")>
-      <h1>Logging you in...</h1>
-      <p>You may be redirected to Auth0 if it's been a while.</p>
-    </modal>
-    <modal enabled=state.loggingOut notification on-close("closeModal")>
-      <h1>Logging you out...</h1>
-      <p>You can probably log back in without entering your info if you're quick.</p>
-    </modal>
   </if>
   <else-if(!input.allowNoUser)>
     <menu-blurb class="error">input.user is missing!</menu-blurb>
   </else-if>
-</div>
\ No newline at end of file
+</div>
+<modal class="modal" enabled=state.loggingIn notification>
+  <h1>Logging you in...</h1>
+  <p>You may be redirected to Auth0 if it's been a while.</p>
+</modal>
+<modal class="modal" enabled=state.loggingOut notification>
+  <h1>Logging you out...</h1>
+  <p>You can probably log back in without entering your info if you're quick.</p>
+</modal>
\ No newline at end of file
diff --git a/marko/components/modal/index.marko b/marko/components/modal/index.marko
index 918b12a..78c5ca8 100644
--- a/marko/components/modal/index.marko
+++ b/marko/components/modal/index.marko
@@ -1,10 +1,12 @@
-<if(input.enabled)>
-  <div class=["overlay", (input.notification ? "notification-overlay" : "normal-overlay")]>
-    <div class="overlay-options color-menu">
-      <div if(input.closable) on-click("closeModal")>Close</div>
+<div class="modal-wrapper">
+  <if(input.enabled)>
+    <div class=["overlay", (input.notification ? "notification-overlay" : "normal-overlay")]>
+      <div class="overlay-options color-menu">
+        <div if(input.closable) on-click("closeModal")>Close</div>
+      </div>
+      <div class=input.class>
+        <include(input.renderBody) />
+      </div>
     </div>
-    <div class=input.class>
-      <include(input.renderBody) />
-    </div>
-  </div>
-</if>
\ No newline at end of file
+  </if>
+</div>
\ No newline at end of file