diff --git a/i18n/locales/en/common.json b/i18n/locales/en/common.json index 5ebf0ed3c3..34fadb1c1f 100644 --- a/i18n/locales/en/common.json +++ b/i18n/locales/en/common.json @@ -94,8 +94,8 @@ "Confirm vote on Ledger Nano S": "Confirm vote on Ledger Nano S", "Confirm your name": "Confirm your name", "Confirm your passphrase": "Confirm your passphrase", - "Confirmation": "Confirmation", "Confirmation in the next step": "Confirmation in the next step", + "Confirmations": "Confirmations", "Connected to ": "Connected to ", "Connected to:": "Connected to:", "Connecting to network": "Connecting to network", @@ -107,9 +107,9 @@ "Copy": "Copy", "Copy Link": "Copy Link", "Copy Transaction ID to clipboard": "Copy Transaction ID to clipboard", + "Copy link": "Copy link", "Copy passphrase": "Copy passphrase", "Copy to Clipboard": "Copy to Clipboard", - "Copy transaction link": "Copy transaction link", "Could not reach the network. Please try again.": "Could not reach the network. Please try again.", "Create": "Create", "Create First Transaction": "Create First Transaction", diff --git a/src/assets/images/icons-v2/link.svg b/src/assets/images/icons-v2/link.svg index b0c53861dd..c96038b58e 100644 --- a/src/assets/images/icons-v2/link.svg +++ b/src/assets/images/icons-v2/link.svg @@ -1,6 +1,9 @@ - + - - + + + + + diff --git a/src/assets/images/icons-v2/tx-2nd-passphrase.svg b/src/assets/images/icons-v2/tx-2nd-passphrase.svg index e180c209a2..1480576c4c 100644 --- a/src/assets/images/icons-v2/tx-2nd-passphrase.svg +++ b/src/assets/images/icons-v2/tx-2nd-passphrase.svg @@ -1,6 +1,10 @@ - - - - + + + + + + + + diff --git a/src/assets/images/icons-v2/tx-default.svg b/src/assets/images/icons-v2/tx-default.svg index added2473d..419156198c 100644 --- a/src/assets/images/icons-v2/tx-default.svg +++ b/src/assets/images/icons-v2/tx-default.svg @@ -1,4 +1,13 @@ - - - + + + + + + + + + + + + diff --git a/src/assets/images/icons-v2/tx-delegate.svg b/src/assets/images/icons-v2/tx-delegate.svg index 6d560e5ffc..401858dea7 100644 --- a/src/assets/images/icons-v2/tx-delegate.svg +++ b/src/assets/images/icons-v2/tx-delegate.svg @@ -1,6 +1,10 @@ - - - - + + + + + + + + diff --git a/src/assets/images/icons-v2/tx-send-arrow.svg b/src/assets/images/icons-v2/tx-send-arrow.svg index 4fbc9b619d..28d787de8f 100644 --- a/src/assets/images/icons-v2/tx-send-arrow.svg +++ b/src/assets/images/icons-v2/tx-send-arrow.svg @@ -1,6 +1,3 @@ - - - - - + + diff --git a/src/assets/images/icons-v2/tx-vote.svg b/src/assets/images/icons-v2/tx-vote.svg index 74e7966e7a..8016bd86b1 100644 --- a/src/assets/images/icons-v2/tx-vote.svg +++ b/src/assets/images/icons-v2/tx-vote.svg @@ -1,6 +1,11 @@ - - - - + + + + + + + + + diff --git a/src/components/singleTransactionV2/singleTransactionV2.css b/src/components/singleTransactionV2/singleTransactionV2.css index c6e287b8c5..4364e003bc 100644 --- a/src/components/singleTransactionV2/singleTransactionV2.css +++ b/src/components/singleTransactionV2/singleTransactionV2.css @@ -1,10 +1,17 @@ @import '../app/variablesV2.css'; +@import '../app/mixins.css'; .wrapper { - min-width: 580px; + margin: 20px 0 40px; padding: 0; width: auto; + & .txLink { + align-items: center; + display: flex !important; + justify-content: center; + } + & .detailsHeader { display: flex; justify-content: space-between; @@ -25,29 +32,29 @@ } & .txIcon { - background: var(--color-white); - border: 4px solid var(--color-white); - border-radius: 10px; box-sizing: border-box; - height: 46px; - transform: translateY(50%); - width: 46px; + height: 24px; + margin-top: 20px; + width: 24px; } & .mainContent { - padding: 40px 24px; + padding: 0 20px; } & .detailsFooter { display: flex; - flex-wrap: nowrap; + flex-wrap: wrap; justify-content: space-between; - margin-top: 40px; + margin: 0; + padding: 0; & > div { align-items: flex-start; + border-top: 1px solid var(--color-platinum); display: flex; - flex-direction: column; + padding: 20px 0; + width: 100%; &:last-child { align-items: flex-end; @@ -55,33 +62,47 @@ } & .label { - color: var(--color-dark-gray); - font-family: var(--content-font); - font-size: var(--paragraph-font-size-s); - font-weight: var(--font-weight-bold); - letter-spacing: 0.05px; - line-height: 17px; - margin-right: 5px; + @mixin contentSmall; + + align-items: center; + color: var(--color-slate-gray); + display: flex; + margin-bottom: 10px; } & .value { - color: var(--color-content-light); - font-family: var(--content-font); - font-size: var(--paragraph-font-size-l); - font-weight: var(--font-weight-bold); - letter-spacing: 0.05px; - line-height: 18px; + @mixin contentLargest; + + align-items: flex-start; + color: var(--color-maastricht-blue); + display: flex; + flex-direction: column; + justify-content: center; margin: 0; + padding-left: 20px; + width: 100%; & img { display: inline-block; - height: 16px; + height: 14px; + margin-left: 5px; vertical-align: middle; - width: 16px; + width: 14px; } - &:last-child { - margin-top: 16px; + &:first-child { + padding-left: 0; + padding-right: 20px; + position: relative; + + &::after { + background-color: var(--color-platinum); + content: ''; + height: calc(100% - 13px); + position: absolute; + right: 0; + width: 1px; + } } } @@ -89,15 +110,6 @@ cursor: pointer; } - & .link { - color: var(--color-link); - cursor: pointer; - font-family: var(--heading-font); - font-size: var(--paragraph-font-size-l); - font-weight: var(--font-weight-bold); - text-decoration: underline; - } - & .copied { cursor: initial; opacity: 0.6; @@ -105,9 +117,3 @@ } } } - -@media (--small-viewport) { - .wrapper { - min-width: 0; - } -} diff --git a/src/components/singleTransactionV2/singleTransactionV2.js b/src/components/singleTransactionV2/singleTransactionV2.js index 70442bb8aa..104632f902 100644 --- a/src/components/singleTransactionV2/singleTransactionV2.js +++ b/src/components/singleTransactionV2/singleTransactionV2.js @@ -7,6 +7,7 @@ import LiskAmount from '../liskAmount'; import EmptyState from '../emptyState'; import svg from '../../utils/svgIcons'; import BoxV2 from '../boxV2'; +import { SecondaryButtonV2 } from '../toolbox/buttons/button'; import TransactionDetailViewV2 from '../transactionsV2/transactionDetailViewV2/transactionDetailViewV2'; import styles from './singleTransactionV2.css'; @@ -39,7 +40,7 @@ class SingleTransactionV2 extends React.Component { return true; } - // istanbul skip next + // istanbul ignore next componentWillUnmount() { clearTimeout(this.idTimeout); clearTimeout(this.linkTimeout); @@ -78,65 +79,75 @@ class SingleTransactionV2 extends React.Component { return (
{ this.props.transaction.id && !this.props.transaction.error ? ( - +

{title}

- - - - + this.handleCopy('link')}> + + {this.state.linkCopied + ? {t('Copied!')} + : ( + {t('Copy link')} + + ) + } + +
+

- {t('Fee')} - - {t('LSK')} + {t('Date')} + +

-

- {t('Transaction ID')} - this.handleCopy('id')}> - - {this.state.idCopied - ? t('Copied!') - : {transaction.id} } - - -

-
-

- {t('Confirmation')} + {t('Confirmations')} {transaction.confirmations || 0}

-

- this.handleCopy('link')}> - {this.state.linkCopied - ? {t('Copied!')} - : {t('Copy transaction link')} } - -

