chore: merge branch 'custom-scrollbar' into dev

Author: mydearxym

containers/ThemeWrapper/GlobalStyle.js

@@ -1,4 +1,4 @@
-import { createGlobalStyle } from 'styled-components'
+import { createGlobalStyle, css } from 'styled-components'
 import { theme, cs } from '@utils'
 import normalize from './normalize'
 
@@ -18,7 +18,7 @@ const GlobalStyle = createGlobalStyle`
   body {
     ${cs.media.mobile`
       position: relative;
-`};
+   `};
   }
   *::-moz-selection {
     background-color: ${theme('selectionBg')} !important;
@@ -138,6 +138,33 @@ const GlobalStyle = createGlobalStyle`
     padding: 0 1px;
     color: ${theme('searchHighlight.doramonFg')};
   }
+
+  ${({ isMacOS }) =>
+    isMacOS ||
+    css`
+      ::-webkit-scrollbar {
+        background: transparent;
+        width: 4px;
+      }
+      ::-webkit-scrollbar-button {
+        background: transparent;
+      }
+      ::-webkit-scrollbar-track {
+        background: transparent;
+      }
+      ::-webkit-scrollbar-track-piece {
+        background: transparent;
+      }
+      ::-webkit-scrollbar-thumb {
+        background: ${theme('banner.title')};
+      }
+      ::-webkit-scrollbar-corner {
+        background: grey;
+      }
+      ::-webkit-resizer {
+        background: grey;
+      }
+    `};
 `
 
 export default GlobalStyle

containers/ThemeWrapper/index.js

@@ -9,23 +9,32 @@ import { ThemeProvider } from 'styled-components'
 import Helmet from 'react-helmet'
 
 import { connectStore } from '@utils'
+import { usePlatform } from '@hooks'
 
 // import MarkDownStyle from './MarkDownStyle'
 import CodeSyxHighlight from './CodeSyxHighlight'
 import AntUIOverWrite from './AntUIOverWrite'
 import GlobalStyle from './GlobalStyle'
 
-const ThemeContainer = ({ children, theme: { themeData } }) => (
-  <ThemeProvider theme={themeData}>
-    <React.Fragment>
-      <Helmet meta={[{ name: 'theme-color', content: themeData.mobileTab }]} />
-      <div>{children}</div>
-      <CodeSyxHighlight />
-      <AntUIOverWrite />
-      <GlobalStyle />
-    </React.Fragment>
-  </ThemeProvider>
-)
+const ThemeContainer = ({ children, theme: { themeData } }) => {
+  const { isMacOS } = usePlatform()
+
+  console.log('isMacOS: ', isMacOS)
+
+  return (
+    <ThemeProvider theme={themeData}>
+      <React.Fragment>
+        <Helmet
+          meta={[{ name: 'theme-color', content: themeData.mobileTab }]}
+        />
+        <div>{children}</div>
+        <CodeSyxHighlight />
+        <AntUIOverWrite />
+        <GlobalStyle isMacOS={isMacOS} />
+      </React.Fragment>
+    </ThemeProvider>
+  )
+}
 
 export default connectStore(ThemeContainer)
 

containers/UserLister/index.js

@@ -64,7 +64,7 @@ const UserListerContainer = ({ userLister }) => {
 
   return (
     <Modal width="700px" show={show} showCloseBtn onClose={onClose}>
-      <Wrapper>
+      <Wrapper id="userlist-scroller">
         <HeaderInfo
           type={type}
           brief={brief}

containers/UserLister/logic.js

@@ -167,6 +167,9 @@ export const useInit = _store => {
     // log('effect init')
     sub$ = sr71$.data().subscribe($solver(DataSolver, ErrSolver))
 
+    /* eslint-disable no-undef */
+    // OverlayScrollbars(document.getElementById('userlist-scroller'), {})
+
     return () => {
       // log('effect uninit')
       sr71$.stop()

containers/UserLister/styles/index.js

@@ -3,7 +3,9 @@ import styled from 'styled-components'
 // import Img from '@components/Img'
 import { cs } from '@utils'
 
-export const Wrapper = styled.div`
+export const Wrapper = styled.div.attrs(({ id }) => ({
+  id,
+}))`
   padding: 20px;
 `
 export const MsgWrapper = styled.div`