From 9bd2aa49365913735b98589043a9ec1d8f7a880e Mon Sep 17 00:00:00 2001
From: Sean Yesmunt <sean@lbry.io>
Date: Thu, 18 Apr 2019 17:11:34 -0400
Subject: [PATCH] fix: not awful scrollbar on windows

---
 src/ui/scss/all.scss                  |  1 +
 src/ui/scss/component/_header.scss    |  5 +++--
 src/ui/scss/component/_scrollbar.scss | 23 +++++++++++++++++++++++
 3 files changed, 27 insertions(+), 2 deletions(-)
 create mode 100644 src/ui/scss/component/_scrollbar.scss

diff --git a/src/ui/scss/all.scss b/src/ui/scss/all.scss
index 3eb031d5c..db0ad0fee 100644
--- a/src/ui/scss/all.scss
+++ b/src/ui/scss/all.scss
@@ -34,6 +34,7 @@
 @import 'component/notice';
 @import 'component/pagination';
 @import 'component/placeholder';
+@import 'component/scrollbar';
 @import 'component/search';
 @import 'component/snack-bar';
 @import 'component/spinner';
diff --git a/src/ui/scss/component/_header.scss b/src/ui/scss/component/_header.scss
index 41fd655f3..fd362e75c 100644
--- a/src/ui/scss/component/_header.scss
+++ b/src/ui/scss/component/_header.scss
@@ -93,6 +93,8 @@
   width: var(--header-height);
 
   svg {
+    stroke: $lbry-black;
+
     &:only-child {
       // Header icons are a little different because they are larger
       top: 0.25rem;
@@ -112,8 +114,7 @@
   .lbry-icon {
     height: 2rem;
     width: 2rem;
-    top: 0.5rem;
-    color: $lbry-white;
+    top: 0.6rem;
   }
 }
 
diff --git a/src/ui/scss/component/_scrollbar.scss b/src/ui/scss/component/_scrollbar.scss
new file mode 100644
index 000000000..10a4a8856
--- /dev/null
+++ b/src/ui/scss/component/_scrollbar.scss
@@ -0,0 +1,23 @@
+::-webkit-scrollbar {
+  width: 6px;
+  height: 5px;
+
+  background-color: transparent;
+  overflow: auto;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: $lbry-gray-3;
+
+  html[data-mode='dark'] & {
+    background-color: $lbry-gray-5;
+  }
+}
+
+::-webkit-scrollbar-thumb:active {
+  background-color: $lbry-teal-3;
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}