nx-webmail: center login window and release 1.0.2

nx-webmail/src/components/Webmail.jsx

@@ -1796,18 +1796,9 @@ export default function Webmail() {
       </div>
 
       {!isLoggedIn ? (
-        <div className="webmail-hero-split">
-          <div className="webmail-hero-split__left">{loginForm}</div>
-          <div className="webmail-hero-split__right">
-            <div className="webmail-info-tile">
-              <h3>Login notes</h3>
-              <ul className="webmail-info-list">
-                <li>Use your IMAP credentials including server and port.</li>
-                <li>Your login stays saved in this browser until you click logout.</li>
-                <li>After login, your mailbox is loaded automatically.</li>
-                <li>Errors are shown directly in the form.</li>
-              </ul>
-            </div>
+        <div className="webmail-login-window-wrap">
+          <div className="webmail-login-window">
+            {loginForm}
           </div>
         </div>
       ) : (

nx-webmail/src/styles/webmail.css

@@ -1434,6 +1434,27 @@ body.webmail-active {
   border: 1px solid #e5e7eb;
 }
 
+.webmail-login-window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: calc(100vh - 260px);
+  padding: 24px;
+}
+
+.webmail-login-window {
+  width: min(100%, 460px);
+  border-radius: 14px;
+  background: #ffffff;
+  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
+}
+
+.webmail-login-window .login-form--billing {
+  border: 1px solid #e5e7eb;
+  border-radius: 14px;
+  box-shadow: none;
+}
+
 .webmail-shell-scroll {
   width: auto;
   overflow-x: auto;
@@ -1507,4 +1528,13 @@ body.webmail-active {
   .webmail-stage {
     padding: 20px 24px;
   }
+
+  .webmail-login-window-wrap {
+    min-height: auto;
+    padding: 0;
+  }
+
+  .webmail-login-window {
+    width: 100%;
+  }
 }