feat: add product hunt banner (#2003)

src/app/@theme/components/banner/_banner.component.theme.scss

@@ -1,26 +0,0 @@
-@import '../../styles/themes';
-
-@mixin ngx-release-banner-component {
-  ngx-release-banner {
-    background-color: nb-theme(release-banner-bg);
-    color: nb-theme(release-banner-fg);
-
-    .heading-with-icon {
-      border-bottom-color: nb-theme(release-banner-separator);
-    }
-
-    .banner-heading,
-    .close-button {
-      color: nb-theme(release-banner-fg);
-    }
-
-    .cta {
-      color: nb-theme(release-banner-cta);
-    }
-
-    .cta-link {
-      background: nb-theme(release-banner-fg);
-      color: nb-theme(release-banner-bg);
-    }
-  }
-}

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

@@ -1,32 +1,43 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
 @import '../../styles/themes';
 
 :host {
   position: fixed;
   @include nb-ltr(right, 1.5rem);
   @include nb-rtl(left, 1.5rem);
-  top: 40vh;
+  top: 20vh;
   border-radius: 5px;
-  box-shadow: 0 5px 12px 0 rgba(0, 32, 128, 0.14);
+  background-color: #dc5425;
+  box-shadow: 0 2px 4px 0 rgba(189, 93, 60, 0.54);
   z-index: 99999999;
 
   .heading-with-icon {
-    border-bottom-width: 1px;
-    border-bottom-style: solid;
     display: flex;
     align-items: center;
   }
 
   .icon {
     height: auto;
-    width: 4rem;
-    margin: 0 1.625rem;
+    width: 77px;
+    margin: 0 26px;
   }
 
   .banner-heading {
-    font-size: 1.5rem;
-    line-height: 1.5;
-    font-weight: 600;
-    margin: 1.625rem 0;
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 700;
+    margin: 0;
+    color: #ffffff;
+  }
+
+  .banner-content {
+    padding-top: 36px;
+    padding-bottom: 36px;
   }
 
   .close-button {
@@ -34,29 +45,34 @@
     border: none;
     cursor: pointer;
     margin-bottom: auto;
-    padding: 0.625rem;
+    padding: 10px;
+    color: #ffffff;
   }
 
   .nb-close {
-    font-size: 1.5rem;
+    font-size: 24px;
     font-weight: 600;
   }
 
   .cta {
-    margin: 0;
-    text-align: center;
+    margin: 8px 0 0;
+    font-size: 14px;
+    color: #ffffff;
   }
 
   .cta-link {
-    border-radius: 1.8px;
+    font-size: 10px;
+    border-radius: 2px;
     display: inline-block;
-    padding: 0.5rem 1rem;
-    margin: 0.725rem 0.8rem;
+    padding: 4px 16px;
+    margin: 0 10px;
     text-transform: uppercase;
-    font-weight: 600;
+    font-weight: 700;
+    background: #ffffff;
+    color: #000000;
   }
 
-  @media screen and (max-width: 63rem) {
+  @media screen and (max-width: 767px) {
     display: none;
   }
 }

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

@@ -1,36 +1,40 @@
-import { Component, HostBinding, Inject, OnDestroy, OnInit } from '@angular/core';
-import { NB_WINDOW, NbThemeService } from '@nebular/theme';
-import { takeWhile } from 'rxjs/operators';
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
 
-const HIDE_BANNER_KEY = 'HIDE_RELEASE_2_BANNER';
+import { Component, HostBinding, Inject, OnInit } from '@angular/core';
+import { NB_WINDOW } from '@nebular/theme';
+
+const HIDE_BANNER_KEY = 'HIDE_PRODUCT_HUNT_BANNER';
 
 @Component({
   selector: 'ngx-release-banner',
   template: `
     <div class="heading-with-icon">
-      <img class="icon" [src]="getBellPath()" alt="bell">
-      <h1 class="banner-heading">Nebular 3.0 stable <br> with 30+ components is out!</h1>
+      <img class="icon" src="/assets/images/product-hunt-cat.png" alt="Product Hunt">
+      <div class="banner-content">
+        <h2 class="banner-heading">ngx-admin is on Product Hunt today!</h2>
+        <p class="cta">Please
+          <a class="cta-link"
+             href="https://www.producthunt.com/posts/ngx-admin"
+             target="_blank">
+            share
+          </a>
+          your feedback :)
+        </p>
+      </div>
       <button class="close-button" aria-label="close" (click)="closeBanner()">
         <span class="nb-close"></span>
       </button>
     </div>
-    <p class="cta">
-      Don't forget to
-      <a class="cta-link"
-         href="https://akveo.github.io/nebular?utm_source=ngx-admin-demo&utm_medium=banner"
-         target="_blank">
-        check out
-      </a>
-      and star our repo :)
-    </p>
   `,
   styleUrls: ['./banner.component.scss'],
 })
-export class BannerComponent implements OnInit, OnDestroy {
+export class BannerComponent implements OnInit {
 
-  private alive = true;
   storage: Storage;
-  isDarkTheme: boolean;
 
   @HostBinding('attr.hidden')
   isHidden: true | null = null;
@@ -40,7 +44,6 @@ export class BannerComponent implements OnInit, OnDestroy {
 
   constructor(
     @Inject(NB_WINDOW) private window,
-    private themeService: NbThemeService,
   ) {}
 
   ngOnInit() {
@@ -49,11 +52,6 @@ export class BannerComponent implements OnInit, OnDestroy {
     this.isHidden = this.storage && this.storage.getItem(HIDE_BANNER_KEY)
       ? true
       : null;
-
-    this.isDarkTheme = this.themeService.currentTheme === 'cosmic';
-    this.themeService.onThemeChange()
-      .pipe(takeWhile(() => this.alive))
-      .subscribe(({ name }) => this.isDarkTheme = name === 'cosmic');
   }
 
   closeBanner() {
@@ -62,12 +60,4 @@ export class BannerComponent implements OnInit, OnDestroy {
     }
     this.isHidden = true;
   }
-
-  getBellPath() {
-    return `assets/images/bell${this.isDarkTheme ? '' : '-white'}.svg`;
-  }
-
-  ngOnDestroy() {
-    this.alive = false;
-  }
 }

src/app/@theme/styles/styles.scss

@@ -15,8 +15,6 @@
 
 @import './bootstrap-rtl';
 
-@import '../components/banner/banner.component.theme';
-
 // install the framework and custom global styles
 @include nb-install() {
 
@@ -28,8 +26,6 @@
   // loading progress bar
   @include ngx-pace-theme();
 
-  @include ngx-release-banner-component();
-
   // fixed in rc.9 and can be removed after upgrade
   .custom-control .custom-control-indicator {
     border-radius: 50%; // TODO: quickfix for https://github.com/akveo/nebular/issues/275