Merge pull request #8684 from vdusart/feat/convert-Tooltip-component-to-ChakraUI

Convert tooltip component to chakra UI

Author: pettinarip

src/components/StablecoinBoxGrid.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react"
-import { Box, Flex, Heading } from "@chakra-ui/react"
+import { Box, Flex, Heading, useColorModeValue } from "@chakra-ui/react"
 import { useI18next } from "gatsby-plugin-react-i18next"
 import Link, { navigate } from "./Link"
 import Emoji from "./Emoji"
@@ -148,6 +148,8 @@ const GridItem: React.FC<IPropsGridItem> = ({
   const handleClick = (): void => {
     callback(index)
   }
+  const shadow = useColorModeValue("tableBox.light", "tableBox.dark")
+
   return (
     <Flex
       id={`type-${index}`}
@@ -175,7 +177,7 @@ const GridItem: React.FC<IPropsGridItem> = ({
         background: isOpen ? color : "ednBackground",
         transition: isOpen ? "auto" : "transform 0.5s",
         transform: isOpen ? "auto" : "skewX(-5deg)",
-        boxShadow: "tableBoxShadow",
+        boxShadow: shadow,
       }}
     >
       {isOpen ? (

src/components/Tooltip.tsx

@@ -1,58 +1,7 @@
-import React, { MouseEventHandler, ReactNode, useState } from "react"
-import styled from "@emotion/styled"
+import React, { ReactNode, useState } from "react"
+import { Box, useColorModeValue } from "@chakra-ui/react"
 import * as utils from "../utils/isMobile"
 
-const Container = styled.div`
-  position: relative;
-  display: inline-flex;
-  user-select: none;
-  cursor: pointer;
-`
-
-const Content = styled.div`
-  text-align: center;
-  white-space: normal;
-  width: 200px;
-  color: ${({ theme }) => theme.colors.text};
-  background-color: ${({ theme }) => theme.colors.background};
-  box-shadow: ${({ theme }) => theme.colors.tableBoxShadow};
-  position: absolute;
-  z-index: 10;
-  padding: 1rem 0.5rem;
-  text-transform: none;
-  font-size: ${({ theme }) => theme.fontSizes.s};
-  font-weight: 500;
-  cursor: default;
-  border-radius: 4px;
-  bottom: calc(100% + 1rem);
-  left: 25%;
-  bottom: 125%;
-  transform: translateX(-50%);
-  @media (max-width: ${({ theme }) => theme.breakpoints.m}) {
-    width: 140px;
-  }
-`
-
-const Arrow = styled.span`
-  position: absolute;
-  bottom: -0.5rem;
-  left: calc(50% - 6px);
-  border-right: 10px solid transparent;
-  border-top: 10px solid ${({ theme }) => theme.colors.background};
-  border-left: 10px solid transparent;
-`
-
-// Invisible full screen div "below" the clickable link
-// Added so clicking away anywhere will hide Tooltip
-const ModalReturn = styled.div`
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-`
-
 export interface IProps {
   content: ReactNode
   children?: React.ReactNode
@@ -62,26 +11,74 @@ export interface IProps {
 const Tooltip: React.FC<IProps> = ({ content, children }) => {
   const [isVisible, setIsVisible] = useState<boolean>(false)
   const isMobile = utils.isMobile()
+  const shadow = useColorModeValue("tableBox.light", "tableBox.dark")
 
   return (
     <>
       {isVisible && isMobile && (
-        <ModalReturn onClick={() => setIsVisible(false)} />
+        // Invisible full screen div "below" the clickable link
+        // Added so clicking away anywhere will hide Tooltip
+        <Box
+          position="fixed"
+          top={0}
+          left={0}
+          w="full"
+          h="full"
+          zIndex={1}
+          onClick={() => setIsVisible(false)}
+        />
       )}
-      <Container
+      <Box
+        position="relative"
+        display="inline-flex"
+        userSelect="none"
+        cursor="pointer"
         title="More info"
         onMouseEnter={!isMobile ? () => setIsVisible(true) : undefined}
         onMouseLeave={!isMobile ? () => setIsVisible(false) : undefined}
         onClick={isMobile ? () => setIsVisible(!isVisible) : undefined}
       >
         {children}
         {isVisible && (
-          <Content>
-            <Arrow />
+          <Box
+            textAlign="center"
+            whiteSpace="normal"
+            w={{ base: "140px", md: "200px" }}
+            color="text"
+            bg="background"
+            boxShadow={shadow}
+            position="absolute"
+            zIndex="docked"
+            py={4}
+            px={2}
+            textTransform="none"
+            fontSize="sm"
+            fontWeight="medium"
+            cursor="default"
+            borderRadius="base"
+            bottom="125%"
+            left="25%"
+            transform="translateX(-50%)"
+          >
+            <Box
+              as="span"
+              position="absolute"
+              bottom={-2}
+              left="calc(50% - 6px)"
+              borderRightWidth={10}
+              borderRightStyle="solid"
+              borderRightColor="transparent"
+              borderTopWidth={10}
+              borderTopStyle="solid"
+              borderTopColor="background"
+              borderLeftWidth={10}
+              borderLeftStyle="solid"
+              borderLeftColor="transparent"
+            />
             {content}
-          </Content>
+          </Box>
         )}
-      </Container>
+      </Box>
     </>
   )
 }