update design

ts_web/elements/idp-welcome.ts

@@ -28,86 +28,125 @@ export class IdpWelcome extends DeesElement {
     cssManager.defaultStyles,
     css`
       :host {
+        --foreground: hsl(0 0% 98%);
+        --muted-foreground: hsl(240 5% 64.9%);
+
         display: block;
-        color: #fff;
-        font-family: 'Geist Sans';
+        color: var(--foreground);
+        font-family: 'Geist Sans', -apple-system, BlinkMacSystemFont, sans-serif;
       }
+
       :host([hidden]) {
         display: none;
       }
 
-      .maincontainer {
-        padding: 0px 16px;
+      .form-header {
+        margin-bottom: 32px;
+        text-align: center;
+      }
+
+      .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;
+      }
+
+      .button-group {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+      }
+
+      .secondary-actions {
+        margin-top: 24px;
+        padding-top: 24px;
+        border-top: 1px solid hsla(240 3.7% 15.9% / 0.5);
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
       }
 
       .greeting {
+        font-size: 14px;
+        color: var(--muted-foreground);
         text-align: center;
-        font-size: 16px;
-        font-weight: 600;
-        margin: 24px auto;
+        margin-bottom: 8px;
       }
 
-      dees-button {
-        margin-top: 16px;
-        margin-bottom: 16px;
+      .greeting strong {
+        color: var(--foreground);
+        font-weight: 600;
       }
     `,
   ];
 
   public render(): TemplateResult {
     return html`
-      <style></style>
       <idp-centercontainer>
-        <div class="maincontainer">
         ${directives.resolveExec(async () => {
           const idpState = await IdpState.getSingletonInstance();
           await idpState.idpClient.determineLoginStatus();
           const data = await idpState.idpClient.whoIs().catch();
           if (data?.user) {
             return html`
-              <div class="greeting">Hello ${data.user.data.name}!</div>
-              <dees-button
-                @click=${async () => {
-                  const idpState = await IdpState.getSingletonInstance();
-                  idpState.domtools.router.pushUrl('/account');
-                }}
-                >Manage your account</dees-button
-              >
-              <dees-button
-                @click=${async () => {
-                  const idpState = await IdpState.getSingletonInstance();
-                  idpState.domtools.router.pushUrl('/logout');
-                }}
-                >Logout</dees-button
-              >
+              <div class="form-header">
+                <h2>Welcome back</h2>
+                <p class="greeting">Signed in as <strong>${data.user.data.name}</strong></p>
+              </div>
+              <div class="button-group">
+                <dees-button
+                  @click=${async () => {
+                    const idpState = await IdpState.getSingletonInstance();
+                    idpState.domtools.router.pushUrl('/account');
+                  }}
+                >Manage your account</dees-button>
+                <dees-button
+                  type="secondary"
+                  @click=${async () => {
+                    const idpState = await IdpState.getSingletonInstance();
+                    idpState.domtools.router.pushUrl('/logout');
+                  }}
+                >Sign out</dees-button>
+              </div>
             `;
           }
           return html`
-            Do you want to sign in or register?
-            <dees-button
-              @click=${async () => {
-                const idpState = await IdpState.getSingletonInstance();
-                idpState.domtools.router.pushUrl('/login');
-              }}
-              >Sign In</dees-button
-            >
-            <dees-button
-              @click=${async () => {
-                const idpState = await IdpState.getSingletonInstance();
-                idpState.domtools.router.pushUrl('/register');
-              }}
-              >Register</dees-button
-            >
+            <div class="form-header">
+              <h2>Welcome</h2>
+              <p>Sign in to your account or create a new one</p>
+            </div>
+            <div class="button-group">
+              <dees-button
+                @click=${async () => {
+                  const idpState = await IdpState.getSingletonInstance();
+                  idpState.domtools.router.pushUrl('/login');
+                }}
+              >Sign In</dees-button>
+              <dees-button
+                type="secondary"
+                @click=${async () => {
+                  const idpState = await IdpState.getSingletonInstance();
+                  idpState.domtools.router.pushUrl('/register');
+                }}
+              >Create Account</dees-button>
+            </div>
           `;
         })}
-        <dees-button @click=${() => {}}>Learn more about idp.global</dees-button>
-        <dees-button @click=${() => {}}>Open Developer Dashboard</dees-button>
-        <dees-button
-          @click=${() => {
-            window.open('https://code.foss.global/idp.global/idp.global', '_blank');
-          }}
-          >Get the Source Code</dees-button
-        >
+        <div class="secondary-actions">
+          <dees-button
+            type="discreet"
+            @click=${() => {
+              window.open('https://code.foss.global/idp.global/idp.global', '_blank');
+            }}
+          >View Source Code</dees-button>
         </div>
       </idp-centercontainer>
     `;