fix(docs): popover and themes page

docs/app/shared/components/material-theme-link/material-theme-link.component.html

@@ -1,12 +1,16 @@
+<div style="position: relative;">
+  <nb-badge text="New!" status="danger" position="top right"></nb-badge>
 <a
   routerLink="/material"
   class="eva-parent-hover"
   [nbPopover]="popoverContent"
   nbPopoverPlacement="bottom"
   nbPopoverTrigger="noop"
+  nbPopoverOffset="0"
 >
   Material Theme
 </a>
+</div>
 
 <ng-template #popoverContent>
   <p class="material-theme-popover" (mouseover)="hidePopover()">New theme is available!</p>

docs/app/shared/components/material-theme-link/material-theme-link.component.scss

@@ -5,7 +5,6 @@
 @include nb-install-component() {
   $menu-item-fg: nb-theme(color-fg-heading-light);
   $menu-item-fg-active: nb-theme(header-menu-fg-active);
-  $header-font-weight: nb-theme(header-font-weight);
 
   :host {
     display: flex;
@@ -15,7 +14,7 @@
 
   a {
     text-decoration: none;
-    font-weight: $header-font-weight;
+    font-weight: 600;
     font-size: 13px;
     line-height: 1.5rem;
     padding: 0.675rem 1.375rem;

docs/app/shared/landing-shared.module.ts

@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core';
-import {NbPopoverModule} from '@nebular/theme';
+import {NbBadgeModule, NbPopoverModule} from '@nebular/theme';
 import { MaterialThemeLinkComponent } from './components/material-theme-link/material-theme-link.component';
 import { CapitalizePipe } from './pipes/capitalize.pipe';
 import { EvaIconsPipe } from './pipes/eva-icons.pipe';
@@ -9,7 +9,7 @@ const component = [MaterialThemeLinkComponent];
 const pipes = [CapitalizePipe, EvaIconsPipe];
 
 @NgModule({
-  imports: [RouterModule, NbPopoverModule],
+  imports: [RouterModule, NbPopoverModule, NbBadgeModule],
   declarations: [...component, ...pipes],
   exports: [NbPopoverModule, ...component, ...pipes],
 })

src/app/@core/utils/theme.service.ts

@@ -20,6 +20,10 @@ export class CurrentThemeService implements OnDestroy {
     localStorage.setItem('theme', JSON.stringify(currentTheme));
   }
 
+  getCurrentTheme(): string {
+    return JSON.parse(localStorage.theme).themeName;
+  }
+
   calculateExpiration(iat: number): number {
     const currentDate = new Date().getTime();
     const timestamp = iat || Math.floor(Date.now() / 1000);

src/app/@theme/components/header/header.component.ts

@@ -16,7 +16,7 @@ import {CurrentThemeService} from '../../../@core/utils/theme.service';
 export class HeaderComponent implements OnInit, OnDestroy {
 
   private destroy$: Subject<void> = new Subject<void>();
-  public readonly materialTheme$: Observable<boolean>;
+  public materialTheme$: Observable<boolean>;
   userPictureOnly: boolean = false;
   user: any;
 
@@ -62,14 +62,15 @@ export class HeaderComponent implements OnInit, OnDestroy {
     private analytics: AnalyticsService,
     private currentThemeService: CurrentThemeService,
   ) {
-    this.materialTheme$ = this.themeService.onThemeChange()
-      .pipe(map(theme => {
-        const themeName: string = theme?.name || '';
-        return themeName.startsWith('material');
-      }));
   }
 
   ngOnInit() {
+    this.materialTheme$ = new Observable(subscriber => {
+      const themeName: string = this.currentThemeService.getCurrentTheme();
+
+      subscriber.next(themeName.startsWith('material'));
+    });
+
     this.currentTheme = this.themeService.currentTheme;
 
     this.userService.getUsers()

src/app/app.component.ts

@@ -18,7 +18,7 @@ import { SeoService } from './@core/utils/seo.service';
 })
 export class AppComponent implements OnInit {
 
-  themes = ['default', 'cosmic', 'corporate', 'dark'];
+  themes = ['default', 'cosmic', 'corporate', 'dark', 'material-dark', 'material-light'];
 
   constructor(private analytics: AnalyticsService,
               private seoService: SeoService,

src/app/themes-screen/starter.component.html

@@ -2,14 +2,14 @@
   <nb-layout-header fixed>
     <div class="header-container">
       <div class="logo-container">
-        <p class="logo">ngx-<span>admin</span></p>
+        <p [ngClass]="{ 'material-text-color': (materialTheme$ | async) }" class="logo">ngx-<span>admin</span></p>
       </div>
     </div>
 
     <div class="header-container">
       <nb-actions size="small">
         <nb-action class="control-item github-stars">
-          <span class="subtitle text">Support us: </span>
+          <span [ngClass]="{ 'material-text-color': (materialTheme$ | async) }" class="subtitle text">Support us: </span>
           <iframe src="https://ghbtns.com/github-btn.html?user=akveo&repo=ngx-admin&type=star&count=true"
                   frameborder="0"
                   scrolling="0"
@@ -19,12 +19,12 @@
         </nb-action>
         <nb-action class="control-item downloads-count">
           <nb-icon icon="download"></nb-icon>
-          <span class="subtitle number">470.000</span>
+          <span [ngClass]="{ 'material-text-color': (materialTheme$ | async) }" class="subtitle number">470.000</span>
         </nb-action>
         <nb-action class="control-item contact-us" (click)="trackEmailClick()">
           <a nbButton ghost href="mailto:contact@akveo.com">
             <nb-icon icon="email-outline" pack="eva"></nb-icon>
-            <span>contact@akveo.com</span>
+            <span [ngClass]="{ 'material-text-color': (materialTheme$ | async) }">contact@akveo.com</span>
           </a>
         </nb-action>
       </nb-actions>

src/app/themes-screen/starter.component.scss

@@ -3,6 +3,10 @@
 @import '../@theme/styles/themes';
 
 @include nb-install-component() {
+  .material-text-color {
+    color: nb-theme(color-basic-100);
+  }
+
   img {
     width: 100%;
     object-fit: contain;

src/app/themes-screen/starter.component.ts

@@ -1,8 +1,9 @@
 import {Component, OnDestroy} from '@angular/core';
-import {NbMediaBreakpoint, NbThemeService} from '@nebular/theme';
+import {NbMediaBreakpoint} from '@nebular/theme';
 import {Router} from '@angular/router';
 import {AnalyticsService} from '../@core/utils';
 import {CurrentThemeService} from '../@core/utils/theme.service';
+import {Observable} from 'rxjs';
 
 @Component({
   selector: 'ngx-starter',
@@ -13,22 +14,28 @@ export class NgxStarterComponent implements OnDestroy {
   breakpoint: NbMediaBreakpoint;
   breakpoints: any;
 
+  public readonly materialTheme$ = new Observable(subscriber => {
+    const themeName: string = this.currentThemeService.getCurrentTheme();
+
+    subscriber.next(themeName.startsWith('material'));
+  });
+
   themes = [
     {
       value: 'material-light',
       name: 'Material Light',
     },
     {
-      value: 'dark',
-      name: 'Dark',
+      value: 'material-dark',
+      name: 'Material Dark',
     },
     {
       value: 'default',
       name: 'Light',
     },
     {
-      value: 'material-dark',
-      name: 'Material Dark',
+      value: 'dark',
+      name: 'Dark',
     },
     {
       value: 'corporate',
@@ -41,14 +48,12 @@ export class NgxStarterComponent implements OnDestroy {
   ];
 
   constructor(private router: Router,
-              private themeService: NbThemeService,
               private currentThemeService: CurrentThemeService,
               private analytics: AnalyticsService,
               ) {}
 
   navigate(themeName: string) {
     this.currentThemeService.setCurrentTheme(themeName);
-    this.themeService.changeTheme(themeName);
     this.router.navigate(['/pages/dashboard'], {queryParams: {theme: themeName}});
   }