From 13339a9927fc54a223480a285b64c8684417dec2 Mon Sep 17 00:00:00 2001
From: Sujin <sujin.2f@gmail.com>
Date: Wed, 27 Mar 2019 14:53:42 -0400
Subject: [PATCH] #342 Suggestion

---
 app/containers/navigationPanel/index.scss        | 11 +++++++++++
 app/containers/navigationPanelDetails/index.js   |  2 +-
 app/containers/navigationPanelDetails/index.scss |  8 +-------
 app/containers/snippet/index.scss                |  2 ++
 app/containers/snippetPanel/index.js             |  4 +++-
 app/containers/snippetPanel/index.scss           |  4 ----
 6 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/app/containers/navigationPanel/index.scss b/app/containers/navigationPanel/index.scss
index b635cf24..a0baf168 100644
--- a/app/containers/navigationPanel/index.scss
+++ b/app/containers/navigationPanel/index.scss
@@ -174,3 +174,14 @@
   border-radius: 5px;
   -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2);
 }
+
+.scrolled-border {
+  &::-webkit-scrollbar {
+    width: 2px;
+    background-color: #dadee3;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: #e36209;
+  }
+}
diff --git a/app/containers/navigationPanelDetails/index.js b/app/containers/navigationPanelDetails/index.js
index 5ec9a382..9d3d0d8f 100644
--- a/app/containers/navigationPanelDetails/index.js
+++ b/app/containers/navigationPanelDetails/index.js
@@ -109,7 +109,7 @@ class NavigationPanelDetails extends Component {
   render () {
     return (
       <div className='panel-thumbnails-background'>
-        <div className='panel-thumbnails-scroll'>
+        <div className='panel-thumbnails-scroll scrolled-border'>
           <div className='panel-thumbnails-content'>
             <ul>
               { this.renderSnippetThumbnails() }
diff --git a/app/containers/navigationPanelDetails/index.scss b/app/containers/navigationPanelDetails/index.scss
index 5cde01e2..2de94d42 100644
--- a/app/containers/navigationPanelDetails/index.scss
+++ b/app/containers/navigationPanelDetails/index.scss
@@ -6,14 +6,8 @@
 .panel-thumbnails-scroll {
   float: left;
   width: 100%;
-  overflow-y: overlay;
+  overflow-y: scroll;
   height: 100%;
-  visibility: hidden;
-}
-
-.panel-thumbnails-content,
-.panel-thumbnails-scroll:hover {
-  visibility: visible;
 }
 
 .panel-thumbnails-scroll {
diff --git a/app/containers/snippet/index.scss b/app/containers/snippet/index.scss
index 7ea2e40e..23a277aa 100755
--- a/app/containers/snippet/index.scss
+++ b/app/containers/snippet/index.scss
@@ -89,6 +89,8 @@
     border-color: #dadee3;
     border-radius: 0;
     border-bottom: none;
+    border-left: none;
+    border-right: none;
     margin-bottom: 0;
 
     & > .panel-heading {
diff --git a/app/containers/snippetPanel/index.js b/app/containers/snippetPanel/index.js
index dbd7afe5..480dff0e 100644
--- a/app/containers/snippetPanel/index.js
+++ b/app/containers/snippetPanel/index.js
@@ -26,8 +26,10 @@ class SnippetPanel extends Component {
 
   render () {
     const { gists, activeGist, immersiveMode } = this.props
+    const snippetClass = immersiveMode === 'ON' ? 'snippet-panel-immersive' : 'snippet-panel';
+
     return (
-      <div className={ immersiveMode === 'ON' ? 'snippet-panel-immersive' : 'snippet-panel' }>
+      <div className={`scrolled-border ${snippetClass}`}>
         <div className='snippet-panel-content'>
           { !gists || !activeGist || !gists[activeGist]
             ? this.renderEmptySnippetSection()
diff --git a/app/containers/snippetPanel/index.scss b/app/containers/snippetPanel/index.scss
index 5a335509..393fa94a 100644
--- a/app/containers/snippetPanel/index.scss
+++ b/app/containers/snippetPanel/index.scss
@@ -9,10 +9,6 @@
   height: 100vh;
 }
 
-.snippet-panel:not(:hover)::-webkit-scrollbar {
-  display: none;
-}
-
 .snippet-panel-immersive {
   @extend .snippet-panel;
   width: 100%;