Rebrand tooltips

package.json

@@ -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",

src/components/tooltip/bootstrap_white.css

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

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;
+  }
+}
+
+.unchecked {
+  color: $color-gray-200;
+}

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 = (
-    <div className={styles.tooltipChecklist}>
+    <ul className={styles.tooltipChecklist}>
       {items.map((item, i) => (
-        <div key={i} className={styles.tooltipItem}>
+        <li key={i} className={classNames(styles.checklistItem, { [styles.unchecked]: !item.checked })}>
           <img
             src={item.checked ? images.checkboxFilled : images.checkboxEmpty}
             alt={item.checked ? 'checked' : 'unchecked'}
           />
-          <div className={item.checked ? styles.labelChecked : styles.labelUnchecked}>{item.label}</div>
-        </div>
+          <span>{item.label}</span>
+        </li>
       ))}
-    </div>
+    </ul>
   );
 
-  return <Tooltip overlay={content}>{children}</Tooltip>;
+  return (
+    <Tooltip overlay={content} type="items">
+      {children}
+    </Tooltip>
+  );
 };
 
 export default TooltipChecklist;

src/components/tooltip/tooltip.module.scss

@@ -1,39 +1,22 @@
 @import '../../styles/variables.module.scss';
+@import '../../styles/fonts.module.scss';
 
-.tooltip {
-  font-size: $text-small !important;
+.defaultTooltipType {
+  width: 100%;
+  max-width: 200px;
 }
 
-.overlayWrapper {
-  padding: $space-sm;
-  max-width: $max-sm;
-}
+.itemsTooltipType {
+  width: 100%;
+  max-width: 312px;
 
-.tooltipChecklist {
-  .tooltipItem:not(:last-child) {
-    margin-bottom: $space-xs;
+  @media (min-width: $md) {
+    max-width: 392px;
   }
 }
 
-.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;
+.overlayWrapper {
+  @include font-body-15;
+  color: $color-base-light;
+  padding: 4px 6px;
 }

src/components/tooltip/tooltip.tsx

@@ -1,32 +1,38 @@
 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 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
+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 = {
-    alignItems: 'center',
-    background: 'linear-gradient(76.31deg, #f3f3f3 36.47%, #c3c4c3 99.02%)',
     display: 'flex',
+    alignItems: 'center',
+    background: '#0C1143',
   };
 
+  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"
-      overlayClassName={styles.tooltip}
+      placement="bottomRight"
+      overlayClassName={classNames([styles[`${type}TooltipType`]])}
       overlayInnerStyle={overlayInnerStyle}
       mouseEnterDelay={0.2}
+      align={{ offset: isMobile ? [4, 6] : [18, 6] }}
     >
       {children}
     </RCTooltip>

src/pages/dashboard/staking/staking-pool.module.scss

@@ -82,6 +82,8 @@
 
   & img {
     margin-left: 4px;
+    height: fit-content;
+    margin: auto 0;
   }
 }