From b49e5f3075e391b7c95f446172e18d8dba6403f3 Mon Sep 17 00:00:00 2001
From: btzr-io <btzr.io@gmail.com>
Date: Sun, 17 Sep 2017 18:25:07 -0600
Subject: [PATCH 1/4] add better tab styles

add animation for active tab
---
 ui/scss/component/_header.scss | 37 +++++++++++++++++++++++++++-------
 ui/scss/component/_tabs.scss   |  0
 2 files changed, 30 insertions(+), 7 deletions(-)
 create mode 100644 ui/scss/component/_tabs.scss

diff --git a/ui/scss/component/_header.scss b/ui/scss/component/_header.scss
index 9428298e261..43fb118d730 100644
--- a/ui/scss/component/_header.scss
+++ b/ui/scss/component/_header.scss
@@ -57,20 +57,27 @@
   }
 }
 
+/* Tabs */
+
 nav.sub-header
 {
   text-transform: uppercase;
-  padding: 0 0 $spacing-vertical;
   max-width: $width-page-constrained;
-  margin-left: auto;
-  margin-right: auto;
+  margin-bottom: 40px;
+  border-bottom: var(--divider);
   > a
   {
+    height: 38px;
+    line-height: 38px;
+    text-align: center;
+    font-weight: 600;
+    text-transform: uppercase;
     display: inline-block;
-    margin: 0 15px;
-    padding: 0 5px;
-    line-height:calc(var(--header-height) - $spacing-vertical - var(--tab-border-size));
+    vertical-align: baseline;
+    margin: 0 8px;
+    padding: 0 8px;
     color: var(--tab-color);
+    position: relative;
 
     &:first-child
     {
@@ -82,8 +89,19 @@ nav.sub-header
     }
     &.sub-header-selected
     {
-      border-bottom: var(--tab-border);
       color: var(--tab-active-color);
+      &:before {
+        width: 100%;
+        height: var(--tab-border-size);
+        background: var(--tab-active-color);
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        content: '';
+        animation-name: activeTab;
+        animation-duration: 0.3s;
+        animation-timing-function: cubic-bezier(.55,0,.1,1);
+      }
     }
     &:hover
     {
@@ -91,3 +109,8 @@ nav.sub-header
     }
   }
 }
+
+@keyframes activeTab {
+    from {width: 0;}
+    to {width: 100%;}
+}
diff --git a/ui/scss/component/_tabs.scss b/ui/scss/component/_tabs.scss
new file mode 100644
index 00000000000..e69de29bb2d

From 15216d0cadea5544edeaa82c96a5922d4d075c5b Mon Sep 17 00:00:00 2001
From: btzr-io <btzr.io@gmail.com>
Date: Sun, 17 Sep 2017 18:27:50 -0600
Subject: [PATCH 2/4] split tabs style from header

---
 ui/scss/all.scss               |  1 +
 ui/scss/component/_header.scss | 58 ----------------------------------
 ui/scss/component/_tabs.scss   | 57 +++++++++++++++++++++++++++++++++
 3 files changed, 58 insertions(+), 58 deletions(-)

diff --git a/ui/scss/all.scss b/ui/scss/all.scss
index 69656fa4138..eb2cc662cdb 100644
--- a/ui/scss/all.scss
+++ b/ui/scss/all.scss
@@ -21,5 +21,6 @@
 @import "component/_video.scss";
 @import "component/_pagination.scss";
 @import "component/_markdown-editor.scss";
+@import "component/_tabs.scss";
 @import "page/_developer.scss";
 @import "page/_show.scss";
diff --git a/ui/scss/component/_header.scss b/ui/scss/component/_header.scss
index 43fb118d730..7d5e0e0af16 100644
--- a/ui/scss/component/_header.scss
+++ b/ui/scss/component/_header.scss
@@ -56,61 +56,3 @@
     border-color: var(--color-primary);
   }
 }
