editor3d: login and sign up page styling fixes

frontend/apps/editor3d/app/components/reusable/ButtonLink/ButtonLink.tsx

@@ -19,7 +19,7 @@ export const ButtonLink = ({
   function getVariantClassNames(variant: string) {
     switch (variant) {
       case "secondary": {
-        return "bg-brand-secondary hover:bg-brand-secondary-900 text-white focus-visible:outline-brand-secondary";
+        return "bg-brand-secondary hover:bg-brand-secondary-600 text-white focus-visible:outline-brand-secondary";
       }
       case "primary":
       default: {

frontend/apps/editor3d/app/components/signaled/TopBar/AuthButtons.tsx

@@ -15,19 +15,26 @@ export const AuthButtons = () => {
     return <ProfileDropdown />;
   } else {
     return (
-      <>
-        <ButtonLink 
-          to="/login"
-          variant="secondary" 
-          reloadDocument={true} // TODO(bt,2025-04-19): Once we have in-page routing, get rid of this.
-        >
-          Login
-        </ButtonLink>
-        <ButtonLink 
-          to="/signup"
-          reloadDocument={true} // TODO(bt,2025-04-19): Once we have in-page routing, get rid of this.
-          >Sign Up</ButtonLink>
-      </>
+      <div className="flex items-center gap-3.5">
+        <span className="text-white/20">|</span>
+        <div className="flex items-center gap-2">
+          <ButtonLink
+            to="/login"
+            variant="secondary"
+            reloadDocument={true}
+            className="h-[38px]" // TODO(bt,2025-04-19): Once we have in-page routing, get rid of this.
+          >
+            Login
+          </ButtonLink>
+          <ButtonLink
+            to="/signup"
+            reloadDocument={true}
+            className="h-[38px]" // TODO(bt,2025-04-19): Once we have in-page routing, get rid of this.
+          >
+            Sign Up
+          </ButtonLink>
+        </div>
+      </div>
     );
   }
 };

frontend/apps/editor3d/app/login.tsx

@@ -1,24 +1,19 @@
-import { useRef } from "react";
-import { BrowserRouter } from 'react-router-dom';
-import { StrictMode } from 'react';
-import { useNavigate, useSearchParams } from "react-router-dom";
+import { useRef, StrictMode } from "react";
+import { useNavigate, useSearchParams, BrowserRouter } from "react-router-dom";
 import { useSignalEffect, useSignals } from "@preact/signals-react/runtime";
+import { twMerge } from "tailwind-merge";
 
-import { faKey, faUser } from "@fortawesome/pro-solid-svg-icons";
+import {
+  faKey,
+  faSpinnerThird,
+  faUser,
+} from "@fortawesome/pro-solid-svg-icons";
 
 import { AUTH_STATUS } from "~/enums";
 import { authentication, login, logout } from "~/signals";
 import { createRoot } from "react-dom/client";
 
-import {
-  Button,
-  H1,
-  Input,
-  Link,
-  P,
-  LoadingDots,
-  ConfirmationModal,
-} from "~/components";
+import { Button, Input, ConfirmationModal } from "~/components";
 
 import "./styles/normalize.css";
 import "./styles/tailwind.css";
@@ -27,6 +22,7 @@ import "@fortawesome/fontawesome-svg-core/styles.css";
 
 import { config } from "@fortawesome/fontawesome-svg-core";
 import { GlobalSettingsManager } from "./pages/PageEnigma/GlobalSettingsManager";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 config.autoAddCss = false; /* eslint-disable import/first */
 
@@ -65,7 +61,7 @@ export default function LoginScreen() {
         });
       }
     }
-  }; // end handleOnSubmit
+  };
 
   useSignalEffect(() => {
     const redirectPath = searchParams.get("redirect");
@@ -75,75 +71,91 @@ export default function LoginScreen() {
   });
 
   return (
-    <div className="fixed w-full" style={{ height: "calc(100% - 72px)" }}>
-      <div className="mx-auto my-6 w-10/12 max-w-2xl">
-        <H1 className="text-center text-[32px] font-bold">
-          Login to Storyteller
-        </H1>
+    <div className="fixed flex h-full w-full flex-col items-center justify-center bg-[#1b1b1f] bg-center bg-repeat">
+      <div className="mb-7 flex w-10/12 max-w-2xl items-center justify-center gap-4">
+        <img
+          src="/resources/images/artcraft-logo-3.png"
+          alt="ArtCraft Logo"
+          className="h-9 select-none"
+        />
       </div>
-      <div className="relative mx-auto my-6 w-10/12 max-w-2xl overflow-hidden rounded-lg border border-ui-panel-border bg-ui-panel p-6">
-        <form
-          ref={formRef}
-          onSubmit={handleOnSumbit}
-          className="flex flex-col gap-4"
-        >
-          <Input
-            label="Username or Email"
-            icon={faUser}
-            name="usernameOrEmail"
-            placeholder="Username or Email"
-            autoComplete="username"
-            required
-          />
-          <Input
-            label="Password"
-            icon={faKey}
-            type="password"
-            name="password"
-            placeholder="Password"
-            autoComplete="current-password"
-            required
-          />
-          <div className="align-items mb-3 flex">
-            <a
-              href="https://storyteller.ai/password-reset"
-              className="grow text-sm text-brand-primary transition-all duration-150 hover:text-brand-primary-400"
-            >
-              Forgot your password?
-            </a>
-            <div className="flex justify-end gap-1 text-sm">
-              <P>Don&apos;t have an account?</P>
-              <Link 
-                to="/signup"
-                reloadDocument={true} // TODO(bt,2025-04-19): Once we have in-page routing, get rid of this.
-                >Sign Up</Link>
+      <div className="w-full max-w-xl rounded-xl shadow-lg">
+        <div className="glass glass-no-hover relative mx-auto w-full rounded-none rounded-t-xl p-6 shadow-none">
+          <h1 className="mb-8 text-center text-2xl font-bold">
+            Log in to 3D Stage Editor
+          </h1>
+          <form
+            ref={formRef}
+            onSubmit={handleOnSumbit}
+            className={twMerge(
+              "flex flex-col gap-4",
+              shouldShowLoader && "opacity-0",
+            )}
+          >
+            <Input
+              label="Username or Email"
+              icon={faUser}
+              name="usernameOrEmail"
+              placeholder="Username or Email"
+              autoComplete="username"
+              required
+            />
+            <Input
+              label="Password"
+              icon={faKey}
+              type="password"
+              name="password"
+              placeholder="Password"
+              autoComplete="current-password"
+              required
+            />
+            <Button className="mt-4 py-3">Continue</Button>
+          </form>
+          {shouldShowLoader && (
+            <div className="absolute left-0 top-0 flex h-full w-full items-center justify-center bg-black/50">
+              <div className="flex items-center text-center">
+                <FontAwesomeIcon
+                  icon={faSpinnerThird}
+                  className="animate-spin"
+                />
+                <p className="text-sm text-white">{authLoaderMessage}</p>
+              </div>
             </div>
+          )}
+        </div>
+        <div className="align-items flex w-full max-w-xl rounded-b-xl bg-ui-controls px-6 py-4">
+          <a
+            href="https://storyteller.ai/password-reset"
+            className="grow text-sm font-medium !text-brand-primary-400 transition-all duration-150 hover:!text-brand-primary-300"
+          >
+            Forgot your password?
+          </a>
+          <div className="flex justify-end gap-1 text-sm">
+            <p className="opacity-75">Don&apos;t have an account?</p>
+            <a
+              href="/signup"
+              className="font-medium text-brand-primary-400 hover:text-brand-primary-300"
+            >
+              Sign up
+            </a>
           </div>
-
-          <Button className="h-11 w-full text-[15px]">Login</Button>
-        </form>
-        <LoadingDots
-          className="absolute left-0 top-0 h-full w-full"
-          isShowing={shouldShowLoader}
-          message={authLoaderMessage}
-          type="bricks"
-        />
-        <ConfirmationModal
-          text="We're in a closed beta and you'll need a beta key to use this app."
-          title="Unauthorized"
-          open={showNoAccessModal}
-          onClose={handleClose}
-          cancelText="Close"
-          onCancel={handleClose}
-          okText="Get Beta Key"
-          onOk={() => {
-            handleClose();
-            if (window) {
-              window.open("https://storyteller.ai/beta-key/redeem", "_blank");
-            }
-          }}
-        />
+        </div>
       </div>
+      <ConfirmationModal
+        text="We're in a closed beta and you'll need a beta key to use this app."
+        title="Unauthorized"
+        open={showNoAccessModal}
+        onClose={handleClose}
+        cancelText="Close"
+        onCancel={handleClose}
+        okText="Get Beta Key"
+        onOk={() => {
+          handleClose();
+          if (window) {
+            window.open("https://storyteller.ai/beta-key/redeem", "_blank");
+          }
+        }}
+      />
     </div>
   );
 }
