components/modal: Fixed ugly overlap and no styles for logging in/out modals

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")>
+  </if>
+  <else-if(!input.allowNoUser)>
+    <menu-blurb class="error">input.user is missing!</menu-blurb>
+  </else-if>
+</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 enabled=state.loggingOut notification on-close("closeModal")>
+<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>
-  </if>
-  <else-if(!input.allowNoUser)>
-    <menu-blurb class="error">input.user is missing!</menu-blurb>
-  </else-if>
-</div>

marko/components/modal/index.marko

@@ -1,3 +1,4 @@
+<div class="modal-wrapper">
   <if(input.enabled)>
     <div class=["overlay", (input.notification ? "notification-overlay" : "normal-overlay")]>
       <div class="overlay-options color-menu">
@@ -8,3 +9,4 @@
       </div>
     </div>
   </if>
+</div>