chore: Merge branch 'tooltip' into dev

Author: mydearxym

components/Tooltip/styles/index.js

@@ -16,17 +16,17 @@ export const Wrapper = styled(Tippy)`
   }
   &[x-placement^='bottom'] {
     .tippy-arrow {
-      border-top-color: ${theme('tooltip.bg')};
+      border-bottom-color: ${theme('tooltip.bg')};
     }
   }
   &[x-placement^='left'] {
     .tippy-arrow {
-      border-top-color: ${theme('tooltip.bg')};
+      border-left-color: ${theme('tooltip.bg')};
     }
   }
   &[x-placement^='right'] {
     .tippy-arrow {
-      border-top-color: ${theme('tooltip.bg')};
+      border-right-color: ${theme('tooltip.bg')};
     }
   }
 `

components/UserBrief/SocialIcons.js

@@ -1,13 +1,11 @@
 import React from 'react'
 import R from 'ramda'
-import ReactTooltip from 'react-tooltip'
 
 import { ICON_CMD } from '@config'
-
 import { nilOrEmpty, SOCIAL_LISTS } from '@utils'
-import { Wrapper, Linker, SocialIcon } from './styles/social_icons'
 
-const tooltipOffset = JSON.stringify({ left: 3 })
+import Tooltip from '@components/Tooltip'
+import { Wrapper, Linker, SocialIcon } from './styles/social_icons'
 
 const DisplayIcon = ({ user, social }) => {
   if (user[social.key] && !R.contains(social.key, ['qq', 'weichat'])) {
@@ -25,17 +23,18 @@ const DisplayIcon = ({ user, social }) => {
     )
   }
   return (
-    <div
+    <Tooltip
       key={social.key}
-      data-tip={user.social[social.key]}
-      data-for="social_icons"
-      data-offset={tooltipOffset}
+      content={user.social[social.key]}
+      placement="bottom"
     >
-      <SocialIcon
-        src={`${ICON_CMD}/${social.key}.svg`}
-        active={!nilOrEmpty(user.social[social.key])}
-      />
-    </div>
+      <div>
+        <SocialIcon
+          src={`${ICON_CMD}/${social.key}.svg`}
+          active={!nilOrEmpty(user.social[social.key])}
+        />
+      </div>
+    </Tooltip>
   )
 }
 
@@ -44,7 +43,6 @@ const SocialIcons = ({ user }) => (
     {SOCIAL_LISTS.map(social => (
       <DisplayIcon key={social.key} user={user} social={social} />
     ))}
-    <ReactTooltip effect="solid" place="bottom" id="social_icons" />
   </Wrapper>
 )
 

containers/AccountViewer/Planets.js

@@ -1,8 +1,9 @@
 import React from 'react'
-import ReactTooltip from 'react-tooltip'
 import R from 'ramda'
 
 import { sortByIndex } from '@utils'
+import Tooltip from '@components/Tooltip'
+
 import {
   Wrapper,
   HeaderWrapper,
@@ -12,7 +13,6 @@ import {
   PlanetsIcon,
 } from './styles/planets'
 
-const tooltipOffset = JSON.stringify({ top: 10, left: 5 })
 const Planets = ({ subscribedCommunities, viewingType }) => {
   if (!subscribedCommunities) return null
 
@@ -38,17 +38,17 @@ const Planets = ({ subscribedCommunities, viewingType }) => {
       </HeaderWrapper>
       <IconList>
         {sortedCommunities.map(community => (
-          <div
+          <Tooltip
             key={community.raw}
-            data-tip={community.title}
-            data-for="planet_icon"
-            data-offset={tooltipOffset}
+            content={community.title}
+            placement="top"
           >
-            <PlanetsIcon src={community.logo} />
-          </div>
+            <div>
+              <PlanetsIcon src={community.logo} />
+            </div>
+          </Tooltip>
         ))}
       </IconList>
-      <ReactTooltip effect="solid" place="bottom" id="planet_icon" />
     </Wrapper>
   )
 }

containers/AccountViewer/index.js

@@ -6,7 +6,6 @@
 
 import React from 'react'
 import R from 'ramda'
-import ReactTooltip from 'react-tooltip'
 
 import { connectStore, buildLog } from '@utils'
 
@@ -41,7 +40,6 @@ const AccountViewerContainer = ({ accountViewer, user }) => {
     <AccountWrapper>
       {!R.isEmpty(userInfoData.id) && (
         <React.Fragment>
-          <ReactTooltip effect="solid" place="bottom" />
           <AccountContent>
             <UserBrief
               user={userInfoData}