update design

ts_web/elements/idp-registration-stepper.ts

@@ -34,9 +34,13 @@ export class IdpRegistrationStepper extends DeesElement {
     cssManager.defaultStyles,
     css`
       :host {
+        --foreground: hsl(0 0% 98%);
+        --muted-foreground: hsl(240 5% 64.9%);
+        --background: hsl(240 10% 3.9%);
+
         display: block;
-        height: 100px;
-        color: ${cssManager.bdTheme('#333', '#fff')};
+        color: var(--foreground);
+        font-family: 'Geist Sans', -apple-system, BlinkMacSystemFont, sans-serif;
       }
 
       .main {
@@ -48,17 +52,37 @@ export class IdpRegistrationStepper extends DeesElement {
         display: flex;
         justify-content: center;
         align-items: center;
+        background: var(--background);
+      }
+
+      .stepper-container {
+        width: 100%;
+        max-width: 480px;
+        padding: 48px 24px;
+      }
+
+      .error-message {
+        text-align: center;
+        color: var(--muted-foreground);
+        font-size: 14px;
+        line-height: 1.6;
+        padding: 24px;
+      }
+
+      dees-stepper {
+        --dees-stepper-background: transparent;
       }
     `,
   ];
 
   public render(): TemplateResult {
     return html`
-      <style></style>
       <div class="main">
-        ${this.usedSubTemplate
-          ? this.usedSubTemplate
-          : html`<dees-spinner size="60"></dees-spinner>`}
+        <div class="stepper-container">
+          ${this.usedSubTemplate
+            ? this.usedSubTemplate
+            : html`<dees-spinner size="60"></dees-spinner>`}
+        </div>
       </div>
     `;
   }
@@ -71,8 +95,10 @@ export class IdpRegistrationStepper extends DeesElement {
     console.log(`validationToken is ${this.storedData.validationTokenUrlParam}`);
     if (!this.storedData.validationTokenUrlParam) {
       this.usedSubTemplate = html`
-        You need a validation token, but we couldn't find one. Please contact workspace.global
-        support.
+        <div class="error-message">
+          You need a validation token, but we couldn't find one.<br/>
+          Please contact support for assistance.
+        </div>
       `;
       await this.domtools.convenience.smartdelay.delayFor(5000);
       window.location.href = '/';
@@ -97,8 +123,10 @@ export class IdpRegistrationStepper extends DeesElement {
 
     if (!resAfterRegEmailClicked || !resAfterRegEmailClicked.email) {
       this.usedSubTemplate = html`
-        the supplied validation token does not match any registration sessions.<br />
-        ${tokenErrorMessage ? html`Reason: ${tokenErrorMessage}` : null}
+        <div class="error-message">
+          The supplied validation token does not match any registration sessions.<br/>
+          ${tokenErrorMessage ? html`<br/>Reason: ${tokenErrorMessage}` : null}
+        </div>
       `;
       await this.domtools.convenience.smartdelay.delayFor(5000);
       idpState.domtools.router.pushUrl('/');