chore: Merge branch 'fix/safari-jumpy' into dev

Author: mydearxym

components/Hooks/usePlatform.js

@@ -10,6 +10,7 @@ const inialPlatform = {
   isIE: false,
   isEdge: false,
   isMacOS: false,
+  isMobile: false,
 }
 
 // see https://stackoverflow.com/questions/49328382/browser-detection-in-reactjs/49328524
@@ -44,6 +45,8 @@ const usePlatform = (/* { breakpoint } */) => {
     const isMacOS = Global.navigator.appVersion.indexOf('Mac') != -1
     /* eslint-enable */
 
+    const isMobile = Global.innerWidth <= 800 && window.innerHeight <= 600
+
     setPlatform(
       R.merge(inialPlatform, {
         isFirefox,
@@ -52,6 +55,7 @@ const usePlatform = (/* { breakpoint } */) => {
         isEdge,
         isChrome,
         isMacOS,
+        isMobile,
       })
     )
 

containers/Sidebar/Header.js

@@ -7,6 +7,7 @@ import PinButton from './PinButton'
 
 import {
   Wrapper,
+  InnerWrapper,
   HeaderFuncs,
   SiteLogoWrapper,
   ExploreWrapper,
@@ -18,22 +19,24 @@ import {
 
 const Header = ({ pin }) => (
   <Wrapper pin={pin}>
-    <HeaderFuncs>
-      <SiteLogoWrapper pin={pin}>
-        <SiteLogo src={`${ICON_BASE}/sidebar/everyday.svg`} />
-      </SiteLogoWrapper>
-      <ExploreWrapper pin={pin}>
-        <a href="/communities" rel="noopener noreferrer" target="_blank">
-          <Button size="small" type="primary" ghost>
-            <ExploreContent>
-              <ExploreIcon src={`${ICON_CMD}/telescope.svg`} />
-              <ExploreText>Explore All</ExploreText>
-            </ExploreContent>
-          </Button>
-        </a>
-      </ExploreWrapper>
-    </HeaderFuncs>
-    <PinButton pin={pin} />
+    <InnerWrapper>
+      <HeaderFuncs>
+        <SiteLogoWrapper pin={pin}>
+          <SiteLogo src={`${ICON_BASE}/sidebar/everyday.svg`} />
+        </SiteLogoWrapper>
+        <ExploreWrapper pin={pin}>
+          <a href="/communities" rel="noopener noreferrer" target="_blank">
+            <Button size="small" type="primary" ghost>
+              <ExploreContent>
+                <ExploreIcon src={`${ICON_CMD}/telescope.svg`} />
+                <ExploreText>Explore All</ExploreText>
+              </ExploreContent>
+            </Button>
+          </a>
+        </ExploreWrapper>
+      </HeaderFuncs>
+      <PinButton pin={pin} />
+    </InnerWrapper>
   </Wrapper>
 )
 

containers/Sidebar/styles/header.js

@@ -5,13 +5,15 @@ import { theme, cs } from '@utils'
 import { Wrapper as IndexWrapper } from './index'
 
 export const Wrapper = styled.div`
-  ${cs.flex()};
   margin-top: 14px;
   margin-bottom: ${({ pin }) => (pin ? '0' : '20px')};
   ${IndexWrapper}:hover & {
     margin-bottom: 4px;
   }
 `
+export const InnerWrapper = styled.div`
+  ${cs.flex('align-center')};
+`
 export const HeaderFuncs = styled.div`
   ${cs.flexGrow()};
 `

containers/Sidebar/styles/menu_list.js

@@ -1,7 +1,6 @@
 import styled from 'styled-components'
 
 export const Wrapper = styled.div`
-  margin-top: 0px;
   left: 0;
   position: relative;
   height: 100%;

containers/ThemeWrapper/GlobalStyle.js

@@ -139,8 +139,8 @@ const GlobalStyle = createGlobalStyle`
     color: ${theme('searchHighlight.doramonFg')};
   }
 
-  ${({ isMacOS }) =>
-    isMacOS ||
+  ${({ showCustomScrollbar }) =>
+    showCustomScrollbar ||
     css`
       ::-webkit-scrollbar {
         background: transparent;

containers/ThemeWrapper/index.js

@@ -17,9 +17,8 @@ import AntUIOverWrite from './AntUIOverWrite'
 import GlobalStyle from './GlobalStyle'
 
 const ThemeContainer = ({ children, theme: { themeData } }) => {
-  const { isMacOS } = usePlatform()
-
-  console.log('isMacOS: ', isMacOS)
+  const { isMacOS, isMobile } = usePlatform()
+  const showCustomScrollbar = !isMacOS || !isMobile
 
   return (
     <ThemeProvider theme={themeData}>
@@ -30,7 +29,7 @@ const ThemeContainer = ({ children, theme: { themeData } }) => {
         <div>{children}</div>
         <CodeSyxHighlight />
         <AntUIOverWrite />
-        <GlobalStyle isMacOS={isMacOS} />
+        <GlobalStyle showCustomScrollbar={showCustomScrollbar} />
       </React.Fragment>
     </ThemeProvider>
   )