refactor(e-commerce): visitors analytics

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

@@ -31,10 +31,9 @@ $nb-themes: nb-register-theme((
   //
   //list-item-border-width: 1px,
   //
-  //slide-out-container-width: 30%,
+  slide-out-background: linear-gradient(270deg, #edf1f7 0%, #e4e9f2 100%),
-  //slide-out-background: linear-gradient(270deg, #f7fafb 0%, #ecf2f5 100%),
+  slide-out-shadow-color: 0 4px 14px 0 #8f9bb3,
-  //slide-out-shadow-color: 0 4px 14px 0 #a2d2c8,
+  slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3,
-  //slide-out-shadow-color-rtl: 0 4px 14px 0 #a2d2c8,
   //
   //chart-panel-summary-box-shadow: none,
   //chart-panel-summary-background-color: #ecf2f5,
@@ -70,10 +69,9 @@ $nb-themes: nb-register-theme((
   //
   //list-item-border-width: 1px,
   //
-  //slide-out-container-width: 30%,
+  slide-out-background: radial-gradient(circle, #5a37b8 0%, #7b51db 100%),
-  //slide-out-background: radial-gradient(circle, #302c6e 0%, #423f8c 100%),
+  slide-out-shadow-color: 2px 0 3px #29157a,
-  //slide-out-shadow-color: 2px 0 3px rgba(19, 19, 94, 0.9),
+  slide-out-shadow-color-rtl: -2px 0 3px #29157a,
-  //slide-out-shadow-color-rtl: -2px 0 3px rgba(19, 19, 94, 0.9),
   //
   //chart-panel-summary-box-shadow: none,
   //chart-panel-summary-background-color: rgba(0, 0, 0, 0.1),
@@ -109,10 +107,9 @@ $nb-themes: nb-register-theme((
   //
   //list-item-border-width: 1px,
   //
-  //slide-out-container-width: 30%,
+  slide-out-background: linear-gradient(270deg, #edf1f7 0%, #e4e9f2 100%),
-  //slide-out-background: 	linear-gradient(270deg, #f7fafb 0%, #ecf2f5 100%),
+  slide-out-shadow-color: 0 4px 14px 0 #8f9bb3,
-  //slide-out-shadow-color: 0 4px 14px 0 #a2d2c8,
+  slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3,
-  //slide-out-shadow-color-rtl: 0 4px 14px 0 #a2d2c8,
   //
   //chart-panel-summary-box-shadow: none,
   //chart-panel-summary-background-color: #f7fafb,
@@ -127,4 +124,8 @@ $nb-themes: nb-register-theme((
 $nb-themes: nb-register-theme((
   card-height-tiny: 13.5rem,
   select-min-width: 6rem,
+
+  slide-out-background: linear-gradient(270deg, #edf1f7 0%, #e4e9f2 100%),
+  slide-out-shadow-color: 0 4px 14px 0 #8f9bb3,
+  slide-out-shadow-color-rtl: 0 4px 14px 0 #8f9bb3,
 ), dark, dark);

src/app/pages/e-commerce/slide-out/slide-out.component.html

@@ -1,7 +1,8 @@
-<i class="show-hide-toggle"
+<nb-icon [icon]="showVisitorsStatistics ? 'arrow-forward-outline' : 'arrow-back-outline'"
-   [class.nb-arrow-thin-left]="!showVisitorsStatistics"
+         pack="eva"
-   [class.nb-arrow-thin-right]="showVisitorsStatistics"
+         class="show-hide-toggle"
-   (click)="toggleStatistics()"></i>
+         (click)="toggleStatistics()">
+</nb-icon>
 <div class="slide-out-container"
      [class.expanded]="showVisitorsStatistics"
      [class.collapsed]="!showVisitorsStatistics">

src/app/pages/e-commerce/slide-out/slide-out.component.scss

@@ -3,24 +3,18 @@
 @import '~@nebular/theme/styles/global/breakpoints';
 
 @include nb-install-component() {
-  $slide-out-container-width: nb-theme(slide-out-container-width);
+  $slide-out-container-width: 40%;
 
-  // toggle button
   .show-hide-toggle {
-    position: absolute;
     display: block;
-    font-size: 2rem;
+    position: absolute;
-    font-weight: nb-theme(font-weight-bold);
     top: 1.5rem;
-    right: 1.5rem;
+    @include nb-ltr(right, 1.5rem);
+    @include nb-rtl(left, 1.5rem);
     cursor: pointer;
-    color: nb-theme(color-fg);
     background-color: transparent;
     z-index: 2;
-    @include nb-rtl(right, auto);
-    @include nb-rtl(left, 1.5rem);
   }
-  // toggle button
 
   .slide-out-container {
     position: absolute;
@@ -39,8 +33,7 @@
 
   .slide-out-container::before {
     content: '';
-    right: 0;
+    @include nb-ltr(right, 0);
-    @include nb-rtl(right, auto);
     @include nb-rtl(left, 0);
     width: 100%;
     position: absolute;
@@ -53,8 +46,7 @@
   }
 
   .slide-out-container.collapsed {
-    left: calc(100% - 6rem);
+    @include nb-ltr(left, calc(100% - 6rem));
-    @include nb-rtl(left, auto);
     @include nb-rtl(right, calc(100% - 6rem));
   }
 

src/app/pages/e-commerce/visitors-analytics/visitors-analytics-chart/visitors-analytics-chart.component.scss

@@ -2,7 +2,7 @@
 
 @include nb-install-component() {
   display: block;
-  height: 290px;
+  height: 17.5rem;
   width: 100%;
 
   .echart {

src/app/pages/e-commerce/visitors-analytics/visitors-analytics.component.html

@@ -1,6 +1,6 @@
 <nb-card size="medium">
   <nb-card-header>
-    <div class="title">Visitors Analytics</div>
+    <h3>Visitors Analytics</h3>
     <div class="sub-title">Consumption</div>
   </nb-card-header>
   <nb-card-body>

src/app/pages/e-commerce/visitors-analytics/visitors-analytics.component.scss

@@ -13,6 +13,7 @@
 
   nb-card-header {
     border-bottom: none;
+  }
 
   .title {
     font-size: 1.5rem;
@@ -20,8 +21,11 @@
   }
 
   .sub-title {
-      color: nb-theme(color-fg);
+    color: nb-theme(text-hint-color);
-    }
+    font-family: nb-theme(text-subtitle-font-family);
+    font-size: nb-theme(text-subtitle-font-size);
+    font-weight: nb-theme(text-subtitle-font-weight);
+    line-height: nb-theme(text-subtitle-line-height);
   }
 
   .container {
@@ -48,7 +52,6 @@
     ngx-legend-chart {
       ::ng-deep .legends {
         padding-left: 0;
-        font-size: nb-theme(font-size-sm);
       }
     }
   }

src/app/pages/e-commerce/visitors-analytics/visitors-statistics/visitors-statistics.component.html

@@ -1,18 +1,15 @@
 <div class="visitors-statistics">
-  <div class="statistics-header">
+  <h4 class="h1">1,100</h4>
-    <div class="visitors-value">1,100</div>
   <div class="visitors-title">New Visitors</div>
-  </div>
   <div class="statistics-chart">
     <div echarts
          [options]="option"
          class="echart"
-         (chartInit)="onChartInit($event)"
+         (chartInit)="onChartInit($event)">
-    >
     </div>
   </div>
   <div class="statistics-footer">
-    <div class="chart-values">
+    <div class="chart-values h5">
       <span class="chart-value">25%</span>
       <span class="chart-value">75%</span>
     </div>

src/app/pages/e-commerce/visitors-analytics/visitors-statistics/visitors-statistics.component.scss

@@ -2,31 +2,21 @@
 
 @include nb-install-component() {
 
-  .visitors-value {
-    font-size: 3rem;
-    font-weight: nb-theme(font-weight-light);
-    color: nb-theme(color-fg-heading);
-    line-height: 0.8;
-  }
-
-  .visitors-title {
-    margin-top: 1rem;
-    font-size: 1.25rem;
-    color: nb-theme(color-fg);
-  }
-
   .visitors-statistics {
     width: 100%;
   }
 
+  .visitors-title {
+    margin-top: 1rem;
+  }
+
   .statistics-chart {
-    margin-top: 3.5rem;
+    margin: 1.5rem 0;
-    margin-bottom: 1.5rem;
     width: 100%;
 
     .echart {
       display: block;
-      height: 190px;
+      height: 13.75rem;
       width: 100%;
     }
   }
@@ -36,25 +26,19 @@
   }
 
   .chart-value {
-    color: nb-theme(color-fg-heading);
-    font-size: 2rem;
-    font-weight: nb-theme(font-weight-bold);
-    margin-bottom: 1rem;
     flex: 1;
   }
 
-  // legend start
+  .visitors-statistics-legend ::ng-deep {
-  .visitors-statistics-legend {
+    .legends {
-    ::ng-deep .legends {
       padding: 0;
       margin-left: 0;
     }
 
-    ::ng-deep .legend {
+    .legend {
       flex: 1;
       margin-left: 0;
       justify-content: flex-start;
     }
   }
-  // legend end
 }