From 4b0401de09036adf70a608afe1867a9a7cb90b4e Mon Sep 17 00:00:00 2001
From: Sergey Andrievskiy <s.andrievskiy@akveo.com>
Date: Mon, 17 Jun 2019 21:36:18 +0300
Subject: [PATCH] refactor(e-commerce): visitors analytics

---
 src/app/@theme/styles/themes.scss             | 25 +++++++-------
 .../slide-out/slide-out.component.html        |  9 ++---
 .../slide-out/slide-out.component.scss        | 20 ++++-------
 .../visitors-analytics-chart.component.scss   |  2 +-
 .../visitors-analytics.component.html         |  2 +-
 .../visitors-analytics.component.scss         | 19 ++++++-----
 .../visitors-statistics.component.html        | 11 +++---
 .../visitors-statistics.component.scss        | 34 +++++--------------
 8 files changed, 50 insertions(+), 72 deletions(-)

diff --git a/src/app/@theme/styles/themes.scss b/src/app/@theme/styles/themes.scss
index 9dc76c3a..6ebd22ae 100644
--- a/src/app/@theme/styles/themes.scss
+++ b/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, #f7fafb 0%, #ecf2f5 100%),
-  //slide-out-shadow-color: 0 4px 14px 0 #a2d2c8,
-  //slide-out-shadow-color-rtl: 0 4px 14px 0 #a2d2c8,
+  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,
   //
   //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, #302c6e 0%, #423f8c 100%),
-  //slide-out-shadow-color: 2px 0 3px rgba(19, 19, 94, 0.9),
-  //slide-out-shadow-color-rtl: -2px 0 3px rgba(19, 19, 94, 0.9),
+  slide-out-background: radial-gradient(circle, #5a37b8 0%, #7b51db 100%),
+  slide-out-shadow-color: 2px 0 3px #29157a,
+  slide-out-shadow-color-rtl: -2px 0 3px #29157a,
   //
   //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, #f7fafb 0%, #ecf2f5 100%),
-  //slide-out-shadow-color: 0 4px 14px 0 #a2d2c8,
-  //slide-out-shadow-color-rtl: 0 4px 14px 0 #a2d2c8,
+  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,
   //
   //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);
diff --git a/src/app/pages/e-commerce/slide-out/slide-out.component.html b/src/app/pages/e-commerce/slide-out/slide-out.component.html
index ecc76f37..67848f7a 100644
--- a/src/app/pages/e-commerce/slide-out/slide-out.component.html
+++ b/src/app/pages/e-commerce/slide-out/slide-out.component.html
@@ -1,7 +1,8 @@
-<i class="show-hide-toggle"
-   [class.nb-arrow-thin-left]="!showVisitorsStatistics"
-   [class.nb-arrow-thin-right]="showVisitorsStatistics"
-   (click)="toggleStatistics()"></i>
+<nb-icon [icon]="showVisitorsStatistics ? 'arrow-forward-outline' : 'arrow-back-outline'"
+         pack="eva"
+         class="show-hide-toggle"
+         (click)="toggleStatistics()">
+</nb-icon>
 <div class="slide-out-container"
      [class.expanded]="showVisitorsStatistics"
      [class.collapsed]="!showVisitorsStatistics">
diff --git a/src/app/pages/e-commerce/slide-out/slide-out.component.scss b/src/app/pages/e-commerce/slide-out/slide-out.component.scss
index 973b692f..6158a81e 100644
--- a/src/app/pages/e-commerce/slide-out/slide-out.component.scss
+++ b/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;
-    font-weight: nb-theme(font-weight-bold);
+    position: absolute;
     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-rtl(right, auto);
+    @include nb-ltr(right, 0);
     @include nb-rtl(left, 0);
     width: 100%;
     position: absolute;
@@ -53,8 +46,7 @@
   }
 
   .slide-out-container.collapsed {
-    left: calc(100% - 6rem);
-    @include nb-rtl(left, auto);
+    @include nb-ltr(left, calc(100% - 6rem));
     @include nb-rtl(right, calc(100% - 6rem));
   }
 
diff --git a/src/app/pages/e-commerce/visitors-analytics/visitors-analytics-chart/visitors-analytics-chart.component.scss b/src/app/pages/e-commerce/visitors-analytics/visitors-analytics-chart/visitors-analytics-chart.component.scss
index bcbf0109..677d9baf 100644
--- a/src/app/pages/e-commerce/visitors-analytics/visitors-analytics-chart/visitors-analytics-chart.component.scss
+++ b/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 {
diff --git a/src/app/pages/e-commerce/visitors-analytics/visitors-analytics.component.html b/src/app/pages/e-commerce/visitors-analytics/visitors-analytics.component.html
index 7abd9956..509220fa 100644
--- a/src/app/pages/e-commerce/visitors-analytics/visitors-analytics.component.html
+++ b/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>
diff --git a/src/app/pages/e-commerce/visitors-analytics/visitors-analytics.component.scss b/src/app/pages/e-commerce/visitors-analytics/visitors-analytics.component.scss
index 5796cf79..4125da59 100644
--- a/src/app/pages/e-commerce/visitors-analytics/visitors-analytics.component.scss
+++ b/src/app/pages/e-commerce/visitors-analytics/visitors-analytics.component.scss
@@ -13,15 +13,19 @@
 
   nb-card-header {
     border-bottom: none;
+  }
 
-    .title {
-      font-size: 1.5rem;
-      font-weight: nb-theme(font-weight-bold);
-    }
+  .title {
+    font-size: 1.5rem;
+    font-weight: nb-theme(font-weight-bold);
+  }
 
-    .sub-title {
-      color: nb-theme(color-fg);
-    }
+  .sub-title {
+    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);
       }
     }
   }
diff --git a/src/app/pages/e-commerce/visitors-analytics/visitors-statistics/visitors-statistics.component.html b/src/app/pages/e-commerce/visitors-analytics/visitors-statistics/visitors-statistics.component.html
index d148c099..29e9ad8e 100644
--- a/src/app/pages/e-commerce/visitors-analytics/visitors-statistics/visitors-statistics.component.html
+++ b/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">
-    <div class="visitors-value">1,100</div>
-    <div class="visitors-title">New Visitors</div>
-  </div>
+  <h4 class="h1">1,100</h4>
+  <div class="visitors-title">New Visitors</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>
diff --git a/src/app/pages/e-commerce/visitors-analytics/visitors-statistics/visitors-statistics.component.scss b/src/app/pages/e-commerce/visitors-analytics/visitors-statistics/visitors-statistics.component.scss
index 831a0401..1d1c70db 100644
--- a/src/app/pages/e-commerce/visitors-analytics/visitors-statistics/visitors-statistics.component.scss
+++ b/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-bottom: 1.5rem;
+    margin: 1.5rem 0;
     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 .legends {
+  .visitors-statistics-legend ::ng-deep {
+    .legends {
       padding: 0;
       margin-left: 0;
     }
 
-    ::ng-deep .legend {
+    .legend {
       flex: 1;
       margin-left: 0;
       justify-content: flex-start;
     }
   }
-  // legend end
 }