Skip to content

Commit

Permalink
Update default tooltip
Browse files Browse the repository at this point in the history
  • Loading branch information
Anboias committed Nov 15, 2024
1 parent 2d179ab commit 3cff078
Show file tree
Hide file tree
Showing 5 changed files with 96 additions and 86 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@
"ethers": "^5.7.2",
"immer": "^9.0.21",
"lodash": "^4.17.21",
"rc-tooltip": "^5.3.1",
"rc-tooltip": "^6.2.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-focus-lock": "^2.9.6",
Expand Down
23 changes: 23 additions & 0 deletions src/components/tooltip/bootstrap_white.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
.rc-tooltip-placement-top .rc-tooltip-arrow,
.rc-tooltip-placement-topLeft .rc-tooltip-arrow,
.rc-tooltip-placement-topRight .rc-tooltip-arrow {
transform: translate(-5%, 4px);
margin-left: -6px;
border-width: 6px 6px 0;
border-top-color: #0c1143;
}

.rc-tooltip-placement-bottom .rc-tooltip-arrow,
.rc-tooltip-placement-bottomLeft .rc-tooltip-arrow,
.rc-tooltip-placement-bottomRight .rc-tooltip-arrow {
transform: translate(-5%, -4px);
margin-left: -6px;
border-width: 0 6px 6px;
border-bottom-color: #0c1143;
}

.rc-tooltip,
.rc-tooltip-inner {
background-color: transparent;
border: none;
}
36 changes: 4 additions & 32 deletions src/components/tooltip/tooltip.module.scss
Original file line number Diff line number Diff line change
@@ -1,39 +1,11 @@
@import '../../styles/variables.module.scss';
@import '../../styles/fonts.module.scss';

.tooltip {
font-size: $text-small !important;
max-width: 200px;
}

.overlayWrapper {
padding: $space-sm;
max-width: $max-sm;
}

.tooltipChecklist {
.tooltipItem:not(:last-child) {
margin-bottom: $space-xs;
}
}

.tooltipItem {
display: flex;
align-items: center;

& > img {
height: 15px;
margin-top: -1px;
vertical-align: middle;
}

& > div {
margin-left: $space-sm;
}
}

.labelChecked {
color: $secondary-black-color;
}

.labelUnchecked {
color: $black-color;
@include font-body-15;
color: $color-base-light;
}
19 changes: 12 additions & 7 deletions src/components/tooltip/tooltip.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import { ReactElement } from 'react';
import RCTooltip from 'rc-tooltip';
// Additional styles that require access to CSS variables
import styles from './tooltip.module.scss';
// NOTE: This is required for basic tooltip styling
import 'rc-tooltip/assets/bootstrap_white.css';
import { useWindowDimensions } from '../../hooks/use-window-dimensions';
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
import './bootstrap_white.css'; // Override basic tooltip styling

