From 8790ce638f00b388478b808462cb2b58668ebad8 Mon Sep 17 00:00:00 2001
From: chomik <codecalm@gmail.com>
Date: Tue, 9 Apr 2019 21:57:46 +0200
Subject: [PATCH] card stats, dark mode

---
 pages/_includes/parts/dropdown/days.html |  2 +-
 pages/cards-stats.html                   | 51 +++++++++++++++++++-----
 scss/_dark.scss                          | 11 ++---
 scss/_variables.scss                     |  3 +-
 scss/utils/_text.scss                    |  6 +++
 5 files changed, 56 insertions(+), 17 deletions(-)

diff --git a/pages/_includes/parts/dropdown/days.html b/pages/_includes/parts/dropdown/days.html
index 8ef5ed7ee..30f53f793 100644
--- a/pages/_includes/parts/dropdown/days.html
+++ b/pages/_includes/parts/dropdown/days.html
@@ -1,5 +1,5 @@
 <div class="dropdown">
-   <a class="dropdown-toggle" href="#" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+   <a class="dropdown-toggle text-muted-light" href="#" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
       {{ include.value | default: 'Last 7 days' }}
    </a>
    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
diff --git a/pages/cards-stats.html b/pages/cards-stats.html
index 302854a75..2d2f87547 100644
--- a/pages/cards-stats.html
+++ b/pages/cards-stats.html
@@ -8,7 +8,7 @@ layout: default
       <div class="card">
          <div class="card-body">
             <div class="d-flex">
-               <div class="text-muted">Sales</div>
+               <div>Sales</div>
                <div class="ml-auto">
                   {% include parts/dropdown/days.html %}
                </div>
@@ -17,7 +17,7 @@ layout: default
             <div class="d-flex mb-2">
                <div>Conversion rate</div>
                <div class="ml-auto text-green">
-                  24% {% include ui/icon.html icon="trending-up" class="ml-1 icon-thin" %}
+                  24% {% include ui/icon.html icon="trending-up" class="icon-thin" %}
                </div>
             </div>
             {% include ui/progress.html percentage=75 color="blue" size="sm" %}
@@ -28,12 +28,17 @@ layout: default
       <div class="card">
          <div class="card-body">
             <div class="d-flex">
-               <div class="text-muted">Revenue</div>
+               <div>Revenue</div>
                <div class="ml-auto">
                   {% include parts/dropdown/days.html %}
                </div>
             </div>
-            <div class="h1 mb-3">$452,300</div>
+            <div class="d-flex align-items-baseline">
+               <div class="h1 mb-3 mr-2">$452,300</div>
+               <div class="mr-auto text-green">
+                  24% {% include ui/icon.html icon="trending-up" class="icon-thin" %}
+               </div>
+            </div>
             {% include ui/sparkline.html data="4,3,6,5,4,5,4,6,7,6,5,7,8,7,8,9,8,9,10" type="line" %}
          </div>
       </div>
@@ -42,12 +47,17 @@ layout: default
       <div class="card">
          <div class="card-body">
             <div class="d-flex">
-               <div class="text-muted">New clients</div>
+               <div>New clients</div>
                <div class="ml-auto">
                   {% include parts/dropdown/days.html %}
                </div>
             </div>
-            <div class="h1 mb-3">6,782</div>
+            <div class="d-flex align-items-baseline">
+               <div class="h1 mb-3 mr-2">6,782</div>
+               <div class="mr-auto text-red">
+                  5% {% include ui/icon.html icon="trending-down" class="icon-thin" %}
+               </div>
+            </div>
             {% include ui/sparkline.html data="4,3,6,5,4,5,4,6,7,6,5,7,8,7,8,9,8,9,10" type="line" color="purple" %}
          </div>
       </div>
@@ -56,17 +66,40 @@ layout: default
       <div class="card">
          <div class="card-body">
             <div class="d-flex">
-               <div class="text-muted">New clients</div>
+               <div>Active users</div>
                <div class="ml-auto">
                   {% include parts/dropdown/days.html %}
                </div>
             </div>