@@ -171,15 +183,14 @@ const getAuthLoaderMessage = () => {
   return "Getting Session...";
 };
 
-
 // TODO: Replace environment variables from `root.tsx`
 createRoot(document.getElementById("root")!).render(
   <>
     <StrictMode>
       <BrowserRouter>
         <GlobalSettingsManager env={ENV} />
-        <LoginScreen/>
+        <LoginScreen />
       </BrowserRouter>
     </StrictMode>
-  </>
+  </>,
 );

frontend/apps/editor3d/app/signup.tsx

@@ -1,14 +1,12 @@
 import { faEnvelope, faKey, faUser } from "@fortawesome/pro-solid-svg-icons";
 import { GlobalSettingsManager } from "./pages/PageEnigma/GlobalSettingsManager";
-import { StrictMode } from 'react';
-import { Button, H1, Input, Link, P } from "~/components";
+import { Button, Input } from "~/components";
 import { addToast, authentication, signUp } from "~/signals";
-import { FormEvent, useRef, useState } from "react";
+import { FormEvent, useRef, useState, StrictMode } from "react";
 import { AUTH_STATUS, ToastTypes } from "~/enums";
 import { useSignalEffect, useSignals } from "@preact/signals-react/runtime";
-import { useNavigate, useSearchParams } from "react-router-dom";
+import { useNavigate, useSearchParams, BrowserRouter } from "react-router-dom";
 import { createRoot } from "react-dom/client";
