From f7ab7edf538996b1314e1761798ce84be5217e63 Mon Sep 17 00:00:00 2001
From: 2nthony <ant.hu@outlook.com>
Date: Fri, 5 Jul 2024 18:17:24 +0800
Subject: [PATCH] fix use tooltip instead of popup #1396 (#1397)

* tooltip font

* related links tooltip

* username

* treasury slash table index

* custom label

* tooltip pass className
---
 site/src/components/RelatedLinks.jsx          | 24 ++++-------
 site/src/components/Tooltip/index.jsx         |  3 +-
 site/src/components/Tooltip/styled.jsx        |  3 +-
 site/src/components/User/Username.jsx         | 28 +++++++------
 site/src/pages/Overview/CustomLabel/index.jsx | 42 ++++++++-----------
 site/src/pages/TreasurySlash/SlashTable.jsx   | 34 +++++++--------
 6 files changed, 61 insertions(+), 73 deletions(-)

diff --git a/site/src/components/RelatedLinks.jsx b/site/src/components/RelatedLinks.jsx
index 53fe3f056..98271cd7f 100644
--- a/site/src/components/RelatedLinks.jsx
+++ b/site/src/components/RelatedLinks.jsx
@@ -1,11 +1,10 @@
 import React from "react";
 import styled from "styled-components";
-import { Popup } from "semantic-ui-react";
 
 import ExternalLink from "./ExternalLink";
 import getLinkNameAndSrc from "../utils/link";
-import { useDisablePopup } from "../utils/hooks";
 import ImageWithDark from "./ImageWithDark";
