update design

ts_web/elements/idp-registerprompt.ts

@@ -52,29 +52,56 @@ export class IdpRegistrationPrompt 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 {
-        display: block;
-        transition: all 0.2s ease;
-        will-change: transform;
+      .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;
       }
 
-      .registerButton:hover {
-        color: #fff;
-        transform: scale(1.02);
-      }
-
-      .loginButton {
-        margin-top: 16px;
+      .form-footer a:hover {
+        opacity: 0.8;
       }
     `,
   ];
@@ -82,29 +109,34 @@ export class IdpRegistrationPrompt extends DeesElement {
   public render(): TemplateResult {
     return html`
       <idp-centercontainer>
-        <div class="boxcontent">
-          <dees-form
-            id="registrationForm"
-            @formData="${(eventArg) => {
-              this.register({
-                emailAddress: eventArg.detail.data.emailAddress,
-              });
-            }}"
-          >
-            <dees-input-text
-              .required=${true}
-              key="emailAddress"
-              label="Email-Address"
-            ></dees-input-text>
-            <dees-input-checkbox
-              .label="${'Agree to the Terms and Conditions'}"
-            ></dees-input-checkbox>
-            <dees-form-submit>Send Verification Email</dees-form-submit>
-          </dees-form>
-          <dees-button type="discreet" class="loginButton" @click=${async () => {
+        <div class="form-header">
+          <h2>Create your account</h2>
+          <p>Get started with your permanent identity</p>
+        </div>
+        <dees-form
+          id="registrationForm"
+          @formData="${(eventArg) => {
+            this.register({
+              emailAddress: eventArg.detail.data.emailAddress,
+            });
+          }}"
+        >
+          <dees-input-text
+            .required=${true}
+            key="emailAddress"
+            label="Email Address"
+          ></dees-input-text>
+          <dees-input-checkbox
+            .label="${'I agree to the Terms and Conditions'}"
+            .required=${true}
+          ></dees-input-checkbox>
+          <dees-form-submit>Send Verification Email</dees-form-submit>
+        </dees-form>
+        <div class="form-footer">
+          Already have an account? <a @click=${async () => {
             const idpState = await IdpState.getSingletonInstance();
             idpState.domtools.router.pushUrl('/login');
-          }}>Login instead</dees-button>
+          }}>Sign in</a>
         </div>
       </idp-centercontainer>
     `;