update design

ts_web/elements/idp-loginprompt.ts

@@ -52,17 +52,56 @@ export class IdpLoginPrompt extends DeesElement {
     cssManager.defaultStyles,
     css`
       :host {
-        font-family: 'Geist Sans';
+        --foreground: hsl(0 0% 98%);
+        --muted-foreground: hsl(240 5% 64.9%);
+
+        font-family: 'Geist Sans', -apple-system, BlinkMacSystemFont, sans-serif;
         display: block;
-        color: ${cssManager.bdTheme('#333333', '#ffffff')};
+        color: var(--foreground);
       }
 
-      .boxcontent {
-        margin: 0px 20px;
+      .form-header {
+        margin-bottom: 32px;
+        text-align: center;
       }
 
-      .registerButton {
-        margin-top: 16px;
+      .form-header h2 {
+        font-size: 24px;
+        font-weight: 600;
+        color: var(--foreground);
+        margin: 0 0 8px 0;
+        letter-spacing: -0.02em;
+      }
+
+      .form-header p {
+        font-size: 14px;
+        color: var(--muted-foreground);
+        margin: 0;
+      }
+
+      dees-form {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
+      }
+
+      .form-footer {
+        margin-top: 24px;
+        text-align: center;
+        font-size: 14px;
+        color: var(--muted-foreground);
+      }
+
+      .form-footer a {
+        color: var(--foreground);
+        text-decoration: none;
+        font-weight: 500;
+        cursor: pointer;
+        transition: opacity 0.15s ease;
+      }
+
+      .form-footer a:hover {
+        opacity: 0.8;
       }
     `,
   ];
@@ -70,34 +109,38 @@ export class IdpLoginPrompt extends DeesElement {
   public render(): TemplateResult {
     return html`
       <idp-centercontainer>
-        <div class="boxcontent">
-          <dees-form
-            id="loginForm"
-            @formData="${(eventArg) => {
-              this.login({
-                emailAddress: eventArg.detail.data.emailAddress,
-                passwordArg: eventArg.detail.data.password,
-              });
-            }}"
-          >
-            <dees-input-text
-              id="loginEmailInput"
-              .required=${true}
-              key="emailAddress"
-              label="Email-Address or Username"
-            ></dees-input-text>
-            <dees-input-text
-              .id=${'loginPasswordInput'}
-              .key=${'password'}
-              .label=${'Password'}
-              .isPasswordBool=${true}
-            ></dees-input-text>
-            <dees-form-submit id="loginSubmitButton"></dees-form-submit>
-          </dees-form>
-          <dees-button type="discreet" class="registerButton" @clicked=${async () => {
+        <div class="form-header">
+          <h2>Sign in to your account</h2>
+          <p>Enter your credentials to continue</p>
+        </div>
+        <dees-form
+          id="loginForm"
+          @formData="${(eventArg) => {
+            this.login({
+              emailAddress: eventArg.detail.data.emailAddress,
+              passwordArg: eventArg.detail.data.password,
+            });
+          }}"
+        >
+          <dees-input-text
+            id="loginEmailInput"
+            .required=${true}
+            key="emailAddress"
+            label="Email or Username"
+          ></dees-input-text>
+          <dees-input-text
+            .id=${'loginPasswordInput'}
+            .key=${'password'}
+            .label=${'Password'}
+            .isPasswordBool=${true}
+          ></dees-input-text>
+          <dees-form-submit id="loginSubmitButton"></dees-form-submit>
+        </dees-form>
+        <div class="form-footer">
+          Don't have an account? <a @click=${async () => {
             const idpState = await IdpState.getSingletonInstance();
             idpState.domtools.router.pushUrl('/register');
-          }}>Register instead</dees-button>
+          }}>Create one</a>
         </div>
       </idp-centercontainer>
     `;