nx-webmail: redesign login and force fullscreen webmail

nx-webmail/src/components/Webmail.jsx

@@ -92,7 +92,6 @@ export default function Webmail() {
   const [isEmptyingTrash, setIsEmptyingTrash] = useState(false);
   const [selectedEmailIds, setSelectedEmailIds] = useState([]);
   const [isDeletingSelected, setIsDeletingSelected] = useState(false);
-  const [isFullscreen, setIsFullscreen] = useState(false);
 
   const [replyText, setReplyText] = useState('');
   const [isSending, setIsSending] = useState(false);
@@ -1116,16 +1115,6 @@ export default function Webmail() {
     };
   }, []);
 
-  useEffect(() => {
-    const onKeyDown = (event) => {
-      if (event.key === 'Escape') {
-        setIsFullscreen(false);
-      }
-    };
-    window.addEventListener('keydown', onKeyDown);
-    return () => window.removeEventListener('keydown', onKeyDown);
-  }, []);
-
   useEffect(() => {
     if (!isLoggedIn || !activeAccountId || !activeFolder) return undefined;
 
@@ -1448,18 +1437,9 @@ export default function Webmail() {
   );
 
   const webmailWorkspace = (
-    <div className={`webmail-app ${isFullscreen ? 'webmail-app--fullscreen' : ''}`}>
+    <div className="webmail-app webmail-app--fullscreen">
       <div className="missive-sidebar">
         <div className="sidebar-header">
-          <div className="sidebar-actions">
-            <button
-              className="fullscreen-btn"
-              onClick={() => setIsFullscreen((prev) => !prev)}
-              title={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}
-            >
-              <i className={isFullscreen ? 'ri-fullscreen-exit-line' : 'ri-fullscreen-line'} />
-            </button>
-          </div>
           <button
             className={`add-btn ${isRefreshingInbox ? 'syncing' : ''}`}
             onClick={handleManualRefresh}
@@ -1789,20 +1769,19 @@ export default function Webmail() {
 
   return (
     <>
-      <div className="webmail-stage">
-        <p>Webmail</p>
-        <h1>Mailbox and message management</h1>
-        <p>This layout uses the same page frame as the homepage.</p>
-      </div>
-
       {!isLoggedIn ? (
-        <div className="webmail-login-window-wrap">
-          <div className="webmail-login-window">
-            {loginForm}
+        <div className="webmail-login-page">
+          <div className="webmail-login-panel">
+            <p className="webmail-login-kicker">Webmail</p>
+            <h1 className="webmail-login-title">Mailbox and message management</h1>
+            <p className="webmail-login-subtitle">Sign in with your IMAP account to start reading and sending email.</p>
+            <div className="webmail-login-form-wrap">
+              {loginForm}
+            </div>
           </div>
         </div>
       ) : (
-        <div className="webmail-shell-scroll">{webmailWorkspace}</div>
+        webmailWorkspace
       )}
 
       {isRestoringSession && (