From da3cd140f591dcc4f2ed2fb0333f4bab4ac247f5 Mon Sep 17 00:00:00 2001
From: Sergey Andrievskiy <s.andrievskiy@akveo.com>
Date: Mon, 17 Jun 2019 12:17:20 +0300
Subject: [PATCH] refactor(e-commerce): profit card

---
 src/app/@theme/styles/themes.scss             |  1 +
 src/app/pages/e-commerce/e-commerce.module.ts | 10 ++-
 .../back-side/stats-card-back.component.html  | 24 ++---
 .../back-side/stats-card-back.component.scss  | 89 ++++++-------------
 .../stats-card-front.component.html           |  8 +-
 .../stats-card-front.component.scss           | 70 ++-------------
 .../profit-card/profit-card.component.html    |  8 +-
 .../profit-card/profit-card.component.scss    | 13 ++-
 8 files changed, 68 insertions(+), 155 deletions(-)

diff --git a/src/app/@theme/styles/themes.scss b/src/app/@theme/styles/themes.scss
index c7d691c8..8c7f41ee 100644
--- a/src/app/@theme/styles/themes.scss
+++ b/src/app/@theme/styles/themes.scss
@@ -16,6 +16,7 @@ $nb-themes: nb-register-theme((
   font-family-primary: Roboto,
   font-family-secondary: Exo,
 
+  card-height-tiny: 13.5rem,
 
   //
   //switcher-background: #ebeff5,
diff --git a/src/app/pages/e-commerce/e-commerce.module.ts b/src/app/pages/e-commerce/e-commerce.module.ts
index 8c127d2a..ca256bf6 100644
--- a/src/app/pages/e-commerce/e-commerce.module.ts
+++ b/src/app/pages/e-commerce/e-commerce.module.ts
@@ -1,5 +1,12 @@
 import { NgModule } from '@angular/core';
-import { NbButtonModule, NbCardModule, NbProgressBarModule, NbTabsetModule, NbUserModule } from '@nebular/theme';
+import {
+  NbButtonModule,
+  NbCardModule,
+  NbProgressBarModule,
+  NbTabsetModule,
+  NbUserModule,
+  NbIconModule,
+} from '@nebular/theme';
 import { NgxEchartsModule } from 'ngx-echarts';
 import { NgxChartsModule } from '@swimlane/ngx-charts';
 
@@ -53,6 +60,7 @@ import { EarningLiveUpdateChartComponent } from './earning-card/front-side/earni
     NbCardModule,
     NbUserModule,
     NbButtonModule,
+    NbIconModule,
     NbTabsetModule,
     ChartModule,
     NbProgressBarModule,
diff --git a/src/app/pages/e-commerce/profit-card/back-side/stats-card-back.component.html b/src/app/pages/e-commerce/profit-card/back-side/stats-card-back.component.html
index 295d9862..821f6b08 100644
--- a/src/app/pages/e-commerce/profit-card/back-side/stats-card-back.component.html
+++ b/src/app/pages/e-commerce/profit-card/back-side/stats-card-back.component.html
@@ -1,25 +1,19 @@
 <nb-card-header>
-  <div class="header-container">
-    <div class="icon">
-      <i class="ion-social-usd"></i>
-    </div>
-    <span class="title">Profit</span>
-  </div>
+  <i class="ion-social-usd"></i>
+  <span class="title">Profit</span>
 </nb-card-header>
-<nb-card-body class="p-0">
+<nb-card-body>
   <div class="info">
     <div class="period">
-      <span class="time-interval">Jun 1 - Jun 30</span>
-      <div class="value">
-        <span class="currency">$</span>
-        300
+      <div class="caption">Jun 1 - Jun 30</div>
+      <div class="label">
+        <span class="currency">$</span>300
       </div>
     </div>
     <div class="period latest">
-      <span class="time-interval">Jul 1 - Jul 31</span>
-      <div class="value">
-        <span class="currency">$</span>
-        860
+      <div class="caption">Jul 1 - Jul 31</div>
+      <div class="label">
+        <span class="currency">$</span>860
       </div>
     </div>
   </div>
diff --git a/src/app/pages/e-commerce/profit-card/back-side/stats-card-back.component.scss b/src/app/pages/e-commerce/profit-card/back-side/stats-card-back.component.scss
index 725b8548..23f37b27 100644
--- a/src/app/pages/e-commerce/profit-card/back-side/stats-card-back.component.scss
+++ b/src/app/pages/e-commerce/profit-card/back-side/stats-card-back.component.scss
@@ -5,80 +5,47 @@
   flex-direction: column;
   flex: 1;
 
-  ::ng-deep nb-card-header {
-    display: flex;
-    justify-content: space-between;
-
-    .header-container {
-      display: flex;
-      @include nb-rtl(flex-direction, row-reverse);
-    }
-
-    .title {
-      padding-left: 1rem;
-    }
+  .title {
+    padding-left: 0.5rem;
   }
 
-  ::ng-deep nb-card-body {
-    overflow: hidden;
-
+  nb-card-body {
     display: flex;
     flex-direction: column;
+    padding: 0;
+    overflow: hidden;
+  }
 
-    .info {
-      padding: 0.75rem;
-      padding-bottom: 0.5rem;
-      display: flex;
-      @include nb-rtl(flex-direction, row-reverse);
-    }
+  .info {
+    display: flex;
+    @include nb-rtl(flex-direction, row-reverse);
+    justify-content: space-between;
+    padding: 0.75rem 0.75rem 0.5rem;
+  }
 
-    .period {
-      display: flex;
-      flex-direction: column;
-      flex: 1;
+  .period {
+    width: 49%;
+  }
 
-      &.latest {
-        padding-left: 0.75rem;
-      }
-    }
-
-    .time-interval {
-      color: nb-theme(color-fg);
-    }
-
-    .value {
-      font-family: nb-theme(font-secondary), serif;
-      font-size: 1.25rem;
-      font-weight: nb-theme(font-weight-bold);
-      color: nb-theme(card-fg-heading);
-
-      @include nb-for-theme(default) {
-        color: nb-theme(color-success);
-      }
-
-      .currency {
-        color: nb-theme(color-success);
-
-        @include nb-for-theme(corporate) {
-          color: nb-theme(color-primary);
-        }
-      }
-    }
+  .currency {
+    padding-right: 0.25rem;
   }
 
   ngx-stats-ares-chart {
     flex: 1;
     position: relative;
-  }
 
-  ::ng-deep canvas {
-    border-bottom-left-radius: nb-theme(card-border-radius);
-    border-bottom-right-radius: nb-theme(card-border-radius);
-  }
+    ::ng-deep {
+      .echart {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+      }
 
-  .echart {
-    position: absolute;
-    height: 100%;
-    width: 100%;
+      canvas {
+        border-bottom-left-radius: nb-theme(card-border-radius);
+        border-bottom-right-radius: nb-theme(card-border-radius);
+      }
+    }
   }
 }
diff --git a/src/app/pages/e-commerce/profit-card/front-side/stats-card-front.component.html b/src/app/pages/e-commerce/profit-card/front-side/stats-card-front.component.html
index 8b9ba143..246dfeac 100644
--- a/src/app/pages/e-commerce/profit-card/front-side/stats-card-front.component.html
+++ b/src/app/pages/e-commerce/profit-card/front-side/stats-card-front.component.html
@@ -1,10 +1,6 @@
 <nb-card-header>
-  <div class="header-container">
-    <div class="icon">
-      <i class="ion-social-usd"></i>
-    </div>
-    <span class="title">Profit</span>
-  </div>
+  <i class="ion-social-usd"></i>
+  <span class="title">Profit</span>
 </nb-card-header>
 <nb-card-body>
   <ngx-stats-bar-animation-chart [linesData]="linesData"></ngx-stats-bar-animation-chart>
diff --git a/src/app/pages/e-commerce/profit-card/front-side/stats-card-front.component.scss b/src/app/pages/e-commerce/profit-card/front-side/stats-card-front.component.scss
index ecaa71ad..f2e2af35 100644
--- a/src/app/pages/e-commerce/profit-card/front-side/stats-card-front.component.scss
+++ b/src/app/pages/e-commerce/profit-card/front-side/stats-card-front.component.scss
@@ -5,74 +5,22 @@
   flex-direction: column;
   flex: 1;
 
-  ::ng-deep nb-card-header {
-    display: flex;
-    justify-content: space-between;
-
-    .header-container {
-      display: flex;
-      @include nb-rtl(flex-direction, row-reverse);
-    }
-
-    .title {
-      padding-left: 1rem;
-    }
+  .title {
+    padding-left: 0.5rem;
   }
 
-  ::ng-deep nb-card-body {
-    display: flex;
+  nb-card-body {
     position: relative;
-    flex: 1;
     padding: 0;
     overflow: hidden;
+  }
 
-    .period {
-      display: flex;
-      flex-direction: column;
-      flex: 1;
-      justify-content: flex-end;
-    }
+  ngx-stats-bar-animation-chart {
+    position: relative;
 
-    .time-interval {
-      font-size: nb-theme(font-size-sm);
-      color: nb-theme(color-fg);
-      white-space: nowrap;
-    }
-
-    .value {
-      font-family: nb-theme(font-secondary), serif;
-      font-weight: nb-theme(font-weight-bold);
-      color: nb-theme(card-fg-heading);
-
-      .currency {
-        color: nb-theme(color-success);
-
-        @include nb-for-theme(corporate) {
-          color: nb-theme(color-primary);
-        }
-      }
-    }
-
-    .start-period {
-      .time-interval, .value {
-        text-align: right;
-      }
-    }
-
-    .end-period {
-      .time-interval, .value {
-        text-align: left;
-      }
-    }
-
-    ngx-stats-bar-animation-chart {
-      flex: 1;
-      position: relative;
-
-      .echart {
-        height: 100%;
-        width: 100%;
-      }
+    ::ng-deep .echart {
+      height: 100%;
+      width: 100%;
     }
   }
 }
diff --git a/src/app/pages/e-commerce/profit-card/profit-card.component.html b/src/app/pages/e-commerce/profit-card/profit-card.component.html
index 50e9a177..31d0feec 100644
--- a/src/app/pages/e-commerce/profit-card/profit-card.component.html
+++ b/src/app/pages/e-commerce/profit-card/profit-card.component.html
@@ -1,14 +1,14 @@
 <nb-flip-card [showToggleButton]="false" [flipped]="flipped">
   <nb-card-front>
-    <nb-card size="xsmall">
+    <nb-card size="tiny">
       <ngx-stats-card-front></ngx-stats-card-front>
-      <i class="nb-arrow-right" (click)="toggleView()"></i>
+      <nb-icon icon="chevron-right-outline" pack="eva" class="flip-icon" (click)="toggleView()"></nb-icon>
     </nb-card>
   </nb-card-front>
   <nb-card-back>
-    <nb-card size="xsmall">
+    <nb-card size="tiny">
       <ngx-stats-card-back></ngx-stats-card-back>
-      <i class="nb-arrow-right" (click)="toggleView()"></i>
+      <nb-icon icon="chevron-right-outline" pack="eva" class="flip-icon" (click)="toggleView()"></nb-icon>
     </nb-card>
   </nb-card-back>
 </nb-flip-card>
diff --git a/src/app/pages/e-commerce/profit-card/profit-card.component.scss b/src/app/pages/e-commerce/profit-card/profit-card.component.scss
index 3e6d07ed..ed0bf32c 100644
--- a/src/app/pages/e-commerce/profit-card/profit-card.component.scss
+++ b/src/app/pages/e-commerce/profit-card/profit-card.component.scss
@@ -1,25 +1,24 @@
 @import '../../../@theme/styles/themes';
 
 @include nb-install-component() {
-  .nb-arrow-right {
+  .flip-icon {
     position: absolute;
-    right: 0;
-    top: 0;
+    right: 0.625rem;
+    top: 1rem;
     @include nb-rtl(right, auto);
-    @include nb-rtl(left, 0);
-    padding: 1.5rem;
+    @include nb-rtl(left, 0.625rem);
     cursor: pointer;
   }
 
   ::ng-deep .flipped {
     .back-container {
-      .nb-arrow-right {
+      .flip-icon {
         transform: scaleX(-1);
       }
     }
 
     .front-container {
-      .nb-arrow-right {
+      .flip-icon {
         display: none;
       }
     }