+import Tooltip from "./Tooltip";
 
 const Wrapper = styled.div`
   display: flex;
@@ -24,25 +23,18 @@ const CustomImage = styled(ImageWithDark)`
 `;
 
 const RelatedLinks = ({ links }) => {
-  const disabledPopup = useDisablePopup();
   return (
     <Wrapper>
       {(links || []).map((item, index) => {
         const [, src] = getLinkNameAndSrc(item.link);
         return (
-          <Popup
-            content={item.description}
-            size="mini"
-            disabled={disabledPopup || !item.description}
-            trigger={
-              <div>
-                <ExternalLink href={item.link}>
-                  <CustomImage src={src} />
-                </ExternalLink>
-              </div>
-            }
-            key={index}
-          />
+          <Tooltip key={index} tooltipContent={item.description}>
+            <div>
+              <ExternalLink href={item.link}>
+                <CustomImage src={src} />
+              </ExternalLink>
+            </div>
+          </Tooltip>
         );
       })}
     </Wrapper>
diff --git a/site/src/components/Tooltip/index.jsx b/site/src/components/Tooltip/index.jsx
index 9870e692b..bf74db694 100644
--- a/site/src/components/Tooltip/index.jsx
+++ b/site/src/components/Tooltip/index.jsx
@@ -14,7 +14,7 @@ const Wrapper = styled.div`
   display: inline-flex;
 `;
 
-export default function Tooltip({ children, tooltipContent }) {
+export default function Tooltip({ children, tooltipContent, className = "" }) {
   const [open, setOpen] = useState(false);
 
   const arrowRef = useRef(null);
@@ -42,6 +42,7 @@ export default function Tooltip({ children, tooltipContent }) {
       onFocus={show}
       onMouseLeave={hide}
       onBlur={hide}
+      className={className}
     >
       {children}
       {open && tooltipContent && (
diff --git a/site/src/components/Tooltip/styled.jsx b/site/src/components/Tooltip/styled.jsx
index ff944fe70..ab391126f 100644
--- a/site/src/components/Tooltip/styled.jsx
+++ b/site/src/components/Tooltip/styled.jsx
@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import { p_12_normal } from "../../styles/text";
 
 const triangleWidth = 6;
 
@@ -12,7 +13,7 @@ export const TooltipArrow = styled.div`
 export const TooltipContainer = styled.div`
   background-color: var(--tooltipBg);
   color: var(--textPrimaryContrast);
-  font-weight: bold;
+  ${p_12_normal};
   padding: 8px;
   border-radius: 4px;
   display: none;
diff --git a/site/src/components/User/Username.jsx b/site/src/components/User/Username.jsx
index 5db4e50d3..7b71abc01 100644
--- a/site/src/components/User/Username.jsx
+++ b/site/src/components/User/Username.jsx
@@ -1,9 +1,7 @@
 import React from "react";
 import styled, { css } from "styled-components";
-import { Popup } from "semantic-ui-react";
 
 import TextMinor from "../TextMinor";
-import { useDisablePopup } from "../../utils/hooks";
 import { truncate } from "../../styles/tailwindcss";
 import { KNOWN_ADDR_MATCHERS } from "../../utils/knownAddr";
 import IdentitySpecial from "../Icon/identity-special.svg";
@@ -42,9 +40,7 @@ const Text = styled.span`
   color: var(--textPrimaryContrast);
 `;
 
-const Username = ({ address, name, ellipsis, popup, popupContent, noLink }) => {
-  const disabledPopup = useDisablePopup();
-
+const Username = ({ address, name, ellipsis, popupContent, noLink }) => {
   let displayAddress;
   if (typeof address === "string") {
     if (ellipsis) {
@@ -78,14 +74,22 @@ const Username = ({ address, name, ellipsis, popup, popupContent, noLink }) => {
           <img src={IdentitySpecial} alt="special" width={12} height={12} />
         </Tooltip>
       )}
-      <Popup
-        content={
-          popupContent ? popupContent : name ? `${name} ${address}` : address
+      <Tooltip
+        tooltipContent={
+          popupContent ? (
+            popupContent
+          ) : name ? (
+            <div>
+              <div>{name}</div>
+              <div>{address}</div>
+            </div>
+          ) : (
+            address
+          )
         }
-        size="mini"
-        disabled={!popup || disabledPopup}
-        trigger={<TextUsername noLink={noLink}>{displayName}</TextUsername>}
-      />
+      >
+        <TextUsername noLink={noLink}>{displayName}</TextUsername>
+      </Tooltip>
     </SpecialAccountWrapper>
   );
 };
diff --git a/site/src/pages/Overview/CustomLabel/index.jsx b/site/src/pages/Overview/CustomLabel/index.jsx
index c69a581c6..8fc0f4fa3 100644
--- a/site/src/pages/Overview/CustomLabel/index.jsx
+++ b/site/src/pages/Overview/CustomLabel/index.jsx
@@ -1,6 +1,5 @@
 import React from "react";
 import styled, { css } from "styled-components";
-import { Popup } from "semantic-ui-react";
 
 import Text from "../../../components/Text";
 import TextMinor from "../../../components/TextMinor";
@@ -15,6 +14,7 @@ import {
 } from "../../../styles/tailwindcss";
 import { sumBy } from "../../../utils/math";
 import Icon from "./icon";
+import Tooltip from "../../../components/Tooltip";
 
 const Wrapper = styled.div`
   min-width: 224px;
@@ -121,17 +121,13 @@ const Label = ({ data, icon, status, clickEvent, symbol }) => {
           )}
           <Title disabled={disabled}>{name}</Title>
           {count && <TitleCount disabled={disabled}>{count}</TitleCount>}