type Props = {
children: ReactElement;
Expand All @@ -14,19 +15,23 @@ const Tooltip = ({ children, overlay }: Props) => {
// NOTE: rc-tooltip requires us to override default styles directly using objects
// https://github.com/react-component/tooltip#props
const overlayInnerStyle = {
alignItems: 'center',
background: 'linear-gradient(76.31deg, #f3f3f3 36.47%, #c3c4c3 99.02%)',
display: 'flex',
alignItems: 'center',
background: '#0C1143',
padding: '12px 16px',
};

const { isMobile } = useWindowDimensions();

// NOTE: rc-tooltip can be debugged by setting a 'visible' (boolean) prop
return (
<RCTooltip
overlay={<div className={styles.overlayWrapper}>{overlay}</div>}
placement="bottom"
placement="bottomRight"
overlayClassName={styles.tooltip}
overlayInnerStyle={overlayInnerStyle}
mouseEnterDelay={0.2}
align={{ offset: isMobile ? [4, 6] : [18, 6] }}
>
{children}
</RCTooltip>
Expand Down
102 changes: 56 additions & 46 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -1133,13 +1133,20 @@
resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==

"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.1", "@babel/runtime@^7.11.1", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.6", "@babel/runtime@^7.16.3", "@babel/runtime@^7.17.2", "@babel/runtime@^7.18.3", "@babel/runtime@^7.21.0", "@babel/runtime@^7.23.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.6", "@babel/runtime@^7.16.3", "@babel/runtime@^7.17.2", "@babel/runtime@^7.21.0", "@babel/runtime@^7.23.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
version "7.23.7"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.7.tgz#dd7c88deeb218a0f8bd34d5db1aa242e0f203193"
integrity sha512-w06OXVOFso7LcbzMiDGt+3X7Rh7Ho8MmgPoWU3rarH+8upf+wSU/grlGbWzQyr3DkdN6ZeuMFjpdwW0Q+HxobA==
dependencies:
regenerator-runtime "^0.14.0"

"@babel/runtime@^7.11.1", "@babel/runtime@^7.18.0", "@babel/runtime@^7.18.3", "@babel/runtime@^7.20.7":
version "7.26.0"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.26.0.tgz#8600c2f595f277c60815256418b85356a65173c1"
integrity sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==
dependencies:
regenerator-runtime "^0.14.0"

"@babel/template@^7.22.15", "@babel/template@^7.3.3":
version "7.22.15"
resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.15.tgz#09576efc3830f0430f4548ef971dde1350ef2f38"
Expand Down Expand Up @@ -2687,6 +2694,27 @@
schema-utils "^3.0.0"
source-map "^0.7.3"

"@rc-component/portal@^1.1.0":
version "1.1.2"
resolved "https://registry.yarnpkg.com/@rc-component/portal/-/portal-1.1.2.tgz#55db1e51d784e034442e9700536faaa6ab63fc71"
integrity sha512-6f813C0IsasTZms08kfA8kPAGxbbkYToa8ALaiDIGGECU4i9hj8Plgbx0sNJDrey3EtHO30hmdaxtT0138xZcg==
dependencies:
"@babel/runtime" "^7.18.0"
classnames "^2.3.2"
rc-util "^5.24.4"

"@rc-component/trigger@^2.0.0":
version "2.2.5"
resolved "https://registry.yarnpkg.com/@rc-component/trigger/-/trigger-2.2.5.tgz#5ebe383e563e667b3fa24b6b32afedbab378a92e"
integrity sha512-F1EJ4KjFpGAHAjuKvOyZB/6IZDkVx0bHl0M4fQM5wXcmm7lgTgVSSnR3bXwdmS6jOJGHOqfDxIJW3WUvwMIXhQ==
dependencies:
"@babel/runtime" "^7.23.2"
"@rc-component/portal" "^1.1.0"
classnames "^2.3.2"
rc-motion "^2.0.0"
rc-resize-observer "^1.3.1"
rc-util "^5.38.0"

"@rollup/plugin-babel@^5.2.0":
version "5.3.1"
resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz#04bc0608f4aa4b2e4b1aebf284344d0f68fda283"
Expand Down Expand Up @@ -4988,7 +5016,6 @@ anymatch@^3.0.3, anymatch@^3.1.3, anymatch@~3.1.2:

"api3-dao@git+https://github.com/api3dao/api3-dao.git#0b8bb17fbda0161d5d9fff00ed4562b91cc27af6":
version "0.1.0"
uid "0b8bb17fbda0161d5d9fff00ed4562b91cc27af6"
resolved "git+https://github.com/api3dao/api3-dao.git#0b8bb17fbda0161d5d9fff00ed4562b91cc27af6"

arch@^2.2.0:
Expand Down Expand Up @@ -5899,7 +5926,7 @@ classic-level@^1.2.0:
napi-macros "^2.2.2"
node-gyp-build "^4.3.0"

classnames@2.x, classnames@^2.2.1, classnames@^2.2.6, classnames@^2.3.1, classnames@^2.3.2:
classnames@^2.2.1, classnames@^2.3.1, classnames@^2.3.2:
version "2.5.1"
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
Expand Down Expand Up @@ -6897,11 +6924,6 @@ dom-accessibility-api@^0.5.6, dom-accessibility-api@^0.5.9:
resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz#5a7429e6066eb3664d911e33fb0e45de8eb08453"
integrity sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==

dom-align@^1.7.0:
version "1.12.4"
resolved "https://registry.yarnpkg.com/dom-align/-/dom-align-1.12.4.tgz#3503992eb2a7cfcb2ed3b2a6d21e0b9c00d54511"
integrity sha512-R8LUSEay/68zE5c8/3BDxiTEvgb4xZTF0RKmAHfiEVN3klfIpXfi2/QCoiWPccVQ0J/ZGdz9OjzL4uJEP/MRAw==

dom-converter@^0.2.0:
version "0.2.0"
resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768"
Expand Down Expand Up @@ -12384,50 +12406,38 @@ raw-body@^2.4.1:
iconv-lite "0.4.24"
unpipe "1.0.0"

rc-align@^4.0.0:
version "4.0.15"
resolved "https://registry.yarnpkg.com/rc-align/-/rc-align-4.0.15.tgz#2bbd665cf85dfd0b0244c5a752b07565e9098577"
integrity sha512-wqJtVH60pka/nOX7/IspElA8gjPNQKIx/ZqJ6heATCkXpe1Zg4cPVrMD2vC96wjsFFL8WsmhPbx9tdMo1qqlIA==
dependencies:
"@babel/runtime" "^7.10.1"
classnames "2.x"
dom-align "^1.7.0"
rc-util "^5.26.0"
resize-observer-polyfill "^1.5.1"

rc-motion@^2.0.0:
version "2.9.0"
resolved "https://registry.yarnpkg.com/rc-motion/-/rc-motion-2.9.0.tgz#9e18a1b8d61e528a97369cf9a7601e9b29205710"
integrity sha512-XIU2+xLkdIr1/h6ohPZXyPBMvOmuyFZQ/T0xnawz+Rh+gh4FINcnZmMT5UTIj6hgI0VLDjTaPeRd+smJeSPqiQ==
version "2.9.3"
resolved "https://registry.yarnpkg.com/rc-motion/-/rc-motion-2.9.3.tgz#b1bdaf816f1ccb3e4b3b0c531c3037a59286379e"
integrity sha512-rkW47ABVkic7WEB0EKJqzySpvDqwl60/tdkY7hWP7dYnh5pm0SzJpo54oW3TDUGXV5wfxXFmMkxrzRRbotQ0+w==
dependencies:
"@babel/runtime" "^7.11.1"
classnames "^2.2.1"
rc-util "^5.21.0"
rc-util "^5.43.0"

rc-tooltip@^5.3.1:
version "5.3.1"
resolved "https://registry.yarnpkg.com/rc-tooltip/-/rc-tooltip-5.3.1.tgz#3dde4e1865f79cd23f202bba4e585c2a1173024b"
integrity sha512-e6H0dMD38EPaSPD2XC8dRfct27VvT2TkPdoBSuNl3RRZ5tspiY/c5xYEmGC0IrABvMBgque4Mr2SMZuliCvoiQ==
rc-resize-observer@^1.3.1:
version "1.4.0"
resolved "https://registry.yarnpkg.com/rc-resize-observer/-/rc-resize-observer-1.4.0.tgz#7bba61e6b3c604834980647cce6451914750d0cc"
integrity sha512-PnMVyRid9JLxFavTjeDXEXo65HCRqbmLBw9xX9gfC4BZiSzbLXKzW3jPz+J0P71pLbD5tBMTT+mkstV5gD0c9Q==
dependencies:
"@babel/runtime" "^7.11.2"
classnames "^2.3.1"
rc-trigger "^5.3.1"
"@babel/runtime" "^7.20.7"
classnames "^2.2.1"
rc-util "^5.38.0"
resize-observer-polyfill "^1.5.1"

rc-trigger@^5.3.1:
version "5.3.4"
resolved "https://registry.yarnpkg.com/rc-trigger/-/rc-trigger-5.3.4.tgz#6b4b26e32825677c837d1eb4d7085035eecf9a61"
integrity sha512-mQv+vas0TwKcjAO2izNPkqR4j86OemLRmvL2nOzdP9OWNWA1ivoTt5hzFqYNW9zACwmTezRiN8bttrC7cZzYSw==
rc-tooltip@^6.2.1:
version "6.2.1"
resolved "https://registry.yarnpkg.com/rc-tooltip/-/rc-tooltip-6.2.1.tgz#9a8f0335c86443a0c20c2557933205f645a381b7"
integrity sha512-rws0duD/3sHHsD905Nex7FvoUGy2UBQRhTkKxeEvr2FB+r21HsOxcDJI0TzyO8NHhnAA8ILr8pfbSBg5Jj5KBg==
dependencies:
"@babel/runtime" "^7.18.3"
classnames "^2.2.6"
rc-align "^4.0.0"
rc-motion "^2.0.0"
rc-util "^5.19.2"
"@babel/runtime" "^7.11.2"
"@rc-component/trigger" "^2.0.0"
classnames "^2.3.1"

rc-util@^5.19.2, rc-util@^5.21.0, rc-util@^5.26.0:
version "5.38.1"
resolved "https://registry.yarnpkg.com/rc-util/-/rc-util-5.38.1.tgz#4915503b89855f5c5cd9afd4c72a7a17568777bb"
integrity sha512-e4ZMs7q9XqwTuhIK7zBIVFltUtMSjphuPPQXHoHlzRzNdOwUxDejo0Zls5HYaJfRKNURcsS/ceKVULlhjBrxng==
rc-util@^5.24.4, rc-util@^5.38.0, rc-util@^5.43.0:
version "5.43.0"
resolved "https://registry.yarnpkg.com/rc-util/-/rc-util-5.43.0.tgz#bba91fbef2c3e30ea2c236893746f3e9b05ecc4c"
integrity sha512-AzC7KKOXFqAdIBqdGWepL9Xn7cm3vnAmjlHqUnoQaTMZYhM4VlXGLkkHHxj/BZ7Td0+SOPKB4RGPboBVKT9htw==
dependencies:
"@babel/runtime" "^7.18.3"
react-is "^18.2.0"
Expand Down Expand Up @@ -12547,9 +12557,9 @@ react-is@^17.0.1:
integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==

react-is@^18.2.0:
version "18.2.0"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
version "18.3.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==

react-number-format@^4.9.4:
version "4.9.4"
Expand Down

0 comments on commit 3cff078

Please sign in to comment.