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 ? (
-
- ) : (
-
- )}
+
);
};
-CopyToClipboard.propTypes = { textToCopy: PropTypes.string.isRequired };
+CopyToClipboardButton.propTypes = { textToCopy: PropTypes.string.isRequired };
-export default CopyToClipboard;
+export default CopyToClipboardButton;
diff --git a/app/components/shared/CopyToClipboard/CopyToClipboard.module.css b/app/components/buttons/CopyToClipboardButton/CopyToClipboardButton.module.css
similarity index 59%
rename from app/components/shared/CopyToClipboard/CopyToClipboard.module.css
rename to app/components/buttons/CopyToClipboardButton/CopyToClipboardButton.module.css
index 0e792da009..832b3e8f8d 100644
--- a/app/components/shared/CopyToClipboard/CopyToClipboard.module.css
+++ b/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;
diff --git a/app/components/buttons/CopyToClipboardButton/index.js b/app/components/buttons/CopyToClipboardButton/index.js
new file mode 100644
index 0000000000..893d64e8f3
--- /dev/null
+++ b/app/components/buttons/CopyToClipboardButton/index.js
@@ -0,0 +1 @@
+export { default } from "./CopyToClipboardButton";
diff --git a/app/components/buttons/SmallButton/SmallButton.jsx b/app/components/buttons/SmallButton/SmallButton.jsx
deleted file mode 100644
index 166900724c..0000000000
--- a/app/components/buttons/SmallButton/SmallButton.jsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import styles from "./SmallButton.module.css";
-import { Button, classNames } from "pi-ui";
-
-const SmallButton = ({ className, ...props }) => (
-
-);
-
-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 }) => (
);
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() {
-
+
>
)}
{walletError && (
@@ -120,7 +121,7 @@ function FatalErrorPage() {
-
+
>
)}
diff --git a/app/components/views/GetStartedPage/CreateWalletPage/CopySeed/Form/Form.jsx b/app/components/views/GetStartedPage/CreateWalletPage/CopySeed/Form/Form.jsx
index 8610b053d9..b165b01da5 100644
--- a/app/components/views/GetStartedPage/CreateWalletPage/CopySeed/Form/Form.jsx
+++ b/app/components/views/GetStartedPage/CreateWalletPage/CopySeed/Form/Form.jsx
@@ -1,5 +1,5 @@
import { FormattedMessage as T } from "react-intl";
-import { Tooltip } from "pi-ui";
+import { Tooltip, Icon, useTheme, getThemeProperty } from "pi-ui";
import { SeedCopyConfirmModal } from "modals";
import { Documentation } from "shared";
import { GoBackMsg, CreateNewWalletTitle } from "../../../messages";
@@ -20,38 +20,43 @@ const CopySeedPage = ({
mnemonic,
sendBack,
sendContinue
-}) => (
-
- }>
- {sendBack && (
- }>
-
-
- )}
-
-
-
- {mnemonic.split(" ").map((word, index) => (
-
- ))}
- toggleCopySeed(true)}>
-
-
-
- }
- onBackClick={sendBack}
- onClick={sendContinue}
- />
- toggleCopySeed(false)}
- />
-
-);
+}) => {
+ const { theme } = useTheme();
+ const iconColor = getThemeProperty(theme, "accent-blue");
+ return (
+
+ }>
+ {sendBack && (
+ }>
+
+
+ )}
+
+
+
+ {mnemonic.split(" ").map((word, index) => (
+
+ ))}
+ toggleCopySeed(true)}>
+
+
+
+
+ }
+ onBackClick={sendBack}
+ onClick={sendContinue}
+ />
+ toggleCopySeed(false)}
+ />
+
+ );
+};
export default CopySeedPage;
diff --git a/app/components/views/GetStartedPage/CreateWalletPage/CopySeed/Form/Form.module.css b/app/components/views/GetStartedPage/CreateWalletPage/CopySeed/Form/Form.module.css
index 9404e87d10..a8fc839510 100644
--- a/app/components/views/GetStartedPage/CreateWalletPage/CopySeed/Form/Form.module.css
+++ b/app/components/views/GetStartedPage/CreateWalletPage/CopySeed/Form/Form.module.css
@@ -21,26 +21,27 @@
.copy {
grid-column: 4 / 6;
- padding-top: 2px;
- padding-left: 43px;
height: 24px;
color: var(--input-color);
border: 1px solid var(--input-color);
border-radius: 3px;
margin: 4px;
font-size: 13px;
- background-image: var(--copy-to-clipboard-icon);
- background-position: 26px 3px;
- background-size: 16px auto;
- background-repeat: no-repeat;
cursor: pointer;
user-select: none;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
.copy:hover {
opacity: 0.8;
}
+.seedArea {
+ align-items: initial;
+}
+
@media screen and (max-width: 768px) {
.copy {
grid-column: 1 / 4;
diff --git a/app/components/views/GovernancePage/Proposals/ProposalsTab.jsx b/app/components/views/GovernancePage/Proposals/ProposalsTab.jsx
index 044e19a139..e085c8abb8 100644
--- a/app/components/views/GovernancePage/Proposals/ProposalsTab.jsx
+++ b/app/components/views/GovernancePage/Proposals/ProposalsTab.jsx
@@ -1,6 +1,6 @@
import { FormattedMessage as T } from "react-intl";
import { createElement as h } from "react";
-import { Button, Tooltip, useTheme, getThemeProperty } from "pi-ui";
+import { Button, ButtonIcon, Tooltip, useTheme, getThemeProperty } from "pi-ui";
import ProposalsList from "./ProposalsList";
import PoliteiaDisabled from "./PoliteiaDisabled";
import { PoliteiaLink as PiLink } from "shared";
@@ -8,7 +8,6 @@ import { TabbedPage } from "layout";
import { useProposalsTab } from "./hooks";
import styles from "./ProposalsTab.module.css";
import PageHeader from "../PageHeader";
-import { SmallButton } from "buttons";
const ListLink = ({ count, children }) => (
<>
@@ -71,6 +70,9 @@ const ProposalsTab = () => {
}
];
+ const { theme } = useTheme();
+ const iconColor = getThemeProperty(theme, "grey-7");
+
const header = (
{
/>
}
placement="right">
-
@@ -125,8 +129,6 @@ const ProposalsTab = () => {
/>
);
- const { theme } = useTheme();
-
return (
-
+
@@ -99,10 +95,7 @@ const DecodedPayRequest = ({
{decoded.paymentHash}
-
+
diff --git a/app/components/views/PrivacyPage/PrivacyTab/SendOutputRow/SendOutputRow.module.css b/app/components/views/PrivacyPage/PrivacyTab/SendOutputRow/SendOutputRow.module.css
index 416e3b3788..fe3e9cf946 100644
--- a/app/components/views/PrivacyPage/PrivacyTab/SendOutputRow/SendOutputRow.module.css
+++ b/app/components/views/PrivacyPage/PrivacyTab/SendOutputRow/SendOutputRow.module.css
@@ -36,33 +36,6 @@
align-self: center;
}
-.sendIconWrapper.add {
- width: 20px;
- height: 20px;
- background-image: var(--add-icon);
- background-size: 6px;
- background-color: var(--account-pubkey-text);
- box-shadow: 0px 3px 8px var(--icons-shadow);
- border-radius: 5px;
-}
-
-.sendIconWrapper.add.disabled {
- background-image: var(--add-icon);
- background-color: var(--disabled-background-color-lighter);
- cursor: not-allowed;
-}
-
-.sendIconWrapper.delete {
- width: 20px;
- height: 20px;
- background-image: var(--delete-icon);
- background-size: 10px;
-}
-
-.sendIconWrapper.delete:hover {
- opacity: 0.7;
-}
-
.sendIconWrapper.walletIcon {
background-image: var(--send-all-default);
}
diff --git a/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_StakePools/StakePoolsList.jsx b/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_StakePools/StakePoolsList.jsx
index 62d936ea61..28716b224c 100644
--- a/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_StakePools/StakePoolsList.jsx
+++ b/app/components/views/TicketsPage/PurchaseTab/LEGACY_PurchasePage/LEGACY_StakePools/StakePoolsList.jsx
@@ -2,10 +2,10 @@ import { FormattedMessage as T } from "react-intl";
import {
KeyBlueButton,
InvisibleButton,
- InvisibleConfirmModalButton
+ InvisibleConfirmModalButton,
+ CopyToClipboardButton
} from "buttons";
import { BackupRedeemScriptModal } from "modals";
-import { CopyToClipboard } from "shared";
import styles from "./StakePools.module.css";
const StakePoolsList = ({
@@ -77,7 +77,7 @@ const StakePoolsList = ({
value: (
{Script}
-
diff --git a/app/components/views/TransactionPage/TransactionContent/TransactionContent.jsx b/app/components/views/TransactionPage/TransactionContent/TransactionContent.jsx
index df770c85ca..f79582c53f 100644
--- a/app/components/views/TransactionPage/TransactionContent/TransactionContent.jsx
+++ b/app/components/views/TransactionPage/TransactionContent/TransactionContent.jsx
@@ -1,5 +1,9 @@
-import { Balance, CopyToClipboard, ExternalLink } from "shared";
-import { KeyBlueButton, RevokeModalButton } from "buttons";
+import { Balance, ExternalLink } from "shared";
+import {
+ KeyBlueButton,
+ RevokeModalButton,
+ CopyToClipboardButton
+} from "buttons";
import { addSpacingAroundText } from "helpers";
import { FormattedMessage as T } from "react-intl";
import { walletrpc as api } from "middleware/walletrpc/api_pb";
@@ -335,7 +339,7 @@ const TransactionContent = ({
{rawTx}
-
diff --git a/app/components/views/TransactionPage/TransactionContent/TransactionContent.module.css b/app/components/views/TransactionPage/TransactionContent/TransactionContent.module.css
index 3c24b8cf79..a1846761b1 100644
--- a/app/components/views/TransactionPage/TransactionContent/TransactionContent.module.css
+++ b/app/components/views/TransactionPage/TransactionContent/TransactionContent.module.css
@@ -194,6 +194,10 @@
margin-right: 20px;
}
+.receiveContentNestCopyToClipboardIcon {
+ margin-left: 1rem;
+}
+
@media screen and (max-width: 1180px) {
.rebroadcastBtnContainer,
.revokeBtnContainer {
@@ -280,13 +284,4 @@
.details .topRow.rowTransaction .value .valueRawTx {
width: 335px;
}
- .details
- .topRow.rowTransaction
- .value
- .clipboardBox.receiveContentNestCopyToClipboardIcon {
- position: absolute;
- top: -28px;
- right: 5px;
- margin: 0;
- }
}
diff --git a/app/components/views/TransactionsPage/ReceiveTab/ReceivePage/ReceivePage.jsx b/app/components/views/TransactionsPage/ReceiveTab/ReceivePage/ReceivePage.jsx
index 12d4575aa6..783c2940c1 100644
--- a/app/components/views/TransactionsPage/ReceiveTab/ReceivePage/ReceivePage.jsx
+++ b/app/components/views/TransactionsPage/ReceiveTab/ReceivePage/ReceivePage.jsx
@@ -3,9 +3,16 @@ import copy from "clipboard-copy";
import { FormattedMessage as T, injectIntl, defineMessages } from "react-intl";
import { ReceiveAccountsSelect, DcrInput } from "inputs";
import { Subtitle } from "shared";
-import { KeyBlueButton, SmallButton } from "buttons";
+import { KeyBlueButton } from "buttons";
import QRCodeModal from "./QRCodeModal";
-import { classNames, Tooltip, TextHighlighted } from "pi-ui";
+import {
+ classNames,
+ Tooltip,
+ ButtonIcon,
+ useTheme,
+ getThemeProperty,
+ TextHighlighted
+} from "pi-ui";
import style from "./ReceivePage.module.css";
const messages = defineMessages({
@@ -40,6 +47,8 @@ const ReceivePage = ({
setTooltip(false);
}, 1000);
}
+ const { theme } = useTheme();
+ const iconColor = getThemeProperty(theme, "accent-blue");
return (
<>
@@ -118,8 +127,10 @@ const ReceivePage = ({
}>
- {
copy(nextAddress);
setTooltipText(false);
@@ -130,8 +141,9 @@ const ReceivePage = ({
}>
- setModal(true)}
/>
diff --git a/app/components/views/TransactionsPage/ReceiveTab/ReceivePage/ReceivePage.module.css b/app/components/views/TransactionsPage/ReceiveTab/ReceivePage/ReceivePage.module.css
index 86667cbea9..aee9d519b8 100644
--- a/app/components/views/TransactionsPage/ReceiveTab/ReceivePage/ReceivePage.module.css
+++ b/app/components/views/TransactionsPage/ReceiveTab/ReceivePage/ReceivePage.module.css
@@ -103,39 +103,9 @@
}
.receiveContentCopyButton {
- background-image: var(--copy-to-clipboard-icon);
margin-right: 10px;
}
-.receiveContentQRButton {
- background-image: var(--view-qr-icon);
-}
-
-.receiveContentShareButton {
- background-repeat: no-repeat;
- background-position: center;
- background-image: var(--share-icon);
- background-size: 20px 20px;
- height: 30px;
- width: 30px;
- box-shadow: 0px 3px 5px var(--icons-shadow);
- border-radius: 5px;
- cursor: pointer;
- margin: 0 15px 2px 15px;
-}
-
-.receiveContentCopyButton:hover {
- background-color: var(--background-copy-color);
-}
-
-.receiveContentQRButton:hover {
- background-color: var(--background-copy-color);
-}
-
-.receiveContentShareButton:hover {
- background-color: var(--background-copy-color);
-}
-
.generateButton {
position: relative;
margin-top: 20px;
diff --git a/app/components/views/TransactionsPage/SendTab/SendOutputRow/SendOutputRow.jsx b/app/components/views/TransactionsPage/SendTab/SendOutputRow/SendOutputRow.jsx
index 0e7144c77b..58994c7fe0 100644
--- a/app/components/views/TransactionsPage/SendTab/SendOutputRow/SendOutputRow.jsx
+++ b/app/components/views/TransactionsPage/SendTab/SendOutputRow/SendOutputRow.jsx
@@ -1,5 +1,12 @@
import { FormattedMessage as T, injectIntl, defineMessages } from "react-intl";
-import { classNames, Tooltip, Button } from "pi-ui";
+import {
+ classNames,
+ Tooltip,
+ Button,
+ ButtonIcon,
+ useTheme,
+ getThemeProperty
+} from "pi-ui";
import { wallet } from "wallet-preload-shim";
import {
DetailedAccountsSelect,
@@ -7,7 +14,6 @@ import {
DcrInput,
ReceiveAccountsSelect
} from "inputs";
-import { SmallButton } from "buttons";
import { Balance } from "shared";
import styles from "./SendOutputRow.module.css";
@@ -46,7 +52,7 @@ const getSendAllFundsIcon = ({
m="Send all funds from selected account - Disabled"
/>
}>
-
+
) : !isSendAll ? (
}>
-
+
) : (
}>
-
+
)}
@@ -78,32 +84,45 @@ const getAddInputIcon = ({
index,
isSendAll,
onlySendSelfAllowed
-}) =>
- isSendSelf || onlySendSelfAllowed || isSendAll ? (
+}) => {
+ const { theme } = useTheme();
+ const iconColor = getThemeProperty(theme, "color-white");
+ return isSendSelf || onlySendSelfAllowed || isSendAll ? (
}>
-
+
) : index === 0 ? (
}>
-
+
) : (
}>
-
+
onRemoveOutput(index)}
+ className={styles.delete}
+ />
);
+};
const getSendSelfIcon = ({ isSendSelf, onShowSendSelf, onShowSendOthers }) =>
!isSendSelf ? (
@@ -112,7 +131,11 @@ const getSendSelfIcon = ({ isSendSelf, onShowSendSelf, onShowSendOthers }) =>
content={
}>
-
+
) : (
content={
}>
-
);
diff --git a/app/components/views/TransactionsPage/SendTab/SendOutputRow/SendOutputRow.module.css b/app/components/views/TransactionsPage/SendTab/SendOutputRow/SendOutputRow.module.css
index b85686b2a4..4375f98087 100644
--- a/app/components/views/TransactionsPage/SendTab/SendOutputRow/SendOutputRow.module.css
+++ b/app/components/views/TransactionsPage/SendTab/SendOutputRow/SendOutputRow.module.css
@@ -9,64 +9,19 @@
.sendOutputContainer.plus {
border-right: none;
}
-.add {
- padding: 0 !important;
- width: 24px;
- height: 24px;
- background-image: var(--add-icon);
- background-size: 9px;
- background-position: center center;
- background-repeat: no-repeat;
- border: none !important;
+.addButton {
margin-top: 8px;
}
+.addButton.blue {
+ background-color: var(--accent-blue) !important;
+}
.delete {
- padding: 0 !important;
- width: 24px;
- height: 24px;
- background-image: var(--delete-icon);
- background-size: 9px;
- background-position: center center;
- background-repeat: no-repeat;
background-color: var(--grey-7) !important;
- border: none !important;
margin-top: 8px;
}
-.add:disabled {
- background-color: var(--small-button-disabled-bg) !important;
- cursor: default;
- opacity: 0.5;
-}
.selfAccount {
- background-image: var(--menu-accounts);
- margin-left: 10px;
-}
-.selfAccountCancel {
- background-image: var(--indicator-invalid-icon);
- margin-left: 10px;
-}
-.selfAccountCancel:hover {
- opacity: 0.85;
-}
-.sendAllButton {
- background-image: var(--send-all-default);
-}
-.sendAllButton:hover {
- background-image: var(--send-all-hover);
-}
-.sendAllButton:disabled {
- background-color: var(--small-button-disabled-bg) !important;
- background-image: var(--send-all-disabled);
- cursor: default;
- opacity: 0.5;
-}
-
-.cancelSendAll {
- background-image: var(--indicator-invalid-icon);
-}
-.cancelSendAll:hover {
- opacity: 0.85;
+ margin-left: 1rem;
}
.amountContainer {
diff --git a/app/components/views/TransactionsPage/SendTab/SendTab.js b/app/components/views/TransactionsPage/SendTab/SendTab.jsx
similarity index 100%
rename from app/components/views/TransactionsPage/SendTab/SendTab.js
rename to app/components/views/TransactionsPage/SendTab/SendTab.jsx
diff --git a/app/style/icons/accountInButton.svg b/app/style/icons/accountInButton.svg
deleted file mode 100644
index 17fba55944..0000000000
--- a/app/style/icons/accountInButton.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/app/style/icons/add.svg b/app/style/icons/add.svg
deleted file mode 100644
index 08841cf929..0000000000
--- a/app/style/icons/add.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/app/style/icons/copy-to-clipboard-blue.svg b/app/style/icons/copy-to-clipboard-blue.svg
deleted file mode 100644
index ae0ad045b8..0000000000
--- a/app/style/icons/copy-to-clipboard-blue.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/app/style/icons/copyToClipboardBlueDark.svg b/app/style/icons/copyToClipboardBlueDark.svg
deleted file mode 100644
index 96ed100209..0000000000
--- a/app/style/icons/copyToClipboardBlueDark.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/app/style/icons/delete.svg b/app/style/icons/delete.svg
deleted file mode 100644
index 8242eb4dbd..0000000000
--- a/app/style/icons/delete.svg
+++ /dev/null
@@ -1,40 +0,0 @@
-
-
-
-
diff --git a/app/style/icons/share.svg b/app/style/icons/share.svg
deleted file mode 100644
index 7f614e22bb..0000000000
--- a/app/style/icons/share.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/app/style/icons/showQR.svg b/app/style/icons/showQR.svg
deleted file mode 100644
index acfae8463a..0000000000
--- a/app/style/icons/showQR.svg
+++ /dev/null
@@ -1 +0,0 @@
-
\ No newline at end of file
diff --git a/app/style/themes/darkTheme.js b/app/style/themes/darkTheme.js
index a78c39a561..a8cb864451 100644
--- a/app/style/themes/darkTheme.js
+++ b/app/style/themes/darkTheme.js
@@ -183,6 +183,9 @@ const darkTheme = {
"seedword-button-text": "var(--info-modal-button-text)",
"seedword-button-invalid-bg": "#f0b3a1",
+ "button-icon-color-1": "#99C1E3",
+ "button-icon-color-2": "#436EC3",
+
/* icons */
"menu-settings": url(require("style/icons/menuSettingsDark.svg")),
"menu-accounts": url(require("style/icons/accountsActiveDark.svg")),
@@ -220,9 +223,6 @@ const darkTheme = {
require("style/icons/onboardingCheckcircleDark.svg")
),
"x-grey": url(require("style/icons/xGreyDark.svg")),
- "copy-to-clipboard-icon": url(
- require("style/icons/copyToClipboardBlueDark.svg")
- ),
"stakey-privacy-standard": url(
require("style/icons/privacyStandardDark.svg")
),
diff --git a/app/style/themes/icons.js b/app/style/themes/icons.js
index c79e35fecc..6442df7d08 100644
--- a/app/style/themes/icons.js
+++ b/app/style/themes/icons.js
@@ -5,8 +5,6 @@ const icons = {
"chat-bubbles": url(require("style/icons/chatBubbles.svg")),
"ticket-voted-grey-icon": url(require("style/icons/votingGrey.svg")),
"account-rename-icon": url(require("style/icons/account-rename.svg")),
- "accounts-button-icon": url(require("style/icons/accountInButton.svg")),
- "add-icon": url(require("style/icons/add.svg")),
"agenda-card-kebab-disabled": url(
require("style/icons/tickets-agenda-card-kebab-disabled.svg")
),
@@ -43,7 +41,6 @@ const icons = {
"contextbutton-eye-disabled-icon": url(
require("style/icons/contextbutton-eye-disabled.svg")
),
- "delete-icon": url(require("style/icons/delete.svg")),
"decred-macos-1024-logo": url(
require("style/icons/decred-macos-1024-logo.png")
),
@@ -176,8 +173,6 @@ const icons = {
"ticket-unmined": url(require("style/icons/ticketUnmined.svg")),
"ticket-voted": url(require("style/icons/ticketVoted.svg")),
"delete-vsp": url(require("style/icons/deleteVSP.svg")),
- "view-qr-icon": url(require("style/icons/showQR.svg")),
- "share-icon": url(require("style/icons/share.svg")),
"decred-logo": url(require("style/icons/dcrLogoShare.svg")),
"search-icon-hover": url(require("style/icons/search-hover.svg")),
"animated-alert-icon": url(require("style/icons/animated_alert_icon.gif")),
diff --git a/app/style/themes/lightTheme.js b/app/style/themes/lightTheme.js
index ac7b12e6c8..8863fff81e 100644
--- a/app/style/themes/lightTheme.js
+++ b/app/style/themes/lightTheme.js
@@ -221,9 +221,6 @@ const lightTheme = {
require("style/icons/onboarding-checkcircle.svg")
),
"x-grey": url(require("style/icons/x-grey.svg")),
- "copy-to-clipboard-icon": url(
- require("style/icons/copy-to-clipboard-blue.svg")
- ),
"stakey-privacy-standard": url(require("style/icons/privacyStandard.svg")),
"stakey-privacy-disabled": url(require("style/icons/privacyDisabled.svg")),
"stakey-privacy-custom": url(require("style/icons/privacyCustom.svg")),
diff --git a/test/unit/components/shared/CopyToClipboard.spec.js b/test/unit/components/buttons/CopyToClipboardButton.spec.js
similarity index 51%
rename from test/unit/components/shared/CopyToClipboard.spec.js
rename to test/unit/components/buttons/CopyToClipboardButton.spec.js
index 1cf84ae4ff..19fe78f432 100644
--- a/test/unit/components/shared/CopyToClipboard.spec.js
+++ b/test/unit/components/buttons/CopyToClipboardButton.spec.js
@@ -1,4 +1,4 @@
-import { CopyToClipboard } from "shared";
+import { CopyToClipboardButton } from "buttons";
import { render } from "test-utils.js";
import user from "@testing-library/user-event";
import { screen } from "@testing-library/react";
@@ -15,39 +15,14 @@ beforeEach(() => {
mockCopy = copy.mockImplementation(() => true);
});
-test("test CopyToClipboard", () => {
+test("test CopyToClipboardButton", () => {
render(
-
- );
-
- // success indicator should be hidden initially
- const copied = screen.getByText("Copied");
- expect(copied.className).toMatch("hidden");
- const copyIcon = screen.getByRole("button", { name: "Copy" });
-
- // success indicator should appear after successful copy
- user.click(copyIcon);
- expect(mockCopy).toHaveBeenCalledWith(testTextToCopy);
- expect(copied.className).not.toMatch("hidden");
-
- // success indicator should disappear after mouseLeave event
- fireEvent.mouseOut(copyIcon);
- expect(copied.className).toMatch("hidden");
-});
-
-test("test CopyToClipboard with custom ButtonComponent", () => {
- const CustomButtonComponent = (props) => ;
-
- render(
-
);
- expect(screen.getByText("Custom")).toBeInTheDocument();
-
// success indicator should be hidden initially
const copied = screen.getByText("Copied");
expect(copied.className).toMatch("hidden");