fix(icons popover): fix eva icons color, popover arrow style (#1923)

src/app/pages/pages.component.scss

@@ -0,0 +1,19 @@
+@import '../@theme/styles/themes';
+
+@include nb-install-component() {
+  /*
+  * TODO: hot fix, in prod mode popover arrow has wong style.
+  * Delete this after weill be fixed https://github.com/akveo/nebular/issues/1006
+  */
+  $popover-border-width: calc(#{nb-theme(popover-arrow-size)} - 2px);
+
+  /deep/ nb-popover {
+    .arrow {
+      &::after {
+        border-left-width: $popover-border-width;
+        border-right-width: $popover-border-width;
+        border-bottom-width: $popover-border-width;
+      }
+    }
+  }
+}

src/app/pages/pages.component.ts

@@ -4,6 +4,7 @@ import { MENU_ITEMS } from './pages-menu';
 
 @Component({
   selector: 'ngx-pages',
+  styleUrls: ['pages.component.scss'],
   template: `
     <ngx-sample-layout>
       <nb-menu [items]="menu"></nb-menu>

src/app/pages/ui-features/icons/icons.component.html

@@ -6,13 +6,13 @@
       </nb-card-header>
       <nb-card-body>
         <div class="icon" *ngFor="let icon of evaIcons">
-          <i [nbPopover]="icon">
-            <i [innerHTML]="icon | eva: { fill: '#d1d1ff', animationType: 'pulse' }"></i>
+          <i class="eva-icon-container" [nbPopover]="icon">
+            <i [innerHTML]="icon | eva: { animationType: 'pulse' }"></i>
           </i>
         </div>
       </nb-card-body>
       <nb-card-footer>
-        <a href="https://akveo.github.io/eva-icons/" target="_blank">See all eva-icons</a>
+        <a href="https://akveo.github.io/eva-icons/" target="_blank">See all Eva Icons</a>
       </nb-card-footer>
     </nb-card>
   </div>

src/app/pages/ui-features/icons/icons.component.scss

@@ -1,25 +1,33 @@
-.icon {
-  display: inline-block;
-  width: 4rem;
-  padding: 1.25rem 0;
-  text-align: center;
-  font-size: 1.25rem;
+@import '../../../@theme/styles/themes';
 
-  i:hover {
-    opacity: 0.8;
-    cursor: pointer;
+@include nb-install-component() {
+  .icon {
+    display: inline-block;
+    width: 4rem;
+    padding: 1.25rem 0;
+    text-align: center;
+    font-size: 1.25rem;
+
+    i:hover {
+      opacity: 0.8;
+      cursor: pointer;
+    }
+  }
+
+  .eva-icon-container {
+    fill: nb-theme(card-fg-text);
+  }
+
+  .nb-icons .icon {
+    padding: 0.75rem 0;
+    font-size: 1.75rem;
+  }
+
+  nb-card-body {
+    padding: 0;
+  }
+
+  nb-card-footer {
+    text-align: right;
   }
 }
-
-.nb-icons .icon {
-  padding: 0.75rem 0;
-  font-size: 1.75rem;
-}
-
-nb-card-body {
-  padding: 0;
-}
-
-nb-card-footer {
-  text-align: right;
-}