-import { BrowserRouter } from 'react-router-dom';
 
 import "./styles/normalize.css";
 import "./styles/tailwind.css";
@@ -106,72 +104,77 @@ export default function SignUpScreen() {
   });
 
   return (
-    <div
-      className="fixed w-full overflow-scroll"
-      style={{ height: "calc(100% - 72px)" }}
-    >
-      <div className="mx-auto my-6 w-10/12 max-w-2xl">
-        <H1 className="text-center">Sign Up to Storyteller</H1>
+    <div className="fixed flex h-full w-full flex-col items-center justify-center overflow-auto bg-[#1b1b1f] bg-center bg-repeat">
+      <div className="mb-7 flex w-10/12 max-w-2xl items-center justify-center gap-4">
+        <img
+          src="/resources/images/artcraft-logo-3.png"
+          alt="ArtCraft Logo"
+          className="h-9 select-none"
+        />
       </div>
-      <div className="mx-auto my-6 w-10/12 max-w-2xl rounded-lg border border-ui-panel-border bg-ui-panel p-6">
-        <form ref={formRef} onSubmit={handleOnSubmit}>
-          <Input
-            label="Username"
-            icon={faUser}
-            placeholder="Username"
-            name="username"
-            errorMessage={usernameError}
-            required
-          />
-          <br />
-          <Input
-            type="email"
-            label="Email"
-            icon={faEnvelope}
-            placeholder="Email"
-            name="email"
-            errorMessage={emailError}
-            required
-          />
-          <br />
-          <Input
-            type="password"
-            label="Password"
-            icon={faKey}
-            name="password"
-            placeholder="Password"
-            autoComplete="current-password"
-            errorMessage={passwordError}
-            required
-          />
-          <br />
-          <Input
-            type="password"
-            label="Password Confrimation"
-            icon={faKey}
-            placeholder="Password Confirmation"
-            name="password-confirmation"
-            errorMessage={passwordConfirmationError}
-            required
-          />
-          <br />
-          <br />
-          <Button>Sign up</Button>
-          <br />
-          <div className="flex gap-2">
-            <P>Already have an account?</P>
-            <Link 
-              to="/login"
-              reloadDocument={true} // TODO(bt,2025-04-19): Once we have in-page routing, get rid of this.
-              >Log in instead</Link>
+      <div className="w-full max-w-xl rounded-xl shadow-lg">
+        <div className="glass glass-no-hover relative mx-auto w-full rounded-none rounded-t-xl p-6 shadow-none">
+          <h1 className="mb-8 text-center text-2xl font-bold">Sign up</h1>
+          <form
+            ref={formRef}
+            onSubmit={handleOnSubmit}
+            className="flex flex-col gap-4"
+          >
+            <Input
+              label="Username"
+              icon={faUser}
+              placeholder="Username"
+              name="username"
+              errorMessage={usernameError}
+              required
+            />
+            <Input
+              type="email"
+              label="Email"
+              icon={faEnvelope}
+              placeholder="Email"
+              name="email"
+              errorMessage={emailError}
+              required
+            />
+            <Input
+              type="password"
+              label="Password"
+              icon={faKey}
+              name="password"
+              placeholder="Password"
+              autoComplete="current-password"
+              errorMessage={passwordError}
+              required
+            />
+            <Input
+              type="password"
+              label="Password Confirmation"
+              icon={faKey}
+              placeholder="Password Confirmation"
+              name="password-confirmation"
+              errorMessage={passwordConfirmationError}
+              required
+            />
+            <Button className="mt-4 py-3">Sign up</Button>
+          </form>
+        </div>
+        <div className="align-items flex w-full max-w-xl rounded-b-xl bg-ui-controls px-6 py-4">
+          <div className="flex w-full justify-end gap-1 text-sm">
+            <p className="opacity-75">Already have an account?</p>
+            <a
+              href="/login"
+              className="font-medium text-brand-primary-400 hover:text-brand-primary-300"
+            >
+              Log in
+            </a>
           </div>
-        </form>
+        </div>
       </div>
     </div>
   );
 }
 
-
 // TODO: Replace environment variables from `root.tsx`
 createRoot(document.getElementById("root")!).render(
   <>
@@ -181,5 +184,5 @@ createRoot(document.getElementById("root")!).render(
         <SignUpScreen />
       </BrowserRouter>
     </StrictMode>
-  </>
+  </>,
 );