fix(core): Bug fixes and UI enhancements

ts_web/elements/idp-welcome.ts

@@ -35,27 +35,20 @@ export class IdpWelcome extends DeesElement {
         display: none;
       }
 
-      h1 {
-        font-family: 'Cal Sans';
+      .maincontainer {
+        padding: 0px 16px;
+      }
+
+      .greeting {
         text-align: center;
-        font-size: 24px;
-        margin: 0px auto;
-        padding: 24px 24px 0px 24px;
-        width: 500px;
-        letter-spacing: 0.0125em;
-      }
-
-      .textbox {
+        font-size: 16px;
+        font-weight: 600;
         margin: 24px auto;
-        width: 500px;
-        background: #111111;
-        border-radius: 16px;
-        border-top: 1px solid ${cssManager.bdTheme('#ffffff', '#222222')};
-        padding: 24px;
       }
 
-      .textbox dees-button {
+      dees-button {
         margin-top: 16px;
+        margin-bottom: 16px;
       }
     `,
   ];
@@ -63,16 +56,15 @@ export class IdpWelcome extends DeesElement {
   public render(): TemplateResult {
     return html`
       <style></style>
-      <h1>idp.global</h1>
-
-      <div class="textbox">
+      <idp-centercontainer>
+        <div class="maincontainer">
         ${resolveExec(async () => {
           const idpState = await IdpState.getSingletonInstance();
           await idpState.idpClient.determineLoginStatus();
           const data = await idpState.idpClient.whoIs().catch();
           if (data?.user) {
             return html`
-              Hello ${data.user.data.name}!
+              <div class="greeting">Hello ${data.user.data.name}!</div>
               <dees-button
                 @click=${async () => {
                   const idpState = await IdpState.getSingletonInstance();
@@ -87,7 +79,7 @@ export class IdpWelcome extends DeesElement {
                 }}
                 >Logout</dees-button
               >
-            `
+            `;
           }
           return html`
             Do you want to sign in or register?
@@ -107,23 +99,27 @@ export class IdpWelcome extends DeesElement {
             >
           `;
         })}
-      </div>
-
-      <div class="textbox">
-        Do you want to use idp.global for your app?
         <dees-button @click=${() => {}}>Open Developer Dashboard</dees-button>
-      </div>
-
-      <div class="textbox">
-        idp.global is a Open Source identity provider for the world wide web. You can get the code
-        if you want to improve it.
         <dees-button
           @click=${() => {
             window.open('https://code.foss.global/idp.global/idp.global', '_blank');
           }}
-          >Get the code</dees-button
+          >Get the Source Code</dees-button
         >
-      </div>
+        </div>
+      </idp-centercontainer>
     `;
   }
+
+  public async show() {
+    await this.updateComplete;
+    const centerContainer = this.shadowRoot.querySelector('idp-centercontainer');
+    await centerContainer.show();
+  }
+
+  public async hide() {
+    await this.updateComplete;
+    const centerContainer = this.shadowRoot.querySelector('idp-centercontainer');
+    await centerContainer.hide();
+  }
 }