-          <Popup
-            content={`${value} ${symbol}`}
-            size="mini"
-            trigger={
-              <ValueWrapper disabled={disabled}>
-                <TextMinor>{`${
-                  Math.round(value) === value ? "" : "≈ "
-                }${Math.round(value).toLocaleString()} ${symbol}`}</TextMinor>
-              </ValueWrapper>
-            }
-          />
+          <ValueWrapper disabled={disabled}>
+            <Tooltip tooltipContent={`${value} ${symbol}`}>
+              <TextMinor>{`${
+                Math.round(value) === value ? "" : "≈ "
+              }${Math.round(value).toLocaleString()} ${symbol}`}</TextMinor>
+            </Tooltip>
+          </ValueWrapper>
         </TitleWrapper>
 
         {!!fiatValue && (
@@ -162,19 +158,15 @@ const Label = ({ data, icon, status, clickEvent, symbol }) => {
               <ChildTitle disabled={status?.children?.[index]?.disabled}>
                 {item.name}
               </ChildTitle>
-              <Popup
-                content={`${item.value} ${symbol}`}
-                size="mini"
-                trigger={
-                  <ValueWrapper disabled={status?.children?.[index]?.disabled}>
-                    <TextMinor>{`${
-                      Math.round(item.value) === item.value ? "" : "≈ "
-                    }${Math.round(
-                      item.value,
-                    ).toLocaleString()} ${symbol}`}</TextMinor>
-                  </ValueWrapper>
-                }
-              />
+              <ValueWrapper disabled={status?.children?.[index]?.disabled}>
+                <Tooltip tooltipContent={`${item.value} ${symbol}`}>
+                  <TextMinor>{`${
+                    Math.round(item.value) === item.value ? "" : "≈ "
+                  }${Math.round(
+                    item.value,
+                  ).toLocaleString()} ${symbol}`}</TextMinor>
+                </Tooltip>
+              </ValueWrapper>
             </TitleWrapper>
 
             {!!item.fiatValue && (
diff --git a/site/src/pages/TreasurySlash/SlashTable.jsx b/site/src/pages/TreasurySlash/SlashTable.jsx
index 01ccf231f..784feeee2 100644
--- a/site/src/pages/TreasurySlash/SlashTable.jsx
+++ b/site/src/pages/TreasurySlash/SlashTable.jsx
@@ -1,7 +1,6 @@
 import React from "react";
 import { NavLink } from "react-router-dom";
 import styled from "styled-components";
-import { Popup } from "semantic-ui-react";
 
 import Table from "../../components/Table";
 import TableLoading from "../../components/TableLoading";
@@ -12,6 +11,7 @@ import TableNoDataCell from "../../components/TableNoDataCell";
 import Card from "../../components/Card";
 import IconMask from "../../components/Icon/Mask";
 import { useTableColumns } from "../../components/shared/useTableColumns";
+import Tooltip from "../../components/Tooltip";
 
 const CardWrapper = styled(Card)`
   overflow-x: hidden;
@@ -115,29 +115,27 @@ const SlashTable = ({ data, loading, header, footer }) => {
                       </Table.Cell>
                       <Table.Cell>{`${item.section}(${item.method})`}</Table.Cell>
                       <Table.Cell>
-                        <Popup
-                          content={
+                        <Tooltip
+                          tooltipContent={
                             item.method === "Rejected"
                               ? "Proposal ID"
                               : item.method === "BountyRejected"
                               ? "Bounty ID"
                               : "Tip ID"
                           }
-                          size="mini"
-                          trigger={
-                            item.method === "Rejected" ? (
-                              <NavLink to={`/proposals/${item.proposalId}`}>
-                                <ProposalID>#{item.proposalId}</ProposalID>
-                              </NavLink>
-                            ) : item.method === "BountyRejected" ? (
-                              <NavLink to={`/bounties/${item.bountyIndex}`}>
-                                <ProposalID>#{item.bountyIndex}</ProposalID>
-                              </NavLink>
-                            ) : (
-                              ""
-                            )
-                          }
-                        />
+                        >
+                          {item.method === "Rejected" ? (
+                            <NavLink to={`/proposals/${item.proposalId}`}>
+                              <ProposalID>#{item.proposalId}</ProposalID>
+                            </NavLink>
+                          ) : item.method === "BountyRejected" ? (
+                            <NavLink to={`/bounties/${item.bountyIndex}`}>
+                              <ProposalID>#{item.bountyIndex}</ProposalID>
+                            </NavLink>
+                          ) : (
+                            ""
+                          )}
+                        </Tooltip>
                       </Table.Cell>
                       <Table.Cell textAlign={"right"}>
                         <Balance value={item.balance} />