diff --git a/app/actions/ClientActions.js b/app/actions/ClientActions.js index 8caaa91ec0..819fd93e08 100644 --- a/app/actions/ClientActions.js +++ b/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"; diff --git a/app/components/shared/CopyToClipboard/CopyToClipboard.jsx b/app/components/buttons/CopyToClipboardButton/CopyToClipboardButton.jsx similarity index 50% rename from app/components/shared/CopyToClipboard/CopyToClipboard.jsx rename to app/components/buttons/CopyToClipboardButton/CopyToClipboardButton.jsx index 574ced49e5..a7e552fa57 100644 --- a/app/components/shared/CopyToClipboard/CopyToClipboard.jsx +++ b/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 }) => { )}> - {ButtonComponent ? ( - - ) : ( - -); - -export default SmallButton; diff --git a/app/components/buttons/SmallButton/SmallButton.module.css b/app/components/buttons/SmallButton/SmallButton.module.css deleted file mode 100644 index 63ed1f8ef9..0000000000 --- a/app/components/buttons/SmallButton/SmallButton.module.css +++ /dev/null @@ -1,18 +0,0 @@ -.button { - padding: 0 !important; - width: 24px; - height: 24px; - background-size: 17px; - background-position: center center; - background-repeat: no-repeat; - background-color: var(--small-button-bg) !important; - border: none !important; - box-shadow: 0px 2px 8px var(--small-button-shadow); - transition: none !important; -} -.button:hover { - opacity: 0.85; -} -.button:disabled { - background-color: var(--small-button-disabled-bg) !important; -} diff --git a/app/components/buttons/SmallButton/index.js b/app/components/buttons/SmallButton/index.js deleted file mode 100644 index 5d182d9ff9..0000000000 --- a/app/components/buttons/SmallButton/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from "./SmallButton"; diff --git a/app/components/buttons/index.js b/app/components/buttons/index.js index 7b96b85e77..85cd0d1f41 100644 --- a/app/components/buttons/index.js +++ b/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 }; /*************************************************** diff --git a/app/components/inputs/AccountsSelect/AccountsSelect.jsx b/app/components/inputs/AccountsSelect/AccountsSelect.jsx index 8ab50e4088..98bf9c365b 100644 --- a/app/components/inputs/AccountsSelect/AccountsSelect.jsx +++ b/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, diff --git a/app/components/inputs/AccountsSelect/LinkToAccounts/LinkToAccounts.jsx b/app/components/inputs/AccountsSelect/LinkToAccounts/LinkToAccounts.jsx new file mode 100644 index 0000000000..9870f226f4 --- /dev/null +++ b/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 ( + }> + + + ); +}; + +export default LinkToAccounts; diff --git a/app/components/inputs/AccountsSelect/LinkToAccounts/LinkToAccounts.module.css b/app/components/inputs/AccountsSelect/LinkToAccounts/LinkToAccounts.module.css new file mode 100644 index 0000000000..f802b9034d --- /dev/null +++ b/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; +} diff --git a/app/components/inputs/AccountsSelect/LinkToAccounts/hooks.js b/app/components/inputs/AccountsSelect/LinkToAccounts/hooks.js new file mode 100644 index 0000000000..ba692a1703 --- /dev/null +++ b/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 + }; +} diff --git a/app/components/shared/LinkToAccounts/index.js b/app/components/inputs/AccountsSelect/LinkToAccounts/index.js similarity index 100% rename from app/components/shared/LinkToAccounts/index.js rename to app/components/inputs/AccountsSelect/LinkToAccounts/index.js diff --git a/app/components/modals/ListUTXOsModal/ListUTXOsModal.jsx b/app/components/modals/ListUTXOsModal/ListUTXOsModal.jsx index 37134b0fe9..4c97a5047a 100644 --- a/app/components/modals/ListUTXOsModal/ListUTXOsModal.jsx +++ b/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: (
{utxoValue} - diff --git a/app/components/modals/ListUTXOsModal/ListUTXOsModal.module.css b/app/components/modals/ListUTXOsModal/ListUTXOsModal.module.css index 1ba19b29a6..796995901d 100644 --- a/app/components/modals/ListUTXOsModal/ListUTXOsModal.module.css +++ b/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; } diff --git a/app/components/shared/DetailsTable/DetailsTable.jsx b/app/components/shared/DetailsTable/DetailsTable.jsx index e3828cec9e..c15bcf3995 100644 --- a/app/components/shared/DetailsTable/DetailsTable.jsx +++ b/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,7 +27,7 @@ const ValueField = ({ data }) => { {copyable ? ( <>
{text}
- + ) : href ? ( <> @@ -40,9 +35,10 @@ const ValueField = ({ data }) => { {text} ) : ( diff --git a/app/components/shared/ExternalButton.jsx b/app/components/shared/ExternalButton.jsx index 86865969c6..34be730cb3 100644 --- a/app/components/shared/ExternalButton.jsx +++ b/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 ? ( - {children} + {children} ) : ( ) diff --git a/app/components/shared/LinkToAccounts/LinkToAccounts.jsx b/app/components/shared/LinkToAccounts/LinkToAccounts.jsx deleted file mode 100644 index 18877e0f5c..0000000000 --- a/app/components/shared/LinkToAccounts/LinkToAccounts.jsx +++ /dev/null @@ -1,12 +0,0 @@ -import { Tooltip } from "pi-ui"; -import { Link } from "react-router-dom"; -import { FormattedMessage as T } from "react-intl"; -import styles from "./LinkToAccounts.module.css"; - -const LinkToAccounts = () => ( - }> - - -); - -export default LinkToAccounts; diff --git a/app/components/shared/LinkToAccounts/LinkToAccounts.module.css b/app/components/shared/LinkToAccounts/LinkToAccounts.module.css deleted file mode 100644 index 062d8721a6..0000000000 --- a/app/components/shared/LinkToAccounts/LinkToAccounts.module.css +++ /dev/null @@ -1,19 +0,0 @@ -.icon { - display: inline-block; - width: 24px; - height: 24px; - background-image: var(--accounts-button-icon); - background-position: 50%; - background-size: 14px auto; - background-repeat: no-repeat; - box-shadow: 0 3px 8px var(--input-color-shadow); - border-radius: 5px; - background-color: var(--input-color); - cursor: pointer; - vertical-align: middle; -} - -.icon:hover { - box-shadow: 0 1px 3px var(--input-color-shadow); - background-color: var(--account-button-hover); -} diff --git a/app/components/shared/UnsignedTx/UnsignedTx.jsx b/app/components/shared/UnsignedTx/UnsignedTx.jsx index f7ee012a8a..5091b411f5 100644 --- a/app/components/shared/UnsignedTx/UnsignedTx.jsx +++ b/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 }) => (
{title}
{tx}
- +
); diff --git a/app/components/shared/index.js b/app/components/shared/index.js index e5eb3a2fe6..4323ce4544 100644 --- a/app/components/shared/index.js +++ b/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"; diff --git a/app/components/views/AccountsPage/Accounts/AccountRow/AccountDetails/AccountDetails.jsx b/app/components/views/AccountsPage/Accounts/AccountRow/AccountDetails/AccountDetails.jsx index c209c447b0..ef8fa29964 100644 --- a/app/components/views/AccountsPage/Accounts/AccountRow/AccountDetails/AccountDetails.jsx +++ b/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 ? ( <>
{accountExtendedKey}
- diff --git a/app/components/views/FatalErrorPage/FatalErrorPage.jsx b/app/components/views/FatalErrorPage/FatalErrorPage.jsx index 1153ee984d..2bf12e7242 100644 --- a/app/components/views/FatalErrorPage/FatalErrorPage.jsx +++ b/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,7 +113,7 @@ function FatalErrorPage() {