Merge pull request LN-Zap#1044 from mrfelton/fix/scrollbars

fix(ui): autohide scrollbars
mrfelton · Dec 7, 2018 · 27f9b5e · 27f9b5e
2 parents f4e3a8b + fd427cf
commit 27f9b5e
Show file tree

Hide file tree

Showing 9 changed files with 23 additions and 8 deletions.
diff --git a/.storybook/config.js b/.storybook/config.js
@@ -19,7 +19,7 @@ const BackgroundPrimaryWithTheme = withTheme(({ theme, ...rest }) => (
   <BackgroundPrimary
     className={theme.name}
     p={3}
-    css={{ height: '100vh', 'overflow-y': 'scroll !important' }}
+    css={{ height: '100vh', 'overflow-y': 'auto !important' }}
     {...rest}
   />
 ))

diff --git a/app/components/Settings/Fiat/Fiat.scss b/app/components/Settings/Fiat/Fiat.scss
@@ -17,7 +17,7 @@
 
 .fiatTickers {
   height: 300px;
-  overflow-y: scroll;
+  overflow-y: auto;
 
   li {
     background: var(--secondaryColor);

diff --git a/app/components/Settings/Locale/Locale.scss b/app/components/Settings/Locale/Locale.scss
@@ -17,7 +17,7 @@
 
 .locales {
   height: 300px;
-  overflow-y: scroll;
+  overflow-y: auto;
 
   li {
     background: var(--secondaryColor);

diff --git a/app/components/UI/GlobalStyle.js b/app/components/UI/GlobalStyle.js
@@ -41,6 +41,21 @@ const GlobalStyle = createGlobalStyle`
     font-size: 13px;
   }
 
+  ::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  ::-webkit-scrollbar-track,
+  ::-webkit-scrollbar-corner {
+    background: rgba(0, 0, 0, 0.1);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 5px;
+  }
+
   a {
     text-decoration: none;
     color: inherit;

diff --git a/app/components/UI/MainContent.js b/app/components/UI/MainContent.js
@@ -15,7 +15,7 @@ const MainContent = ({ css, ...rest }) => (
     css={Object.assign(
       {
         position: 'relative',
-        'overflow-y': 'scroll'
+        'overflow-y': 'auto'
       },
       css
     )}

diff --git a/app/components/UI/Panel.js b/app/components/UI/Panel.js
@@ -16,7 +16,7 @@ const PanelBody = ({ children, css, ...rest }) => (
     css={Object.assign(
       {
         flex: 1,
-        overflow: 'scroll'
+        'overflow-y': 'auto'
       },
       css
     )}

diff --git a/test/unit/components/UI/__snapshots__/MainContent.spec.js.snap b/test/unit/components/UI/__snapshots__/MainContent.spec.js.snap
@@ -6,7 +6,7 @@ exports[`component.UI.MainContent should render correctly 1`] = `
   color: primaryText;
   background-color: primaryColor;
   position: relative;
-  overflow-y: scroll;
+  overflow-y: auto;
 }
 
 <article

diff --git a/test/unit/components/UI/__snapshots__/Modal.spec.js.snap b/test/unit/components/UI/__snapshots__/Modal.spec.js.snap
@@ -24,7 +24,7 @@ exports[`component.UI.Modal should render correctly 1`] = `
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
-  overflow: scroll;
+  overflow-y: auto;
 }
 
 .c0 {

diff --git a/test/unit/components/UI/__snapshots__/Panel.spec.js.snap b/test/unit/components/UI/__snapshots__/Panel.spec.js.snap
@@ -5,7 +5,7 @@ exports[`component.UI.Panel should render correctly 1`] = `
   -webkit-flex: 1;
   -ms-flex: 1;
   flex: 1;
-  overflow: scroll;
+  overflow-y: auto;
 }
 
 .c2 {