feat: apply ButtonIcon component

.github/workflows/nodejs.yml

@@ -6,7 +6,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [14.x, 15.x]
+        node-version: [12.x, 14.x]
 
     steps:
       - uses: actions/checkout@v2

src/components/CopyLink.jsx

@@ -1,34 +1,13 @@
 import React from "react";
-import {
-  getThemeProperty,
-  useHover,
-  useTheme,
-  DEFAULT_DARK_THEME_NAME
-} from "pi-ui";
+import { ButtonIcon } from "pi-ui";
 import PropTypes from "prop-types";
-import IconButton from "src/components/IconButton";
 import CopyToClipboard from "src/components/CopyToClipboard";
 
 const CopyLink = ({ url, className }) => {
-  const { theme, themeName } = useTheme();
-  const isDarkTheme = themeName === DEFAULT_DARK_THEME_NAME;
-  const hoverColor = getThemeProperty(theme, "icon-hover-color");
-  const darkIconColor = getThemeProperty(theme, "text-color");
-  const [ref, isHovered] = useHover();
-  const iconColor = isHovered
-    ? hoverColor
-    : isDarkTheme
-    ? darkIconColor
-    : undefined;
   return (
     <CopyToClipboard value={url} tooltipText="Copy link" className={className}>
       {({ onCopyToClipboard }) => (
-        <IconButton
-          ref={ref}
-          iconColor={iconColor}
-          type="link"
-          onClick={onCopyToClipboard}
-        />
+        <ButtonIcon type="link" onClick={onCopyToClipboard} />
       )}
     </CopyToClipboard>
   );

src/components/Proposal/VotesCount.jsx

@@ -1,13 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import {
-  Text,
-  Icon,
-  useTheme,
-  classNames,
-  getThemeProperty,
-  DEFAULT_DARK_THEME_NAME
-} from "pi-ui";
+import { Text, ButtonIcon, classNames } from "pi-ui";
 import styles from "./Proposal.module.css";
 
 const VotesCount = ({
@@ -18,20 +11,14 @@ const VotesCount = ({
   isVoteActive
 }) => {
   const votesLeft = quorumVotes - votesReceived;
-  const { theme, themeName } = useTheme();
-  const color = getThemeProperty(theme, "icon-color");
-  const darkColor = getThemeProperty(theme, "color-dark");
-  const isDarkTheme = themeName === DEFAULT_DARK_THEME_NAME;
-
   return (
     <div className={styles.voteCount}>
       {isVoteActive && (
         <>
           {onSearchVotes && votesReceived > 0 && (
             <div>
-              <Icon
+              <ButtonIcon
                 type="search"
-                iconColor={isDarkTheme ? darkColor : color}
                 onClick={onSearchVotes}
                 className={styles.voteCountSearch}
               />

src/components/RecordWrapper/RecordWrapper.jsx

@@ -6,18 +6,17 @@ import DownloadJSON from "../DownloadJSON";
 import {
   Card,
   H2,
-  Icon,
   Link as UILink,
+  Icon,
   Text,
   classNames,
-  useHover,
   useTheme,
-  getThemeProperty,
   Tooltip,
   CopyableText,
   useMediaQuery,
   DEFAULT_DARK_THEME_NAME,
   Dropdown,
+  ButtonIcon,
   DropdownItem
 } from "pi-ui";
 import { Row } from "../layout";
@@ -130,9 +129,13 @@ export const JoinTitle = ({ children, className, separatorSymbol = "•" }) => (
   </Join>
 );
 
-export const Edit = ({ url, tabIndex }) => (
-  <Link to={url || ""} tabIndex={tabIndex} data-testid="record-edit-button">
-    <Icon type="edit" className={styles.editButton} />
+export const Edit = ({ url, tabIndex, disabled }) => (
+  <Link
+    to={url || ""}
+    tabIndex={tabIndex}
+    data-testid="record-edit-button"
+    className={styles.editButton}>
+    <ButtonIcon type="edit" disabled={disabled} />
   </Link>
 );
 
@@ -205,12 +208,7 @@ export const Header = React.memo(function Header({
 
 export const ChartsLink = ({ token }) => {
   const { apiInfo } = useLoader();
-  const { theme, themeName } = useTheme();
-  const bgColor = getThemeProperty(theme, "icon-color");
-  const color = getThemeProperty(theme, "icon-background-color");
-  const hoverColor = getThemeProperty(theme, "icon-hover-color");
-  const [ref, isHovered] = useHover();
-  const iconColor = isHovered ? hoverColor : color;
+  const { themeName } = useTheme();
   const hostName = apiInfo.testnet
     ? "testnet.decred.org"
     : "dcrdata.decred.org";
@@ -225,28 +223,18 @@ export const ChartsLink = ({ token }) => {
       placement="bottom"
       content="Voting Charts">
       <UILink
-        ref={ref}
         target="_blank"
         rel="nofollow noopener noreferrer"
         href={`https://${hostName}/proposal/${token}`}>
-        <Icon type="chart" iconColor={iconColor} backgroundColor={bgColor} />
+        <ButtonIcon type="chart" />
       </UILink>
     </Tooltip>
   );
 };
 
 export const MarkdownLink = ({ to, active = false, onClick }) => {
-  const { theme, themeName } = useTheme();
-  const color = getThemeProperty(theme, "icon-color");
-  const hoverColor = getThemeProperty(theme, "icon-hover-color");
-  const darkIconColor = getThemeProperty(theme, "text-color");
-  const [ref, isHovered] = useHover();
+  const { themeName } = useTheme();
   const isDarkTheme = themeName === DEFAULT_DARK_THEME_NAME;
-  const iconColor = isHovered
-    ? hoverColor
-    : isDarkTheme
-    ? darkIconColor
-    : color;
   return (
     <Tooltip
       className={classNames(
@@ -260,12 +248,7 @@ export const MarkdownLink = ({ to, active = false, onClick }) => {
         rel="nofollow noopener noreferrer"
         href={to}
         onClick={onClick}>
-        <Icon
-          ref={ref}
-          type="markdown"
-          viewBox="0 0 208 128"
-          iconColor={iconColor}
-        />
+        <ButtonIcon type="markdown" viewBox="0 0 208 128" />
       </UILink>
     </Tooltip>
   );

src/components/RecordWrapper/RecordWrapper.module.css

@@ -43,7 +43,6 @@
 }
 
 .editButton {
-  margin-top: 0.7rem;
   margin-left: 1rem;
 }