From 22711f1b3f1198eb80a78b3fcaaca01ed3761fbf Mon Sep 17 00:00:00 2001 From: Bogdan Iasinovschi Date: Fri, 15 Nov 2024 13:04:32 +0200 Subject: [PATCH] Update items tooltip --- public/checkbox-empty.svg | 14 ++++++-- public/checkbox-filled.svg | 16 ++++++--- .../tooltip/tooltip-checklist.module.scss | 33 +++++++++++++++++++ src/components/tooltip/tooltip-checklist.tsx | 19 +++++++---- src/components/tooltip/tooltip.module.scss | 13 +++++++- src/components/tooltip/tooltip.tsx | 7 ++-- 6 files changed, 85 insertions(+), 17 deletions(-) create mode 100644 src/components/tooltip/tooltip-checklist.module.scss diff --git a/public/checkbox-empty.svg b/public/checkbox-empty.svg index fc0f5f25..efaab954 100644 --- a/public/checkbox-empty.svg +++ b/public/checkbox-empty.svg @@ -1,3 +1,13 @@ - - + + + + + + + \ No newline at end of file diff --git a/public/checkbox-filled.svg b/public/checkbox-filled.svg index 02d58c2e..b5fce397 100644 --- a/public/checkbox-filled.svg +++ b/public/checkbox-filled.svg @@ -1,4 +1,12 @@ - - - - + + + + + + + \ No newline at end of file diff --git a/src/components/tooltip/tooltip-checklist.module.scss b/src/components/tooltip/tooltip-checklist.module.scss new file mode 100644 index 00000000..8342e3b9 --- /dev/null +++ b/src/components/tooltip/tooltip-checklist.module.scss @@ -0,0 +1,33 @@ +@import '../../styles/variables.module.scss'; +@import '../../styles/fonts.module.scss'; + +.tooltipChecklist { + list-style-type: none; + padding: 4px; + margin: 0; + display: flex; + flex-direction: column; + gap: 8px; + + @media (min-width: $md) { + padding: 8px 4px; + } +} + +.checklistItem { + display: flex; + align-items: flex-start; + gap: 8px; + + > img { + transform: translateY(2px); + } + + @media (min-width: $md) { + @include font-body-12; + } +} + +.checked { + color: $color-gray-200; +} diff --git a/src/components/tooltip/tooltip-checklist.tsx b/src/components/tooltip/tooltip-checklist.tsx index f25e4868..d1ccf37b 100644 --- a/src/components/tooltip/tooltip-checklist.tsx +++ b/src/components/tooltip/tooltip-checklist.tsx @@ -1,7 +1,8 @@ import { ReactElement } from 'react'; import Tooltip from './tooltip'; import { images } from '../../utils'; -import styles from './tooltip.module.scss'; +import styles from './tooltip-checklist.module.scss'; +import classNames from 'classnames'; interface Props { children: ReactElement; @@ -13,20 +14,24 @@ interface Props { const TooltipChecklist = ({ children, items }: Props) => { const content = ( -
+
+ ); - return {children}; + return ( + + {children} + + ); }; export default TooltipChecklist; diff --git a/src/components/tooltip/tooltip.module.scss b/src/components/tooltip/tooltip.module.scss index d272b6a0..a9e4da01 100644 --- a/src/components/tooltip/tooltip.module.scss +++ b/src/components/tooltip/tooltip.module.scss @@ -1,11 +1,22 @@ @import '../../styles/variables.module.scss'; @import '../../styles/fonts.module.scss'; -.tooltip { +.defaultTooltipType { + width: 100%; max-width: 200px; } +.itemsTooltipType { + width: 100%; + max-width: 312px; + + @media (min-width: $md) { + max-width: 392px; + } +} + .overlayWrapper { @include font-body-15; color: $color-base-light; + padding: 4px 6px; } diff --git a/src/components/tooltip/tooltip.tsx b/src/components/tooltip/tooltip.tsx index 6f1e3389..d7dc67b5 100644 --- a/src/components/tooltip/tooltip.tsx +++ b/src/components/tooltip/tooltip.tsx @@ -1,6 +1,7 @@ import { ReactElement } from 'react'; import RCTooltip from 'rc-tooltip'; import { useWindowDimensions } from '../../hooks/use-window-dimensions'; +import classNames from 'classnames'; import styles from './tooltip.module.scss'; // Additional styles that require access to CSS variables import 'rc-tooltip/assets/bootstrap_white.css'; // NOTE: This is required for basic tooltip styling @@ -9,16 +10,16 @@ import './bootstrap_white.css'; // Override basic tooltip styling type Props = { children: ReactElement; overlay: ReactElement | string; + type?: 'default' | 'items' | 'full'; }; -const Tooltip = ({ children, overlay }: Props) => { +const Tooltip = ({ children, overlay, type = 'default' }: Props) => { // NOTE: rc-tooltip requires us to override default styles directly using objects // https://github.com/react-component/tooltip#props const overlayInnerStyle = { display: 'flex', alignItems: 'center', background: '#0C1143', - padding: '12px 16px', }; const { isMobile } = useWindowDimensions(); @@ -28,7 +29,7 @@ const Tooltip = ({ children, overlay }: Props) => { {overlay}} placement="bottomRight" - overlayClassName={styles.tooltip} + overlayClassName={classNames([styles[`${type}TooltipType`]])} overlayInnerStyle={overlayInnerStyle} mouseEnterDelay={0.2} align={{ offset: isMobile ? [4, 6] : [18, 6] }}