fix(core): Bug fixes and UI enhancements

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 () => {