-
-/* Tabs */
-
-nav.sub-header
-{
-  text-transform: uppercase;
-  max-width: $width-page-constrained;
-  margin-bottom: 40px;
-  border-bottom: var(--divider);
-  > a
-  {
-    height: 38px;
-    line-height: 38px;
-    text-align: center;
-    font-weight: 600;
-    text-transform: uppercase;
-    display: inline-block;
-    vertical-align: baseline;
-    margin: 0 8px;
-    padding: 0 8px;
-    color: var(--tab-color);
-    position: relative;
-
-    &:first-child
-    {
-      margin-left: 0;
-    }
-    &:last-child
-    {
-      margin-right: 0;
-    }
-    &.sub-header-selected
-    {
-      color: var(--tab-active-color);
-      &:before {
-        width: 100%;
-        height: var(--tab-border-size);
-        background: var(--tab-active-color);
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        content: '';
-        animation-name: activeTab;
-        animation-duration: 0.3s;
-        animation-timing-function: cubic-bezier(.55,0,.1,1);
-      }
-    }
-    &:hover
-    {
-      color: var(--tab-active-color);
-    }
-  }
-}
-
-@keyframes activeTab {
-    from {width: 0;}
-    to {width: 100%;}
-}
diff --git a/ui/scss/component/_tabs.scss b/ui/scss/component/_tabs.scss
index e69de29bb2d..f2059dfef92 100644
--- a/ui/scss/component/_tabs.scss
+++ b/ui/scss/component/_tabs.scss
@@ -0,0 +1,57 @@
+/* Tabs */
+
+nav.sub-header
+{
+  text-transform: uppercase;
+  max-width: $width-page-constrained;
+  margin-bottom: 40px;
+  border-bottom: var(--divider);
+  > a
+  {
+    height: 38px;
+    line-height: 38px;
+    text-align: center;
+    font-weight: 600;
+    text-transform: uppercase;
+    display: inline-block;
+    vertical-align: baseline;
+    margin: 0 8px;
+    padding: 0 8px;
+    color: var(--tab-color);
+    position: relative;
+
+    &:first-child
+    {
+      margin-left: 0;
+    }
+    &:last-child
+    {
+      margin-right: 0;
+    }
+    &.sub-header-selected
+    {
+      color: var(--tab-active-color);
+      &:before {
+        width: 100%;
+        height: var(--tab-border-size);
+        background: var(--tab-active-color);
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        content: '';
+        animation-name: activeTab;
+        animation-duration: 0.3s;
+        animation-timing-function: cubic-bezier(.55,0,.1,1);
+      }
+    }
+    &:hover
+    {
+      color: var(--tab-active-color);
+    }
+  }
+}
+
+@keyframes activeTab {
+    from {width: 0;}
+    to {width: 100%;}
+}

From 44e5698b1a790d5184aaf9d92c1fc561269129e7 Mon Sep 17 00:00:00 2001
From: btzr-io <btzr.io@gmail.com>
Date: Sun, 17 Sep 2017 18:46:44 -0600
Subject: [PATCH 3/4] update vars.scss

---
 ui/scss/_vars.scss | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/ui/scss/_vars.scss b/ui/scss/_vars.scss
index 0a86d1d76c2..97aec8b10d5 100644
--- a/ui/scss/_vars.scss
+++ b/ui/scss/_vars.scss
@@ -90,8 +90,8 @@ $text-color: #000;
 
   /* Tabs */
   --tab-bg: transparent;
-  --tab-color: #666;
-  --tab-active-color: var(--header-active-color);
+  --tab-color: rgba(0, 0, 0, 0.5);
+  --tab-active-color: var(--color-primary);
   --tab-border-size: 2px;
   --tab-border: var(--tab-border-size) solid var(--tab-active-color);
 
@@ -125,4 +125,7 @@ $text-color: #000;
   --tooltip-bg: var(--color-bg);
   --tooltip-color: var(--text-color);
   --tooltip-border: 1px solid #aaa;
+
+  /* Divider */
+  --divider: 1px solid rgba(0, 0, 0, 0.12);
 }

From 190523518d53b2b69594fbe558140785d470c7fd Mon Sep 17 00:00:00 2001
From: btzr-io <btzr.io@gmail.com>
Date: Sun, 17 Sep 2017 19:24:11 -0600
Subject: [PATCH 4/4] update dark-theme

---
 ui/dist/themes/dark.css | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/ui/dist/themes/dark.css b/ui/dist/themes/dark.css
index c32108393a4..10ff32183a0 100644
--- a/ui/dist/themes/dark.css
+++ b/ui/dist/themes/dark.css
@@ -27,8 +27,8 @@
     --search-border: 1px solid rgba(0,0,0, 0.25);
 
     /* Tab */
-    --tab-color: #757575;
-    --tab-active-color: #CCC;
+    --tab-color: rgba(255,255,255, 0.5) ;
+    --tab-active-color: rgba(255,255,255, 0.75);
 
     /* Header */
     --header-color: #CCC;
@@ -43,4 +43,7 @@
     /* Modla */
     --modal-overlay-bg: var(--color-dark-overlay);
     --modal-border: 1px solid rgba(0, 0, 0, 0.25);
+
+    /* Divider */
+    --divider: 1px solid rgba(255,255,255, 0.12);
 }