refactor(e-commerce): traffic

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

@@ -47,6 +47,9 @@ $nb-themes: nb-register-theme((
 ), default, default);
 
 $nb-themes: nb-register-theme((
+
+  card-height-tiny: 13.5rem,
+  select-min-width: 6rem,
   // app wise variables for each theme
   //sidebar-header-gap: 2rem,
   //sidebar-header-height: initial,
@@ -83,6 +86,9 @@ $nb-themes: nb-register-theme((
 ), cosmic, cosmic);
 
 $nb-themes: nb-register-theme((
+
+  card-height-tiny: 13.5rem,
+  select-min-width: 6rem,
   // app wise variables for each theme
   //sidebar-header-gap: 2rem,
   //sidebar-header-height: initial,
@@ -117,3 +123,8 @@ $nb-themes: nb-register-theme((
   //
   //progress-bar-background: linear-gradient(90deg, #ff9f6f 0%, #ff8b97 100%),
 ), corporate, corporate);
+
+$nb-themes: nb-register-theme((
+  card-height-tiny: 13.5rem,
+  select-min-width: 6rem,
+), dark, dark);

src/app/pages/e-commerce/e-commerce.module.ts

@@ -7,6 +7,7 @@ import {
   NbUserModule,
   NbIconModule,
   NbSelectModule,
+  NbListModule,
 } from '@nebular/theme';
 import { NgxEchartsModule } from 'ngx-echarts';
 import { NgxChartsModule } from '@swimlane/ngx-charts';
@@ -64,6 +65,7 @@ import { EarningLiveUpdateChartComponent } from './earning-card/front-side/earni
     NbIconModule,
     NbTabsetModule,
     NbSelectModule,
+    NbListModule,
     ChartModule,
     NbProgressBarModule,
     NgxEchartsModule,

src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-back-card.component.scss

@@ -15,15 +15,17 @@
   ngx-traffic-bar-chart {
     flex: 1;
     position: relative;
-  }
 
-  ::ng-deep canvas {
+    ::ng-deep {
-    border-bottom-left-radius: nb-theme(card-border-radius);
+      canvas {
-    border-bottom-right-radius: nb-theme(card-border-radius);
+        border-bottom-left-radius: nb-theme(card-border-radius);
-  }
+        border-bottom-right-radius: nb-theme(card-border-radius);
+      }
 
-  .echart {
+      .echart {
-    height: 100%;
+        height: 100%;
-    width: 100%;
+        width: 100%;
+      }
+    }
   }
 }

src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-bar-chart.component.ts

@@ -7,7 +7,6 @@ declare const echarts: any;
 
 @Component({
   selector: 'ngx-traffic-bar-chart',
-  styleUrls: ['traffic-back-card.component.scss'],
   template: `
     <div echarts
          [options]="option"

src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-bar/traffic-bar.component.scss

@@ -1,8 +1,4 @@
 @import '../../../../../@theme/styles/themes';
-//@import '~@nebular/bootstrap/styles/hero-buttons';
-@import '~@nebular/theme/styles/global/typography/typography';
-
-$traffic-bar-background-color: #d0d8e3;
 
 @include nb-install-component() {
   height: 100%;
@@ -26,8 +22,7 @@ $traffic-bar-background-color: #d0d8e3;
 
   .period-from {
     position: absolute;
-    right: 100%;
+    @include nb-ltr(right, 100%);
-    @include nb-rtl(right, inherit);
     @include nb-rtl(left, 100%);
     bottom: 0;
     white-space: nowrap;
@@ -40,32 +35,13 @@ $traffic-bar-background-color: #d0d8e3;
 
     .progress-line {
       width: 100%;
-      background-color: $traffic-bar-background-color;
 
       &.success {
-        background-color: text-success();
+        background-color: nb-theme(color-success-default);
-
-        @include nb-for-theme(corporate) {
-          background-color: text-primary();
-        }
       }
 
       &.failure {
-        background-color: text-danger();
+        background-color: nb-theme(color-danger-default);
-      }
-    }
-
-    @include nb-for-theme(cosmic) {
-      .progress-line {
-        background: linear-gradient(180deg, #a054fe 0%, #7a58ff 100%);
-
-        &.success {
-          background: linear-gradient(0deg, #00caba 0%, #00d77f 100%);
-        }
-
-        &.failure {
-          background: linear-gradient(180deg, #ff38ab 0%, #ff386c 100%);
-        }
       }
     }
   }

src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-front-card.component.html

@@ -1,16 +1,11 @@
-<nb-card-body>
+<nb-list>
-  <ul class="traffic-list">
+  <nb-list-item class="item" *ngFor="let item of frontCardData; trackBy: trackByDate">
-    <li *ngFor="let item of frontCardData; trackBy: trackByDate">
+    <span class="caption">{{ item.date }}</span>
-      <div class="date">{{ item.date }}</div>
+    <span>{{ item.value }}</span>
-      <div class="value">{{ item.value }}</div>
+    <span class="delta" [class.up]="item.delta.up" [class.down]="!item.delta.up">
-      <div class="delta"
+      {{ item.delta.value }}%
-           [class.up]="item.delta.up"
+    </span>
-           [class.down]="!item.delta.up">
+    <ngx-traffic-bar [barData]="item.comparison" [successDelta]="item.delta.up">
-        {{ item.delta.value }}%
+    </ngx-traffic-bar>
-      </div>
+  </nb-list-item>
-      <ngx-traffic-bar [barData]="item.comparison"
+</nb-list>
-                       [successDelta]="item.delta.up">
-      </ngx-traffic-bar>
-    </li>
-  </ul>
-</nb-card-body>

src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-front-card.component.scss

@@ -1,53 +1,21 @@
-@import '../../../../@theme/styles/themes';
-@import '~@nebular/theme/components/card/card.component.theme';
-@import '~@nebular/theme/styles/global/typography/typography';
 @import '~bootstrap/scss/mixins/breakpoints';
 @import '~@nebular/theme/styles/global/breakpoints';
+@import '../../../../@theme/styles/themes';
 
 @include nb-install-component() {
   overflow: auto;
 
   nb-card-body {
     padding: 0;
-    position: relative;
     display: flex;
     flex-direction: column;
   }
 
-  .traffic-list {
+  .item {
-    padding: 0;
-    margin: 0;
-  }
-
-  li {
-    list-style: none;
     display: flex;
     justify-content: space-between;
     align-items: center;
     height: 4.5rem;
-    font-size: 1.25rem;
-    position: relative;
-    color: nb-theme(color-fg);
-    padding: 1rem nb-theme(card-padding);
-    border-bottom:
-      nb-theme(list-item-border-width)
-      nb-theme(card-header-border-type)
-      nb-theme(separator);
-
-    &:hover {
-      background-color: nb-theme(layout-bg);
-
-      &::before {
-        position: absolute;
-        content: '';
-        height: 100%;
-        width: 6px;
-        left: 0;
-        top: 0;
-        background-color: nb-theme(color-success);
-        border-radius: nb-theme(radius);
-      }
-    }
 
     > * {
       flex: 2;
@@ -58,94 +26,34 @@
     }
   }
 
-  .date {
-    @include nb-for-theme(corporate) {
-      color: nb-theme(color-fg-heading);
-    }
-  }
-
-  .value {
-    color: nb-theme(color-fg-heading);
-  }
-
   .delta {
     display: flex;
-    padding-left: 0.5rem;
-    font-size: 1rem;
     align-items: center;
 
     &::before {
       content: '';
       right: 100%;
-      margin-right: 0.7rem;
+      @include nb-ltr(margin-right, 0.7rem);
       @include nb-rtl(margin-left, 0.7rem);
-      @include nb-rtl(margin-right, 0);
       border-left: 5px solid transparent;
       border-right: 5px solid transparent;
     }
 
     &.down {
-      color: text-danger();
+      color: nb-theme(color-danger-default);
 
       &::before {
         bottom: 5px;
-        border-top: 6px solid text-danger();
+        border-top: 6px solid nb-theme(color-danger-default);
       }
     }
 
     &.up {
-      color: text-success();
+      color: nb-theme(color-success-default);
 
       &::before {
         top: 5px;
-        border-bottom: 6px solid text-success();
+        border-bottom: 6px solid nb-theme(color-success-default);
-      }
-    }
-  }
-
-  @include nb-for-theme(cosmic) {
-    .traffic-list li {
-      &:hover {
-        &::before {
-          $color-top: nb-theme(btn-success-bg);
-          $color-bottom: btn-hero-success-left-color();
-
-          background-image: linear-gradient(to top, $color-top, $color-bottom);
-          box-shadow: 0 0 16px -2px btn-hero-success-middle-color();
-        }
-      }
-    }
-  }
-
-  @include nb-for-theme(corporate) {
-    .traffic-list li {
-      border-color: nb-theme(tabs-separator);
-
-      &:first-child {
-        border-top:
-          nb-theme(list-item-border-width)
-          nb-theme(card-header-border-type)
-          nb-theme(separator);
-      }
-
-      &:hover {
-        &::before {
-          background-color: nb-theme(color-primary);
-        }
-      }
-    }
-
-    .date {
-      color: nb-theme(color-fg-heading);
-    }
-
-    .delta {
-      &.up {
-        color: text-primary();
-
-        &::before {
-          border-bottom-color: text-primary();
-        }
       }
     }
   }

src/app/pages/e-commerce/traffic-reveal-card/traffic-cards-header/traffic-cards-header.component.html

@@ -1,16 +1,6 @@
 <nb-card-header>
   <span>Traffic</span>
-  <div class="dropdown ghost-dropdown" ngbDropdown>
+  <nb-select [selected]="type" (selectedChange)="changePeriod($event)">
-    <button type="button" class="btn btn-sm" ngbDropdownToggle
+    <nb-option *ngFor="let period of types" [value]="period">{{ period }}</nb-option>
-            [ngClass]="{
+  </nb-select>
-              'btn-success': currentTheme === 'default',
-              'btn-primary': currentTheme !== 'default'}">
-      {{ type }}
-    </button>
-    <ul ngbDropdownMenu class="dropdown-menu">
-      <li class="dropdown-item" *ngFor="let period of types" (click)="changePeriod(period)">
-        {{ period }}
-      </li>
-    </ul>
-  </div>
 </nb-card-header>

src/app/pages/e-commerce/traffic-reveal-card/traffic-cards-header/traffic-cards-header.component.scss

@@ -5,12 +5,11 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 0.675rem 4rem 0.5rem 1.25rem;
+    padding: nb-theme(card-padding);
-    @include nb-rtl(padding-right, 1.25rem);
+    padding-top: 0.45rem;
+    padding-bottom: 0.45rem;
+
+    @include nb-ltr(padding-right, 4rem);
     @include nb-rtl(padding-left, 4rem);
   }
-
-  .dropdown {
-    min-width: 120px;
-  }
 }

src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.html

@@ -3,14 +3,14 @@
     <nb-card size="small">
       <ngx-traffic-cards-header [type]="period" (periodChange)="setPeriodAngGetData($event)"></ngx-traffic-cards-header>
       <ngx-traffic-front-card [frontCardData]="trafficListData"></ngx-traffic-front-card>
-      <i class="nb-arrow-up" (click)="toggleView()"></i>
+      <nb-icon class="toggle-icon" icon="chevron-up-outline" pack="eva" (click)="toggleView()"></nb-icon>
     </nb-card>
   </nb-card-front>
   <nb-card-back>
     <nb-card size="small">
       <ngx-traffic-cards-header [type]="period" (periodChange)="setPeriodAngGetData($event)"></ngx-traffic-cards-header>
       <ngx-traffic-back-card [trafficBarData]="trafficBarData"></ngx-traffic-back-card>
-      <i class="nb-arrow-down" (click)="toggleView()"></i>
+      <nb-icon class="toggle-icon" icon="chevron-down-outline" pack="eva" (click)="toggleView()"></nb-icon>
     </nb-card>
   </nb-card-back>
 </nb-reveal-card>

src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.scss

@@ -1,19 +1,12 @@
 @import '../../../@theme/styles/themes';
 
 @include nb-install-component() {
-  .nb-arrow-up, .nb-arrow-down {
+  .toggle-icon {
     position: absolute;
-    top: 0;
+    top: 1rem;
-    right: 0;
+    right: 1.25rem;
     @include nb-rtl(right, auto);
-    @include nb-rtl(left, 0);
+    @include nb-rtl(left, 1.25rem);
-    padding: 1.5rem;
     cursor: pointer;
   }
-
-  nb-card-back {
-    ::ng-deep nb-card-header {
-      border: none;
-    }
-  }
 }