From 559bbf07397b6692c97e849425a39191b90ed7e2 Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Tue, 17 Dec 2024 18:17:59 +0530 Subject: [PATCH 1/4] feat(web): checkmark-animation --- src/lib/form/checkbox.tsx | 64 ++++++++++++++++++++++++++++++--------- 1 file changed, 50 insertions(+), 14 deletions(-) diff --git a/src/lib/form/checkbox.tsx b/src/lib/form/checkbox.tsx index 5d4eae4..5d66649 100644 --- a/src/lib/form/checkbox.tsx +++ b/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` 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 = ({ {label} - + + + ); From cd16d8f65b08ef157d1b463ac268fed3653553ec Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Wed, 18 Dec 2024 13:18:03 +0530 Subject: [PATCH 2/4] feat(web): tooltip-redesign --- src/lib/tooltip/index.tsx | 130 +++++++++++++++++++++++++------------ src/styles/common-style.ts | 13 ++++ 2 files changed, 102 insertions(+), 41 deletions(-) diff --git a/src/lib/tooltip/index.tsx b/src/lib/tooltip/index.tsx index 2821aba..046e09e 100644 --- a/src/lib/tooltip/index.tsx +++ b/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` + 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` ${borderBox} ${({ place, theme, small }) => css` @@ -17,8 +97,9 @@ const StyledTooltip = styled.span` 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,14 +109,7 @@ const StyledTooltip = styled.span` ${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" && @@ -43,52 +117,24 @@ const StyledTooltip = styled.span` 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 = ({ }) => ( {children} - - {text} + + + {text} ); diff --git a/src/styles/common-style.ts b/src/styles/common-style.ts index 64ffdac..8be67e5 100644 --- a/src/styles/common-style.ts +++ b/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; + } +`; From 0480f8f72ca148380ddd4e7d6c7338ff02a37b1d Mon Sep 17 00:00:00 2001 From: alcercu <333aleix333@gmail.com> Date: Wed, 18 Dec 2024 10:59:32 +0100 Subject: [PATCH 3/4] feat: use transition instead of animation for the tooltips --- src/lib/tooltip/index.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/src/lib/tooltip/index.tsx b/src/lib/tooltip/index.tsx index 046e09e..123d0ff 100644 --- a/src/lib/tooltip/index.tsx +++ b/src/lib/tooltip/index.tsx @@ -1,10 +1,6 @@ import React from "react"; import styled, { css } from "styled-components"; -import { - borderBox, - fadeIn, - small as smallStyle, -} from "../../styles/common-style"; +import { borderBox, small as smallStyle } from "../../styles/common-style"; export interface TooltipBaseProps { place?: "left" | "right" | "top" | "bottom"; @@ -91,8 +87,10 @@ const Tip = styled.div` const StyledTooltip = styled.span` ${borderBox} + transition: opacity 0.5s, visibility 0.5s; ${({ place, theme, small }) => css` visibility: hidden; + opacity: 0%; position: absolute; z-index: 1; width: max-content; @@ -145,7 +143,7 @@ const Wrapper = styled.div` &:hover ${StyledTooltip} { visibility: visible; - animation: ${fadeIn} 200ms ease-in; + opacity: 100%; } `; From fe4127f73ddccddfadc8b6a65520e97ed3281791 Mon Sep 17 00:00:00 2001 From: alcercu <333aleix333@gmail.com> Date: Wed, 18 Dec 2024 11:16:49 +0100 Subject: [PATCH 4/4] fix: reduce time and add timing function --- src/lib/tooltip/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/tooltip/index.tsx b/src/lib/tooltip/index.tsx index 123d0ff..884b357 100644 --- a/src/lib/tooltip/index.tsx +++ b/src/lib/tooltip/index.tsx @@ -87,7 +87,7 @@ const Tip = styled.div` const StyledTooltip = styled.span` ${borderBox} - transition: opacity 0.5s, visibility 0.5s; + transition: opacity 200ms ease-in, visibility 200ms ease-in; ${({ place, theme, small }) => css` visibility: hidden; opacity: 0%;