Feat/tooltip redesign and check animation

src/lib/form/checkbox.tsx

@@ -1,5 +1,5 @@
 import React, { InputHTMLAttributes } from "react";
-import styled, { css } from "styled-components";
+import styled, { css, keyframes } from "styled-components";
 import CheckmarkIcon from "../../assets/svgs/form/checkmark.svg";
 import { borderBox, svg } from "../../styles/common-style";
 
@@ -35,42 +35,76 @@ const HiddenInput = styled.input.attrs({ type: "checkbox" })`
   width: 0;
 `;
 
-const StyledCheckmark = styled(CheckmarkIcon)<
-  CheckboxBaseProps & { $small?: boolean }
->`
-  ${svg}
+const CheckmarkContainer = styled.div<CheckboxBaseProps & { $small?: boolean }>`
   position: absolute;
   top: 0;
   left: 0;
   border-radius: 3px;
   border: 1px solid ${({ theme }) => theme.klerosUIComponentsStroke};
+  overflow: hidden;
   ${({ $small }) =>
     $small
       ? css`
-          padding: 0 3px;
           width: 16px;
           height: 16px;
         `
       : css`
-          padding: 0 4px;
           width: 24px;
           height: 24px;
         `}
 
+  ${({ theme, checked }) =>
+    checked &&
+    css`
+      background: ${theme.klerosUIComponentsPrimaryBlue};
+      border: none;
+      :after {
+        display: block;
+      }
+    `}
+`;
+
+const bouncedIn = keyframes`
+  0%{
+      transform: translateY(100%);
+  }
+  50%{
+    transform: translateY(-5px);
+  }
+  100%{
+    transform: translateY(0);
+  }
+`;
+
+const StyledCheckmark = styled(CheckmarkIcon)<
+  CheckboxBaseProps & { $small?: boolean }
+>`
+  ${svg}
+
+  position: absolute;
+  top: 1px;
+  width: 100%;
+  height: 100%;
+
   ${({ theme, checked }) =>
     checked
       ? css`
-          fill: ${({ theme }) => theme.klerosUIComponentsWhiteBackground};
+          fill: ${theme.klerosUIComponentsWhiteBackground};
           background: ${theme.klerosUIComponentsPrimaryBlue};
-          border: none;
-
-          :after {
-            display: block;
-          }
+          animation: ${bouncedIn} 200ms ease-out;
         `
       : css`
           fill: transparent;
         `}
+
+  ${({ $small }) =>
+    $small
+      ? css`
+          padding: 0 3px;
+        `
+      : css`
+          padding: 0 4px;
+        `}
 `;
 
 interface CheckboxProps
@@ -89,7 +123,9 @@ const Checkbox: React.FC<CheckboxProps> = ({
   <Wrapper {...{ small, className }}>
     {label}
     <HiddenInput checked={checked} {...props} />
-    <StyledCheckmark $small={small} checked={checked} />
+    <CheckmarkContainer $small={small} checked={checked}>
+      <StyledCheckmark $small={small} checked={checked} />
+    </CheckmarkContainer>
   </Wrapper>
 );
 

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;
+  }
+`;