fix(core): Bug fixes and UI enhancements

ts_web/elements/account/content.ts

@@ -110,6 +110,16 @@ export class IdpAccountContent extends DeesElement {
     viewcontainer.append(new views.BaseView());
     console.log(`loaded base view`);
 
+    this.subrouter.on('', async () => {
+      viewcontainer.classList.add('changing');
+      await this.domtools.convenience.smartdelay.delayFor(300);
+      console.log('We are viewing the account overview');
+      await cleanupViews();
+      viewcontainer.append(new views.BaseView());
+      viewcontainer.classList.remove('changing');
+      await this.domtools.convenience.smartdelay.delayFor(300);
+    });
+
     this.subrouter.on('/org/:orgName/billing', async () => {
       viewcontainer.classList.add('changing');
       await this.domtools.convenience.smartdelay.delayFor(300);
@@ -121,5 +131,11 @@ export class IdpAccountContent extends DeesElement {
     });
 
     this.subrouter._handleRouteState();
+
+    this.registerGarbageFunction(async () => {
+      this.subrouter.destroy();
+    })
   }
+
+  
 }

ts_web/elements/account/navigation.ts

@@ -28,7 +28,7 @@ export class LeleAccountNavigation extends DeesElement {
   public options: { text: string; id: string }[] = [
     {
       id: '1',
-      text: 'Properties',
+      text: 'Apps',
     },
     {
       id: '2',
@@ -56,13 +56,30 @@ export class LeleAccountNavigation extends DeesElement {
         color: ${cssManager.bdTheme('#333', '#fff')};
         padding: 10px;
         padding-left: 0px;
-        background: ${cssManager.bdTheme('#eeeeeb', '#111')};
-        border-right: ${cssManager.bdTheme('1px solid #ccc', '')};
+        background: ${cssManager.bdTheme('#eeeeeb', '#000')};
+        border-right: ${cssManager.bdTheme('1px solid #ccc', '1px solid #111')};
       }
       :host([hidden]) {
         display: none;
       }
 
+      .logo {
+        font-family: 'Cal Sans';
+        letter-spacing: 0.0125em;
+        font-size: 16px;
+        text-align: center;
+        padding: 16px 0px 16px 0px;
+        margin: -8px -8px -16px 0px;
+        border-bottom: 1px solid #111111;
+        cursor: default;
+        position: relative;
+        z-index: 10;
+      }
+
+      .logo:hover {
+        background: ${unsafeCSS(plugins.deesCatalog.colors.dark.blue)};
+      }
+
       .commitinfo {
         text-align: center;
         position: absolute;
@@ -71,7 +88,6 @@ export class LeleAccountNavigation extends DeesElement {
         width: 100%;
         font-size: 12px;
         padding: 8px;
-        background: ${cssManager.bdTheme('#eeeeeb', '#181818')};
         border-top: ${cssManager.bdTheme('1px solid #ccc', '1px solid #333')};
         color: ${cssManager.bdTheme('#666', '#ccc')};
       }
@@ -82,7 +98,9 @@ export class LeleAccountNavigation extends DeesElement {
         text-transform: uppercase;
         font-size: 12px;
         font-weight: 300;
-        border-bottom: 1px dotted #666;
+        border-bottom: 1px solid;
+        border-image: linear-gradient(to right, orange, #44444400) 1;
+        color: ${cssManager.bdTheme('#666', '#ccc')};
         margin-bottom: 5px;
         padding-top: 32px;
         padding-left: 10px;
@@ -99,8 +117,8 @@ export class LeleAccountNavigation extends DeesElement {
       }
 
       .navigationOption:hover {
-        cursor: pointer;
-        background: ${cssManager.bdTheme('#bbb', '#333')};
+        cursor: default;
+        background: ${cssManager.bdTheme('#bbb', plugins.deesCatalog.colors.dark.blue)};
       }
       dees-input-dropdown {
         margin-top: 16px;
@@ -110,11 +128,26 @@ export class LeleAccountNavigation extends DeesElement {
     `,
   ];
 
+  public async getAccountRouter() {
+    const host = (this.getRootNode() as any).host;
+    return (host as any).subrouter;
+  }
+
   public render(): TemplateResult {
     return html`
       <style></style>
       <div class="commitinfo">idp.global v${commitinfo.version}</div>
+      <div class="logo">idp.global</div>
       <div class="navigationGroupLabel">Account Settings</div>
+      <div
+        class="navigationOption"
+        @click=${async () => {
+          const subrouter = await this.getAccountRouter();
+          subrouter.pushUrl('');
+        }}
+      >
+        overview
+      </div>
       <div
         class="navigationOption"
         @click=${async () => {

ts_web/elements/account/sharedstyles.ts

@@ -3,7 +3,8 @@ import { css } from '@design.estate/dees-element';
 export default css`
   h1 {
     margin-top: 50px;
-    border-bottom: 1px solid #666;
+    border-bottom: 1px solid;
+    border-image: radial-gradient(rgba(136, 136, 136, 0.44), rgba(136, 136, 136, 0)) 1 / 1 / 0 stretch;
     padding-bottom: 10px;
     font-weight: 500;
   }

ts_web/elements/account/views/baseview.ts

@@ -67,24 +67,28 @@ export class BaseView extends DeesElement {
       .orgGrid {
         display: grid;
         grid-gap: 16px;
-        grid-template-columns: ${cssManager.cssGridColumns(4, 16)}
+        grid-template-columns: ${cssManager.cssGridColumns(2, 16)};
       }
 
       .org {
         padding: 16px;
-        border: 1px dotted #666;
-        border-radius: 3px;
+        border-top: 1px solid #444;
+        background: ${cssManager.bdTheme('#ccc', '#222')};
+        border-radius: 16px;
       }
 
       .org:hover {
-        cursor: pointer;
+        cursor: default;
         background: ${cssManager.bdTheme('#CCC', '#333')};
       }
     `,
   ];
 
   public render() {
-    return html` <div class="viewHost"></div> `;
+    return html`
+    <div class="viewHost">
+
+    </div> `;
   }
 
   public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
@@ -147,33 +151,43 @@ export class BaseView extends DeesElement {
       subscriptions.push(formSubscription);
       button.addEventListener('clicked', async () => {
         orgInput.disabled = true;
-        button.text = 'creating org...'
+        button.text = 'creating org...';
         button.status = 'pending';
-        hint.innerHTML = 'Waiting for creation of the organization...'
+        hint.innerHTML = 'Waiting for creation of the organization...';
         await state.accountState.dispatchAction(state.manifestNewOrgName, null);
-        hint.innerHTML = `The Organization with name ${state.accountState.getState().organizations[0].data.name} has been created!`
+        hint.innerHTML = `The Organization with name ${
+          state.accountState.getState().organizations[0].data.name
+        } has been created!`;
         button.text = 'created!';
         button.status = 'success';
         const parentElement = (this.getRootNode() as any).host;
-        parentElement.subrouter.pushUrl(`/org/${state.accountState.getState().organizations[0].data.slug}/billing`);
+        parentElement.subrouter.pushUrl(
+          `/org/${state.accountState.getState().organizations[0].data.slug}/billing`
+        );
       });
     } else {
-      render(html`
-        <h1>Select An Organization</h1>
-        <div class="orgGrid">
-          ${state.accountState.getState().organizations.map(orgArg => {
-            return html`
-              <div class="org" @click=${() => {
-                state.accountState.dispatchAction(state.setSelectedOrg, orgArg)
-                const parentElement = (this.getRootNode() as any).host;
-                parentElement.subrouter.pushUrl(`/org/${orgArg.data.slug}/billing`)
-              }}>
-                ${orgArg.data.name}
-              </div>
-            `
-          })}
-        </div>
-      `, viewHost)
+      render(
+        html`
+          <h1>Select An Organization</h1>
+          <div class="orgGrid">
+            ${state.accountState.getState().organizations.map((orgArg) => {
+              return html`
+                <div
+                  class="org"
+                  @click=${() => {
+                    state.accountState.dispatchAction(state.setSelectedOrg, orgArg);
+                    const parentElement = (this.getRootNode() as any).host;
+                    parentElement.subrouter.pushUrl(`/org/${orgArg.data.slug}/billing`);
+                  }}
+                >
+                  <dees-icon .iconFA=${"wallet"} style="display: inline-block; transform: translateY(3px); padding-right: 4px;"></dees-icon> ${orgArg.data.name}
+                </div>
+              `;
+            })}
+          </div>
+        `,
+        viewHost
+      );
     }
   }
 }