-            <div class="h1 mb-3">184,730</div>
+            <div class="d-flex align-items-baseline">
+               <div class="h1 mb-3 mr-2">$452,300</div>
+               <div class="mr-auto text-green">
+                  4% {% include ui/icon.html icon="trending-up" class="icon-thin" %}
+               </div>
+            </div>
             {% include ui/sparkline.html data="4,3,6,5,4,5,4,6,7,6,5,7,8,7,8,9,8,9,10" type="bar" %}
          </div>
       </div>
    </div>
-   <div class="col-sm-6 col-md-4 col-lg-3">5</div>
+   <div class="col-sm-6 col-md-4 col-lg-3">
+      <div class="card">
+         <div class="card-body">
+            <div>Traffic monitor</div>
+            <div class="row">
+               <div class="col">
+                  <div class="text-label">Inbound</div>
+                  <div class="h3">45GB</div>
+                  {% include ui/sparkline.html data="4,3,6,5,4,5,4,6,7,6,5,7,8,7,8,9,8,9,10" type="bar" color="azure" %}
+               </div>
+               <div class="col">
+                  <div class="text-label">Outbound</div>
+                  <div class="h3">16GB</div>
+                  {% include ui/sparkline.html data="4,3,6,5,4,5,4,6,7,6,5,7,8,7,8,9,8,9,10" type="bar" color="red" %}
+               </div>
+            </div>
+         </div>
+      </div>
+   </div>
    <div class="col-sm-6 col-md-4 col-lg-3">6</div>
    <div class="col-sm-6 col-md-4 col-lg-3">7</div>
    <div class="col-sm-6 col-md-4 col-lg-3">8</div>
diff --git a/scss/_dark.scss b/scss/_dark.scss
index 15a92a2ad..f2e9b5bb8 100644
--- a/scss/_dark.scss
+++ b/scss/_dark.scss
@@ -1,21 +1,22 @@
 body.theme-dark {
-  color: rgba(255, 255, 255, .8);
+  color: #afbdd1;
   background: $dark;
 
   .card,
   .header,
   .sidebar,
   .sidenav,
-  .topnav {
-    background: $body-bg-dark;
+  .topnav,
+  .dropdown-menu {
+    background: #2b3648;
   }
 
   .text-default {
-    color: rgba(255, 255, 255, .8);
+    color: #afbdd1 !important;
   }
 
   .avatar-list-stacked .avatar {
-    box-shadow: 0 0 0 2px $body-bg-dark;
+    box-shadow: 0 0 0 2px #2b3648;
   }
 }
 
diff --git a/scss/_variables.scss b/scss/_variables.scss
index f353a6e98..2565fef9f 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -45,7 +45,6 @@ $black: #121212 !default;
 $white: #fff !default;
 
 $body-bg: #f5f7fb !default;
-$body-bg-dark: mix(#fff, $dark, 8%) !default;
 
 $text-color: #495057 !default;
 $text-muted: #778ca2 !default;
@@ -116,7 +115,7 @@ $h2-font-size: 1.625rem !default;
 $h3-font-size: 1.25rem !default;
 $h4-font-size: 1.125rem !default;
 $h5-font-size: $font-size-base !default;
-$h6-font-size: .875rem !default;
+$h6-font-size: .75rem !default;
 
 $ribbon-margin: .25rem !default;
 
diff --git a/scss/utils/_text.scss b/scss/utils/_text.scss
index e35841802..0c4bcff64 100644
--- a/scss/utils/_text.scss
+++ b/scss/utils/_text.scss
@@ -12,6 +12,12 @@
 
 .text-muted-light { color: $text-muted-light !important; }
 
+.text-label {
+  color: $text-muted;
+  text-transform: uppercase;
+  font-size: $h6-font-size;
+}
+
 .tracking-tight		{ letter-spacing: -.05em !important; }
 .tracking-normal	{ letter-spacing: 0 !important; }
 .tracking-wide		{ letter-spacing: .05em !important; }