[pi-ui] use pi-ui ButtonIcon and ditch SmallButton component (#3610)

app/actions/ClientActions.js

@@ -51,6 +51,10 @@ export const goToError = () => (dispatch) => {
   dispatch(pushHistory("/error"));
 };
 
+export const goToAccounts = () => (dispatch) => {
+  dispatch(pushHistory("/accounts"));
+};
+
 export const GETWALLETSERVICE_ATTEMPT = "GETWALLETSERVICE_ATTEMPT";
 export const GETWALLETSERVICE_FAILED = "GETWALLETSERVICE_FAILED";
 export const GETWALLETSERVICE_SUCCESS = "GETWALLETSERVICE_SUCCESS";

app/components/shared/CopyToClipboard/CopyToClipboard.jsx → app/components/buttons/CopyToClipboardButton/CopyToClipboardButton.jsx

@@ -1,11 +1,14 @@
 // @flow
 import copy from "clipboard-copy";
 import { FormattedMessage as T } from "react-intl";
-import styles from "./CopyToClipboard.module.css";
-import { classNames } from "pi-ui";
+import styles from "./CopyToClipboardButton.module.css";
+import { classNames, ButtonIcon, useTheme, getThemeProperty } from "pi-ui";
 import { useState } from "react";
 
-const CopyToClipboard = ({ textToCopy, ButtonComponent, className }) => {
+const CopyToClipboardButton = ({ textToCopy, className }) => {
+  const { theme } = useTheme();
+  const iconColor = getThemeProperty(theme, "accent-blue");
+
   const [isSuccessHidden, setIsSuccessHidden] = useState(true);
 
   const onClick = () => {
@@ -25,25 +28,17 @@ const CopyToClipboard = ({ textToCopy, ButtonComponent, className }) => {
         )}>
         <T id="clipboard.copied" m="Copied" />
       </div>
-      {ButtonComponent ? (
-        <ButtonComponent
-          className={styles.icon}
-          onClick={onClick}
-          onMouseLeave={onMouseLeave}
-          aria-label="Copy"
-        />
-      ) : (
-        <button
-          className={styles.icon}
-          onClick={onClick}
-          onMouseLeave={onMouseLeave}
-          aria-label="Copy"
-        />
-      )}
+      <ButtonIcon
+        type="copyToClipboard"
+        iconBackgroundColor={iconColor}
+        onClick={onClick}
+        onMouseLeave={onMouseLeave}
+        aria-label="Copy"
+      />
     </div>
   );
 };
 
-CopyToClipboard.propTypes = { textToCopy: PropTypes.string.isRequired };
+CopyToClipboardButton.propTypes = { textToCopy: PropTypes.string.isRequired };
 
-export default CopyToClipboard;
+export default CopyToClipboardButton;

app/components/shared/CopyToClipboard/CopyToClipboard.module.css → app/components/buttons/CopyToClipboardButton/CopyToClipboardButton.module.css

@@ -3,20 +3,7 @@
   display: inline-block;
 }
 .icon {
-  display: inline-block;
-  width: 20px;
-  height: 18px;
-  background-image: var(--copy-to-clipboard-icon);
-  background-position: 0 0;
-  background-size: 20px auto;
-  background-repeat: no-repeat;
-  cursor: pointer;
-  background-color: initial;
-  border: none;
-  outline: 0;
-}
-.icon:hover {
-  opacity: 0.8;
+  margin-left: 1rem;
 }
 .success {
   font-size: 12px;

app/components/buttons/CopyToClipboardButton/index.js

@@ -0,0 +1 @@
+export { default } from "./CopyToClipboardButton";

app/components/buttons/index.js

@@ -26,8 +26,8 @@ import CloseButton from "./CloseButton";
 import HelpLink from "./HelpLink/HelpLink";
 import InvisibleButton from "./InvisibleButton";
 import Button from "./Button/Button";
-import SmallButton from "./SmallButton";
 import PiUiButton from "./PiUiButton";
+import CopyToClipboardButton from "./CopyToClipboardButton";
 export {
   ModalButton,
   ToggleSwitch,
@@ -37,7 +37,7 @@ export {
   CloseButton,
   InvisibleButton,
   Button,
-  SmallButton
+  CopyToClipboardButton
 };
 
 /***************************************************

app/components/inputs/AccountsSelect/AccountsSelect.jsx

@@ -1,8 +1,9 @@
 import Select from "react-select";
 import { useAccountsSelect } from "./hooks";
-import { Balance, LinkToAccounts } from "shared";
+import { Balance } from "shared";
 import styles from "./AccountsSelect.module.css";
 import { classNames } from "pi-ui";
+import LinkToAccounts from "./LinkToAccounts";
 
 const AccountsSelect = ({
   accountsType,

app/components/inputs/AccountsSelect/LinkToAccounts/LinkToAccounts.jsx

@@ -0,0 +1,20 @@
+import { Tooltip, ButtonIcon } from "pi-ui";
+import { FormattedMessage as T } from "react-intl";
+import styles from "./LinkToAccounts.module.css";
+import { useLinkToAccounts } from "./hooks";
+
+const LinkToAccounts = () => {
+  const { goToAccounts, iconColor } = useLinkToAccounts();
+  return (
+    <Tooltip content={<T id="accountsButton.tip" m="Accounts" />}>
+      <ButtonIcon
+        type="accounts"
+        iconColor={iconColor}
+        className={styles.icon}
+        onClick={goToAccounts}
+      />
+    </Tooltip>
+  );
+};
+
+export default LinkToAccounts;

app/components/inputs/AccountsSelect/LinkToAccounts/LinkToAccounts.module.css

@@ -0,0 +1,6 @@
+.icon {
+  display: inline-block;
+  background-color: var(--input-color) !important;
+  vertical-align: middle;
+  margin-left: 1rem;
+}

app/components/inputs/AccountsSelect/LinkToAccounts/hooks.js

@@ -0,0 +1,16 @@
+import { useDispatch } from "react-redux";
+import * as cla from "actions/ClientActions";
+import { useTheme, getThemeProperty } from "pi-ui";
+
+export function useLinkToAccounts() {
+  const dispatch = useDispatch();
+
+  const { theme } = useTheme();
+  const iconColor = getThemeProperty(theme, "color-white");
+  const goToAccounts = () => dispatch(cla.goToAccounts());
+
+  return {
+    goToAccounts,
+    iconColor
+  };
+}

app/components/modals/ListUTXOsModal/ListUTXOsModal.jsx

@@ -3,7 +3,8 @@ import Modal from "../Modal";
 import styles from "./ListUTXOsModal.module.css";
 import { Table } from "pi-ui";
 import { useListUtxo } from "./hooks";
-import { Balance, CopyToClipboard } from "shared";
+import { Balance } from "shared";
+import { CopyToClipboardButton } from "buttons";
 import { AccountsSelect } from "inputs";
 
 const messages = defineMessages({
@@ -27,7 +28,7 @@ const ListUTXOsModal = ({ onCancelModal, show }) => {
         UTXO: (
           <div className={styles.utxoValue}>
             <span>{utxoValue}</span>
-            <CopyToClipboard
+            <CopyToClipboardButton
               textToCopy={utxoValue}
               className={styles.copyIcon}
             />

app/components/modals/ListUTXOsModal/ListUTXOsModal.module.css

@@ -61,6 +61,7 @@
 .tableHeader tr th:first-child,
 .tableBody tr td:first-child {
   width: 35em;
+  max-width: 35em;
   overflow: inherit;
 }
 

app/components/shared/DetailsTable/DetailsTable.jsx

@@ -1,13 +1,8 @@
 import { useState } from "react";
-import { classNames } from "pi-ui";
+import { classNames, ButtonIcon } from "pi-ui";
 import styles from "./DetailsTable.module.css";
-import { SmallButton } from "buttons";
-import {
-  CopyToClipboard,
-  TruncatedText,
-  ExternalLink,
-  ExternalButton
-} from "shared";
+import { TruncatedText, ExternalLink, ExternalButton } from "shared";
+import { CopyToClipboardButton } from "buttons";
 
 const ValueField = ({ data }) => {
   const { value, copyable, truncate, href } = data;
@@ -32,17 +27,18 @@ const ValueField = ({ data }) => {
       {copyable ? (
         <>
           <div className={styles.copyableText}>{text}</div>
-          <CopyToClipboard textToCopy={value} ButtonComponent={SmallButton} />
+          <CopyToClipboardButton textToCopy={value} />
         </>
       ) : href ? (
         <>
           <ExternalLink href={href} className={styles.link}>
             {text}
           </ExternalLink>
           <ExternalButton
+            type="searchBlock"
             className={styles.linkButton}
             href={href}
-            ButtonComponent={SmallButton}
+            ButtonComponent={ButtonIcon}
           />
         </>
       ) : (

app/components/shared/ExternalButton.jsx

@@ -13,7 +13,8 @@ const ExternalButton = ({
   href,
   children,
   hrefTestNet,
-  ButtonComponent
+  ButtonComponent,
+  type
 }) => {
   const { isTestNet } = useNetwork();
   return (
@@ -23,7 +24,7 @@ const ExternalButton = ({
       size={size ? size : "md"}
       customComponent={(props) =>
         ButtonComponent ? (
-          <ButtonComponent {...props}>{children}</ButtonComponent>
+          <ButtonComponent {...{ type, ...props }}>{children}</ButtonComponent>
         ) : (
           <Button {...props}>{children}</Button>
         )

app/components/shared/UnsignedTx/UnsignedTx.jsx

@@ -1,11 +1,11 @@
-import { CopyToClipboard } from "shared";
+import { CopyToClipboardButton } from "buttons";
 import styles from "./UnsignedTx.module.css";
 
 const UnsignedTx = ({ tx, title }) => (
   <div className={styles.txArea}>
     <div className={styles.txTitle}>{title}</div>
     <div className={styles.tx}>{tx}</div>
-    <CopyToClipboard textToCopy={tx} className={styles.copyIcon} />
+    <CopyToClipboardButton textToCopy={tx} className={styles.copyIcon} />
   </div>
 );
 

app/components/shared/index.js

@@ -1,6 +1,4 @@
 export * from "./Balance";
-export { default as CopyToClipboard } from "./CopyToClipboard/CopyToClipboard";
-export { default as LinkToAccounts } from "./LinkToAccounts";
 export { default as TransitionMotionWrapper } from "./TransitionMotionWrapper";
 export { default as ExternalLink } from "./ExternalLink";
 export { default as ExternalButton } from "./ExternalButton";

app/components/views/AccountsPage/Accounts/AccountRow/AccountDetails/AccountDetails.jsx

@@ -1,7 +1,7 @@
 import { FormattedMessage as T } from "react-intl";
 import { Tooltip, classNames } from "pi-ui";
-import { Balance, CopyToClipboard } from "shared";
-import { SlateGrayButton } from "buttons";
+import { Balance } from "shared";
+import { SlateGrayButton, CopyToClipboardButton } from "buttons";
 import { IMPORTED_ACCOUNT, DEFAULT_ACCOUNT } from "constants";
 import DataLine from "./DataLine";
 import styles from "./AccountDetails.module.css";
@@ -94,7 +94,7 @@ const AccountsDetails = ({
           {showPubKey && accountExtendedKey ? (
             <>
               <div className={styles.pubkeyArea}>{accountExtendedKey}</div>
-              <CopyToClipboard
+              <CopyToClipboardButton
                 textToCopy={accountExtendedKey}
                 className={styles.pubkeyClipboard}
               />

app/components/views/FatalErrorPage/FatalErrorPage.jsx

@@ -1,7 +1,8 @@
 import { FormattedMessage as T } from "react-intl";
 import { KeyBlueButton, RemoveDaemonButton } from "buttons";
 import { PageBody } from "layout";
-import { CopyToClipboard, ExternalLink } from "shared";
+import { ExternalLink } from "shared";
+import { CopyToClipboardButton } from "buttons";
 import { DIFF_CONNECTION_ERROR } from "constants";
 import { wallet } from "wallet-preload-shim";
 import { useFatalErrorPage } from "./hooks";
@@ -112,15 +113,15 @@ function FatalErrorPage() {
                   <T id="fatal.daemon.title" m="Daemon Error" />
                 </div>
                 <textarea rows="10" value={daemonError} disabled />
-                <CopyToClipboard textToCopy={daemonError} />
+                <CopyToClipboardButton textToCopy={daemonError} />
               </>
             )}
             {walletError && (
               <>
                 <div className={styles.error}>
                   <T id="fatal.wallet.title" m="Wallet Error" />
                 </div>
-                <CopyToClipboard textToCopy={walletError} />
+                <CopyToClipboardButton textToCopy={walletError} />
                 <textarea rows="10" value={walletError} disabled />
               </>
             )}