+
+
+

+ {t('Fee')} + + {t('LSK')} + +

+ this.handleCopy('id')}> +

+ + {t('Transaction ID')} + + + + {this.state.idCopied + ? t('Copied!') + : {transaction.id} + } + +

+
) : ( - + diff --git a/src/components/toolbox/buttons/css/baseV2.css b/src/components/toolbox/buttons/css/baseV2.css index 93fd78e2c3..f8371c8f35 100644 --- a/src/components/toolbox/buttons/css/baseV2.css +++ b/src/components/toolbox/buttons/css/baseV2.css @@ -31,7 +31,11 @@ padding: 0 16px; } - & > :global(.button-icon) { + & * { + line-height: inherit !important; + } + + & :global(.button-icon) { display: block; height: 1.2em; /* stylelint-disable-line */ margin-left: 0.42em; /* stylelint-disable-line */ diff --git a/src/components/transactionsV2/transactionDetailViewV2/accountInfo.js b/src/components/transactionsV2/transactionDetailViewV2/accountInfo.js index 48d9624705..c988a61ecb 100644 --- a/src/components/transactionsV2/transactionDetailViewV2/accountInfo.js +++ b/src/components/transactionsV2/transactionDetailViewV2/accountInfo.js @@ -8,12 +8,12 @@ const AccountInfo = ({ address, label, addressClass = '' }) => { const addressLink = `${routes.accounts.pathPrefix}${routes.accounts.path}`; return (
- +
-

{label}

{address} +

{label}

); diff --git a/src/components/transactionsV2/transactionDetailViewV2/transactionDetailViewV2.css b/src/components/transactionsV2/transactionDetailViewV2/transactionDetailViewV2.css index 766b7b3927..d1d9cf52fd 100644 --- a/src/components/transactionsV2/transactionDetailViewV2/transactionDetailViewV2.css +++ b/src/components/transactionsV2/transactionDetailViewV2/transactionDetailViewV2.css @@ -1,93 +1,88 @@ @import '../../app/variablesV2.css'; +@import '../../app/mixins.css'; .summaryHeader { align-items: center; display: flex; flex-direction: column; - margin-bottom: 40px; + margin: 20px 0; & > h1 { - color: var(--color-dark-gray); - font-family: var(--content-font); - font-size: var(--paragraph-font-size-s); - font-weight: var(--font-weight-bold); - margin: 0 0 8px; + @mixin contentSmall; + + color: var(--color-slate-gray); + margin: 0; } & > p, & .txAmount { - color: var(--color-content-light); - font-family: var(--heading-font); - font-size: var(--font-size-h2); - font-weight: var(--font-weight-bold); - letter-spacing: 0.1px; - margin: 0; + @mixin headingNormal; - & > span:last-child { - color: var(--color-dark-gray); - font-size: var(--subtitle-font-size); - } + color: var(--color-maastricht-blue); + margin: 0; } } .accountWrapper { align-items: center; display: flex; - justify-content: space-between; - margin-top: 20px; + justify-content: space-evenly; + margin: 20px 0; & .separator { flex-grow: 0; flex-shrink: 0; - height: 24px; - width: 24px; + height: 14px; + margin: 0 auto; + width: 7px; } & .accountInfo { align-items: center; display: flex; - height: 42px; + flex-basis: 40%; + flex-direction: column; + + & .avatar { + margin-bottom: 20px; + } & > div:last-child { + align-items: center; display: flex; flex-direction: column; height: 100%; justify-content: space-between; - margin-left: 22px; - } - - & p, - & a { - font-family: var(--content-font); - font-weight: var(--font-weight-bold); - margin: 0; - text-align: left; } & .label { - color: var(--color-dark-gray); - font-size: var(--paragraph-font-size-s); + @mixin contentSmall; + + color: var(--color-slate-gray); + margin: 0; } & .address { - color: var(--color-content-light); - font-size: var(--paragraph-font-size-l); + @mixin headingSmall; + + color: var(--color-maastricht-blue); text-decoration: none; } } } .detailsWrapper { + border-top: 1px solid var(--color-platinum); display: flex; flex-direction: column; - margin-top: 24px; + margin-top: 20px; + padding: 20px 0; & .label { - color: var(--color-dark-gray); - font-family: var(--content-font); - font-size: var(--paragraph-font-size-s); - font-weight: var(--font-weight-bold); - margin-bottom: 8px; + @mixin contentSmall; + + color: var(--color-slate-gray); + margin-bottom: 10px; text-align: left; & .count { @@ -97,15 +92,9 @@ } & .message { - border-radius: var(--border-radius-box); - border: solid 1px var(--color-light-gray); - background-color: var(--color-background-menu); - color: var(--color-content-light); - font-family: var(--content-font); - font-size: var(--paragraph-font-size-l); - font-weight: var(--font-weight-semi-bold); - font-style: italic; - padding: 24px; + @mixin contentLargest; + + color: var(--color-maastricht-blue); text-align: left; } @@ -118,52 +107,34 @@ margin-bottom: 0; } - &.added { - & .voteTag { - background-color: rgba(0, 178, 98, 0.8); - } - - & .rank { - color: rgba(0, 178, 98, 0.8); - } - } - - &.deleted { - & .voteTag { - background-color: var(--color-dark-gray); - } - - & .rank { - color: var(--color-dark-gray); - } - } - & .voteTag { + @mixin contentSmall bold; + + align-items: center; + border: 1px solid var(--dark-border-color); border-radius: var(--border-radius-standard); box-sizing: border-box; - color: var(--color-white); + color: var(--color-maastricht-blue); display: flex; - font-family: var(--content-font); - font-size: var(--paragraph-font-size-l); - font-weight: var(--font-weight-semi-bold); - height: 24px; + height: 32px; margin-bottom: 8px; - margin-right: 24px; - padding: 3px; + margin-right: 8px; + padding: 7px 10px; text-decoration: none; } & .rank { - background-color: var(--color-white); + @mixin contentSmall bold; + + align-items: center; + background-color: var(--color-slate-gray); border-radius: var(--border-radius-standard); + color: var(--color-white); + display: flex; height: 18px; - margin-right: 3px; - padding: 0 6px; - text-align: center; - } - - & .username { + margin-right: 10px; padding: 0 5px; + text-align: center; } } } diff --git a/src/components/transactionsV2/transactionDetailViewV2/transactionDetailViewV2.js b/src/components/transactionsV2/transactionDetailViewV2/transactionDetailViewV2.js index d6e68e42ef..dba38e6216 100644 --- a/src/components/transactionsV2/transactionDetailViewV2/transactionDetailViewV2.js +++ b/src/components/transactionsV2/transactionDetailViewV2/transactionDetailViewV2.js @@ -35,7 +35,6 @@ class TransactionDetailViewV2 extends React.Component { {transaction.type === 0 || transaction.type === 2 ? (
-

{title}

{transaction.type === 0 ? ( @@ -47,6 +46,7 @@ class TransactionDetailViewV2 extends React.Component { ) : value }

+

{title}

) : null}
@@ -60,7 +60,7 @@ class TransactionDetailViewV2 extends React.Component { + label={'Recipient'} /> ) : null }
diff --git a/src/components/transactionsV2/transactionDetailViewV2/transactionVotes.js b/src/components/transactionsV2/transactionDetailViewV2/transactionVotes.js index d8cd4f9ed7..7b14d3a2f1 100644 --- a/src/components/transactionsV2/transactionDetailViewV2/transactionVotes.js +++ b/src/components/transactionsV2/transactionDetailViewV2/transactionVotes.js @@ -11,14 +11,14 @@ const transactionVotes = ({ votes, t }) => { {votes.added ? - {t('Added Votes')} {votes.added.length} + {t('Added Votes')} ({votes.added.length})
{votes.added.slice(0).sort((a, b) => a.rank - b.rank).map((vote, voteKey) => ( - {vote.rank} + #{vote.rank} {vote.username} ))} @@ -27,14 +27,14 @@ const transactionVotes = ({ votes, t }) => { {votes.deleted ? - {t('Removed Votes')} {votes.deleted.length} + {t('Removed Votes')} ({votes.deleted.length})
{votes.deleted.slice(0).sort((a, b) => a.rank - b.rank).map((vote, voteKey) => ( - {vote.rank} + #{vote.rank} {vote.username} ))} diff --git a/src/components/transactionsV2/transactionDetailViewV2/transactionVotes.test.js b/src/components/transactionsV2/transactionDetailViewV2/transactionVotes.test.js index 2527485e24..1a2cf2bf73 100644 --- a/src/components/transactionsV2/transactionDetailViewV2/transactionVotes.test.js +++ b/src/components/transactionsV2/transactionDetailViewV2/transactionVotes.test.js @@ -20,7 +20,7 @@ describe('Transaction Votes', () => { it('Should render with added and deleted Votes', () => { wrapper = mount(, options); expect(wrapper).toContainMatchingElements(2, '.votesContainer'); - expect(wrapper.find('.rank').first().text()).toEqual(props.votes.added[0].rank); + expect(wrapper.find('.rank').first().text()).toEqual(`#${props.votes.added[0].rank}`); expect(wrapper.find('.username').first().text()).toEqual(props.votes.added[0].username); }); @@ -36,7 +36,7 @@ describe('Transaction Votes', () => { }; wrapper = mount(, options); expect(wrapper).toContainMatchingElements(1, '.votesContainer.added'); - expect(wrapper.find('.rank').at(1).text()).toBe(addedProps.votes.added[0].rank); + expect(wrapper.find('.rank').at(1).text()).toBe(`#${addedProps.votes.added[0].rank}`); }); it('Should only render removed votes', () => {