Scrollbar visible on darkmode issue scrtlabs#204

stakeordie · May 10, 2021 · f4e2e18 · f4e2e18
1 parent 6bfd00d
commit f4e2e18
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 3 deletions.
diff --git a/src/pages/Pool/WithdrawTab.tsx b/src/pages/Pool/WithdrawTab.tsx
@@ -36,7 +36,9 @@ export class WithdrawTab extends React.Component<
   }
 
   state = { searchText: '' };
-
+  renderThumbVertical=()=>{
+    return <div className={`${styles.thumb} ${styles[this.props.theme.currentTheme]}`}></div>
+  }
   render() {
     const pairs = Array.from(new Set(this.props.pairs.values()));
 
@@ -64,7 +66,7 @@ export class WithdrawTab extends React.Component<
             />
           </div>
         ) : null}
-        <Scrollbars style={{ width: 455, height: 300 }}  className={styles.withdrawLiquitityContent}>
+        <Scrollbars autoHide renderThumbVertical={this.renderThumbVertical} style={{ width: 455, height: 300 }}  className={styles.withdrawLiquitityContent}>
           {pairs
           .filter(p => {
             return (

diff --git a/src/pages/Pool/styles.styl b/src/pages/Pool/styles.styl
@@ -106,4 +106,14 @@ input {
     color: black !important;
     background: rgb(222, 222, 222) !important;
   }  
+}
+
+.thumb{
+  border-radius: 20px;
+  &.dark{
+    background: #555;
+  }  
+  &.light {
+    background: #ccc;
+  }  
 }
diff --git a/src/pages/TokenModal/TokenSelector/TokenSelector.tsx b/src/pages/TokenModal/TokenSelector/TokenSelector.tsx
@@ -48,6 +48,9 @@ export const TokenSelector = (props: {
   const filteredTokens = props.tokens.filter(t => {
     return (t.symbol + String(t.address)).toLowerCase().includes(searchText);
   });
+  const renderThumbVertical=()=>{
+    return <div className={`${styles.thumb} ${styles[theme.currentTheme]}`}></div>
+  }
   const {theme} =useStores();
   return (
     <Modal
@@ -93,7 +96,7 @@ export const TokenSelector = (props: {
             </div>
           ) : (
             <div className={`${styles.listTokens__container} ${styles[theme.currentTheme]}`}>
-              <Scrollbars className={styles.listTokens__subcontainer}>
+              <Scrollbars renderThumbVertical={renderThumbVertical} className={styles.listTokens__subcontainer}>
                 {
                   filteredTokens
                     .sort((a, b) => {

diff --git a/src/pages/TokenModal/TokenSelector/styles.styl b/src/pages/TokenModal/TokenSelector/styles.styl
@@ -144,4 +144,14 @@
   &.addCustomToken__button{
     background: rgba(255, 255, 255, 0.1);
   }
+}
+
+.thumb{
+  border-radius: 20px;
+  &.dark{
+    background: #555;
+  }  
+  &.light {
+    background: #ccc;
+  }  
 }