fix(docs): header fonts and material theme link

docs/app/@theme/components/header/header.component.html

@@ -8,8 +8,10 @@
   </div>
 </div>
 <div class="section middle">
-  <nb-menu [items]="headerMenu"></nb-menu>
+  <div class="first-section">
-  <ng-content></ng-content>
+    <nb-menu [items]="headerMenu"></nb-menu>
+    <ng-content></ng-content>
+  </div>
   <a routerLink="/" fragment="backend-bundles" class="backend-bundles eva-parent-hover">
     <i [innerHTML]="'gift-outline' | eva: { width: 24, height: 24, fill: '#ff4d6b', animationType: 'shake' }"></i>
     <span>Backend Bundles</span>

docs/app/@theme/components/header/header.component.scss

@@ -24,8 +24,15 @@
 
   .section {
     display: flex;
+    justify-content: space-between;
+    align-items: center;
     padding: 0.875rem 0.5rem;
 
+    .first-section {
+      display: flex;
+      flex-direction: row;
+    }
+
     &.left {
       width: $left-section-width;
     }
@@ -65,7 +72,6 @@
   }
 
   ::ng-deep nb-menu {
-    flex: 1;
 
     .menu-items {
       display: flex;
@@ -200,6 +206,12 @@
   &.docs-page {
 
     .section {
+
+      .first-section {
+        display: flex;
+        flex-direction: row;
+      }
+
       &.left {
         align-items: center;
         padding-left: 0;
@@ -259,11 +271,9 @@
 
     @include media-breakpoint-up(lg) {
       .section.middle {
-        justify-content: space-around;
+        justify-content: space-between;
       }
       ::ng-deep nb-menu {
-        min-width: 28rem;
-
         .menu-items li {
           display: list-item;
         }

docs/app/@theme/styles/themes.scss

@@ -31,6 +31,8 @@ $nb-enabled-themes: (ngx-landing, ngx-landing-material, docs-page);
 $nb-themes: nb-register-theme((
   font-family-primary: unquote('-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'),
 
+  link-text-decoration: none,
+
   content-width: 1440px,
   settings-col-width: 16rem,
   settings-col-margin: 1.875rem,
@@ -62,6 +64,7 @@ $nb-themes: nb-register-theme((
   header-fg: color-fg,
   header-menu-fg-active: color-active-fg,
   header-section-border-color: #f5f5f5,
+  header-font-weight: 600,
 
   header-button-border: #dce4f2,
 
@@ -130,6 +133,8 @@ $nb-themes: nb-register-theme((
 $nb-themes: nb-register-theme((
   font-family-primary: unquote('Roboto, sans-serif'),
 
+  link-text-decoration: none,
+
   shadow: unquote('0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12)'),
   header-shadow: unquote(
     '0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12)'
@@ -156,6 +161,8 @@ $nb-themes: nb-register-theme((
   // custom
   font-family-primary: unquote('-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'),
 
+  link-text-decoration: none,
+
   content-width: 1440px,
   settings-col-width: 16rem,
   settings-col-margin: 1.875rem,

docs/app/pages/docs/landing-docs.component.html

@@ -2,7 +2,7 @@
   <nb-layout-header fixed>
     <div class="content-center">
       <ngx-landing-header class="docs-header" [sidebarTag]="sidebarTag" [isDocs]="true">
-        <ngx-material-theme-link></ngx-material-theme-link>
+        <ngx-material-theme-link withPopover></ngx-material-theme-link>
       </ngx-landing-header>
     </div>
   </nb-layout-header>

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

@@ -5,11 +5,9 @@
   nbPopoverPlacement="bottom"
   nbPopoverTrigger="noop"
 >
-  <i [innerHTML]="'color-palette-outline' | eva: { width: 24, height: 24, fill: '#ff4d6b', animationType: 'shake' }"
-  ></i>
   Material Theme
 </a>
 
 <ng-template #popoverContent>
   <p class="material-theme-popover" (mouseover)="hidePopover()">New theme is available!</p>
-</ng-template>
+</ng-template>

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

@@ -1,16 +1,32 @@
-:host {
-  display: flex;
-  align-items: center;
-  padding-right: 32px;
-}
 
-a {
+@import '../../../@theme/styles/themes';
-  display: flex;
+@import '~@nebular/theme/styles/global/breakpoints';
-  align-items: center;
-}
 
-i {
+@include nb-install-component() {
-  margin-right: 8px;
+  $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;
+    align-items: center;
+    padding-right: 32px;
+  }
+
+  a {
+    text-decoration: none;
+    font-weight: $header-font-weight;
+    font-size: 13px;
+    line-height: 1.5rem;
+    padding: 0.675rem 1.375rem;
+    color: $menu-item-fg;
+    display: block;
+
+    &:hover, &.active, &:focus {
+      color: $menu-item-fg-active;
+      outline: none !important;
+    }
+  }
 }
 
 .material-theme-popover {
@@ -19,4 +35,4 @@ i {
   color: #ff4d6b;
   font-weight: 600;
   font-size: 1.1rem;
-}
+}

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

@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core';
-import { NbPopoverModule } from '@nebular/theme';
+import {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';

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

@@ -26,7 +26,7 @@
 <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"
@@ -36,12 +36,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" matRipple [matRippleUnbounded]="false" [matRippleCentered]="true">
       <a nbButton ghost href="mailto:contact@akveo.com" (click)="trackEmailClick()">
         <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-action class="control-item search">

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

@@ -7,6 +7,10 @@
   justify-content: space-between;
   width: 100%;
 
+  .material-text-color {
+    color: nb-theme(color-basic-100)
+  }
+
   .logo-container {
     display: flex;
     align-items: center;