feat(web): tooltip-redesign

Author: tractorss

src/lib/tooltip/index.tsx

@@ -1,6 +1,10 @@
 import React from "react";
 import styled, { css } from "styled-components";
-import { borderBox, small as smallStyle } from "../../styles/common-style";
+import {
+  borderBox,
+  fadeIn,
+  small as smallStyle,
+} from "../../styles/common-style";
 
 export interface TooltipBaseProps {
   place?: "left" | "right" | "top" | "bottom";
@@ -9,6 +13,82 @@ export interface TooltipBaseProps {
 
 const StyledText = styled.small``;
 
+const Tip = styled.div<TooltipBaseProps>`
+  content: "";
+  position: absolute;
+  border-width: 8px;
+  border-style: solid;
+
+  ::after {
+    content: "";
+    position: absolute;
+    border-style: solid;
+    border-width: 7px;
+  }
+
+  ${({ place, theme }) => css`
+    ${place === "top" &&
+    css`
+      top: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      border-color: ${theme.klerosUIComponentsStroke} transparent transparent
+        transparent;
+
+      ::after {
+        left: -7px;
+        top: -8.5px;
+        border-color: ${theme.klerosUIComponentsLightBlue} transparent
+          transparent transparent;
+      }
+    `}
+    ${place === "right" &&
+    css`
+      top: 50%;
+      right: 100%;
+      transform: translateY(-50%);
+      border-color: transparent ${theme.klerosUIComponentsStroke} transparent
+        transparent;
+
+      ::after {
+        left: -5.5px;
+        top: -7px;
+        border-color: transparent ${theme.klerosUIComponentsLightBlue}
+          transparent transparent;
+      }
+    `}
+    ${place === "bottom" &&
+    css`
+      left: 50%;
+      bottom: 100%;
+      transform: translateX(-50%);
+      border-color: transparent transparent ${theme.klerosUIComponentsStroke}
+        transparent;
+
+      ::after {
+        left: -7px;
+        top: -5.5px;
+        border-color: transparent transparent
+          ${theme.klerosUIComponentsLightBlue} transparent;
+      }
+    `}
+    ${place === "left" &&
+    css`
+      top: 50%;
+      left: 100%;
+      transform: translateY(-50%);
+      border-color: transparent transparent transparent
+        ${theme.klerosUIComponentsStroke};
+      ::after {
+        left: -8.5px;
+        top: -7px;
+        border-color: transparent transparent transparent
+          ${theme.klerosUIComponentsLightBlue};
+      }
+    `}
+  `}
+`;
+
 const StyledTooltip = styled.span<TooltipBaseProps>`
   ${borderBox}
   ${({ place, theme, small }) => css`
@@ -17,8 +97,9 @@ const StyledTooltip = styled.span<TooltipBaseProps>`
     z-index: 1;
     width: max-content;
     max-width: 240px;
-    background: ${theme.klerosUIComponentsPrimaryBlue};
-    border-radius: 3px;
+    background: ${theme.klerosUIComponentsLightBlue};
+    border: 1px solid ${theme.klerosUIComponentsStroke};
+    border-radius: 7px;
     padding: 13px 16px;
     display: flex;
     justify-content: center;
@@ -28,67 +109,32 @@ const StyledTooltip = styled.span<TooltipBaseProps>`
       ${smallStyle}
       font-weight: 100;
       text-align: ${small ? "center" : "left"};
-      color: ${theme.klerosUIComponentsWhiteBackground};
-    }
-
-    ::after {
-      content: "";
-      position: absolute;
-      border-width: 8px;
-      border-style: solid;
+      color: ${theme.klerosUIComponentsPrimaryText};
     }
 
     ${place === "top" &&
     css`
       bottom: calc(100% + 16px);
       left: 50%;
       transform: translateX(-50%);
-      ::after {
-        top: 100%;
-        left: 50%;
-        transform: translateX(-50%);
-        border-color: ${theme.klerosUIComponentsPrimaryBlue} transparent
-          transparent transparent;
-      }
     `}
     ${place === "right" &&
     css`
       top: 50%;
       left: calc(100% + 16px);
       transform: translateY(-50%);
-      ::after {
-        top: 50%;
-        right: 100%;
-        transform: translateY(-50%);
-        border-color: transparent ${theme.klerosUIComponentsPrimaryBlue}
-          transparent transparent;
-      }
     `}
     ${place === "bottom" &&
     css`
       top: calc(100% + 16px);
       left: 50%;
       transform: translateX(-50%);
-      ::after {
-        left: 50%;
-        bottom: 100%;
-        transform: translateX(-50%);
-        border-color: transparent transparent
-          ${theme.klerosUIComponentsPrimaryBlue} transparent;
-      }
     `}
     ${place === "left" &&
     css`
       top: 50%;
       right: calc(100% + 16px);
       transform: translateY(-50%);
-      ::after {
-        top: 50%;
-        left: 100%;
-        transform: translateY(-50%);
-        border-color: transparent transparent transparent
-          ${theme.klerosUIComponentsPrimaryBlue};
-      }
     `}
   `}
 `;
@@ -99,6 +145,7 @@ const Wrapper = styled.div`
 
   &:hover ${StyledTooltip} {
     visibility: visible;
+    animation: ${fadeIn} 200ms ease-in;
   }
 `;
 
@@ -116,8 +163,9 @@ const Tooltip: React.FC<TooltipProps> = ({
 }) => (
   <Wrapper {...props}>
     {children}
-    <StyledTooltip {...{ small, place }}>
-      <StyledText>{text}</StyledText>
+    <StyledTooltip {...{ small, place }} className="tooltip-container">
+      <Tip {...{ place }} />
+      <StyledText className="tooltip-text">{text}</StyledText>
     </StyledTooltip>
   </Wrapper>
 );

src/styles/common-style.ts

@@ -2,6 +2,7 @@ import {
   css,
   DefaultTheme,
   FlattenInterpolation,
+  keyframes,
   ThemeProps,
 } from "styled-components";
 
@@ -134,3 +135,15 @@ export const hoverWhiteBackground = css`
       props.theme.klerosUIComponentsWhiteBackground};
   }
 `;
+
+export const fadeIn = keyframes`
+  0%{
+    opacity: 0;
+  }
+  50%{
+    opacity: 0.5;
+  }
+  100%{
+    opacity: 1;
+  }
+`;