From 39ee7142df510f44753f26dd6737a52344794491 Mon Sep 17 00:00:00 2001 From: Ikemefuna Obioha Date: Mon, 20 Sep 2021 18:22:14 +0100 Subject: [PATCH 01/16] Updated and rearranged delegate profile tiles --- i18n/locales/en/common.json | 6 +++--- .../wallet/delegateProfile/performanceView.js | 16 ++++++++-------- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/i18n/locales/en/common.json b/i18n/locales/en/common.json index 2211bb2fa7..6aaa3682ef 100644 --- a/i18n/locales/en/common.json +++ b/i18n/locales/en/common.json @@ -1,5 +1,5 @@ { - "\n You can choose a high, medium, or low transaction priority, each requiring a\n corresponding transaction fee. Or you can pay any desired fee of no less than\n {{minFee}} {{token}}. If you don't know what fee to pay, choose\n one of the provided transaction priorities.\n ": "\n You can choose a high, medium, or low transaction priority, each requiring a\n corresponding transaction fee. Or you can pay any desired fee of no less than\n {{minFee}} {{token}}. If you don't know what fee to pay, choose\n one of the provided transaction priorities.\n ", + "\r\n You can choose a high, medium, or low transaction priority, each requiring a\r\n corresponding transaction fee. Or you can pay any desired fee of no less than\r\n {{minFee}} {{token}}. If you don't know what fee to pay, choose\r\n one of the provided transaction priorities.\r\n ": "\r\n You can choose a high, medium, or low transaction priority, each requiring a\r\n corresponding transaction fee. Or you can pay any desired fee of no less than\r\n {{minFee}} {{token}}. If you don't know what fee to pay, choose\r\n one of the provided transaction priorities.\r\n ", " - Confirm transaction on your {{deviceModel}}": " - Confirm transaction on your {{deviceModel}}", " is out. ": " is out. ", " to deposit LSK.": " to deposit LSK.", @@ -234,7 +234,6 @@ "Label is too long, Max. 20 characters": "Label is too long, Max. 20 characters", "Label is too long.": "Label is too long.", "Last block forged": "Last block forged", - "Last forged block": "Last forged block", "Last {{num}} blocks": "Last {{num}} blocks", "Later": "Later", "Latest votes": "Latest votes", @@ -245,7 +244,7 @@ "Lisk Terms of Use": "Lisk Terms of Use", "Lisk Website": "Lisk Website", "Lisk accounts on {{WalletModel}}": "Lisk accounts on {{WalletModel}}", - "Lisk counts your message in bytes, so keep in mind\n that the length of your message may vary in different languages.\n Different characters may consume a varying amount of bytes.": "Lisk counts your message in bytes, so keep in mind\n that the length of your message may vary in different languages.\n Different characters may consume a varying amount of bytes.", + "Lisk counts your message in bytes, so keep in mind\r\n that the length of your message may vary in different languages.\r\n Different characters may consume a varying amount of bytes.": "Lisk counts your message in bytes, so keep in mind\r\n that the length of your message may vary in different languages.\r\n Different characters may consume a varying amount of bytes.", "Lisk currently supports Ledger Nano S, Ledger Nano X, Trezor One and Trezor Model T wallets": "Lisk currently supports Ledger Nano S, Ledger Nano X, Trezor One and Trezor Model T wallets", "Lisk currently supports Ledger Nano S, Ledger Nano X, Trezor One and Trezor T wallets.": "Lisk currently supports Ledger Nano S, Ledger Nano X, Trezor One and Trezor T wallets.", "Lisk has now been enhanced even further": "Lisk has now been enhanced even further", @@ -354,6 +353,7 @@ "Priority": "Priority", "Privacy": "Privacy", "Privacy policy": "Privacy policy", + "Productivity": "Productivity", "Provide Feedback": "Provide Feedback", "Provide a correct amount of {{token}}": "Provide a correct amount of {{token}}", "Provide a correct wallet address or the name of a bookmarked account": "Provide a correct wallet address or the name of a bookmarked account", diff --git a/src/components/screens/wallet/delegateProfile/performanceView.js b/src/components/screens/wallet/delegateProfile/performanceView.js index 3275717f85..ad1dee5de0 100644 --- a/src/components/screens/wallet/delegateProfile/performanceView.js +++ b/src/components/screens/wallet/delegateProfile/performanceView.js @@ -38,7 +38,7 @@ const PerformanceView = ({ - {data.lastForgedHeight || '-'} + {'99.45%' || '-'} - -
{data.consecutiveMissedBlocks}
-
+ +
{data.consecutiveMissedBlocks}
+ From 00d1c1ed9d3253a6229698898e33f61ff8643eac Mon Sep 17 00:00:00 2001 From: Ikemefuna Obioha Date: Tue, 21 Sep 2021 20:08:17 +0100 Subject: [PATCH 02/16] Implemented delegate status widget --- src/assets/images/icons/delegate-active.svg | 27 +++++++++ .../delegateProfile/delegateProfile.css | 58 +++++++++++++++++++ .../wallet/delegateProfile/detailsView.js | 2 +- .../wallet/delegateProfile/performanceView.js | 45 +++++++++++++- src/components/toolbox/icon/index.js | 2 + 5 files changed, 130 insertions(+), 4 deletions(-) create mode 100644 src/assets/images/icons/delegate-active.svg diff --git a/src/assets/images/icons/delegate-active.svg b/src/assets/images/icons/delegate-active.svg new file mode 100644 index 0000000000..a619d2b901 --- /dev/null +++ b/src/assets/images/icons/delegate-active.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/screens/wallet/delegateProfile/delegateProfile.css b/src/components/screens/wallet/delegateProfile/delegateProfile.css index d2441e2e25..d6b6696ac3 100644 --- a/src/components/screens/wallet/delegateProfile/delegateProfile.css +++ b/src/components/screens/wallet/delegateProfile/delegateProfile.css @@ -167,6 +167,64 @@ } } } + + & .full { + padding: 0; + display: flex; + flex-direction: column; + height: 332px; + + &:nth-child(2) { + margin: 0; + } + + & .content { + display: flex; + flex-direction: column; + padding-left: 20px; + padding-top: 20px; + + & .title { + @mixin contentNormal; + + color: var(--color-slate-gray); + margin-bottom: 15px; + + &:global(.dark) { + color: var(--color-manatee-gray); + } + } + + & .delegateDescription { + & p { + font-size: var(--paragraph-font-size-s); + } + + & p:last-child { + margin-top: 0 !important; + } + } + + & > *:not(.title):not(.delegateDescription):not(.highlighIcon) { + @mixin delegatePerformanceValueFont; + + color: var(--color-maastricht-blue); + } + } + + & .highlighIcon { + align-self: flex-end; + display: flex; + flex: 1; + justify-content: flex-end; + height: 120px; + width: 170px; + + &.delegateActive { + padding-right: 10px; + } + } + } } .icon { diff --git a/src/components/screens/wallet/delegateProfile/detailsView.js b/src/components/screens/wallet/delegateProfile/detailsView.js index 60976f1dda..d0f6820750 100644 --- a/src/components/screens/wallet/delegateProfile/detailsView.js +++ b/src/components/screens/wallet/delegateProfile/detailsView.js @@ -16,7 +16,7 @@ const DetailsView = ({ const theme = useTheme(); return ( - +

{t('Details')}

 diff --git a/src/components/screens/wallet/delegateProfile/performanceView.js b/src/components/screens/wallet/delegateProfile/performanceView.js index ad1dee5de0..ed93dbe843 100644 --- a/src/components/screens/wallet/delegateProfile/performanceView.js +++ b/src/components/screens/wallet/delegateProfile/performanceView.js @@ -17,6 +17,24 @@ const Item = ({ return ( +
+
{title}
+ {children} +
+
+ +
+ + ); +}; + +const FullItem = ({ + icon, title, children, +}) => { + const theme = useTheme(); + + return ( +
{title}
{ children } @@ -28,15 +46,36 @@ const Item = ({ ); }; +const ActiveDelegate = () => { + const theme = useTheme(); + + return ( +
+

This delegate is among the first 101 delegates in delegate weight ranking.

+ +

The first 101 delegates will always be selected to forge new blocks.

+
+ ); +}; + const PerformanceView = ({ t, data, }) => ( - +

{t('Performance')}

 - + + +
{`${data.status[0].toUpperCase()}${data.status.slice(1)}` ?? '-'}
+ + + + {data.producedBlocks ?? '-'}
 - + Date: Wed, 22 Sep 2021 13:08:49 +0100 Subject: [PATCH 03/16] Fixed text and image alignment issues --- .../icons/consecutive-missed-blocks.svg | 35 +++++++++++++++++++ .../delegateProfile/delegateProfile.css | 19 ++++++++-- .../wallet/delegateProfile/performanceView.js | 4 +-- src/components/toolbox/icon/index.js | 2 ++ 4 files changed, 56 insertions(+), 4 deletions(-) create mode 100644 src/assets/images/icons/consecutive-missed-blocks.svg diff --git a/src/assets/images/icons/consecutive-missed-blocks.svg b/src/assets/images/icons/consecutive-missed-blocks.svg new file mode 100644 index 0000000000..139eb801fa --- /dev/null +++ b/src/assets/images/icons/consecutive-missed-blocks.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/screens/wallet/delegateProfile/delegateProfile.css b/src/components/screens/wallet/delegateProfile/delegateProfile.css index d6b6696ac3..60a67367e9 100644 --- a/src/components/screens/wallet/delegateProfile/delegateProfile.css +++ b/src/components/screens/wallet/delegateProfile/delegateProfile.css @@ -10,7 +10,6 @@ & .content { flex-flow: row nowrap; - width: calc(100% + 1em); /* stylelint-disable-line unit-whitelist */ } } @@ -147,13 +146,21 @@ &.productivity { height: 122px; width: 206px; + + & img { + width: 100%; + } } &.forgedBlocks { padding-right: 20px; + + & img { + width: 100%; + } } - &.missedBlocks { + &.consecutiveMissedBlocks { justify-content: flex-end; align-items: center; height: 156px; @@ -164,6 +171,10 @@ height: 108px; width: 196px; padding-right: 20px; + + & img { + width: 100%; + } } } } @@ -200,6 +211,10 @@ font-size: var(--paragraph-font-size-s); } + & p:first-child { + margin-bottom: 7px; + } + & p:last-child { margin-top: 0 !important; } diff --git a/src/components/screens/wallet/delegateProfile/performanceView.js b/src/components/screens/wallet/delegateProfile/performanceView.js index ed93dbe843..71b5429b9d 100644 --- a/src/components/screens/wallet/delegateProfile/performanceView.js +++ b/src/components/screens/wallet/delegateProfile/performanceView.js @@ -71,7 +71,7 @@ const PerformanceView = ({ title={t('Status')} icon="delegateActive" > -
{`${data.status[0].toUpperCase()}${data.status.slice(1)}` ?? '-'}
+
{data.status ? `${data.status[0].toUpperCase()}${data.status.slice(1)}` : '-'}
 @@ -105,7 +105,7 @@ const PerformanceView = ({
{data.consecutiveMissedBlocks}
 diff --git a/src/components/toolbox/icon/index.js b/src/components/toolbox/icon/index.js index 580736fed6..a31c633ad5 100644 --- a/src/components/toolbox/icon/index.js +++ b/src/components/toolbox/icon/index.js @@ -150,6 +150,7 @@ import missedBlocks from '../../../assets/images/icons/missed-blocks.svg'; import missedBlocksDark from '../../../assets/images/icons/missed-blocks-dark.svg'; import forgedBlocks from '../../../assets/images/icons/forged-blocks.svg'; import forgedBlocksDark from '../../../assets/images/icons/forged-blocks-dark.svg'; +import consecutiveMissedBlocks from '../../../assets/images/icons/consecutive-missed-blocks.svg'; import lock from '../../../assets/images/icons/lock.svg'; import unlock from '../../../assets/images/icons/unlock.svg'; import loading from '../../../assets/images/icons/loading.svg'; @@ -202,6 +203,7 @@ export const icons = { calendarDark, checkboxFilled, checkmark, + consecutiveMissedBlocks, copy, dashboardIcon, dashboardIconActive, From 6065d83c81f228ca8aa956dcc11ed92171372bce Mon Sep 17 00:00:00 2001 From: Ikemefuna Obioha Date: Wed, 22 Sep 2021 14:32:44 +0100 Subject: [PATCH 04/16] Implemented dynamic delegate details --- src/assets/images/icons/delegate-banned.svg | 31 ++++ src/assets/images/icons/delegate-punished.svg | 31 ++++ src/assets/images/icons/delegate-standby.svg | 31 ++++ .../delegateProfile/delegateProfile.css | 17 ++ .../wallet/delegateProfile/performanceView.js | 151 ++++++++++++------ src/components/toolbox/icon/index.js | 6 + 6 files changed, 217 insertions(+), 50 deletions(-) create mode 100644 src/assets/images/icons/delegate-banned.svg create mode 100644 src/assets/images/icons/delegate-punished.svg create mode 100644 src/assets/images/icons/delegate-standby.svg diff --git a/src/assets/images/icons/delegate-banned.svg b/src/assets/images/icons/delegate-banned.svg new file mode 100644 index 0000000000..869a37caae --- /dev/null +++ b/src/assets/images/icons/delegate-banned.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/icons/delegate-punished.svg b/src/assets/images/icons/delegate-punished.svg new file mode 100644 index 0000000000..9a1c3da2a7 --- /dev/null +++ b/src/assets/images/icons/delegate-punished.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/icons/delegate-standby.svg b/src/assets/images/icons/delegate-standby.svg new file mode 100644 index 0000000000..42ffc77970 --- /dev/null +++ b/src/assets/images/icons/delegate-standby.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/screens/wallet/delegateProfile/delegateProfile.css b/src/components/screens/wallet/delegateProfile/delegateProfile.css index 60a67367e9..368d242610 100644 --- a/src/components/screens/wallet/delegateProfile/delegateProfile.css +++ b/src/components/screens/wallet/delegateProfile/delegateProfile.css @@ -218,6 +218,11 @@ & p:last-child { margin-top: 0 !important; } + + & p:only-child { + margin-top: var(--paragraph-font-size-s) !important; + margin-bottom: var(--paragraph-font-size-s) !important; + } } & > *:not(.title):not(.delegateDescription):not(.highlighIcon) { @@ -238,6 +243,18 @@ &.delegateActive { padding-right: 10px; } + + &.delegateStandby { + padding-right: 10px; + } + + &.delegatePunished { + padding-right: 10px; + } + + &.delegateBanned { + padding-right: 10px; + } } } } diff --git a/src/components/screens/wallet/delegateProfile/performanceView.js b/src/components/screens/wallet/delegateProfile/performanceView.js index 71b5429b9d..565d4bb4e7 100644 --- a/src/components/screens/wallet/delegateProfile/performanceView.js +++ b/src/components/screens/wallet/delegateProfile/performanceView.js @@ -58,60 +58,111 @@ const ActiveDelegate = () => { ); }; +const StandyDelegate = () => { + const theme = useTheme(); + + return ( +
+

+ The delegate weight is at least 1,000 LSK meaning that the delegate can be chosen + for one of the two randomly assigned slots for standby delegates. +

+
+ ); +}; + +const PunishedDelegate = () => { + const theme = useTheme(); + + return ( +
+

This delegate can not forge new blocks temporarily due to a protocol violation.

+
+ ); +}; + +const BannedDelegate = () => { + const theme = useTheme(); + + return ( +
+

This delegate is permanently banned from forging new blocks.

+
+ ); +}; + +const getDelegateIcon = (status) => { + const capitalizedStatus = `${status[0].toUpperCase()}${status.slice(1)}`; + return `delegate${capitalizedStatus}`; +}; + +const getDelegateComponent = (status) => { + const components = { + active: ActiveDelegate, + standby: StandyDelegate, + punished: PunishedDelegate, + banned: BannedDelegate, + }; + return components[status]; +}; + const PerformanceView = ({ t, data, -}) => ( - - -

{t('Performance')}

- - - - -
{data.status ? `${data.status[0].toUpperCase()}${data.status.slice(1)}` : '-'}
- - - - - - { + const DelegateComponent = getDelegateComponent(data.status); + return ( + + +

{t('Performance')}

+ + + + - {'99.45%' || '-'} - - - -
{data.producedBlocks ?? '-'}
- - - - -
- - -
{data.consecutiveMissedBlocks}
- +
{data.status ? `${data.status[0].toUpperCase()}${data.status.slice(1)}` : '-'}
+ + + + + + + {'99.45%' || '-'} + + + +
{data.producedBlocks ?? '-'}
+ + + + +
+ + +
{data.consecutiveMissedBlocks}
+ + - -); + ); +}; export default PerformanceView; diff --git a/src/components/toolbox/icon/index.js b/src/components/toolbox/icon/index.js index a31c633ad5..e9d878df10 100644 --- a/src/components/toolbox/icon/index.js +++ b/src/components/toolbox/icon/index.js @@ -174,6 +174,9 @@ import delegateWarning from '../../../assets/images/icons/delegate-warning.svg'; import delegateAwaiting from '../../../assets/images/icons/delegate-awaiting.svg'; import delegateAwaitingDark from '../../../assets/images/icons/delegate-awaiting-dark.svg'; import delegateActive from '../../../assets/images/icons/delegate-active.svg'; +import delegateStandby from '../../../assets/images/icons/delegate-standby.svg'; +import delegatePunished from '../../../assets/images/icons/delegate-punished.svg'; +import delegateBanned from '../../../assets/images/icons/delegate-banned.svg'; import eyeInactive from '../../../assets/images/icons/eye-inactive.svg'; import eyeActive from '../../../assets/images/icons/eye-active.svg'; import liskIcon from '../../../assets/images/icons/lisk-icon.svg'; @@ -354,6 +357,9 @@ export const icons = { delegateAwaiting, delegateAwaitingDark, delegateActive, + delegateStandby, + delegatePunished, + delegateBanned, eyeActive, eyeInactive, liskIcon, From 870fc7b5234f2b2754dfe2b6539463bc0e1736b7 Mon Sep 17 00:00:00 2001 From: Ikemefuna Obioha Date: Wed, 22 Sep 2021 19:13:56 +0100 Subject: [PATCH 05/16] Working on dynamic delegate performance modal --- .../delegateProfile/delegatePerformance.js | 40 +++++++++++++++++++ .../delegatePerformanceModal.js | 13 ++++++ .../delegateProfile/delegateProfile.css | 7 ++++ .../wallet/delegateProfile/performanceView.js | 27 ++++++++++++- .../screens/wallet/delegateProfile/styles.css | 7 ++++ src/constants/routes.js | 4 ++ src/routesMap.js | 2 + 7 files changed, 98 insertions(+), 2 deletions(-) create mode 100644 src/components/screens/wallet/delegateProfile/delegatePerformance.js create mode 100644 src/components/screens/wallet/delegateProfile/delegatePerformanceModal.js create mode 100644 src/components/screens/wallet/delegateProfile/styles.css diff --git a/src/components/screens/wallet/delegateProfile/delegatePerformance.js b/src/components/screens/wallet/delegateProfile/delegatePerformance.js new file mode 100644 index 0000000000..be69630c8b --- /dev/null +++ b/src/components/screens/wallet/delegateProfile/delegatePerformance.js @@ -0,0 +1,40 @@ +import React from 'react'; +// import grid from 'flexboxgrid/dist/flexboxgrid.css'; +import Box from '@toolbox/box'; +import BoxHeader from '@toolbox/box/header'; +import BoxContent from '@toolbox/box/content'; +import styles from './styles.css'; + +const DelegatePerformance = ({ title }) => { +// const DelegatePerformance = ({ title, data: { reason, details } }) => { + const detailsData = { + // eslint-disable-next-line no-multi-str + reason: 'This delegate was punished 3 times. Two more
 punishments will cause the permanent ban of the delegate.', + details: [ + { startHeight: 10273851, endHeight: 10273872 }, + { startHeight: 10058635, endHeight: 10278851 }, + { startHeight: 10273951, endHeight: 10274851 }, + ], + }; + const { reason, details } = detailsData; + return ( + + {title && ( + +

{title}

+ + )} + +

{title}

+

{reason}

+

+ {details[0].startHeight} + {' '} + {details[0].endHeight} +

+ + + ); +}; + +export default DelegatePerformance; diff --git a/src/components/screens/wallet/delegateProfile/delegatePerformanceModal.js b/src/components/screens/wallet/delegateProfile/delegatePerformanceModal.js new file mode 100644 index 0000000000..14dbfe89f4 --- /dev/null +++ b/src/components/screens/wallet/delegateProfile/delegatePerformanceModal.js @@ -0,0 +1,13 @@ +import React from 'react'; +import grid from 'flexboxgrid/dist/flexboxgrid.css'; +import Dialog from '@toolbox/dialog/dialog'; +import DelegatePerformance from './delegatePerformance'; +import styles from './styles.css'; + +const DelegatePerformanceModal = (props) => ( + + + +); + +export default DelegatePerformanceModal; diff --git a/src/components/screens/wallet/delegateProfile/delegateProfile.css b/src/components/screens/wallet/delegateProfile/delegateProfile.css index 368d242610..3758a7e20b 100644 --- a/src/components/screens/wallet/delegateProfile/delegateProfile.css +++ b/src/components/screens/wallet/delegateProfile/delegateProfile.css @@ -223,6 +223,13 @@ margin-top: var(--paragraph-font-size-s) !important; margin-bottom: var(--paragraph-font-size-s) !important; } + + & .details { + & p { + color: var(--color-link-active); + cursor: pointer; + } + } } & > *:not(.title):not(.delegateDescription):not(.highlighIcon) { diff --git a/src/components/screens/wallet/delegateProfile/performanceView.js b/src/components/screens/wallet/delegateProfile/performanceView.js index 565d4bb4e7..6fcf19c167 100644 --- a/src/components/screens/wallet/delegateProfile/performanceView.js +++ b/src/components/screens/wallet/delegateProfile/performanceView.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { createContext } from 'react'; import grid from 'flexboxgrid/dist/flexboxgrid.css'; import { NavLink } from 'react-router-dom'; import { useTheme } from '@utils/theme'; @@ -7,6 +7,7 @@ import Box from '@toolbox/box'; import BoxHeader from '@toolbox/box/header'; import BoxContent from '@toolbox/box/content'; import LiskAmount from '@shared/liskAmount'; +import DialogLink from '@toolbox/dialog/link'; import Icon from '@toolbox/icon'; import styles from './delegateProfile.css'; @@ -71,12 +72,34 @@ const StandyDelegate = () => { ); }; +const detailsData = { + // eslint-disable-next-line no-multi-str + reason: 'This delegate was punished 3 times. Two more
 punishments will cause the permanent ban of the delegate.', + data: [ + { startHeight: 10273851, endHeight: 10273872 }, + { startHeight: 10058635, endHeight: 10278851 }, + { startHeight: 10273951, endHeight: 10274851 }, + ], +}; + +// Use context to pass data into modal +export const DelegatePerformanceContext = createContext({ + performance: detailsData, +}); + const PunishedDelegate = () => { const theme = useTheme(); return (

This delegate can not forge new blocks temporarily due to a protocol violation.

+ +

Details >

+
); }; @@ -119,7 +142,7 @@ const PerformanceView = ({
{data.status ? `${data.status[0].toUpperCase()}${data.status.slice(1)}` : '-'}
diff --git a/src/components/screens/wallet/delegateProfile/styles.css b/src/components/screens/wallet/delegateProfile/styles.css new file mode 100644 index 0000000000..adddfffe23 --- /dev/null +++ b/src/components/screens/wallet/delegateProfile/styles.css @@ -0,0 +1,7 @@ +.container { + padding: 0 20px; +} + +.content { + padding: 0 !important; +} diff --git a/src/constants/routes.js b/src/constants/routes.js index 06072d1660..8fd724f3f6 100644 --- a/src/constants/routes.js +++ b/src/constants/routes.js @@ -167,4 +167,8 @@ export const modals = { isPrivate: true, forbiddenTokens: [tokenMap.BTC.key], }, + delegatePerformance: { + isPrivate: false, + forbiddenTokens: [], + }, }; diff --git a/src/routesMap.js b/src/routesMap.js index 3a109fa5e1..4c43bf0382 100644 --- a/src/routesMap.js +++ b/src/routesMap.js @@ -4,6 +4,7 @@ import Blocks from '@screens/monitor/blocks'; import Bookmarks from '@screens/bookmarks/list'; import Dashboard from '@screens/dashboard'; import DelegatesMonitor from '@screens/monitor/delegates'; +import DelegatesPerformanceModal from '@screens/wallet/delegateProfile/delegatePerformanceModal'; import HwWalletLogin from '@screens/hwWalletLogin'; import Login from '@screens/login'; import MonitorAccounts from '@screens/monitor/accounts'; @@ -46,6 +47,7 @@ export default { accounts: MonitorAccounts, network: MonitorNetwork, delegates: DelegatesMonitor, + delegatePerformance: DelegatesPerformanceModal, reclaim: ReclaimBalance, dashboard: Dashboard, addBookmark: AddBookmark, From a6c58763b6e1379739bf63b4471d0ca1130ab7f0 Mon Sep 17 00:00:00 2001 From: Ikemefuna Obioha Date: Thu, 23 Sep 2021 20:26:14 +0100 Subject: [PATCH 06/16] Added dynamic behaviour to performance modal --- .../delegatePerformance.js | 67 +++++++++++++++++++ .../delegatePerformanceDetails.js | 21 ++++++ .../wallet/delegatePerformance/index.js | 36 ++++++++++ .../index.js} | 6 +- .../delegateProfile/delegatePerformance.js | 40 ----------- .../wallet/delegateProfile/delegateProfile.js | 3 +- .../wallet/delegateProfile/performanceView.js | 2 +- src/routesMap.js | 2 +- 8 files changed, 131 insertions(+), 46 deletions(-) create mode 100644 src/components/screens/wallet/delegatePerformance/delegatePerformance.js create mode 100644 src/components/screens/wallet/delegatePerformance/delegatePerformanceDetails.js create mode 100644 src/components/screens/wallet/delegatePerformance/index.js rename src/components/screens/wallet/{delegateProfile/delegatePerformanceModal.js => delegatePerformanceModal/index.js} (65%) delete mode 100644 src/components/screens/wallet/delegateProfile/delegatePerformance.js diff --git a/src/components/screens/wallet/delegatePerformance/delegatePerformance.js b/src/components/screens/wallet/delegatePerformance/delegatePerformance.js new file mode 100644 index 0000000000..284f3eadad --- /dev/null +++ b/src/components/screens/wallet/delegatePerformance/delegatePerformance.js @@ -0,0 +1,67 @@ +import React from 'react'; +// import grid from 'flexboxgrid/dist/flexboxgrid.css'; +import Box from '@toolbox/box'; +import BoxHeader from '@toolbox/box/header'; +import BoxContent from '@toolbox/box/content'; +import NotFound from '@shared/notFound'; +import { isEmpty } from '@utils/helpers'; +import delegatePerformanceDetails from './delegatePerformanceDetails'; +import styles from '../delegateProfile/styles.css'; + +// eslint-disable-next-line max-statements +const DelegatePerformance = ({ delegate: { error, isLoading, data } } = {}) => { + if (!error && isEmpty(data)) { + return
; + } + + if (error && isEmpty(data)) { + return ; + } + + const { dpos: { delegate: { pomHeights, status, consecutiveMissedBlocks } } } = data; + let title = ''; + switch (status) { + case 'punished': + title = 'Punishment details'; + break; + + case 'banned': + title = 'Banning details'; + break; + + default: + title = 'Unknown details'; + } + + const detailsData = { + // eslint-disable-next-line no-multi-str + reason: 'This delegate was punished 3 times. Two more
 punishments will cause the permanent ban of the delegate.', + details: [ + { startHeight: 10273851, endHeight: 10273872 }, + { startHeight: 10058635, endHeight: 10278851 }, + { startHeight: 10273951, endHeight: 10274851 }, + ], + }; + const { details } = detailsData; + + return ( + + {title && ( + +

{title}

+ + )} + +

{title}

+

{delegatePerformanceDetails(pomHeights.length, status, consecutiveMissedBlocks)}

+

+ {details[0].startHeight} + {' '} + {details[0].endHeight} +

+ + + ); +}; + +export default DelegatePerformance; diff --git a/src/components/screens/wallet/delegatePerformance/delegatePerformanceDetails.js b/src/components/screens/wallet/delegatePerformance/delegatePerformanceDetails.js new file mode 100644 index 0000000000..f357199605 --- /dev/null +++ b/src/components/screens/wallet/delegatePerformance/delegatePerformanceDetails.js @@ -0,0 +1,21 @@ +const delegatePerformanceDetails = (count, status, consecutiveMissedBlocks = 0) => { + if (status === 'punished') { + // Since this can only be accessed if the delegate has been punished at least once + // and is not banned yet due to not getting 5 punishments, the text to be displayed + // will be for one to four punishments + const textConversion = { + 1: 'One', + 2: 'Two', + 3: 'Three', + 4: 'Four', + 5: 'Five', + }; + const timesLeft = 5 - count; + const textCount = textConversion[timesLeft]; + + return `The delegate was punished ${count} time${count !== 1 ? 's' : ''}. ${textCount} more punishments will cause the permanent ban of the delegate.`; + } + return `The delegate is banned because of not forging blocks for 1 month and missing ${consecutiveMissedBlocks} consecutive blocks`; +}; + +export default delegatePerformanceDetails; diff --git a/src/components/screens/wallet/delegatePerformance/index.js b/src/components/screens/wallet/delegatePerformance/index.js new file mode 100644 index 0000000000..6f64acdd7a --- /dev/null +++ b/src/components/screens/wallet/delegatePerformance/index.js @@ -0,0 +1,36 @@ +/* istanbul ignore file */ +import { compose } from 'redux'; +import { connect } from 'react-redux'; +import { withRouter } from 'react-router-dom'; +import { getActiveTokenAccount } from '@utils/account'; +import { getDelegate } from '@api/delegate'; +import withData from '@utils/withData'; +import { parseSearchParams } from '@utils/searchParams'; +import { withTranslation } from 'react-i18next'; +import DelegatePerformance from './delegatePerformance'; + +const mapStateToProps = (state, ownProps) => ({ + account: getActiveTokenAccount(state), + id: ownProps.match.params.id, + activeToken: state.settings.token?.active ?? 'LSK', +}); + +const apis = { + delegate: { + apiUtil: (network, { address }) => + getDelegate({ network, params: { address } }), + getApiParams: (state, ownProps) => ({ + address: parseSearchParams(ownProps.location.search).address, + network: state.network, + }), + transformResponse: response => response.data[0] || {}, + autoload: true, + }, +}; + +export default compose( + withRouter, + connect(mapStateToProps), + withData(apis), + withTranslation(), +)(DelegatePerformance); diff --git a/src/components/screens/wallet/delegateProfile/delegatePerformanceModal.js b/src/components/screens/wallet/delegatePerformanceModal/index.js similarity index 65% rename from src/components/screens/wallet/delegateProfile/delegatePerformanceModal.js rename to src/components/screens/wallet/delegatePerformanceModal/index.js index 14dbfe89f4..caa7387e79 100644 --- a/src/components/screens/wallet/delegateProfile/delegatePerformanceModal.js +++ b/src/components/screens/wallet/delegatePerformanceModal/index.js @@ -1,12 +1,12 @@ import React from 'react'; import grid from 'flexboxgrid/dist/flexboxgrid.css'; import Dialog from '@toolbox/dialog/dialog'; -import DelegatePerformance from './delegatePerformance'; -import styles from './styles.css'; +import DelegatePerformance from '../delegatePerformance'; +import styles from '../delegateProfile/styles.css'; const DelegatePerformanceModal = (props) => ( - + ); diff --git a/src/components/screens/wallet/delegateProfile/delegatePerformance.js b/src/components/screens/wallet/delegateProfile/delegatePerformance.js deleted file mode 100644 index be69630c8b..0000000000 --- a/src/components/screens/wallet/delegateProfile/delegatePerformance.js +++ /dev/null @@ -1,40 +0,0 @@ -import React from 'react'; -// import grid from 'flexboxgrid/dist/flexboxgrid.css'; -import Box from '@toolbox/box'; -import BoxHeader from '@toolbox/box/header'; -import BoxContent from '@toolbox/box/content'; -import styles from './styles.css'; - -const DelegatePerformance = ({ title }) => { -// const DelegatePerformance = ({ title, data: { reason, details } }) => { - const detailsData = { - // eslint-disable-next-line no-multi-str - reason: 'This delegate was punished 3 times. Two more
 punishments will cause the permanent ban of the delegate.', - details: [ - { startHeight: 10273851, endHeight: 10273872 }, - { startHeight: 10058635, endHeight: 10278851 }, - { startHeight: 10273951, endHeight: 10274851 }, - ], - }; - const { reason, details } = detailsData; - return ( - - {title && ( - -

{title}

- - )} - -

{title}

-

{reason}

-

- {details[0].startHeight} - {' '} - {details[0].endHeight} -

- - - ); -}; - -export default DelegatePerformance; diff --git a/src/components/screens/wallet/delegateProfile/delegateProfile.js b/src/components/screens/wallet/delegateProfile/delegateProfile.js index 5b45ce2aaf..d15ca32709 100644 --- a/src/components/screens/wallet/delegateProfile/delegateProfile.js +++ b/src/components/screens/wallet/delegateProfile/delegateProfile.js @@ -26,6 +26,7 @@ const DelegateProfile = ({ if (!data.dpos?.delegate) { return null; } + const userData = { ...data.dpos.delegate, address: data.summary.address }; return (
@@ -39,7 +40,7 @@ const DelegateProfile = ({ /> {

Details >

 diff --git a/src/routesMap.js b/src/routesMap.js index 4c43bf0382..739c8641fa 100644 --- a/src/routesMap.js +++ b/src/routesMap.js @@ -4,7 +4,7 @@ import Blocks from '@screens/monitor/blocks'; import Bookmarks from '@screens/bookmarks/list'; import Dashboard from '@screens/dashboard'; import DelegatesMonitor from '@screens/monitor/delegates'; -import DelegatesPerformanceModal from '@screens/wallet/delegateProfile/delegatePerformanceModal'; +import DelegatesPerformanceModal from '@screens/wallet/delegatePerformanceModal'; import HwWalletLogin from '@screens/hwWalletLogin'; import Login from '@screens/login'; import MonitorAccounts from '@screens/monitor/accounts'; From 8f236a669eec9247a21100de772433668472c884 Mon Sep 17 00:00:00 2001 From: Ikemefuna Obioha Date: Thu, 23 Sep 2021 22:28:51 +0100 Subject: [PATCH 07/16] Fixed modal styling --- .../delegatePerformance.js | 53 ++++++++++--------- .../wallet/delegatePerformance/styles.css | 32 +++++++++++ .../wallet/delegatePerformanceModal/index.js | 3 +- .../screens/wallet/delegateProfile/styles.css | 7 --- 4 files changed, 60 insertions(+), 35 deletions(-) create mode 100644 src/components/screens/wallet/delegatePerformance/styles.css delete mode 100644 src/components/screens/wallet/delegateProfile/styles.css diff --git a/src/components/screens/wallet/delegatePerformance/delegatePerformance.js b/src/components/screens/wallet/delegatePerformance/delegatePerformance.js index 284f3eadad..acb612fba7 100644 --- a/src/components/screens/wallet/delegatePerformance/delegatePerformance.js +++ b/src/components/screens/wallet/delegatePerformance/delegatePerformance.js @@ -1,12 +1,12 @@ import React from 'react'; -// import grid from 'flexboxgrid/dist/flexboxgrid.css'; +import grid from 'flexboxgrid/dist/flexboxgrid.css'; import Box from '@toolbox/box'; import BoxHeader from '@toolbox/box/header'; import BoxContent from '@toolbox/box/content'; import NotFound from '@shared/notFound'; import { isEmpty } from '@utils/helpers'; import delegatePerformanceDetails from './delegatePerformanceDetails'; -import styles from '../delegateProfile/styles.css'; +import styles from './styles.css'; // eslint-disable-next-line max-statements const DelegatePerformance = ({ delegate: { error, isLoading, data } } = {}) => { @@ -32,33 +32,34 @@ const DelegatePerformance = ({ delegate: { error, isLoading, data } } = {}) => { default: title = 'Unknown details'; } - - const detailsData = { - // eslint-disable-next-line no-multi-str - reason: 'This delegate was punished 3 times. Two more
 punishments will cause the permanent ban of the delegate.', - details: [ - { startHeight: 10273851, endHeight: 10273872 }, - { startHeight: 10058635, endHeight: 10278851 }, - { startHeight: 10273951, endHeight: 10274851 }, - ], - }; - const { details } = detailsData; - + // {`${grid.row} ${styles.content}`} return ( - {title && ( - -

{title}

- - )} - -

{title}

-

{delegatePerformanceDetails(pomHeights.length, status, consecutiveMissedBlocks)}

-

- {details[0].startHeight} - {' '} - {details[0].endHeight} + +

{title}

+ + +

+ {delegatePerformanceDetails(pomHeights.length, status, consecutiveMissedBlocks)}

+ + +

Punishment starts

+ + +

Punishment ends

+ + + {pomHeights && pomHeights.map((height, index) => ( + + +

{height.start}

+ + +

{height.end}

+ + + ))} ); diff --git a/src/components/screens/wallet/delegatePerformance/styles.css b/src/components/screens/wallet/delegatePerformance/styles.css new file mode 100644 index 0000000000..8ddc140eb9 --- /dev/null +++ b/src/components/screens/wallet/delegatePerformance/styles.css @@ -0,0 +1,32 @@ +.container { + padding: 0 20px !important; + width: auto !important; +} + +.content { + display: flex; + flex-direction: row; + + & .description { + color: var(--color-slate-gray); + text-align: left; + } + + & .performanceContainer { + flex-flow: row nowrap; + padding-left: 10px; + + & .header { + color: var(--color-slate-gray); + font-size: var(--font-size-small-secondary); + } + + & .start { + text-align: left; + } + + & .end { + text-align: right; + } + } +} diff --git a/src/components/screens/wallet/delegatePerformanceModal/index.js b/src/components/screens/wallet/delegatePerformanceModal/index.js index caa7387e79..7514e18750 100644 --- a/src/components/screens/wallet/delegatePerformanceModal/index.js +++ b/src/components/screens/wallet/delegatePerformanceModal/index.js @@ -2,10 +2,9 @@ import React from 'react'; import grid from 'flexboxgrid/dist/flexboxgrid.css'; import Dialog from '@toolbox/dialog/dialog'; import DelegatePerformance from '../delegatePerformance'; -import styles from '../delegateProfile/styles.css'; const DelegatePerformanceModal = (props) => ( - + ); diff --git a/src/components/screens/wallet/delegateProfile/styles.css b/src/components/screens/wallet/delegateProfile/styles.css deleted file mode 100644 index adddfffe23..0000000000 --- a/src/components/screens/wallet/delegateProfile/styles.css +++ /dev/null @@ -1,7 +0,0 @@ -.container { - padding: 0 20px; -} - -.content { - padding: 0 !important; -} From 9e8b0eedd00ea692982071de4a98fe45a82b3f47 Mon Sep 17 00:00:00 2001 From: Ikemefuna Obioha Date: Fri, 24 Sep 2021 11:46:25 +0100 Subject: [PATCH 08/16] Fixed minor styling issues --- .../delegatePerformance/delegatePerformance.js | 18 +++++++++++------- .../wallet/delegatePerformance/styles.css | 8 ++++++++ 2 files changed, 19 insertions(+), 7 deletions(-) diff --git a/src/components/screens/wallet/delegatePerformance/delegatePerformance.js b/src/components/screens/wallet/delegatePerformance/delegatePerformance.js index acb612fba7..897074baaf 100644 --- a/src/components/screens/wallet/delegatePerformance/delegatePerformance.js +++ b/src/components/screens/wallet/delegatePerformance/delegatePerformance.js @@ -39,23 +39,27 @@ const DelegatePerformance = ({ delegate: { error, isLoading, data } } = {}) => {

{title}

-

- {delegatePerformanceDetails(pomHeights.length, status, consecutiveMissedBlocks)} -

+ + +

+ {delegatePerformanceDetails(pomHeights.length, status, consecutiveMissedBlocks)} +

+ + - +

Punishment starts

 - +

Punishment ends

 {pomHeights && pomHeights.map((height, index) => ( - +

{height.start}

 - +

{height.end}

 diff --git a/src/components/screens/wallet/delegatePerformance/styles.css b/src/components/screens/wallet/delegatePerformance/styles.css index 8ddc140eb9..3b3bebd7d1 100644 --- a/src/components/screens/wallet/delegatePerformance/styles.css +++ b/src/components/screens/wallet/delegatePerformance/styles.css @@ -6,6 +6,7 @@ .content { display: flex; flex-direction: row; + padding-top: 0 !important; & .description { color: var(--color-slate-gray); @@ -29,4 +30,11 @@ text-align: right; } } + + @media (--xLarge-viewport) { + & .performanceContainer { + flex-flow: row nowrap; + padding-left: 0; + } + } } From 448f52bb2d97b81200e2dbea30b62f13f6955d74 Mon Sep 17 00:00:00 2001 From: Ikemefuna Obioha Date: Fri, 24 Sep 2021 12:11:49 +0100 Subject: [PATCH 09/16] Implemented non-eligible status and minor code cleanup --- .../images/icons/delegate-non-eligible.svg | 21 ++++++++++++++ .../delegatePerformance.js | 2 +- .../wallet/delegateProfile/performanceView.js | 29 +++++++++---------- src/components/toolbox/icon/index.js | 2 ++ 4 files changed, 38 insertions(+), 16 deletions(-) create mode 100644 src/assets/images/icons/delegate-non-eligible.svg diff --git a/src/assets/images/icons/delegate-non-eligible.svg b/src/assets/images/icons/delegate-non-eligible.svg new file mode 100644 index 0000000000..a1e6148f25 --- /dev/null +++ b/src/assets/images/icons/delegate-non-eligible.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/screens/wallet/delegatePerformance/delegatePerformance.js b/src/components/screens/wallet/delegatePerformance/delegatePerformance.js index 897074baaf..9b755b2821 100644 --- a/src/components/screens/wallet/delegatePerformance/delegatePerformance.js +++ b/src/components/screens/wallet/delegatePerformance/delegatePerformance.js @@ -32,7 +32,7 @@ const DelegatePerformance = ({ delegate: { error, isLoading, data } } = {}) => { default: title = 'Unknown details'; } - // {`${grid.row} ${styles.content}`} + return ( diff --git a/src/components/screens/wallet/delegateProfile/performanceView.js b/src/components/screens/wallet/delegateProfile/performanceView.js index c18b1c0b24..4ad31b2499 100644 --- a/src/components/screens/wallet/delegateProfile/performanceView.js +++ b/src/components/screens/wallet/delegateProfile/performanceView.js @@ -1,4 +1,4 @@ -import React, { createContext } from 'react'; +import React from 'react'; import grid from 'flexboxgrid/dist/flexboxgrid.css'; import { NavLink } from 'react-router-dom'; import { useTheme } from '@utils/theme'; @@ -72,20 +72,18 @@ const StandyDelegate = () => { ); }; -const detailsData = { - // eslint-disable-next-line no-multi-str - reason: 'This delegate was punished 3 times. Two more
 punishments will cause the permanent ban of the delegate.', - data: [ - { startHeight: 10273851, endHeight: 10273872 }, - { startHeight: 10058635, endHeight: 10278851 }, - { startHeight: 10273951, endHeight: 10274851 }, - ], -}; +const NonEligibleDelegate = () => { + const theme = useTheme(); -// Use context to pass data into modal -export const DelegatePerformanceContext = createContext({ - performance: detailsData, -}); + return ( +
+

+ The delegate weight is below 1,000 LSK meaning that the delegate is not eligible + to forge. +

+
+ ); +}; const PunishedDelegate = () => { const theme = useTheme(); @@ -115,7 +113,7 @@ const BannedDelegate = () => { }; const getDelegateIcon = (status) => { - const capitalizedStatus = `${status[0].toUpperCase()}${status.slice(1)}`; + const capitalizedStatus = status !== 'non-eligible' ? `${status[0].toUpperCase()}${status.slice(1)}` : 'NonEligible'; return `delegate${capitalizedStatus}`; }; @@ -123,6 +121,7 @@ const getDelegateComponent = (status) => { const components = { active: ActiveDelegate, standby: StandyDelegate, + 'non-eligible': NonEligibleDelegate, punished: PunishedDelegate, banned: BannedDelegate, }; diff --git a/src/components/toolbox/icon/index.js b/src/components/toolbox/icon/index.js index e9d878df10..0c8ba74aca 100644 --- a/src/components/toolbox/icon/index.js +++ b/src/components/toolbox/icon/index.js @@ -175,6 +175,7 @@ import delegateAwaiting from '../../../assets/images/icons/delegate-awaiting.svg import delegateAwaitingDark from '../../../assets/images/icons/delegate-awaiting-dark.svg'; import delegateActive from '../../../assets/images/icons/delegate-active.svg'; import delegateStandby from '../../../assets/images/icons/delegate-standby.svg'; +import delegateNonEligible from '../../../assets/images/icons/delegate-non-eligible.svg'; import delegatePunished from '../../../assets/images/icons/delegate-punished.svg'; import delegateBanned from '../../../assets/images/icons/delegate-banned.svg'; import eyeInactive from '../../../assets/images/icons/eye-inactive.svg'; @@ -358,6 +359,7 @@ export const icons = { delegateAwaitingDark, delegateActive, delegateStandby, + delegateNonEligible, delegatePunished, delegateBanned, eyeActive, From 15a6d3602e77870c454c55461282d93cd7e5d564 Mon Sep 17 00:00:00 2001 From: Ikemefuna Obioha Date: Fri, 24 Sep 2021 13:33:40 +0100 Subject: [PATCH 10/16] Minor change for banned delegates --- .../screens/wallet/delegateProfile/performanceView.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/components/screens/wallet/delegateProfile/performanceView.js b/src/components/screens/wallet/delegateProfile/performanceView.js index 4ad31b2499..3ae7ff67fc 100644 --- a/src/components/screens/wallet/delegateProfile/performanceView.js +++ b/src/components/screens/wallet/delegateProfile/performanceView.js @@ -108,6 +108,13 @@ const BannedDelegate = () => { return (

This delegate is permanently banned from forging new blocks.

+ +

Details >

+
); }; From fec59dd8cd306cac467e4bfb5dca5d6114537d0d Mon Sep 17 00:00:00 2001 From: Ikemefuna Obioha Date: Fri, 24 Sep 2021 16:28:43 +0100 Subject: [PATCH 11/16] Fixed changes based on code review --- i18n/locales/en/common.json | 4 ++-- .../delegatePerformance.js | 19 +++++-------------- .../wallet/delegatePerformance/index.js | 9 --------- .../wallet/delegateProfile/delegateProfile.js | 3 +-- .../wallet/delegateProfile/performanceView.js | 11 +---------- src/constants/routes.js | 2 +- 6 files changed, 10 insertions(+), 38 deletions(-) diff --git a/i18n/locales/en/common.json b/i18n/locales/en/common.json index 6aaa3682ef..00c557426b 100644 --- a/i18n/locales/en/common.json +++ b/i18n/locales/en/common.json @@ -1,5 +1,5 @@ { - "\r\n You can choose a high, medium, or low transaction priority, each requiring a\r\n corresponding transaction fee. Or you can pay any desired fee of no less than\r\n {{minFee}} {{token}}. If you don't know what fee to pay, choose\r\n one of the provided transaction priorities.\r\n ": "\r\n You can choose a high, medium, or low transaction priority, each requiring a\r\n corresponding transaction fee. Or you can pay any desired fee of no less than\r\n {{minFee}} {{token}}. If you don't know what fee to pay, choose\r\n one of the provided transaction priorities.\r\n ", + "\n You can choose a high, medium, or low transaction priority, each requiring a\n corresponding transaction fee. Or you can pay any desired fee of no less than\n {{minFee}} {{token}}. If you don't know what fee to pay, choose\n one of the provided transaction priorities.\n ": "\n You can choose a high, medium, or low transaction priority, each requiring a\n corresponding transaction fee. Or you can pay any desired fee of no less than\n {{minFee}} {{token}}. If you don't know what fee to pay, choose\n one of the provided transaction priorities.\n ", " - Confirm transaction on your {{deviceModel}}": " - Confirm transaction on your {{deviceModel}}", " is out. ": " is out. ", " to deposit LSK.": " to deposit LSK.", @@ -244,7 +244,7 @@ "Lisk Terms of Use": "Lisk Terms of Use", "Lisk Website": "Lisk Website", "Lisk accounts on {{WalletModel}}": "Lisk accounts on {{WalletModel}}", - "Lisk counts your message in bytes, so keep in mind\r\n that the length of your message may vary in different languages.\r\n Different characters may consume a varying amount of bytes.": "Lisk counts your message in bytes, so keep in mind\r\n that the length of your message may vary in different languages.\r\n Different characters may consume a varying amount of bytes.", + "Lisk counts your message in bytes, so keep in mind\n that the length of your message may vary in different languages.\n Different characters may consume a varying amount of bytes.": "Lisk counts your message in bytes, so keep in mind\n that the length of your message may vary in different languages.\n Different characters may consume a varying amount of bytes.", "Lisk currently supports Ledger Nano S, Ledger Nano X, Trezor One and Trezor Model T wallets": "Lisk currently supports Ledger Nano S, Ledger Nano X, Trezor One and Trezor Model T wallets", "Lisk currently supports Ledger Nano S, Ledger Nano X, Trezor One and Trezor T wallets.": "Lisk currently supports Ledger Nano S, Ledger Nano X, Trezor One and Trezor T wallets.", "Lisk has now been enhanced even further": "Lisk has now been enhanced even further", diff --git a/src/components/screens/wallet/delegatePerformance/delegatePerformance.js b/src/components/screens/wallet/delegatePerformance/delegatePerformance.js index 9b755b2821..25bf65a156 100644 --- a/src/components/screens/wallet/delegatePerformance/delegatePerformance.js +++ b/src/components/screens/wallet/delegatePerformance/delegatePerformance.js @@ -19,24 +19,15 @@ const DelegatePerformance = ({ delegate: { error, isLoading, data } } = {}) => { } const { dpos: { delegate: { pomHeights, status, consecutiveMissedBlocks } } } = data; - let title = ''; - switch (status) { - case 'punished': - title = 'Punishment details'; - break; - - case 'banned': - title = 'Banning details'; - break; - - default: - title = 'Unknown details'; - } + const headerTitle = { + punished: 'Punishment details', + banned: 'Banning details', + }; return ( -

{title}

+

{headerTitle[status]}

 diff --git a/src/components/screens/wallet/delegatePerformance/index.js b/src/components/screens/wallet/delegatePerformance/index.js index 6f64acdd7a..61ffb042a0 100644 --- a/src/components/screens/wallet/delegatePerformance/index.js +++ b/src/components/screens/wallet/delegatePerformance/index.js @@ -1,20 +1,12 @@ /* istanbul ignore file */ import { compose } from 'redux'; -import { connect } from 'react-redux'; import { withRouter } from 'react-router-dom'; -import { getActiveTokenAccount } from '@utils/account'; import { getDelegate } from '@api/delegate'; import withData from '@utils/withData'; import { parseSearchParams } from '@utils/searchParams'; import { withTranslation } from 'react-i18next'; import DelegatePerformance from './delegatePerformance'; -const mapStateToProps = (state, ownProps) => ({ - account: getActiveTokenAccount(state), - id: ownProps.match.params.id, - activeToken: state.settings.token?.active ?? 'LSK', -}); - const apis = { delegate: { apiUtil: (network, { address }) => @@ -30,7 +22,6 @@ const apis = { export default compose( withRouter, - connect(mapStateToProps), withData(apis), withTranslation(), )(DelegatePerformance); diff --git a/src/components/screens/wallet/delegateProfile/delegateProfile.js b/src/components/screens/wallet/delegateProfile/delegateProfile.js index d15ca32709..5b45ce2aaf 100644 --- a/src/components/screens/wallet/delegateProfile/delegateProfile.js +++ b/src/components/screens/wallet/delegateProfile/delegateProfile.js @@ -26,7 +26,6 @@ const DelegateProfile = ({ if (!data.dpos?.delegate) { return null; } - const userData = { ...data.dpos.delegate, address: data.summary.address }; return (
@@ -40,7 +39,7 @@ const DelegateProfile = ({ /> - - {'99.45%' || '-'} - +
{'99.45%' || '-'}
Date: Tue, 28 Sep 2021 14:29:59 +0100 Subject: [PATCH 12/16] Made changes based on PR comments --- src/app/mixins.css | 186 ++-- .../icons/consecutive-missed-blocks-dark.svg | 35 + .../images/icons/delegate-active-dark.svg | 27 + .../images/icons/delegate-banned-dark.svg | 31 + .../icons/delegate-non-eligible-dark.svg | 21 + .../images/icons/delegate-punished-dark.svg | 31 + .../images/icons/delegate-standby-dark.svg | 30 + .../images/icons/forged-blocks-dark.svg | 38 +- src/assets/images/icons/productivity-dark.svg | 64 +- .../delegatePerformance.js | 2 +- .../wallet/delegatePerformanceModal/index.js | 25 +- .../delegatePerformanceModal/styles.css | 3 + .../delegateProfile/delegateProfile.css | 657 +++++++-------- src/components/toolbox/icon/index.js | 794 +++++++++--------- 14 files changed, 1068 insertions(+), 876 deletions(-) create mode 100644 src/assets/images/icons/consecutive-missed-blocks-dark.svg create mode 100644 src/assets/images/icons/delegate-active-dark.svg create mode 100644 src/assets/images/icons/delegate-banned-dark.svg create mode 100644 src/assets/images/icons/delegate-non-eligible-dark.svg create mode 100644 src/assets/images/icons/delegate-punished-dark.svg create mode 100644 src/assets/images/icons/delegate-standby-dark.svg create mode 100644 src/components/screens/wallet/delegatePerformanceModal/styles.css diff --git a/src/app/mixins.css b/src/app/mixins.css index d524941bc7..5fc218f995 100644 --- a/src/app/mixins.css +++ b/src/app/mixins.css @@ -1,93 +1,93 @@ -@define-mixin contentSmallest { - font-family: var(--content-font); - font-size: 11px; - font-weight: var(--font-weight-semi-bold); - letter-spacing: 0; - line-height: 18px; -} - -@define-mixin contentSmall $weight: normal { - font-family: var(--content-font); - font-size: 12px; - font-weight: var(--font-weight-$(weight)); - letter-spacing: 0; - line-height: 20px; -} - -@define-mixin contentNormal $weight: normal { - font-family: var(--content-font); - font-size: 13px; - font-weight: var(--font-weight-$(weight)); - letter-spacing: 0.2px; - line-height: 20px; -} - -@define-mixin contentLarge $weight: normal { - font-family: var(--content-font); - font-size: 14px; - font-weight: var(--font-weight-$(weight)); - letter-spacing: 0.2px; - line-height: 20px; -} - -@define-mixin contentLargest $weight: normal { - font-family: var(--content-font); - font-size: 15px; - font-weight: var(--font-weight-$(weight)); - letter-spacing: 0; - line-height: 21px; -} - -@define-mixin headingExtraSmall { - font-family: var(--heading-font); - font-size: 12px; - font-weight: var(--font-weight-bold); - letter-spacing: 0.2px; - line-height: 18px; -} - -@define-mixin headingSmall { - font-family: var(--heading-font); - font-size: 15px; - font-weight: var(--font-weight-bold); - letter-spacing: 0.2px; - line-height: 18px; -} - -@define-mixin headingNormal $weight: bold { - font-family: var(--heading-font); - font-size: 18px; - font-weight: var(--font-weight-$(weight)); - letter-spacing: 0; - line-height: 25px; -} - -@define-mixin headingNormalIntermediate $weight: bold { - font-family: var(--heading-font); - font-size: 24px; - font-weight: var(--font-weight-$(weight)); - letter-spacing: 0.1; - line-height: 32px; -} - -@define-mixin headingLarge { - font-family: var(--heading-font); - font-size: 30px; - font-weight: var(--font-weight-bold); - letter-spacing: 0.25px; - line-height: 40px; -} - -@define-mixin addressFont { - font-family: var(--heading-font); - font-size: var(--subtitle-font-size); - font-weight: var(--font-weight-bold); - letter-spacing: 0.1px; -} - -@define-mixin delegatePerformanceValueFont { - font-family: var(--heading-font); - font-size: 35px; - font-weight: 300; - line-height: 40px; -} +@define-mixin contentSmallest { + font-family: var(--content-font); + font-size: 11px; + font-weight: var(--font-weight-semi-bold); + letter-spacing: 0; + line-height: 18px; +} + +@define-mixin contentSmall $weight: normal { + font-family: var(--content-font); + font-size: 12px; + font-weight: var(--font-weight-$(weight)); + letter-spacing: 0; + line-height: 20px; +} + +@define-mixin contentNormal $weight: normal { + font-family: var(--content-font); + font-size: 13px; + font-weight: var(--font-weight-$(weight)); + letter-spacing: 0.2px; + line-height: 20px; +} + +@define-mixin contentLarge $weight: normal { + font-family: var(--content-font); + font-size: 14px; + font-weight: var(--font-weight-$(weight)); + letter-spacing: 0.2px; + line-height: 20px; +} + +@define-mixin contentLargest $weight: normal { + font-family: var(--content-font); + font-size: 15px; + font-weight: var(--font-weight-$(weight)); + letter-spacing: 0; + line-height: 21px; +} + +@define-mixin headingExtraSmall { + font-family: var(--heading-font); + font-size: 12px; + font-weight: var(--font-weight-bold); + letter-spacing: 0.2px; + line-height: 18px; +} + +@define-mixin headingSmall { + font-family: var(--heading-font); + font-size: 15px; + font-weight: var(--font-weight-bold); + letter-spacing: 0.2px; + line-height: 18px; +} + +@define-mixin headingNormal $weight: bold { + font-family: var(--heading-font); + font-size: 18px; + font-weight: var(--font-weight-$(weight)); + letter-spacing: 0; + line-height: 25px; +} + +@define-mixin headingNormalIntermediate $weight: bold { + font-family: var(--heading-font); + font-size: 24px; + font-weight: var(--font-weight-$(weight)); + letter-spacing: 0.1; + line-height: 32px; +} + +@define-mixin headingLarge { + font-family: var(--heading-font); + font-size: 30px; + font-weight: var(--font-weight-bold); + letter-spacing: 0.25px; + line-height: 40px; +} + +@define-mixin addressFont { + font-family: var(--heading-font); + font-size: var(--subtitle-font-size); + font-weight: var(--font-weight-bold); + letter-spacing: 0.1px; +} + +@define-mixin delegatePerformanceValueFont { + font-family: var(--heading-font); + font-size: 22px; + font-weight: 300; + line-height: 22px; +} diff --git a/src/assets/images/icons/consecutive-missed-blocks-dark.svg b/src/assets/images/icons/consecutive-missed-blocks-dark.svg new file mode 100644 index 0000000000..8d9034cb10 --- /dev/null +++ b/src/assets/images/icons/consecutive-missed-blocks-dark.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/icons/delegate-active-dark.svg b/src/assets/images/icons/delegate-active-dark.svg new file mode 100644 index 0000000000..6cc6097898 --- /dev/null +++ b/src/assets/images/icons/delegate-active-dark.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/icons/delegate-banned-dark.svg b/src/assets/images/icons/delegate-banned-dark.svg new file mode 100644 index 0000000000..16c511a51c --- /dev/null +++ b/src/assets/images/icons/delegate-banned-dark.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/icons/delegate-non-eligible-dark.svg b/src/assets/images/icons/delegate-non-eligible-dark.svg new file mode 100644 index 0000000000..96a37615d3 --- /dev/null +++ b/src/assets/images/icons/delegate-non-eligible-dark.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/icons/delegate-punished-dark.svg b/src/assets/images/icons/delegate-punished-dark.svg new file mode 100644 index 0000000000..2034d812a5 --- /dev/null +++ b/src/assets/images/icons/delegate-punished-dark.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/icons/delegate-standby-dark.svg b/src/assets/images/icons/delegate-standby-dark.svg new file mode 100644 index 0000000000..d195fffeb8 --- /dev/null +++ b/src/assets/images/icons/delegate-standby-dark.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/icons/forged-blocks-dark.svg b/src/assets/images/icons/forged-blocks-dark.svg index ea9253dd34..c4363d9f48 100644 --- a/src/assets/images/icons/forged-blocks-dark.svg +++ b/src/assets/images/icons/forged-blocks-dark.svg @@ -1,20 +1,20 @@ - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/images/icons/productivity-dark.svg b/src/assets/images/icons/productivity-dark.svg index a3299edd34..cda04bc120 100644 --- a/src/assets/images/icons/productivity-dark.svg +++ b/src/assets/images/icons/productivity-dark.svg @@ -1,34 +1,32 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/screens/wallet/delegatePerformance/delegatePerformance.js b/src/components/screens/wallet/delegatePerformance/delegatePerformance.js index 25bf65a156..69cd73228a 100644 --- a/src/components/screens/wallet/delegatePerformance/delegatePerformance.js +++ b/src/components/screens/wallet/delegatePerformance/delegatePerformance.js @@ -46,7 +46,7 @@ const DelegatePerformance = ({ delegate: { error, isLoading, data } } = {}) => { {pomHeights && pomHeights.map((height, index) => ( - +

{height.start}

diff --git a/src/components/screens/wallet/delegatePerformanceModal/index.js b/src/components/screens/wallet/delegatePerformanceModal/index.js index 7514e18750..2ab4220571 100644 --- a/src/components/screens/wallet/delegatePerformanceModal/index.js +++ b/src/components/screens/wallet/delegatePerformanceModal/index.js @@ -1,12 +1,13 @@ -import React from 'react'; -import grid from 'flexboxgrid/dist/flexboxgrid.css'; -import Dialog from '@toolbox/dialog/dialog'; -import DelegatePerformance from '../delegatePerformance'; - -const DelegatePerformanceModal = (props) => ( - - - -); - -export default DelegatePerformanceModal; +import React from 'react'; +import grid from 'flexboxgrid/dist/flexboxgrid.css'; +import Dialog from '@toolbox/dialog/dialog'; +import DelegatePerformance from '../delegatePerformance'; +import styles from './styles.css'; + +const DelegatePerformanceModal = (props) => ( + + + +); + +export default DelegatePerformanceModal; diff --git a/src/components/screens/wallet/delegatePerformanceModal/styles.css b/src/components/screens/wallet/delegatePerformanceModal/styles.css new file mode 100644 index 0000000000..bde3928d89 --- /dev/null +++ b/src/components/screens/wallet/delegatePerformanceModal/styles.css @@ -0,0 +1,3 @@ +.wrapper { + max-width: 30%; +} diff --git a/src/components/screens/wallet/delegateProfile/delegateProfile.css b/src/components/screens/wallet/delegateProfile/delegateProfile.css index 3758a7e20b..0d91b00bbd 100644 --- a/src/components/screens/wallet/delegateProfile/delegateProfile.css +++ b/src/components/screens/wallet/delegateProfile/delegateProfile.css @@ -1,327 +1,330 @@ -@import '../../../../app/mixins.css'; - -.detailsContainer, -.highlightContainer { - & h1.heading { - @mixin headingNormal; - - font-size: 20px; - } - - & .content { - flex-flow: row nowrap; - } -} - -.container { - display: flex; - flex-direction: column; - - & .statsContainer { - flex-flow: row nowrap; - } - - & .votesWrapper { - width: 100%; - } - - & .votesContainer { - display: grid !important; - grid-template-columns: repeat(auto-fill, 25%); - box-sizing: border-box; - justify-content: center !important; - grid-gap: 30px 0px; - - & > header { - display: none; - } - - & button { - grid-column: 1/5; - margin-top: -15px; - } - } -} - -@media (--medium-viewport) { - .container { - & .statsContainer { - flex-flow: row wrap; - } - - & .votesContainer { - grid-template-columns: repeat(auto-fill, 33.3%); - - & button { - grid-column: 1/4; - } - } - } -} - -.details { - flex-shrink: 0; - flex-grow: 1; - - & .itemContainer { - border-bottom: 1px solid var(--color-platinum); - padding: 16px 0; - margin-left: 0; - - &:last-child { - border: none; - padding-bottom: 0; - } - - &:first-child { - padding-top: 0; - } - } - - & .item { - margin-left: 16px; - - & .title { - @mixin contentNormal; - - color: var(--color-slate-gray); - - &:global(.dark) { - color: var(--color-manatee-gray); - } - } - - & .value { - margin-top: 8px; - color: var(--color-maastricht-blue); - } - } -} - -.column { - & .highlight { - padding: 0; - display: flex; - flex-direction: row; - margin-bottom: 20px; - height: 156px; - - &:nth-child(2) { - margin: 0; - } - - & .content { - width: max-content; - display: flex; - flex-direction: column; - padding-left: 20px; - padding-top: 20px; - - & .title { - @mixin contentNormal; - - color: var(--color-slate-gray); - margin-bottom: 15px; - - &:global(.dark) { - color: var(--color-manatee-gray); - } - } - - & > *:not(.title):not(.highlighIcon) { - @mixin delegatePerformanceValueFont; - - color: var(--color-maastricht-blue); - } - } - - & .highlighIcon { - align-self: flex-end; - display: flex; - flex: 1; - justify-content: flex-end; - height: 120px; - width: 170px; - - &.productivity { - height: 122px; - width: 206px; - - & img { - width: 100%; - } - } - - &.forgedBlocks { - padding-right: 20px; - - & img { - width: 100%; - } - } - - &.consecutiveMissedBlocks { - justify-content: flex-end; - align-items: center; - height: 156px; - width: 216px; - } - - &.reward { - height: 108px; - width: 196px; - padding-right: 20px; - - & img { - width: 100%; - } - } - } - } - - & .full { - padding: 0; - display: flex; - flex-direction: column; - height: 332px; - - &:nth-child(2) { - margin: 0; - } - - & .content { - display: flex; - flex-direction: column; - padding-left: 20px; - padding-top: 20px; - - & .title { - @mixin contentNormal; - - color: var(--color-slate-gray); - margin-bottom: 15px; - - &:global(.dark) { - color: var(--color-manatee-gray); - } - } - - & .delegateDescription { - & p { - font-size: var(--paragraph-font-size-s); - } - - & p:first-child { - margin-bottom: 7px; - } - - & p:last-child { - margin-top: 0 !important; - } - - & p:only-child { - margin-top: var(--paragraph-font-size-s) !important; - margin-bottom: var(--paragraph-font-size-s) !important; - } - - & .details { - & p { - color: var(--color-link-active); - cursor: pointer; - } - } - } - - & > *:not(.title):not(.delegateDescription):not(.highlighIcon) { - @mixin delegatePerformanceValueFont; - - color: var(--color-maastricht-blue); - } - } - - & .highlighIcon { - align-self: flex-end; - display: flex; - flex: 1; - justify-content: flex-end; - height: 120px; - width: 170px; - - &.delegateActive { - padding-right: 10px; - } - - &.delegateStandby { - padding-right: 10px; - } - - &.delegatePunished { - padding-right: 10px; - } - - &.delegateBanned { - padding-right: 10px; - } - } - } -} - -.icon { - height: 16px; -} - -.voteRow { - width: 238px; - width: max-content; - display: flex; - align-items: center; - - &:hover { - text-decoration: none; - } - - & .address { - @mixin contentLargest; - - padding-left: 10px; - color: var(--color-maastricht-blue); - } - - &::after { - display: none; - position: absolute; - width: calc(100% - 30px); - height: 1px; - left: 15px; - margin-top: 60px; - z-index: 0; - background: var(--color-platinum); - } - - &:nth-child(4n) { - &::after { - content: ''; - display: block; - } - } - - @media (--medium-viewport) { - &:nth-child(4n) { - &::after { - display: none; - } - } - - &:nth-child(3n) { - &::after { - content: ''; - display: block; - } - } - } -} - -.totalVotes { - color: var(--color-slate-gray); - padding-left: 5px; -} +@import '../../../../app/mixins.css'; + +.detailsContainer, +.highlightContainer { + & h1.heading { + @mixin headingNormal; + + font-size: 20px; + } + + & .content { + flex-flow: row nowrap; + } +} + +.container { + display: flex; + flex-direction: column; + + & .statsContainer { + flex-flow: row nowrap; + } + + & .votesWrapper { + width: 100%; + } + + & .votesContainer { + display: grid !important; + grid-template-columns: repeat(auto-fill, 25%); + box-sizing: border-box; + justify-content: center !important; + grid-gap: 30px 0px; + + & > header { + display: none; + } + + & button { + grid-column: 1/5; + margin-top: -15px; + } + } +} + +@media (--medium-viewport) { + .container { + & .statsContainer { + flex-flow: row wrap; + } + + & .votesContainer { + grid-template-columns: repeat(auto-fill, 33.3%); + + & button { + grid-column: 1/4; + } + } + } +} + +.details { + flex-shrink: 0; + flex-grow: 1; + + & .itemContainer { + border-bottom: 1px solid var(--color-platinum); + padding: 16px 0; + margin-left: 0; + + &:last-child { + border: none; + padding-bottom: 0; + } + + &:first-child { + padding-top: 0; + } + } + + & .item { + margin-left: 16px; + + & .title { + @mixin contentNormal; + + color: var(--color-slate-gray); + + &:global(.dark) { + color: var(--color-manatee-gray); + } + } + + & .value { + margin-top: 8px; + color: var(--color-maastricht-blue); + } + } +} + +.column { + & .highlight { + padding: 0; + display: flex; + flex-direction: row; + margin-bottom: 20px; + height: 156px; + + &:nth-child(2) { + margin: 0; + } + + & .content { + width: max-content; + display: flex; + flex-direction: column; + padding-left: 20px; + padding-top: 20px; + + & .title { + @mixin contentNormal; + + color: var(--color-slate-gray); + margin-bottom: 15px; + + &:global(.dark) { + color: var(--color-manatee-gray); + } + } + + & > *:not(.title):not(.highlighIcon) { + @mixin delegatePerformanceValueFont; + + color: var(--color-maastricht-blue); + } + } + + & .highlighIcon { + align-self: flex-end; + display: flex; + flex: 1; + justify-content: flex-end; + height: 120px; + width: 170px; + + &.productivity { + height: 122px; + width: 206px; + + & img { + width: 100%; + } + } + + &.forgedBlocks { + padding-right: 20px; + + & img { + width: 100%; + } + } + + &.consecutiveMissedBlocks { + justify-content: flex-end; + align-items: center; + height: 156px; + width: 216px; + } + + &.reward { + height: 108px; + width: 196px; + padding-right: 20px; + + & img { + width: 100%; + } + } + } + } + + & .full { + padding: 0; + display: flex; + flex-direction: column; + height: 332px; + + &:nth-child(2) { + margin: 0; + } + + & .content { + display: flex; + flex-direction: column; + padding: 20px 20px 0 20px; + + & .title { + @mixin contentNormal; + + color: var(--color-slate-gray); + margin-bottom: 15px; + + &:global(.dark) { + color: var(--color-manatee-gray); + } + } + + & .delegateDescription { + & p { + font-size: var(--paragraph-font-size-s); + } + + & p:first-child { + margin-bottom: 7px; + } + + & p:last-child { + margin-top: 0 !important; + } + + & p:only-child { + margin-top: var(--paragraph-font-size-s) !important; + margin-bottom: var(--paragraph-font-size-s) !important; + } + + & .details { + & p { + color: var(--color-link-active); + cursor: pointer; + } + } + + &:global(.dark) { + color: var(--color-manatee-gray); + } + } + + & > *:not(.title):not(.delegateDescription):not(.highlighIcon) { + @mixin delegatePerformanceValueFont; + + color: var(--color-maastricht-blue); + } + } + + & .highlighIcon { + align-self: flex-end; + display: flex; + flex: 1; + justify-content: flex-end; + height: 120px; + width: 170px; + + &.delegateActive { + padding-right: 10px; + } + + &.delegateStandby { + padding-right: 10px; + } + + &.delegatePunished { + padding-right: 10px; + } + + &.delegateBanned { + padding-right: 10px; + } + } + } +} + +.icon { + height: 16px; +} + +.voteRow { + width: 238px; + width: max-content; + display: flex; + align-items: center; + + &:hover { + text-decoration: none; + } + + & .address { + @mixin contentLargest; + + padding-left: 10px; + color: var(--color-maastricht-blue); + } + + &::after { + display: none; + position: absolute; + width: calc(100% - 30px); + height: 1px; + left: 15px; + margin-top: 60px; + z-index: 0; + background: var(--color-platinum); + } + + &:nth-child(4n) { + &::after { + content: ''; + display: block; + } + } + + @media (--medium-viewport) { + &:nth-child(4n) { + &::after { + display: none; + } + } + + &:nth-child(3n) { + &::after { + content: ''; + display: block; + } + } + } +} + +.totalVotes { + color: var(--color-slate-gray); + padding-left: 5px; +} diff --git a/src/components/toolbox/icon/index.js b/src/components/toolbox/icon/index.js index 0c8ba74aca..0099eedced 100644 --- a/src/components/toolbox/icon/index.js +++ b/src/components/toolbox/icon/index.js @@ -1,391 +1,403 @@ -/* eslint-disable max-lines */ -import React from 'react'; -import PropTypes from 'prop-types'; -import { useTheme } from '@utils/theme'; -import academy from '../../../assets/images/icons/academy.svg'; -import academyActive from '../../../assets/images/icons/academy-active.svg'; -import alertIcon from '../../../assets/images/icons/icon-alert.svg'; -import approved from '../../../assets/images/icons/approved.svg'; -import arrowLeftActive from '../../../assets/images/icons/arrow-left-active.svg'; -import arrowLeftInactive from '../../../assets/images/icons/arrow-left-inactive.svg'; -import arrowRightActive from '../../../assets/images/icons/arrow-right-active.svg'; -import arrowRightInactive from '../../../assets/images/icons/arrow-right-inactive.svg'; -import arrowRightWithStroke from '../../../assets/images/icons/arrow-right-with-stroke.svg'; -import arrowRightWithStrokeDark from '../../../assets/images/icons/arrow-right-with-stroke-dark.svg'; -import arrowUpCircle from '../../../assets/images/icons/click-to-update.svg'; -import balance from '../../../assets/images/icons/balance.svg'; -import balanceDark from '../../../assets/images/icons/balance-dark.svg'; -import bookmarksIconEmptyState from '../../../assets/images/icons/bookmarks-empty-state.svg'; -import bookmarksIconEmptyStateDark from '../../../assets/images/icons/bookmarks-empty-state-dark.svg'; -import btcIcon from '../../../assets/images/icons/icon-btc.svg'; -import checkboxFilled from '../../../assets/images/icons/checkmark-filled.svg'; -import checkmark from '../../../assets/images/icons/checkmark.svg'; -import copy from '../../../assets/images/icons/copy.svg'; -import copyActive from '../../../assets/images/icons/copy-active.svg'; -import dashboardIcon from '../../../assets/images/icons/dashboard.svg'; -import dashboardIconActive from '../../../assets/images/icons/dashboard-active.svg'; -import discord from '../../../assets/images/icons/discord.svg'; -import discordActive from '../../../assets/images/icons/discord-active.svg'; -import discreetMode from '../../../assets/images/icons/discreet-mode.svg'; -import discreetModeActive from '../../../assets/images/icons/discreet-mode-active.svg'; -import feedback from '../../../assets/images/icons/feedback.svg'; -import feedbackActive from '../../../assets/images/icons/feedback-active.svg'; -import fileOutline from '../../../assets/images/icons/icon-file-outline.svg'; -import fileOutlineDark from '../../../assets/images/icons/icon-file-outline-dark.svg'; -import help from '../../../assets/images/icons/help.svg'; -import helpActive from '../../../assets/images/icons/help-active.svg'; -import helpCenter from '../../../assets/images/icons/help-center.svg'; -import helpCenterArrow from '../../../assets/images/icons/arrow.svg'; -import hidePassphraseIcon from '../../../assets/images/icons/icon-hide-passphrase.svg'; -import hwWalletIcon from '../../../assets/images/icons/hw-wallet.svg'; -import edit from '../../../assets/images/icons/edit.svg'; -import iconEmptyRecentTransactions from '../../../assets/images/icons/empty-recent-transactions.svg'; -import iconEmptyRecentTransactionsDark from '../../../assets/images/icons/empty-recent-transactions-dark.svg'; -import iconFilter from '../../../assets/images/icons/icon-filter.svg'; -import iconLedgerDevice from '../../../assets/images/icons/icon-ledger-device.svg'; -import iconLoader from '../../../assets/images/icons/icon-loader.svg'; -import iconTrezorDevice from '../../../assets/images/icons/icon-trezor-device.svg'; -import iconWarning from '../../../assets/images/icons/icon-warning.svg'; -import incoming from '../../../assets/images/icons/incoming.svg'; -import liskChat from '../../../assets/images/icons/lisk-chat.svg'; -import liskLogo from '../../../assets/images/lisk-logo-v2.svg'; -import liskLogoDark from '../../../assets/images/lisk-logo-dark.svg'; -import liskLogoWhite from '../../../assets/images/lisk-logo-white-v2.svg'; -import logout from '../../../assets/images/icons/logout.svg'; -import logoutActive from '../../../assets/images/icons/logout-active.svg'; -import lskIcon from '../../../assets/images/icons/icon-lsk.svg'; -import newsFeedTwitter from '../../../assets/images/icons/news-feed-twitter.svg'; -import newsFeedTwitterDark from '../../../assets/images/icons/news-feed-twitter-dark.svg'; -import newsFeedBlog from '../../../assets/images/icons/news-feed-blog.svg'; -import newsFeedBlogDark from '../../../assets/images/icons/news-feed-blog-dark.svg'; -import noTweetsIcon from '../../../assets/images/icons/no-tweets.svg'; -import okIcon from '../../../assets/images/icons/icon-checkmark.svg'; -import outgoing from '../../../assets/images/icons/outgoing.svg'; -import pending from '../../../assets/images/icons/pending.svg'; -import searchActive from '../../../assets/images/icons/search-active.svg'; -import search from '../../../assets/images/icons/search.svg'; -import searchInput from '../../../assets/images/icons/search-input.svg'; -import settings from '../../../assets/images/icons/settings.svg'; -import settingsActive from '../../../assets/images/icons/settings-active.svg'; -import showPassphraseIcon from '../../../assets/images/icons/icon-show-passphrase.svg'; -import signIn from '../../../assets/images/icons/signin.svg'; -import signInActive from '../../../assets/images/icons/signin-active.svg'; -import tooltipQuestionMark from '../../../assets/images/icons/tooltip-question-icon.svg'; -import transactionApproved from '../../../assets/images/icons/transaction-status-approved.svg'; -import transactionError from '../../../assets/images/icons/transaction-error.svg'; -import transactionPending from '../../../assets/images/icons/transaction-status-pending.svg'; -import transactionSuccess from '../../../assets/images/icons/transaction-success.svg'; -import txDefault from '../../../assets/images/icons/tx-default.svg'; -import txDefaultDark from '../../../assets/images/icons/tx-default-dark.svg'; -import registerDelegate from '../../../assets/images/icons/tx-delegate.svg'; -import registerDelegateDark from '../../../assets/images/icons/tx-delegate-dark.svg'; -import vote from '../../../assets/images/icons/tx-vote.svg'; -import voteDark from '../../../assets/images/icons/tx-vote-dark.svg'; -import addedVotes from '../../../assets/images/icons/added-votes.svg'; -import removedVotes from '../../../assets/images/icons/removed-votes.svg'; -import totalVotes from '../../../assets/images/icons/total-votes.svg'; -import user from '../../../assets/images/icons/user.svg'; -import userActive from '../../../assets/images/icons/user-active.svg'; -import verifyMessageInputsView from '../../../assets/images/icons/verify-message-inputs-view.svg'; -import verifyMessageInputsViewActive from '../../../assets/images/icons/verify-message-inputs-view-active.svg'; -import verifyMessageTextareaView from '../../../assets/images/icons/verify-message-textarea-view.svg'; -import verifyMessageTextareaViewActive from '../../../assets/images/icons/verify-message-textarea-view-active.svg'; -import verifyWalletAddress from '../../../assets/images/icons/verify-icon.svg'; -import verifyWalletAddressActive from '../../../assets/images/icons/verify-icon-active.svg'; -import walletIcon from '../../../assets/images/icons/wallet.svg'; -import walletIconActive from '../../../assets/images/icons/wallet-active.svg'; -import warningIcon from '../../../assets/images/icons/warning-icon.svg'; -import warningRound from '../../../assets/images/icons/warning-round.svg'; -import qrCode from '../../../assets/images/icons/qr-code.svg'; -import signMessage from '../../../assets/images/icons/sign.svg'; -import signMessageActive from '../../../assets/images/icons/signActive.svg'; -import verifyMessage from '../../../assets/images/icons/verify.svg'; -import verifyMessageActive from '../../../assets/images/icons/verifyActive.svg'; -import qrCodeActive from '../../../assets/images/icons/qr-code-active.svg'; -import bookmark from '../../../assets/images/icons/icon-bookmark.svg'; -import bookmarkActive from '../../../assets/images/icons/icon-bookmark-active.svg'; -import bitcoinLogo from '../../../assets/images/bitcoin-logo.svg'; -import toggleSidebar from '../../../assets/images/icons/toggle-sidebar.svg'; -import toggleSidebarActive from '../../../assets/images/icons/toggle-sidebar-active.svg'; -import darkMode from '../../../assets/images/icons/dark-mode.svg'; -import lightMode from '../../../assets/images/icons/light-mode.svg'; -import blocksMonitor from '../../../assets/images/icons/blocks.svg'; -import blocksMonitorActive from '../../../assets/images/icons/blocksActive.svg'; -import accountsMonitor from '../../../assets/images/icons/accountsMonitor.svg'; -import accountsMonitorActive from '../../../assets/images/icons/accountsMonitorActive.svg'; -import transactions from '../../../assets/images/icons/transactions.svg'; -import transactionsDark from '../../../assets/images/icons/transactions-dark.svg'; -import transactionsMonitor from '../../../assets/images/icons/transactionsMonitor.svg'; -import transactionsMonitorActive from '../../../assets/images/icons/transactionsMonitorActive.svg'; -import delegatesMonitor from '../../../assets/images/icons/delegatesMonitor.svg'; -import delegatesMonitorActive from '../../../assets/images/icons/delegatesMonitorActive.svg'; -import networkMonitor from '../../../assets/images/icons/networkMonitor.svg'; -import networkMonitorActive from '../../../assets/images/icons/networkMonitorActive.svg'; -import voting from '../../../assets/images/icons/voting.svg'; -import votingActive from '../../../assets/images/icons/votingActive.svg'; -import signOut from '../../../assets/images/icons/signOut.svg'; -import plus from '../../../assets/images/icons/plus.svg'; -import plusActive from '../../../assets/images/icons/plusActive.svg'; -import remove from '../../../assets/images/icons/remove.svg'; -import totalBlocks from '../../../assets/images/icons/total-blocks.svg'; -import totalBlocksDark from '../../../assets/images/icons/total-blocks-dark.svg'; -import blocksForged from '../../../assets/images/icons/blocks-forged.svg'; -import blocksForgedDark from '../../../assets/images/icons/blocks-forged-dark.svg'; -import distribution from '../../../assets/images/icons/distribution.svg'; -import clock from '../../../assets/images/icons/clock.svg'; -import clockDark from '../../../assets/images/icons/clock-dark.svg'; -import clockActive from '../../../assets/images/icons/clock-active.svg'; -import clockActiveDark from '../../../assets/images/icons/clock-active-dark.svg'; -import star from '../../../assets/images/icons/star.svg'; -import starDark from '../../../assets/images/icons/star-dark.svg'; -import calendar from '../../../assets/images/icons/calendar.svg'; -import calendarDark from '../../../assets/images/icons/calendar-dark.svg'; -import weight from '../../../assets/images/icons/weight.svg'; -import weightDark from '../../../assets/images/icons/weight-dark.svg'; -import reward from '../../../assets/images/icons/forged-lsk.svg'; -import rewardDark from '../../../assets/images/icons/forged-lsk-dark.svg'; -import productivity from '../../../assets/images/icons/productivity.svg'; -import productivityDark from '../../../assets/images/icons/productivity-dark.svg'; -import missedBlocks from '../../../assets/images/icons/missed-blocks.svg'; -import missedBlocksDark from '../../../assets/images/icons/missed-blocks-dark.svg'; -import forgedBlocks from '../../../assets/images/icons/forged-blocks.svg'; -import forgedBlocksDark from '../../../assets/images/icons/forged-blocks-dark.svg'; -import consecutiveMissedBlocks from '../../../assets/images/icons/consecutive-missed-blocks.svg'; -import lock from '../../../assets/images/icons/lock.svg'; -import unlock from '../../../assets/images/icons/unlock.svg'; -import loading from '../../../assets/images/icons/loading.svg'; -import unlockToken from '../../../assets/images/icons/tx-unlock.svg'; -import unlockTokenDark from '../../../assets/images/icons/tx-unlock-dark.svg'; -import votingQueueInactive from '../../../assets/images/icons/voting-queue-inactive.svg'; -import votingQueueActive from '../../../assets/images/icons/voting-queue-active.svg'; -import deleteIcon from '../../../assets/images/icons/delete.svg'; -import arrowRightTailed from '../../../assets/images/icons/arrow-right-tailed.svg'; -import download from '../../../assets/images/icons/download.svg'; -import registerMultisignatureGroup from '../../../assets/images/icons/multisignature.svg'; -import multisignatureTransaction from '../../../assets/images/icons/multisignatureTransaction.svg'; -import multisignatureTransactionDark from '../../../assets/images/icons/multisignatureTransaction-dark.svg'; -import multiSignatureOutline from '../../../assets/images/icons/multisignature-outline.svg'; -import upload from '../../../assets/images/icons/upload.svg'; -import delegateForged from '../../../assets/images/icons/delegate-forged.svg'; -import delegateForgedDark from '../../../assets/images/icons/delegate-forged-dark.svg'; -import delegateMissed from '../../../assets/images/icons/delegate-missed.svg'; -import delegateMissedDark from '../../../assets/images/icons/delegate-missed-dark.svg'; -import delegateWarning from '../../../assets/images/icons/delegate-warning.svg'; -import delegateAwaiting from '../../../assets/images/icons/delegate-awaiting.svg'; -import delegateAwaitingDark from '../../../assets/images/icons/delegate-awaiting-dark.svg'; -import delegateActive from '../../../assets/images/icons/delegate-active.svg'; -import delegateStandby from '../../../assets/images/icons/delegate-standby.svg'; -import delegateNonEligible from '../../../assets/images/icons/delegate-non-eligible.svg'; -import delegatePunished from '../../../assets/images/icons/delegate-punished.svg'; -import delegateBanned from '../../../assets/images/icons/delegate-banned.svg'; -import eyeInactive from '../../../assets/images/icons/eye-inactive.svg'; -import eyeActive from '../../../assets/images/icons/eye-active.svg'; -import liskIcon from '../../../assets/images/icons/lisk-icon.svg'; -import initialiseIcon from '../../../assets/images/icons/initialise-icon.svg'; -import initialiseRegistration from '../../../assets/images/icons/initialise-registration.svg'; -import warningYellow from '../../../assets/images/icons/warning-yellow.svg'; -import linkIcon from '../../../assets/images/icons/link-icon.svg'; -import refresh from '../../../assets/images/icons/refresh.svg'; -import reportDelegateMisbehavior from '../../../assets/images/icons/reportDelegateMisbehavior.svg'; -import reportDelegateMisbehaviorDark from '../../../assets/images/icons/reportDelegateMisbehavior-dark.svg'; - -export const icons = { - academy, - academyActive, - alertIcon, - approved, - arrowRightTailed, - arrowLeftActive, - arrowLeftInactive, - arrowRightActive, - arrowRightInactive, - arrowUpCircle, - balance, - bookmarksIconEmptyState, - btcIcon, - calendar, - calendarDark, - checkboxFilled, - checkmark, - consecutiveMissedBlocks, - copy, - dashboardIcon, - dashboardIconActive, - deleteIcon, - discord, - discordActive, - discreetMode, - discreetModeActive, - feedback, - feedbackActive, - fileOutline, - forgedBlocks, - forgedBlocksDark, - reward, - rewardDark, - help, - helpActive, - helpCenter, - helpCenterArrow, - hidePassphraseIcon, - hwWalletIcon, - edit, - iconEmptyRecentTransactions, - iconFilter, - iconLedgerDevice, - iconLoader, - iconTrezorDevice, - iconWarning, - incoming, - liskChat, - liskLogo, - liskLogoWhite, - logout, - logoutActive, - lskIcon, - newsFeedTwitter, - noTweetsIcon, - okIcon, - outgoing, - pending, - searchActive, - search, - settings, - settingsActive, - showPassphraseIcon, - signIn, - signInActive, - star, - starDark, - tooltipQuestionMark, - transactionApproved, - transactionError, - transactionPending, - transactionSuccess, - txDefault, - txDefaultDark, - registerDelegate, - registerDelegateDark, - vote, - voteDark, - user, - userActive, - verifyMessageInputsView, - verifyMessageInputsViewActive, - verifyMessageTextareaView, - verifyMessageTextareaViewActive, - verifyWalletAddress, - walletIcon, - walletIconActive, - warningIcon, - warningRound, - addedVotes, - removedVotes, - totalVotes, - qrCode, - qrCodeActive, - copyActive, - verifyWalletAddressActive, - liskLogoDark, - balanceDark, - newsFeedTwitterDark, - fileOutlineDark, - signMessage, - signMessageActive, - verifyMessage, - verifyMessageActive, - iconEmptyRecentTransactionsDark, - bookmarksIconEmptyStateDark, - multiSignatureOutline, - registerMultisignatureGroup, - missedBlocks, - missedBlocksDark, - newsFeedBlog, - newsFeedBlogDark, - bookmark, - bookmarkActive, - bitcoinLogo, - toggleSidebar, - toggleSidebarActive, - darkMode, - lightMode, - blocksMonitor, - blocksMonitorActive, - accountsMonitor, - accountsMonitorActive, - transactions, - transactionsDark, - transactionsMonitor, - transactionsMonitorActive, - delegatesMonitor, - delegatesMonitorActive, - networkMonitor, - networkMonitorActive, - voting, - votingActive, - signOut, - plus, - plusActive, - remove, - totalBlocks, - totalBlocksDark, - blocksForged, - blocksForgedDark, - distribution, - clock, - clockDark, - clockActive, - clockActiveDark, - searchInput, - weight, - weightDark, - productivity, - productivityDark, - lock, - unlock, - loading, - unlockToken, - unlockTokenDark, - votingQueueInactive, - votingQueueActive, - download, - upload, - delegateForged, - delegateForgedDark, - delegateMissed, - delegateMissedDark, - delegateWarning, - delegateAwaiting, - delegateAwaitingDark, - delegateActive, - delegateStandby, - delegateNonEligible, - delegatePunished, - delegateBanned, - eyeActive, - eyeInactive, - liskIcon, - initialiseIcon, - initialiseRegistration, - warningYellow, - linkIcon, - arrowRightWithStroke, - arrowRightWithStrokeDark, - multisignatureTransaction, - multisignatureTransactionDark, - refresh, - reportDelegateMisbehavior, - reportDelegateMisbehaviorDark, -}; - -const Icon = ({ name, noTheme, ...props }) => { - const theme = useTheme(); - const src = theme === 'dark' && !noTheme && icons[`${name}Dark`] ? icons[`${name}Dark`] : icons[name]; - return ; -}; - -Icon.propTypes = { - name: PropTypes.oneOf(Object.keys(icons)).isRequired, -}; - -export default Icon; +/* eslint-disable max-lines */ +import React from 'react'; +import PropTypes from 'prop-types'; +import { useTheme } from '@utils/theme'; +import academy from '../../../assets/images/icons/academy.svg'; +import academyActive from '../../../assets/images/icons/academy-active.svg'; +import alertIcon from '../../../assets/images/icons/icon-alert.svg'; +import approved from '../../../assets/images/icons/approved.svg'; +import arrowLeftActive from '../../../assets/images/icons/arrow-left-active.svg'; +import arrowLeftInactive from '../../../assets/images/icons/arrow-left-inactive.svg'; +import arrowRightActive from '../../../assets/images/icons/arrow-right-active.svg'; +import arrowRightInactive from '../../../assets/images/icons/arrow-right-inactive.svg'; +import arrowRightWithStroke from '../../../assets/images/icons/arrow-right-with-stroke.svg'; +import arrowRightWithStrokeDark from '../../../assets/images/icons/arrow-right-with-stroke-dark.svg'; +import arrowUpCircle from '../../../assets/images/icons/click-to-update.svg'; +import balance from '../../../assets/images/icons/balance.svg'; +import balanceDark from '../../../assets/images/icons/balance-dark.svg'; +import bookmarksIconEmptyState from '../../../assets/images/icons/bookmarks-empty-state.svg'; +import bookmarksIconEmptyStateDark from '../../../assets/images/icons/bookmarks-empty-state-dark.svg'; +import btcIcon from '../../../assets/images/icons/icon-btc.svg'; +import checkboxFilled from '../../../assets/images/icons/checkmark-filled.svg'; +import checkmark from '../../../assets/images/icons/checkmark.svg'; +import copy from '../../../assets/images/icons/copy.svg'; +import copyActive from '../../../assets/images/icons/copy-active.svg'; +import dashboardIcon from '../../../assets/images/icons/dashboard.svg'; +import dashboardIconActive from '../../../assets/images/icons/dashboard-active.svg'; +import discord from '../../../assets/images/icons/discord.svg'; +import discordActive from '../../../assets/images/icons/discord-active.svg'; +import discreetMode from '../../../assets/images/icons/discreet-mode.svg'; +import discreetModeActive from '../../../assets/images/icons/discreet-mode-active.svg'; +import feedback from '../../../assets/images/icons/feedback.svg'; +import feedbackActive from '../../../assets/images/icons/feedback-active.svg'; +import fileOutline from '../../../assets/images/icons/icon-file-outline.svg'; +import fileOutlineDark from '../../../assets/images/icons/icon-file-outline-dark.svg'; +import help from '../../../assets/images/icons/help.svg'; +import helpActive from '../../../assets/images/icons/help-active.svg'; +import helpCenter from '../../../assets/images/icons/help-center.svg'; +import helpCenterArrow from '../../../assets/images/icons/arrow.svg'; +import hidePassphraseIcon from '../../../assets/images/icons/icon-hide-passphrase.svg'; +import hwWalletIcon from '../../../assets/images/icons/hw-wallet.svg'; +import edit from '../../../assets/images/icons/edit.svg'; +import iconEmptyRecentTransactions from '../../../assets/images/icons/empty-recent-transactions.svg'; +import iconEmptyRecentTransactionsDark from '../../../assets/images/icons/empty-recent-transactions-dark.svg'; +import iconFilter from '../../../assets/images/icons/icon-filter.svg'; +import iconLedgerDevice from '../../../assets/images/icons/icon-ledger-device.svg'; +import iconLoader from '../../../assets/images/icons/icon-loader.svg'; +import iconTrezorDevice from '../../../assets/images/icons/icon-trezor-device.svg'; +import iconWarning from '../../../assets/images/icons/icon-warning.svg'; +import incoming from '../../../assets/images/icons/incoming.svg'; +import liskChat from '../../../assets/images/icons/lisk-chat.svg'; +import liskLogo from '../../../assets/images/lisk-logo-v2.svg'; +import liskLogoDark from '../../../assets/images/lisk-logo-dark.svg'; +import liskLogoWhite from '../../../assets/images/lisk-logo-white-v2.svg'; +import logout from '../../../assets/images/icons/logout.svg'; +import logoutActive from '../../../assets/images/icons/logout-active.svg'; +import lskIcon from '../../../assets/images/icons/icon-lsk.svg'; +import newsFeedTwitter from '../../../assets/images/icons/news-feed-twitter.svg'; +import newsFeedTwitterDark from '../../../assets/images/icons/news-feed-twitter-dark.svg'; +import newsFeedBlog from '../../../assets/images/icons/news-feed-blog.svg'; +import newsFeedBlogDark from '../../../assets/images/icons/news-feed-blog-dark.svg'; +import noTweetsIcon from '../../../assets/images/icons/no-tweets.svg'; +import okIcon from '../../../assets/images/icons/icon-checkmark.svg'; +import outgoing from '../../../assets/images/icons/outgoing.svg'; +import pending from '../../../assets/images/icons/pending.svg'; +import searchActive from '../../../assets/images/icons/search-active.svg'; +import search from '../../../assets/images/icons/search.svg'; +import searchInput from '../../../assets/images/icons/search-input.svg'; +import settings from '../../../assets/images/icons/settings.svg'; +import settingsActive from '../../../assets/images/icons/settings-active.svg'; +import showPassphraseIcon from '../../../assets/images/icons/icon-show-passphrase.svg'; +import signIn from '../../../assets/images/icons/signin.svg'; +import signInActive from '../../../assets/images/icons/signin-active.svg'; +import tooltipQuestionMark from '../../../assets/images/icons/tooltip-question-icon.svg'; +import transactionApproved from '../../../assets/images/icons/transaction-status-approved.svg'; +import transactionError from '../../../assets/images/icons/transaction-error.svg'; +import transactionPending from '../../../assets/images/icons/transaction-status-pending.svg'; +import transactionSuccess from '../../../assets/images/icons/transaction-success.svg'; +import txDefault from '../../../assets/images/icons/tx-default.svg'; +import txDefaultDark from '../../../assets/images/icons/tx-default-dark.svg'; +import registerDelegate from '../../../assets/images/icons/tx-delegate.svg'; +import registerDelegateDark from '../../../assets/images/icons/tx-delegate-dark.svg'; +import vote from '../../../assets/images/icons/tx-vote.svg'; +import voteDark from '../../../assets/images/icons/tx-vote-dark.svg'; +import addedVotes from '../../../assets/images/icons/added-votes.svg'; +import removedVotes from '../../../assets/images/icons/removed-votes.svg'; +import totalVotes from '../../../assets/images/icons/total-votes.svg'; +import user from '../../../assets/images/icons/user.svg'; +import userActive from '../../../assets/images/icons/user-active.svg'; +import verifyMessageInputsView from '../../../assets/images/icons/verify-message-inputs-view.svg'; +import verifyMessageInputsViewActive from '../../../assets/images/icons/verify-message-inputs-view-active.svg'; +import verifyMessageTextareaView from '../../../assets/images/icons/verify-message-textarea-view.svg'; +import verifyMessageTextareaViewActive from '../../../assets/images/icons/verify-message-textarea-view-active.svg'; +import verifyWalletAddress from '../../../assets/images/icons/verify-icon.svg'; +import verifyWalletAddressActive from '../../../assets/images/icons/verify-icon-active.svg'; +import walletIcon from '../../../assets/images/icons/wallet.svg'; +import walletIconActive from '../../../assets/images/icons/wallet-active.svg'; +import warningIcon from '../../../assets/images/icons/warning-icon.svg'; +import warningRound from '../../../assets/images/icons/warning-round.svg'; +import qrCode from '../../../assets/images/icons/qr-code.svg'; +import signMessage from '../../../assets/images/icons/sign.svg'; +import signMessageActive from '../../../assets/images/icons/signActive.svg'; +import verifyMessage from '../../../assets/images/icons/verify.svg'; +import verifyMessageActive from '../../../assets/images/icons/verifyActive.svg'; +import qrCodeActive from '../../../assets/images/icons/qr-code-active.svg'; +import bookmark from '../../../assets/images/icons/icon-bookmark.svg'; +import bookmarkActive from '../../../assets/images/icons/icon-bookmark-active.svg'; +import bitcoinLogo from '../../../assets/images/bitcoin-logo.svg'; +import toggleSidebar from '../../../assets/images/icons/toggle-sidebar.svg'; +import toggleSidebarActive from '../../../assets/images/icons/toggle-sidebar-active.svg'; +import darkMode from '../../../assets/images/icons/dark-mode.svg'; +import lightMode from '../../../assets/images/icons/light-mode.svg'; +import blocksMonitor from '../../../assets/images/icons/blocks.svg'; +import blocksMonitorActive from '../../../assets/images/icons/blocksActive.svg'; +import accountsMonitor from '../../../assets/images/icons/accountsMonitor.svg'; +import accountsMonitorActive from '../../../assets/images/icons/accountsMonitorActive.svg'; +import transactions from '../../../assets/images/icons/transactions.svg'; +import transactionsDark from '../../../assets/images/icons/transactions-dark.svg'; +import transactionsMonitor from '../../../assets/images/icons/transactionsMonitor.svg'; +import transactionsMonitorActive from '../../../assets/images/icons/transactionsMonitorActive.svg'; +import delegatesMonitor from '../../../assets/images/icons/delegatesMonitor.svg'; +import delegatesMonitorActive from '../../../assets/images/icons/delegatesMonitorActive.svg'; +import networkMonitor from '../../../assets/images/icons/networkMonitor.svg'; +import networkMonitorActive from '../../../assets/images/icons/networkMonitorActive.svg'; +import voting from '../../../assets/images/icons/voting.svg'; +import votingActive from '../../../assets/images/icons/votingActive.svg'; +import signOut from '../../../assets/images/icons/signOut.svg'; +import plus from '../../../assets/images/icons/plus.svg'; +import plusActive from '../../../assets/images/icons/plusActive.svg'; +import remove from '../../../assets/images/icons/remove.svg'; +import totalBlocks from '../../../assets/images/icons/total-blocks.svg'; +import totalBlocksDark from '../../../assets/images/icons/total-blocks-dark.svg'; +import blocksForged from '../../../assets/images/icons/blocks-forged.svg'; +import blocksForgedDark from '../../../assets/images/icons/blocks-forged-dark.svg'; +import distribution from '../../../assets/images/icons/distribution.svg'; +import clock from '../../../assets/images/icons/clock.svg'; +import clockDark from '../../../assets/images/icons/clock-dark.svg'; +import clockActive from '../../../assets/images/icons/clock-active.svg'; +import clockActiveDark from '../../../assets/images/icons/clock-active-dark.svg'; +import star from '../../../assets/images/icons/star.svg'; +import starDark from '../../../assets/images/icons/star-dark.svg'; +import calendar from '../../../assets/images/icons/calendar.svg'; +import calendarDark from '../../../assets/images/icons/calendar-dark.svg'; +import weight from '../../../assets/images/icons/weight.svg'; +import weightDark from '../../../assets/images/icons/weight-dark.svg'; +import reward from '../../../assets/images/icons/forged-lsk.svg'; +import rewardDark from '../../../assets/images/icons/forged-lsk-dark.svg'; +import productivity from '../../../assets/images/icons/productivity.svg'; +import productivityDark from '../../../assets/images/icons/productivity-dark.svg'; +import missedBlocks from '../../../assets/images/icons/missed-blocks.svg'; +import missedBlocksDark from '../../../assets/images/icons/missed-blocks-dark.svg'; +import forgedBlocks from '../../../assets/images/icons/forged-blocks.svg'; +import forgedBlocksDark from '../../../assets/images/icons/forged-blocks-dark.svg'; +import consecutiveMissedBlocks from '../../../assets/images/icons/consecutive-missed-blocks.svg'; +import consecutiveMissedBlocksDark from '../../../assets/images/icons/consecutive-missed-blocks-dark.svg'; +import lock from '../../../assets/images/icons/lock.svg'; +import unlock from '../../../assets/images/icons/unlock.svg'; +import loading from '../../../assets/images/icons/loading.svg'; +import unlockToken from '../../../assets/images/icons/tx-unlock.svg'; +import unlockTokenDark from '../../../assets/images/icons/tx-unlock-dark.svg'; +import votingQueueInactive from '../../../assets/images/icons/voting-queue-inactive.svg'; +import votingQueueActive from '../../../assets/images/icons/voting-queue-active.svg'; +import deleteIcon from '../../../assets/images/icons/delete.svg'; +import arrowRightTailed from '../../../assets/images/icons/arrow-right-tailed.svg'; +import download from '../../../assets/images/icons/download.svg'; +import registerMultisignatureGroup from '../../../assets/images/icons/multisignature.svg'; +import multisignatureTransaction from '../../../assets/images/icons/multisignatureTransaction.svg'; +import multisignatureTransactionDark from '../../../assets/images/icons/multisignatureTransaction-dark.svg'; +import multiSignatureOutline from '../../../assets/images/icons/multisignature-outline.svg'; +import upload from '../../../assets/images/icons/upload.svg'; +import delegateForged from '../../../assets/images/icons/delegate-forged.svg'; +import delegateForgedDark from '../../../assets/images/icons/delegate-forged-dark.svg'; +import delegateMissed from '../../../assets/images/icons/delegate-missed.svg'; +import delegateMissedDark from '../../../assets/images/icons/delegate-missed-dark.svg'; +import delegateWarning from '../../../assets/images/icons/delegate-warning.svg'; +import delegateAwaiting from '../../../assets/images/icons/delegate-awaiting.svg'; +import delegateAwaitingDark from '../../../assets/images/icons/delegate-awaiting-dark.svg'; +import delegateActive from '../../../assets/images/icons/delegate-active.svg'; +import delegateActiveDark from '../../../assets/images/icons/delegate-active-dark.svg'; +import delegateStandby from '../../../assets/images/icons/delegate-standby.svg'; +import delegateStandbyDark from '../../../assets/images/icons/delegate-standby-dark.svg'; +import delegateNonEligible from '../../../assets/images/icons/delegate-non-eligible.svg'; +import delegateNonEligibleDark from '../../../assets/images/icons/delegate-non-eligible-dark.svg'; +import delegatePunished from '../../../assets/images/icons/delegate-punished.svg'; +import delegatePunishedDark from '../../../assets/images/icons/delegate-punished-dark.svg'; +import delegateBanned from '../../../assets/images/icons/delegate-banned.svg'; +import delegateBannedDark from '../../../assets/images/icons/delegate-banned-dark.svg'; +import eyeInactive from '../../../assets/images/icons/eye-inactive.svg'; +import eyeActive from '../../../assets/images/icons/eye-active.svg'; +import liskIcon from '../../../assets/images/icons/lisk-icon.svg'; +import initialiseIcon from '../../../assets/images/icons/initialise-icon.svg'; +import initialiseRegistration from '../../../assets/images/icons/initialise-registration.svg'; +import warningYellow from '../../../assets/images/icons/warning-yellow.svg'; +import linkIcon from '../../../assets/images/icons/link-icon.svg'; +import refresh from '../../../assets/images/icons/refresh.svg'; +import reportDelegateMisbehavior from '../../../assets/images/icons/reportDelegateMisbehavior.svg'; +import reportDelegateMisbehaviorDark from '../../../assets/images/icons/reportDelegateMisbehavior-dark.svg'; + +export const icons = { + academy, + academyActive, + alertIcon, + approved, + arrowRightTailed, + arrowLeftActive, + arrowLeftInactive, + arrowRightActive, + arrowRightInactive, + arrowUpCircle, + balance, + bookmarksIconEmptyState, + btcIcon, + calendar, + calendarDark, + checkboxFilled, + checkmark, + consecutiveMissedBlocks, + consecutiveMissedBlocksDark, + copy, + dashboardIcon, + dashboardIconActive, + deleteIcon, + discord, + discordActive, + discreetMode, + discreetModeActive, + feedback, + feedbackActive, + fileOutline, + forgedBlocks, + forgedBlocksDark, + reward, + rewardDark, + help, + helpActive, + helpCenter, + helpCenterArrow, + hidePassphraseIcon, + hwWalletIcon, + edit, + iconEmptyRecentTransactions, + iconFilter, + iconLedgerDevice, + iconLoader, + iconTrezorDevice, + iconWarning, + incoming, + liskChat, + liskLogo, + liskLogoWhite, + logout, + logoutActive, + lskIcon, + newsFeedTwitter, + noTweetsIcon, + okIcon, + outgoing, + pending, + searchActive, + search, + settings, + settingsActive, + showPassphraseIcon, + signIn, + signInActive, + star, + starDark, + tooltipQuestionMark, + transactionApproved, + transactionError, + transactionPending, + transactionSuccess, + txDefault, + txDefaultDark, + registerDelegate, + registerDelegateDark, + vote, + voteDark, + user, + userActive, + verifyMessageInputsView, + verifyMessageInputsViewActive, + verifyMessageTextareaView, + verifyMessageTextareaViewActive, + verifyWalletAddress, + walletIcon, + walletIconActive, + warningIcon, + warningRound, + addedVotes, + removedVotes, + totalVotes, + qrCode, + qrCodeActive, + copyActive, + verifyWalletAddressActive, + liskLogoDark, + balanceDark, + newsFeedTwitterDark, + fileOutlineDark, + signMessage, + signMessageActive, + verifyMessage, + verifyMessageActive, + iconEmptyRecentTransactionsDark, + bookmarksIconEmptyStateDark, + multiSignatureOutline, + registerMultisignatureGroup, + missedBlocks, + missedBlocksDark, + newsFeedBlog, + newsFeedBlogDark, + bookmark, + bookmarkActive, + bitcoinLogo, + toggleSidebar, + toggleSidebarActive, + darkMode, + lightMode, + blocksMonitor, + blocksMonitorActive, + accountsMonitor, + accountsMonitorActive, + transactions, + transactionsDark, + transactionsMonitor, + transactionsMonitorActive, + delegatesMonitor, + delegatesMonitorActive, + networkMonitor, + networkMonitorActive, + voting, + votingActive, + signOut, + plus, + plusActive, + remove, + totalBlocks, + totalBlocksDark, + blocksForged, + blocksForgedDark, + distribution, + clock, + clockDark, + clockActive, + clockActiveDark, + searchInput, + weight, + weightDark, + productivity, + productivityDark, + lock, + unlock, + loading, + unlockToken, + unlockTokenDark, + votingQueueInactive, + votingQueueActive, + download, + upload, + delegateForged, + delegateForgedDark, + delegateMissed, + delegateMissedDark, + delegateWarning, + delegateAwaiting, + delegateAwaitingDark, + delegateActive, + delegateStandby, + delegateNonEligible, + delegatePunished, + delegateBanned, + delegateActiveDark, + delegateStandbyDark, + delegateNonEligibleDark, + delegatePunishedDark, + delegateBannedDark, + eyeActive, + eyeInactive, + liskIcon, + initialiseIcon, + initialiseRegistration, + warningYellow, + linkIcon, + arrowRightWithStroke, + arrowRightWithStrokeDark, + multisignatureTransaction, + multisignatureTransactionDark, + refresh, + reportDelegateMisbehavior, + reportDelegateMisbehaviorDark, +}; + +const Icon = ({ name, noTheme, ...props }) => { + const theme = useTheme(); + const src = theme === 'dark' && !noTheme && icons[`${name}Dark`] ? icons[`${name}Dark`] : icons[name]; + return ; +}; + +Icon.propTypes = { + name: PropTypes.oneOf(Object.keys(icons)).isRequired, +}; + +export default Icon; From 22de89a81b0abc428534d48b3cbca8d7af80e326 Mon Sep 17 00:00:00 2001 From: Ikemefuna Obioha Date: Tue, 28 Sep 2021 18:09:50 +0100 Subject: [PATCH 13/16] Backup before refreshing line endings --- i18n/locales/en/common.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/i18n/locales/en/common.json b/i18n/locales/en/common.json index 00c557426b..6aaa3682ef 100644 --- a/i18n/locales/en/common.json +++ b/i18n/locales/en/common.json @@ -1,5 +1,5 @@ { - "\n You can choose a high, medium, or low transaction priority, each requiring a\n corresponding transaction fee. Or you can pay any desired fee of no less than\n {{minFee}} {{token}}. If you don't know what fee to pay, choose\n one of the provided transaction priorities.\n ": "\n You can choose a high, medium, or low transaction priority, each requiring a\n corresponding transaction fee. Or you can pay any desired fee of no less than\n {{minFee}} {{token}}. If you don't know what fee to pay, choose\n one of the provided transaction priorities.\n ", + "\r\n You can choose a high, medium, or low transaction priority, each requiring a\r\n corresponding transaction fee. Or you can pay any desired fee of no less than\r\n {{minFee}} {{token}}. If you don't know what fee to pay, choose\r\n one of the provided transaction priorities.\r\n ": "\r\n You can choose a high, medium, or low transaction priority, each requiring a\r\n corresponding transaction fee. Or you can pay any desired fee of no less than\r\n {{minFee}} {{token}}. If you don't know what fee to pay, choose\r\n one of the provided transaction priorities.\r\n ", " - Confirm transaction on your {{deviceModel}}": " - Confirm transaction on your {{deviceModel}}", " is out. ": " is out. ", " to deposit LSK.": " to deposit LSK.", @@ -244,7 +244,7 @@ "Lisk Terms of Use": "Lisk Terms of Use", "Lisk Website": "Lisk Website", "Lisk accounts on {{WalletModel}}": "Lisk accounts on {{WalletModel}}", - "Lisk counts your message in bytes, so keep in mind\n that the length of your message may vary in different languages.\n Different characters may consume a varying amount of bytes.": "Lisk counts your message in bytes, so keep in mind\n that the length of your message may vary in different languages.\n Different characters may consume a varying amount of bytes.", + "Lisk counts your message in bytes, so keep in mind\r\n that the length of your message may vary in different languages.\r\n Different characters may consume a varying amount of bytes.": "Lisk counts your message in bytes, so keep in mind\r\n that the length of your message may vary in different languages.\r\n Different characters may consume a varying amount of bytes.", "Lisk currently supports Ledger Nano S, Ledger Nano X, Trezor One and Trezor Model T wallets": "Lisk currently supports Ledger Nano S, Ledger Nano X, Trezor One and Trezor Model T wallets", "Lisk currently supports Ledger Nano S, Ledger Nano X, Trezor One and Trezor T wallets.": "Lisk currently supports Ledger Nano S, Ledger Nano X, Trezor One and Trezor T wallets.", "Lisk has now been enhanced even further": "Lisk has now been enhanced even further", From 6959b60660fe1e51835eb4e963c2db9c5eafe8bb Mon Sep 17 00:00:00 2001 From: Ikemefuna Obioha Date: Tue, 28 Sep 2021 18:35:00 +0100 Subject: [PATCH 14/16] Normalised line endings --- src/app/mixins.css | 186 ++-- .../wallet/delegatePerformanceModal/index.js | 26 +- .../delegatePerformanceModal/styles.css | 6 +- .../delegateProfile/delegateProfile.css | 660 +++++++------- src/components/toolbox/icon/index.js | 806 +++++++++--------- 5 files changed, 842 insertions(+), 842 deletions(-) diff --git a/src/app/mixins.css b/src/app/mixins.css index 5fc218f995..ee81b1aaee 100644 --- a/src/app/mixins.css +++ b/src/app/mixins.css @@ -1,93 +1,93 @@ -@define-mixin contentSmallest { - font-family: var(--content-font); - font-size: 11px; - font-weight: var(--font-weight-semi-bold); - letter-spacing: 0; - line-height: 18px; -} - -@define-mixin contentSmall $weight: normal { - font-family: var(--content-font); - font-size: 12px; - font-weight: var(--font-weight-$(weight)); - letter-spacing: 0; - line-height: 20px; -} - -@define-mixin contentNormal $weight: normal { - font-family: var(--content-font); - font-size: 13px; - font-weight: var(--font-weight-$(weight)); - letter-spacing: 0.2px; - line-height: 20px; -} - -@define-mixin contentLarge $weight: normal { - font-family: var(--content-font); - font-size: 14px; - font-weight: var(--font-weight-$(weight)); - letter-spacing: 0.2px; - line-height: 20px; -} - -@define-mixin contentLargest $weight: normal { - font-family: var(--content-font); - font-size: 15px; - font-weight: var(--font-weight-$(weight)); - letter-spacing: 0; - line-height: 21px; -} - -@define-mixin headingExtraSmall { - font-family: var(--heading-font); - font-size: 12px; - font-weight: var(--font-weight-bold); - letter-spacing: 0.2px; - line-height: 18px; -} - -@define-mixin headingSmall { - font-family: var(--heading-font); - font-size: 15px; - font-weight: var(--font-weight-bold); - letter-spacing: 0.2px; - line-height: 18px; -} - -@define-mixin headingNormal $weight: bold { - font-family: var(--heading-font); - font-size: 18px; - font-weight: var(--font-weight-$(weight)); - letter-spacing: 0; - line-height: 25px; -} - -@define-mixin headingNormalIntermediate $weight: bold { - font-family: var(--heading-font); - font-size: 24px; - font-weight: var(--font-weight-$(weight)); - letter-spacing: 0.1; - line-height: 32px; -} - -@define-mixin headingLarge { - font-family: var(--heading-font); - font-size: 30px; - font-weight: var(--font-weight-bold); - letter-spacing: 0.25px; - line-height: 40px; -} - -@define-mixin addressFont { - font-family: var(--heading-font); - font-size: var(--subtitle-font-size); - font-weight: var(--font-weight-bold); - letter-spacing: 0.1px; -} - -@define-mixin delegatePerformanceValueFont { - font-family: var(--heading-font); - font-size: 22px; - font-weight: 300; - line-height: 22px; -} +@define-mixin contentSmallest { + font-family: var(--content-font); + font-size: 11px; + font-weight: var(--font-weight-semi-bold); + letter-spacing: 0; + line-height: 18px; +} + +@define-mixin contentSmall $weight: normal { + font-family: var(--content-font); + font-size: 12px; + font-weight: var(--font-weight-$(weight)); + letter-spacing: 0; + line-height: 20px; +} + +@define-mixin contentNormal $weight: normal { + font-family: var(--content-font); + font-size: 13px; + font-weight: var(--font-weight-$(weight)); + letter-spacing: 0.2px; + line-height: 20px; +} + +@define-mixin contentLarge $weight: normal { + font-family: var(--content-font); + font-size: 14px; + font-weight: var(--font-weight-$(weight)); + letter-spacing: 0.2px; + line-height: 20px; +} + +@define-mixin contentLargest $weight: normal { + font-family: var(--content-font); + font-size: 15px; + font-weight: var(--font-weight-$(weight)); + letter-spacing: 0; + line-height: 21px; +} + +@define-mixin headingExtraSmall { + font-family: var(--heading-font); + font-size: 12px; + font-weight: var(--font-weight-bold); + letter-spacing: 0.2px; + line-height: 18px; +} + +@define-mixin headingSmall { + font-family: var(--heading-font); + font-size: 15px; + font-weight: var(--font-weight-bold); + letter-spacing: 0.2px; + line-height: 18px; +} + +@define-mixin headingNormal $weight: bold { + font-family: var(--heading-font); + font-size: 18px; + font-weight: var(--font-weight-$(weight)); + letter-spacing: 0; + line-height: 25px; +} + +@define-mixin headingNormalIntermediate $weight: bold { + font-family: var(--heading-font); + font-size: 24px; + font-weight: var(--font-weight-$(weight)); + letter-spacing: 0.1; + line-height: 32px; +} + +@define-mixin headingLarge { + font-family: var(--heading-font); + font-size: 30px; + font-weight: var(--font-weight-bold); + letter-spacing: 0.25px; + line-height: 40px; +} + +@define-mixin addressFont { + font-family: var(--heading-font); + font-size: var(--subtitle-font-size); + font-weight: var(--font-weight-bold); + letter-spacing: 0.1px; +} + +@define-mixin delegatePerformanceValueFont { + font-family: var(--heading-font); + font-size: 22px; + font-weight: 300; + line-height: 22px; +} diff --git a/src/components/screens/wallet/delegatePerformanceModal/index.js b/src/components/screens/wallet/delegatePerformanceModal/index.js index 2ab4220571..8cdff8e7c9 100644 --- a/src/components/screens/wallet/delegatePerformanceModal/index.js +++ b/src/components/screens/wallet/delegatePerformanceModal/index.js @@ -1,13 +1,13 @@ -import React from 'react'; -import grid from 'flexboxgrid/dist/flexboxgrid.css'; -import Dialog from '@toolbox/dialog/dialog'; -import DelegatePerformance from '../delegatePerformance'; -import styles from './styles.css'; - -const DelegatePerformanceModal = (props) => ( - - - -); - -export default DelegatePerformanceModal; +import React from 'react'; +import grid from 'flexboxgrid/dist/flexboxgrid.css'; +import Dialog from '@toolbox/dialog/dialog'; +import DelegatePerformance from '../delegatePerformance'; +import styles from './styles.css'; + +const DelegatePerformanceModal = (props) => ( + + + +); + +export default DelegatePerformanceModal; diff --git a/src/components/screens/wallet/delegatePerformanceModal/styles.css b/src/components/screens/wallet/delegatePerformanceModal/styles.css index bde3928d89..83b7c5b245 100644 --- a/src/components/screens/wallet/delegatePerformanceModal/styles.css +++ b/src/components/screens/wallet/delegatePerformanceModal/styles.css @@ -1,3 +1,3 @@ -.wrapper { - max-width: 30%; -} +.wrapper { + max-width: 30%; +} diff --git a/src/components/screens/wallet/delegateProfile/delegateProfile.css b/src/components/screens/wallet/delegateProfile/delegateProfile.css index 0d91b00bbd..8d7c0cc151 100644 --- a/src/components/screens/wallet/delegateProfile/delegateProfile.css +++ b/src/components/screens/wallet/delegateProfile/delegateProfile.css @@ -1,330 +1,330 @@ -@import '../../../../app/mixins.css'; - -.detailsContainer, -.highlightContainer { - & h1.heading { - @mixin headingNormal; - - font-size: 20px; - } - - & .content { - flex-flow: row nowrap; - } -} - -.container { - display: flex; - flex-direction: column; - - & .statsContainer { - flex-flow: row nowrap; - } - - & .votesWrapper { - width: 100%; - } - - & .votesContainer { - display: grid !important; - grid-template-columns: repeat(auto-fill, 25%); - box-sizing: border-box; - justify-content: center !important; - grid-gap: 30px 0px; - - & > header { - display: none; - } - - & button { - grid-column: 1/5; - margin-top: -15px; - } - } -} - -@media (--medium-viewport) { - .container { - & .statsContainer { - flex-flow: row wrap; - } - - & .votesContainer { - grid-template-columns: repeat(auto-fill, 33.3%); - - & button { - grid-column: 1/4; - } - } - } -} - -.details { - flex-shrink: 0; - flex-grow: 1; - - & .itemContainer { - border-bottom: 1px solid var(--color-platinum); - padding: 16px 0; - margin-left: 0; - - &:last-child { - border: none; - padding-bottom: 0; - } - - &:first-child { - padding-top: 0; - } - } - - & .item { - margin-left: 16px; - - & .title { - @mixin contentNormal; - - color: var(--color-slate-gray); - - &:global(.dark) { - color: var(--color-manatee-gray); - } - } - - & .value { - margin-top: 8px; - color: var(--color-maastricht-blue); - } - } -} - -.column { - & .highlight { - padding: 0; - display: flex; - flex-direction: row; - margin-bottom: 20px; - height: 156px; - - &:nth-child(2) { - margin: 0; - } - - & .content { - width: max-content; - display: flex; - flex-direction: column; - padding-left: 20px; - padding-top: 20px; - - & .title { - @mixin contentNormal; - - color: var(--color-slate-gray); - margin-bottom: 15px; - - &:global(.dark) { - color: var(--color-manatee-gray); - } - } - - & > *:not(.title):not(.highlighIcon) { - @mixin delegatePerformanceValueFont; - - color: var(--color-maastricht-blue); - } - } - - & .highlighIcon { - align-self: flex-end; - display: flex; - flex: 1; - justify-content: flex-end; - height: 120px; - width: 170px; - - &.productivity { - height: 122px; - width: 206px; - - & img { - width: 100%; - } - } - - &.forgedBlocks { - padding-right: 20px; - - & img { - width: 100%; - } - } - - &.consecutiveMissedBlocks { - justify-content: flex-end; - align-items: center; - height: 156px; - width: 216px; - } - - &.reward { - height: 108px; - width: 196px; - padding-right: 20px; - - & img { - width: 100%; - } - } - } - } - - & .full { - padding: 0; - display: flex; - flex-direction: column; - height: 332px; - - &:nth-child(2) { - margin: 0; - } - - & .content { - display: flex; - flex-direction: column; - padding: 20px 20px 0 20px; - - & .title { - @mixin contentNormal; - - color: var(--color-slate-gray); - margin-bottom: 15px; - - &:global(.dark) { - color: var(--color-manatee-gray); - } - } - - & .delegateDescription { - & p { - font-size: var(--paragraph-font-size-s); - } - - & p:first-child { - margin-bottom: 7px; - } - - & p:last-child { - margin-top: 0 !important; - } - - & p:only-child { - margin-top: var(--paragraph-font-size-s) !important; - margin-bottom: var(--paragraph-font-size-s) !important; - } - - & .details { - & p { - color: var(--color-link-active); - cursor: pointer; - } - } - - &:global(.dark) { - color: var(--color-manatee-gray); - } - } - - & > *:not(.title):not(.delegateDescription):not(.highlighIcon) { - @mixin delegatePerformanceValueFont; - - color: var(--color-maastricht-blue); - } - } - - & .highlighIcon { - align-self: flex-end; - display: flex; - flex: 1; - justify-content: flex-end; - height: 120px; - width: 170px; - - &.delegateActive { - padding-right: 10px; - } - - &.delegateStandby { - padding-right: 10px; - } - - &.delegatePunished { - padding-right: 10px; - } - - &.delegateBanned { - padding-right: 10px; - } - } - } -} - -.icon { - height: 16px; -} - -.voteRow { - width: 238px; - width: max-content; - display: flex; - align-items: center; - - &:hover { - text-decoration: none; - } - - & .address { - @mixin contentLargest; - - padding-left: 10px; - color: var(--color-maastricht-blue); - } - - &::after { - display: none; - position: absolute; - width: calc(100% - 30px); - height: 1px; - left: 15px; - margin-top: 60px; - z-index: 0; - background: var(--color-platinum); - } - - &:nth-child(4n) { - &::after { - content: ''; - display: block; - } - } - - @media (--medium-viewport) { - &:nth-child(4n) { - &::after { - display: none; - } - } - - &:nth-child(3n) { - &::after { - content: ''; - display: block; - } - } - } -} - -.totalVotes { - color: var(--color-slate-gray); - padding-left: 5px; -} +@import '../../../../app/mixins.css'; + +.detailsContainer, +.highlightContainer { + & h1.heading { + @mixin headingNormal; + + font-size: 20px; + } + + & .content { + flex-flow: row nowrap; + } +} + +.container { + display: flex; + flex-direction: column; + + & .statsContainer { + flex-flow: row nowrap; + } + + & .votesWrapper { + width: 100%; + } + + & .votesContainer { + display: grid !important; + grid-template-columns: repeat(auto-fill, 25%); + box-sizing: border-box; + justify-content: center !important; + grid-gap: 30px 0px; + + & > header { + display: none; + } + + & button { + grid-column: 1/5; + margin-top: -15px; + } + } +} + +@media (--medium-viewport) { + .container { + & .statsContainer { + flex-flow: row wrap; + } + + & .votesContainer { + grid-template-columns: repeat(auto-fill, 33.3%); + + & button { + grid-column: 1/4; + } + } + } +} + +.details { + flex-shrink: 0; + flex-grow: 1; + + & .itemContainer { + border-bottom: 1px solid var(--color-platinum); + padding: 16px 0; + margin-left: 0; + + &:last-child { + border: none; + padding-bottom: 0; + } + + &:first-child { + padding-top: 0; + } + } + + & .item { + margin-left: 16px; + + & .title { + @mixin contentNormal; + + color: var(--color-slate-gray); + + &:global(.dark) { + color: var(--color-manatee-gray); + } + } + + & .value { + margin-top: 8px; + color: var(--color-maastricht-blue); + } + } +} + +.column { + & .highlight { + padding: 0; + display: flex; + flex-direction: row; + margin-bottom: 20px; + height: 156px; + + &:nth-child(2) { + margin: 0; + } + + & .content { + width: max-content; + display: flex; + flex-direction: column; + padding-left: 20px; + padding-top: 20px; + + & .title { + @mixin contentNormal; + + color: var(--color-slate-gray); + margin-bottom: 15px; + + &:global(.dark) { + color: var(--color-manatee-gray); + } + } + + & > *:not(.title):not(.highlighIcon) { + @mixin delegatePerformanceValueFont; + + color: var(--color-maastricht-blue); + } + } + + & .highlighIcon { + align-self: flex-end; + display: flex; + flex: 1; + justify-content: flex-end; + height: 120px; + width: 170px; + + &.productivity { + height: 122px; + width: 206px; + + & img { + width: 100%; + } + } + + &.forgedBlocks { + padding-right: 20px; + + & img { + width: 100%; + } + } + + &.consecutiveMissedBlocks { + justify-content: flex-end; + align-items: center; + height: 156px; + width: 216px; + } + + &.reward { + height: 108px; + width: 196px; + padding-right: 20px; + + & img { + width: 100%; + } + } + } + } + + & .full { + padding: 0; + display: flex; + flex-direction: column; + height: 332px; + + &:nth-child(2) { + margin: 0; + } + + & .content { + display: flex; + flex-direction: column; + padding: 20px 20px 0 20px; + + & .title { + @mixin contentNormal; + + color: var(--color-slate-gray); + margin-bottom: 15px; + + &:global(.dark) { + color: var(--color-manatee-gray); + } + } + + & .delegateDescription { + & p { + font-size: var(--paragraph-font-size-s); + } + + & p:first-child { + margin-bottom: 7px; + } + + & p:last-child { + margin-top: 0 !important; + } + + & p:only-child { + margin-top: var(--paragraph-font-size-s) !important; + margin-bottom: var(--paragraph-font-size-s) !important; + } + + & .details { + & p { + color: var(--color-link-active); + cursor: pointer; + } + } + + &:global(.dark) { + color: var(--color-manatee-gray); + } + } + + & > *:not(.title):not(.delegateDescription):not(.highlighIcon) { + @mixin delegatePerformanceValueFont; + + color: var(--color-maastricht-blue); + } + } + + & .highlighIcon { + align-self: flex-end; + display: flex; + flex: 1; + justify-content: flex-end; + height: 120px; + width: 170px; + + &.delegateActive { + padding-right: 10px; + } + + &.delegateStandby { + padding-right: 10px; + } + + &.delegatePunished { + padding-right: 10px; + } + + &.delegateBanned { + padding-right: 10px; + } + } + } +} + +.icon { + height: 16px; +} + +.voteRow { + width: 238px; + width: max-content; + display: flex; + align-items: center; + + &:hover { + text-decoration: none; + } + + & .address { + @mixin contentLargest; + + padding-left: 10px; + color: var(--color-maastricht-blue); + } + + &::after { + display: none; + position: absolute; + width: calc(100% - 30px); + height: 1px; + left: 15px; + margin-top: 60px; + z-index: 0; + background: var(--color-platinum); + } + + &:nth-child(4n) { + &::after { + content: ''; + display: block; + } + } + + @media (--medium-viewport) { + &:nth-child(4n) { + &::after { + display: none; + } + } + + &:nth-child(3n) { + &::after { + content: ''; + display: block; + } + } + } +} + +.totalVotes { + color: var(--color-slate-gray); + padding-left: 5px; +} diff --git a/src/components/toolbox/icon/index.js b/src/components/toolbox/icon/index.js index 0099eedced..a375ccae66 100644 --- a/src/components/toolbox/icon/index.js +++ b/src/components/toolbox/icon/index.js @@ -1,403 +1,403 @@ -/* eslint-disable max-lines */ -import React from 'react'; -import PropTypes from 'prop-types'; -import { useTheme } from '@utils/theme'; -import academy from '../../../assets/images/icons/academy.svg'; -import academyActive from '../../../assets/images/icons/academy-active.svg'; -import alertIcon from '../../../assets/images/icons/icon-alert.svg'; -import approved from '../../../assets/images/icons/approved.svg'; -import arrowLeftActive from '../../../assets/images/icons/arrow-left-active.svg'; -import arrowLeftInactive from '../../../assets/images/icons/arrow-left-inactive.svg'; -import arrowRightActive from '../../../assets/images/icons/arrow-right-active.svg'; -import arrowRightInactive from '../../../assets/images/icons/arrow-right-inactive.svg'; -import arrowRightWithStroke from '../../../assets/images/icons/arrow-right-with-stroke.svg'; -import arrowRightWithStrokeDark from '../../../assets/images/icons/arrow-right-with-stroke-dark.svg'; -import arrowUpCircle from '../../../assets/images/icons/click-to-update.svg'; -import balance from '../../../assets/images/icons/balance.svg'; -import balanceDark from '../../../assets/images/icons/balance-dark.svg'; -import bookmarksIconEmptyState from '../../../assets/images/icons/bookmarks-empty-state.svg'; -import bookmarksIconEmptyStateDark from '../../../assets/images/icons/bookmarks-empty-state-dark.svg'; -import btcIcon from '../../../assets/images/icons/icon-btc.svg'; -import checkboxFilled from '../../../assets/images/icons/checkmark-filled.svg'; -import checkmark from '../../../assets/images/icons/checkmark.svg'; -import copy from '../../../assets/images/icons/copy.svg'; -import copyActive from '../../../assets/images/icons/copy-active.svg'; -import dashboardIcon from '../../../assets/images/icons/dashboard.svg'; -import dashboardIconActive from '../../../assets/images/icons/dashboard-active.svg'; -import discord from '../../../assets/images/icons/discord.svg'; -import discordActive from '../../../assets/images/icons/discord-active.svg'; -import discreetMode from '../../../assets/images/icons/discreet-mode.svg'; -import discreetModeActive from '../../../assets/images/icons/discreet-mode-active.svg'; -import feedback from '../../../assets/images/icons/feedback.svg'; -import feedbackActive from '../../../assets/images/icons/feedback-active.svg'; -import fileOutline from '../../../assets/images/icons/icon-file-outline.svg'; -import fileOutlineDark from '../../../assets/images/icons/icon-file-outline-dark.svg'; -import help from '../../../assets/images/icons/help.svg'; -import helpActive from '../../../assets/images/icons/help-active.svg'; -import helpCenter from '../../../assets/images/icons/help-center.svg'; -import helpCenterArrow from '../../../assets/images/icons/arrow.svg'; -import hidePassphraseIcon from '../../../assets/images/icons/icon-hide-passphrase.svg'; -import hwWalletIcon from '../../../assets/images/icons/hw-wallet.svg'; -import edit from '../../../assets/images/icons/edit.svg'; -import iconEmptyRecentTransactions from '../../../assets/images/icons/empty-recent-transactions.svg'; -import iconEmptyRecentTransactionsDark from '../../../assets/images/icons/empty-recent-transactions-dark.svg'; -import iconFilter from '../../../assets/images/icons/icon-filter.svg'; -import iconLedgerDevice from '../../../assets/images/icons/icon-ledger-device.svg'; -import iconLoader from '../../../assets/images/icons/icon-loader.svg'; -import iconTrezorDevice from '../../../assets/images/icons/icon-trezor-device.svg'; -import iconWarning from '../../../assets/images/icons/icon-warning.svg'; -import incoming from '../../../assets/images/icons/incoming.svg'; -import liskChat from '../../../assets/images/icons/lisk-chat.svg'; -import liskLogo from '../../../assets/images/lisk-logo-v2.svg'; -import liskLogoDark from '../../../assets/images/lisk-logo-dark.svg'; -import liskLogoWhite from '../../../assets/images/lisk-logo-white-v2.svg'; -import logout from '../../../assets/images/icons/logout.svg'; -import logoutActive from '../../../assets/images/icons/logout-active.svg'; -import lskIcon from '../../../assets/images/icons/icon-lsk.svg'; -import newsFeedTwitter from '../../../assets/images/icons/news-feed-twitter.svg'; -import newsFeedTwitterDark from '../../../assets/images/icons/news-feed-twitter-dark.svg'; -import newsFeedBlog from '../../../assets/images/icons/news-feed-blog.svg'; -import newsFeedBlogDark from '../../../assets/images/icons/news-feed-blog-dark.svg'; -import noTweetsIcon from '../../../assets/images/icons/no-tweets.svg'; -import okIcon from '../../../assets/images/icons/icon-checkmark.svg'; -import outgoing from '../../../assets/images/icons/outgoing.svg'; -import pending from '../../../assets/images/icons/pending.svg'; -import searchActive from '../../../assets/images/icons/search-active.svg'; -import search from '../../../assets/images/icons/search.svg'; -import searchInput from '../../../assets/images/icons/search-input.svg'; -import settings from '../../../assets/images/icons/settings.svg'; -import settingsActive from '../../../assets/images/icons/settings-active.svg'; -import showPassphraseIcon from '../../../assets/images/icons/icon-show-passphrase.svg'; -import signIn from '../../../assets/images/icons/signin.svg'; -import signInActive from '../../../assets/images/icons/signin-active.svg'; -import tooltipQuestionMark from '../../../assets/images/icons/tooltip-question-icon.svg'; -import transactionApproved from '../../../assets/images/icons/transaction-status-approved.svg'; -import transactionError from '../../../assets/images/icons/transaction-error.svg'; -import transactionPending from '../../../assets/images/icons/transaction-status-pending.svg'; -import transactionSuccess from '../../../assets/images/icons/transaction-success.svg'; -import txDefault from '../../../assets/images/icons/tx-default.svg'; -import txDefaultDark from '../../../assets/images/icons/tx-default-dark.svg'; -import registerDelegate from '../../../assets/images/icons/tx-delegate.svg'; -import registerDelegateDark from '../../../assets/images/icons/tx-delegate-dark.svg'; -import vote from '../../../assets/images/icons/tx-vote.svg'; -import voteDark from '../../../assets/images/icons/tx-vote-dark.svg'; -import addedVotes from '../../../assets/images/icons/added-votes.svg'; -import removedVotes from '../../../assets/images/icons/removed-votes.svg'; -import totalVotes from '../../../assets/images/icons/total-votes.svg'; -import user from '../../../assets/images/icons/user.svg'; -import userActive from '../../../assets/images/icons/user-active.svg'; -import verifyMessageInputsView from '../../../assets/images/icons/verify-message-inputs-view.svg'; -import verifyMessageInputsViewActive from '../../../assets/images/icons/verify-message-inputs-view-active.svg'; -import verifyMessageTextareaView from '../../../assets/images/icons/verify-message-textarea-view.svg'; -import verifyMessageTextareaViewActive from '../../../assets/images/icons/verify-message-textarea-view-active.svg'; -import verifyWalletAddress from '../../../assets/images/icons/verify-icon.svg'; -import verifyWalletAddressActive from '../../../assets/images/icons/verify-icon-active.svg'; -import walletIcon from '../../../assets/images/icons/wallet.svg'; -import walletIconActive from '../../../assets/images/icons/wallet-active.svg'; -import warningIcon from '../../../assets/images/icons/warning-icon.svg'; -import warningRound from '../../../assets/images/icons/warning-round.svg'; -import qrCode from '../../../assets/images/icons/qr-code.svg'; -import signMessage from '../../../assets/images/icons/sign.svg'; -import signMessageActive from '../../../assets/images/icons/signActive.svg'; -import verifyMessage from '../../../assets/images/icons/verify.svg'; -import verifyMessageActive from '../../../assets/images/icons/verifyActive.svg'; -import qrCodeActive from '../../../assets/images/icons/qr-code-active.svg'; -import bookmark from '../../../assets/images/icons/icon-bookmark.svg'; -import bookmarkActive from '../../../assets/images/icons/icon-bookmark-active.svg'; -import bitcoinLogo from '../../../assets/images/bitcoin-logo.svg'; -import toggleSidebar from '../../../assets/images/icons/toggle-sidebar.svg'; -import toggleSidebarActive from '../../../assets/images/icons/toggle-sidebar-active.svg'; -import darkMode from '../../../assets/images/icons/dark-mode.svg'; -import lightMode from '../../../assets/images/icons/light-mode.svg'; -import blocksMonitor from '../../../assets/images/icons/blocks.svg'; -import blocksMonitorActive from '../../../assets/images/icons/blocksActive.svg'; -import accountsMonitor from '../../../assets/images/icons/accountsMonitor.svg'; -import accountsMonitorActive from '../../../assets/images/icons/accountsMonitorActive.svg'; -import transactions from '../../../assets/images/icons/transactions.svg'; -import transactionsDark from '../../../assets/images/icons/transactions-dark.svg'; -import transactionsMonitor from '../../../assets/images/icons/transactionsMonitor.svg'; -import transactionsMonitorActive from '../../../assets/images/icons/transactionsMonitorActive.svg'; -import delegatesMonitor from '../../../assets/images/icons/delegatesMonitor.svg'; -import delegatesMonitorActive from '../../../assets/images/icons/delegatesMonitorActive.svg'; -import networkMonitor from '../../../assets/images/icons/networkMonitor.svg'; -import networkMonitorActive from '../../../assets/images/icons/networkMonitorActive.svg'; -import voting from '../../../assets/images/icons/voting.svg'; -import votingActive from '../../../assets/images/icons/votingActive.svg'; -import signOut from '../../../assets/images/icons/signOut.svg'; -import plus from '../../../assets/images/icons/plus.svg'; -import plusActive from '../../../assets/images/icons/plusActive.svg'; -import remove from '../../../assets/images/icons/remove.svg'; -import totalBlocks from '../../../assets/images/icons/total-blocks.svg'; -import totalBlocksDark from '../../../assets/images/icons/total-blocks-dark.svg'; -import blocksForged from '../../../assets/images/icons/blocks-forged.svg'; -import blocksForgedDark from '../../../assets/images/icons/blocks-forged-dark.svg'; -import distribution from '../../../assets/images/icons/distribution.svg'; -import clock from '../../../assets/images/icons/clock.svg'; -import clockDark from '../../../assets/images/icons/clock-dark.svg'; -import clockActive from '../../../assets/images/icons/clock-active.svg'; -import clockActiveDark from '../../../assets/images/icons/clock-active-dark.svg'; -import star from '../../../assets/images/icons/star.svg'; -import starDark from '../../../assets/images/icons/star-dark.svg'; -import calendar from '../../../assets/images/icons/calendar.svg'; -import calendarDark from '../../../assets/images/icons/calendar-dark.svg'; -import weight from '../../../assets/images/icons/weight.svg'; -import weightDark from '../../../assets/images/icons/weight-dark.svg'; -import reward from '../../../assets/images/icons/forged-lsk.svg'; -import rewardDark from '../../../assets/images/icons/forged-lsk-dark.svg'; -import productivity from '../../../assets/images/icons/productivity.svg'; -import productivityDark from '../../../assets/images/icons/productivity-dark.svg'; -import missedBlocks from '../../../assets/images/icons/missed-blocks.svg'; -import missedBlocksDark from '../../../assets/images/icons/missed-blocks-dark.svg'; -import forgedBlocks from '../../../assets/images/icons/forged-blocks.svg'; -import forgedBlocksDark from '../../../assets/images/icons/forged-blocks-dark.svg'; -import consecutiveMissedBlocks from '../../../assets/images/icons/consecutive-missed-blocks.svg'; -import consecutiveMissedBlocksDark from '../../../assets/images/icons/consecutive-missed-blocks-dark.svg'; -import lock from '../../../assets/images/icons/lock.svg'; -import unlock from '../../../assets/images/icons/unlock.svg'; -import loading from '../../../assets/images/icons/loading.svg'; -import unlockToken from '../../../assets/images/icons/tx-unlock.svg'; -import unlockTokenDark from '../../../assets/images/icons/tx-unlock-dark.svg'; -import votingQueueInactive from '../../../assets/images/icons/voting-queue-inactive.svg'; -import votingQueueActive from '../../../assets/images/icons/voting-queue-active.svg'; -import deleteIcon from '../../../assets/images/icons/delete.svg'; -import arrowRightTailed from '../../../assets/images/icons/arrow-right-tailed.svg'; -import download from '../../../assets/images/icons/download.svg'; -import registerMultisignatureGroup from '../../../assets/images/icons/multisignature.svg'; -import multisignatureTransaction from '../../../assets/images/icons/multisignatureTransaction.svg'; -import multisignatureTransactionDark from '../../../assets/images/icons/multisignatureTransaction-dark.svg'; -import multiSignatureOutline from '../../../assets/images/icons/multisignature-outline.svg'; -import upload from '../../../assets/images/icons/upload.svg'; -import delegateForged from '../../../assets/images/icons/delegate-forged.svg'; -import delegateForgedDark from '../../../assets/images/icons/delegate-forged-dark.svg'; -import delegateMissed from '../../../assets/images/icons/delegate-missed.svg'; -import delegateMissedDark from '../../../assets/images/icons/delegate-missed-dark.svg'; -import delegateWarning from '../../../assets/images/icons/delegate-warning.svg'; -import delegateAwaiting from '../../../assets/images/icons/delegate-awaiting.svg'; -import delegateAwaitingDark from '../../../assets/images/icons/delegate-awaiting-dark.svg'; -import delegateActive from '../../../assets/images/icons/delegate-active.svg'; -import delegateActiveDark from '../../../assets/images/icons/delegate-active-dark.svg'; -import delegateStandby from '../../../assets/images/icons/delegate-standby.svg'; -import delegateStandbyDark from '../../../assets/images/icons/delegate-standby-dark.svg'; -import delegateNonEligible from '../../../assets/images/icons/delegate-non-eligible.svg'; -import delegateNonEligibleDark from '../../../assets/images/icons/delegate-non-eligible-dark.svg'; -import delegatePunished from '../../../assets/images/icons/delegate-punished.svg'; -import delegatePunishedDark from '../../../assets/images/icons/delegate-punished-dark.svg'; -import delegateBanned from '../../../assets/images/icons/delegate-banned.svg'; -import delegateBannedDark from '../../../assets/images/icons/delegate-banned-dark.svg'; -import eyeInactive from '../../../assets/images/icons/eye-inactive.svg'; -import eyeActive from '../../../assets/images/icons/eye-active.svg'; -import liskIcon from '../../../assets/images/icons/lisk-icon.svg'; -import initialiseIcon from '../../../assets/images/icons/initialise-icon.svg'; -import initialiseRegistration from '../../../assets/images/icons/initialise-registration.svg'; -import warningYellow from '../../../assets/images/icons/warning-yellow.svg'; -import linkIcon from '../../../assets/images/icons/link-icon.svg'; -import refresh from '../../../assets/images/icons/refresh.svg'; -import reportDelegateMisbehavior from '../../../assets/images/icons/reportDelegateMisbehavior.svg'; -import reportDelegateMisbehaviorDark from '../../../assets/images/icons/reportDelegateMisbehavior-dark.svg'; - -export const icons = { - academy, - academyActive, - alertIcon, - approved, - arrowRightTailed, - arrowLeftActive, - arrowLeftInactive, - arrowRightActive, - arrowRightInactive, - arrowUpCircle, - balance, - bookmarksIconEmptyState, - btcIcon, - calendar, - calendarDark, - checkboxFilled, - checkmark, - consecutiveMissedBlocks, - consecutiveMissedBlocksDark, - copy, - dashboardIcon, - dashboardIconActive, - deleteIcon, - discord, - discordActive, - discreetMode, - discreetModeActive, - feedback, - feedbackActive, - fileOutline, - forgedBlocks, - forgedBlocksDark, - reward, - rewardDark, - help, - helpActive, - helpCenter, - helpCenterArrow, - hidePassphraseIcon, - hwWalletIcon, - edit, - iconEmptyRecentTransactions, - iconFilter, - iconLedgerDevice, - iconLoader, - iconTrezorDevice, - iconWarning, - incoming, - liskChat, - liskLogo, - liskLogoWhite, - logout, - logoutActive, - lskIcon, - newsFeedTwitter, - noTweetsIcon, - okIcon, - outgoing, - pending, - searchActive, - search, - settings, - settingsActive, - showPassphraseIcon, - signIn, - signInActive, - star, - starDark, - tooltipQuestionMark, - transactionApproved, - transactionError, - transactionPending, - transactionSuccess, - txDefault, - txDefaultDark, - registerDelegate, - registerDelegateDark, - vote, - voteDark, - user, - userActive, - verifyMessageInputsView, - verifyMessageInputsViewActive, - verifyMessageTextareaView, - verifyMessageTextareaViewActive, - verifyWalletAddress, - walletIcon, - walletIconActive, - warningIcon, - warningRound, - addedVotes, - removedVotes, - totalVotes, - qrCode, - qrCodeActive, - copyActive, - verifyWalletAddressActive, - liskLogoDark, - balanceDark, - newsFeedTwitterDark, - fileOutlineDark, - signMessage, - signMessageActive, - verifyMessage, - verifyMessageActive, - iconEmptyRecentTransactionsDark, - bookmarksIconEmptyStateDark, - multiSignatureOutline, - registerMultisignatureGroup, - missedBlocks, - missedBlocksDark, - newsFeedBlog, - newsFeedBlogDark, - bookmark, - bookmarkActive, - bitcoinLogo, - toggleSidebar, - toggleSidebarActive, - darkMode, - lightMode, - blocksMonitor, - blocksMonitorActive, - accountsMonitor, - accountsMonitorActive, - transactions, - transactionsDark, - transactionsMonitor, - transactionsMonitorActive, - delegatesMonitor, - delegatesMonitorActive, - networkMonitor, - networkMonitorActive, - voting, - votingActive, - signOut, - plus, - plusActive, - remove, - totalBlocks, - totalBlocksDark, - blocksForged, - blocksForgedDark, - distribution, - clock, - clockDark, - clockActive, - clockActiveDark, - searchInput, - weight, - weightDark, - productivity, - productivityDark, - lock, - unlock, - loading, - unlockToken, - unlockTokenDark, - votingQueueInactive, - votingQueueActive, - download, - upload, - delegateForged, - delegateForgedDark, - delegateMissed, - delegateMissedDark, - delegateWarning, - delegateAwaiting, - delegateAwaitingDark, - delegateActive, - delegateStandby, - delegateNonEligible, - delegatePunished, - delegateBanned, - delegateActiveDark, - delegateStandbyDark, - delegateNonEligibleDark, - delegatePunishedDark, - delegateBannedDark, - eyeActive, - eyeInactive, - liskIcon, - initialiseIcon, - initialiseRegistration, - warningYellow, - linkIcon, - arrowRightWithStroke, - arrowRightWithStrokeDark, - multisignatureTransaction, - multisignatureTransactionDark, - refresh, - reportDelegateMisbehavior, - reportDelegateMisbehaviorDark, -}; - -const Icon = ({ name, noTheme, ...props }) => { - const theme = useTheme(); - const src = theme === 'dark' && !noTheme && icons[`${name}Dark`] ? icons[`${name}Dark`] : icons[name]; - return ; -}; - -Icon.propTypes = { - name: PropTypes.oneOf(Object.keys(icons)).isRequired, -}; - -export default Icon; +/* eslint-disable max-lines */ +import React from 'react'; +import PropTypes from 'prop-types'; +import { useTheme } from '@utils/theme'; +import academy from '../../../assets/images/icons/academy.svg'; +import academyActive from '../../../assets/images/icons/academy-active.svg'; +import alertIcon from '../../../assets/images/icons/icon-alert.svg'; +import approved from '../../../assets/images/icons/approved.svg'; +import arrowLeftActive from '../../../assets/images/icons/arrow-left-active.svg'; +import arrowLeftInactive from '../../../assets/images/icons/arrow-left-inactive.svg'; +import arrowRightActive from '../../../assets/images/icons/arrow-right-active.svg'; +import arrowRightInactive from '../../../assets/images/icons/arrow-right-inactive.svg'; +import arrowRightWithStroke from '../../../assets/images/icons/arrow-right-with-stroke.svg'; +import arrowRightWithStrokeDark from '../../../assets/images/icons/arrow-right-with-stroke-dark.svg'; +import arrowUpCircle from '../../../assets/images/icons/click-to-update.svg'; +import balance from '../../../assets/images/icons/balance.svg'; +import balanceDark from '../../../assets/images/icons/balance-dark.svg'; +import bookmarksIconEmptyState from '../../../assets/images/icons/bookmarks-empty-state.svg'; +import bookmarksIconEmptyStateDark from '../../../assets/images/icons/bookmarks-empty-state-dark.svg'; +import btcIcon from '../../../assets/images/icons/icon-btc.svg'; +import checkboxFilled from '../../../assets/images/icons/checkmark-filled.svg'; +import checkmark from '../../../assets/images/icons/checkmark.svg'; +import copy from '../../../assets/images/icons/copy.svg'; +import copyActive from '../../../assets/images/icons/copy-active.svg'; +import dashboardIcon from '../../../assets/images/icons/dashboard.svg'; +import dashboardIconActive from '../../../assets/images/icons/dashboard-active.svg'; +import discord from '../../../assets/images/icons/discord.svg'; +import discordActive from '../../../assets/images/icons/discord-active.svg'; +import discreetMode from '../../../assets/images/icons/discreet-mode.svg'; +import discreetModeActive from '../../../assets/images/icons/discreet-mode-active.svg'; +import feedback from '../../../assets/images/icons/feedback.svg'; +import feedbackActive from '../../../assets/images/icons/feedback-active.svg'; +import fileOutline from '../../../assets/images/icons/icon-file-outline.svg'; +import fileOutlineDark from '../../../assets/images/icons/icon-file-outline-dark.svg'; +import help from '../../../assets/images/icons/help.svg'; +import helpActive from '../../../assets/images/icons/help-active.svg'; +import helpCenter from '../../../assets/images/icons/help-center.svg'; +import helpCenterArrow from '../../../assets/images/icons/arrow.svg'; +import hidePassphraseIcon from '../../../assets/images/icons/icon-hide-passphrase.svg'; +import hwWalletIcon from '../../../assets/images/icons/hw-wallet.svg'; +import edit from '../../../assets/images/icons/edit.svg'; +import iconEmptyRecentTransactions from '../../../assets/images/icons/empty-recent-transactions.svg'; +import iconEmptyRecentTransactionsDark from '../../../assets/images/icons/empty-recent-transactions-dark.svg'; +import iconFilter from '../../../assets/images/icons/icon-filter.svg'; +import iconLedgerDevice from '../../../assets/images/icons/icon-ledger-device.svg'; +import iconLoader from '../../../assets/images/icons/icon-loader.svg'; +import iconTrezorDevice from '../../../assets/images/icons/icon-trezor-device.svg'; +import iconWarning from '../../../assets/images/icons/icon-warning.svg'; +import incoming from '../../../assets/images/icons/incoming.svg'; +import liskChat from '../../../assets/images/icons/lisk-chat.svg'; +import liskLogo from '../../../assets/images/lisk-logo-v2.svg'; +import liskLogoDark from '../../../assets/images/lisk-logo-dark.svg'; +import liskLogoWhite from '../../../assets/images/lisk-logo-white-v2.svg'; +import logout from '../../../assets/images/icons/logout.svg'; +import logoutActive from '../../../assets/images/icons/logout-active.svg'; +import lskIcon from '../../../assets/images/icons/icon-lsk.svg'; +import newsFeedTwitter from '../../../assets/images/icons/news-feed-twitter.svg'; +import newsFeedTwitterDark from '../../../assets/images/icons/news-feed-twitter-dark.svg'; +import newsFeedBlog from '../../../assets/images/icons/news-feed-blog.svg'; +import newsFeedBlogDark from '../../../assets/images/icons/news-feed-blog-dark.svg'; +import noTweetsIcon from '../../../assets/images/icons/no-tweets.svg'; +import okIcon from '../../../assets/images/icons/icon-checkmark.svg'; +import outgoing from '../../../assets/images/icons/outgoing.svg'; +import pending from '../../../assets/images/icons/pending.svg'; +import searchActive from '../../../assets/images/icons/search-active.svg'; +import search from '../../../assets/images/icons/search.svg'; +import searchInput from '../../../assets/images/icons/search-input.svg'; +import settings from '../../../assets/images/icons/settings.svg'; +import settingsActive from '../../../assets/images/icons/settings-active.svg'; +import showPassphraseIcon from '../../../assets/images/icons/icon-show-passphrase.svg'; +import signIn from '../../../assets/images/icons/signin.svg'; +import signInActive from '../../../assets/images/icons/signin-active.svg'; +import tooltipQuestionMark from '../../../assets/images/icons/tooltip-question-icon.svg'; +import transactionApproved from '../../../assets/images/icons/transaction-status-approved.svg'; +import transactionError from '../../../assets/images/icons/transaction-error.svg'; +import transactionPending from '../../../assets/images/icons/transaction-status-pending.svg'; +import transactionSuccess from '../../../assets/images/icons/transaction-success.svg'; +import txDefault from '../../../assets/images/icons/tx-default.svg'; +import txDefaultDark from '../../../assets/images/icons/tx-default-dark.svg'; +import registerDelegate from '../../../assets/images/icons/tx-delegate.svg'; +import registerDelegateDark from '../../../assets/images/icons/tx-delegate-dark.svg'; +import vote from '../../../assets/images/icons/tx-vote.svg'; +import voteDark from '../../../assets/images/icons/tx-vote-dark.svg'; +import addedVotes from '../../../assets/images/icons/added-votes.svg'; +import removedVotes from '../../../assets/images/icons/removed-votes.svg'; +import totalVotes from '../../../assets/images/icons/total-votes.svg'; +import user from '../../../assets/images/icons/user.svg'; +import userActive from '../../../assets/images/icons/user-active.svg'; +import verifyMessageInputsView from '../../../assets/images/icons/verify-message-inputs-view.svg'; +import verifyMessageInputsViewActive from '../../../assets/images/icons/verify-message-inputs-view-active.svg'; +import verifyMessageTextareaView from '../../../assets/images/icons/verify-message-textarea-view.svg'; +import verifyMessageTextareaViewActive from '../../../assets/images/icons/verify-message-textarea-view-active.svg'; +import verifyWalletAddress from '../../../assets/images/icons/verify-icon.svg'; +import verifyWalletAddressActive from '../../../assets/images/icons/verify-icon-active.svg'; +import walletIcon from '../../../assets/images/icons/wallet.svg'; +import walletIconActive from '../../../assets/images/icons/wallet-active.svg'; +import warningIcon from '../../../assets/images/icons/warning-icon.svg'; +import warningRound from '../../../assets/images/icons/warning-round.svg'; +import qrCode from '../../../assets/images/icons/qr-code.svg'; +import signMessage from '../../../assets/images/icons/sign.svg'; +import signMessageActive from '../../../assets/images/icons/signActive.svg'; +import verifyMessage from '../../../assets/images/icons/verify.svg'; +import verifyMessageActive from '../../../assets/images/icons/verifyActive.svg'; +import qrCodeActive from '../../../assets/images/icons/qr-code-active.svg'; +import bookmark from '../../../assets/images/icons/icon-bookmark.svg'; +import bookmarkActive from '../../../assets/images/icons/icon-bookmark-active.svg'; +import bitcoinLogo from '../../../assets/images/bitcoin-logo.svg'; +import toggleSidebar from '../../../assets/images/icons/toggle-sidebar.svg'; +import toggleSidebarActive from '../../../assets/images/icons/toggle-sidebar-active.svg'; +import darkMode from '../../../assets/images/icons/dark-mode.svg'; +import lightMode from '../../../assets/images/icons/light-mode.svg'; +import blocksMonitor from '../../../assets/images/icons/blocks.svg'; +import blocksMonitorActive from '../../../assets/images/icons/blocksActive.svg'; +import accountsMonitor from '../../../assets/images/icons/accountsMonitor.svg'; +import accountsMonitorActive from '../../../assets/images/icons/accountsMonitorActive.svg'; +import transactions from '../../../assets/images/icons/transactions.svg'; +import transactionsDark from '../../../assets/images/icons/transactions-dark.svg'; +import transactionsMonitor from '../../../assets/images/icons/transactionsMonitor.svg'; +import transactionsMonitorActive from '../../../assets/images/icons/transactionsMonitorActive.svg'; +import delegatesMonitor from '../../../assets/images/icons/delegatesMonitor.svg'; +import delegatesMonitorActive from '../../../assets/images/icons/delegatesMonitorActive.svg'; +import networkMonitor from '../../../assets/images/icons/networkMonitor.svg'; +import networkMonitorActive from '../../../assets/images/icons/networkMonitorActive.svg'; +import voting from '../../../assets/images/icons/voting.svg'; +import votingActive from '../../../assets/images/icons/votingActive.svg'; +import signOut from '../../../assets/images/icons/signOut.svg'; +import plus from '../../../assets/images/icons/plus.svg'; +import plusActive from '../../../assets/images/icons/plusActive.svg'; +import remove from '../../../assets/images/icons/remove.svg'; +import totalBlocks from '../../../assets/images/icons/total-blocks.svg'; +import totalBlocksDark from '../../../assets/images/icons/total-blocks-dark.svg'; +import blocksForged from '../../../assets/images/icons/blocks-forged.svg'; +import blocksForgedDark from '../../../assets/images/icons/blocks-forged-dark.svg'; +import distribution from '../../../assets/images/icons/distribution.svg'; +import clock from '../../../assets/images/icons/clock.svg'; +import clockDark from '../../../assets/images/icons/clock-dark.svg'; +import clockActive from '../../../assets/images/icons/clock-active.svg'; +import clockActiveDark from '../../../assets/images/icons/clock-active-dark.svg'; +import star from '../../../assets/images/icons/star.svg'; +import starDark from '../../../assets/images/icons/star-dark.svg'; +import calendar from '../../../assets/images/icons/calendar.svg'; +import calendarDark from '../../../assets/images/icons/calendar-dark.svg'; +import weight from '../../../assets/images/icons/weight.svg'; +import weightDark from '../../../assets/images/icons/weight-dark.svg'; +import reward from '../../../assets/images/icons/forged-lsk.svg'; +import rewardDark from '../../../assets/images/icons/forged-lsk-dark.svg'; +import productivity from '../../../assets/images/icons/productivity.svg'; +import productivityDark from '../../../assets/images/icons/productivity-dark.svg'; +import missedBlocks from '../../../assets/images/icons/missed-blocks.svg'; +import missedBlocksDark from '../../../assets/images/icons/missed-blocks-dark.svg'; +import forgedBlocks from '../../../assets/images/icons/forged-blocks.svg'; +import forgedBlocksDark from '../../../assets/images/icons/forged-blocks-dark.svg'; +import consecutiveMissedBlocks from '../../../assets/images/icons/consecutive-missed-blocks.svg'; +import consecutiveMissedBlocksDark from '../../../assets/images/icons/consecutive-missed-blocks-dark.svg'; +import lock from '../../../assets/images/icons/lock.svg'; +import unlock from '../../../assets/images/icons/unlock.svg'; +import loading from '../../../assets/images/icons/loading.svg'; +import unlockToken from '../../../assets/images/icons/tx-unlock.svg'; +import unlockTokenDark from '../../../assets/images/icons/tx-unlock-dark.svg'; +import votingQueueInactive from '../../../assets/images/icons/voting-queue-inactive.svg'; +import votingQueueActive from '../../../assets/images/icons/voting-queue-active.svg'; +import deleteIcon from '../../../assets/images/icons/delete.svg'; +import arrowRightTailed from '../../../assets/images/icons/arrow-right-tailed.svg'; +import download from '../../../assets/images/icons/download.svg'; +import registerMultisignatureGroup from '../../../assets/images/icons/multisignature.svg'; +import multisignatureTransaction from '../../../assets/images/icons/multisignatureTransaction.svg'; +import multisignatureTransactionDark from '../../../assets/images/icons/multisignatureTransaction-dark.svg'; +import multiSignatureOutline from '../../../assets/images/icons/multisignature-outline.svg'; +import upload from '../../../assets/images/icons/upload.svg'; +import delegateForged from '../../../assets/images/icons/delegate-forged.svg'; +import delegateForgedDark from '../../../assets/images/icons/delegate-forged-dark.svg'; +import delegateMissed from '../../../assets/images/icons/delegate-missed.svg'; +import delegateMissedDark from '../../../assets/images/icons/delegate-missed-dark.svg'; +import delegateWarning from '../../../assets/images/icons/delegate-warning.svg'; +import delegateAwaiting from '../../../assets/images/icons/delegate-awaiting.svg'; +import delegateAwaitingDark from '../../../assets/images/icons/delegate-awaiting-dark.svg'; +import delegateActive from '../../../assets/images/icons/delegate-active.svg'; +import delegateActiveDark from '../../../assets/images/icons/delegate-active-dark.svg'; +import delegateStandby from '../../../assets/images/icons/delegate-standby.svg'; +import delegateStandbyDark from '../../../assets/images/icons/delegate-standby-dark.svg'; +import delegateNonEligible from '../../../assets/images/icons/delegate-non-eligible.svg'; +import delegateNonEligibleDark from '../../../assets/images/icons/delegate-non-eligible-dark.svg'; +import delegatePunished from '../../../assets/images/icons/delegate-punished.svg'; +import delegatePunishedDark from '../../../assets/images/icons/delegate-punished-dark.svg'; +import delegateBanned from '../../../assets/images/icons/delegate-banned.svg'; +import delegateBannedDark from '../../../assets/images/icons/delegate-banned-dark.svg'; +import eyeInactive from '../../../assets/images/icons/eye-inactive.svg'; +import eyeActive from '../../../assets/images/icons/eye-active.svg'; +import liskIcon from '../../../assets/images/icons/lisk-icon.svg'; +import initialiseIcon from '../../../assets/images/icons/initialise-icon.svg'; +import initialiseRegistration from '../../../assets/images/icons/initialise-registration.svg'; +import warningYellow from '../../../assets/images/icons/warning-yellow.svg'; +import linkIcon from '../../../assets/images/icons/link-icon.svg'; +import refresh from '../../../assets/images/icons/refresh.svg'; +import reportDelegateMisbehavior from '../../../assets/images/icons/reportDelegateMisbehavior.svg'; +import reportDelegateMisbehaviorDark from '../../../assets/images/icons/reportDelegateMisbehavior-dark.svg'; + +export const icons = { + academy, + academyActive, + alertIcon, + approved, + arrowRightTailed, + arrowLeftActive, + arrowLeftInactive, + arrowRightActive, + arrowRightInactive, + arrowUpCircle, + balance, + bookmarksIconEmptyState, + btcIcon, + calendar, + calendarDark, + checkboxFilled, + checkmark, + consecutiveMissedBlocks, + consecutiveMissedBlocksDark, + copy, + dashboardIcon, + dashboardIconActive, + deleteIcon, + discord, + discordActive, + discreetMode, + discreetModeActive, + feedback, + feedbackActive, + fileOutline, + forgedBlocks, + forgedBlocksDark, + reward, + rewardDark, + help, + helpActive, + helpCenter, + helpCenterArrow, + hidePassphraseIcon, + hwWalletIcon, + edit, + iconEmptyRecentTransactions, + iconFilter, + iconLedgerDevice, + iconLoader, + iconTrezorDevice, + iconWarning, + incoming, + liskChat, + liskLogo, + liskLogoWhite, + logout, + logoutActive, + lskIcon, + newsFeedTwitter, + noTweetsIcon, + okIcon, + outgoing, + pending, + searchActive, + search, + settings, + settingsActive, + showPassphraseIcon, + signIn, + signInActive, + star, + starDark, + tooltipQuestionMark, + transactionApproved, + transactionError, + transactionPending, + transactionSuccess, + txDefault, + txDefaultDark, + registerDelegate, + registerDelegateDark, + vote, + voteDark, + user, + userActive, + verifyMessageInputsView, + verifyMessageInputsViewActive, + verifyMessageTextareaView, + verifyMessageTextareaViewActive, + verifyWalletAddress, + walletIcon, + walletIconActive, + warningIcon, + warningRound, + addedVotes, + removedVotes, + totalVotes, + qrCode, + qrCodeActive, + copyActive, + verifyWalletAddressActive, + liskLogoDark, + balanceDark, + newsFeedTwitterDark, + fileOutlineDark, + signMessage, + signMessageActive, + verifyMessage, + verifyMessageActive, + iconEmptyRecentTransactionsDark, + bookmarksIconEmptyStateDark, + multiSignatureOutline, + registerMultisignatureGroup, + missedBlocks, + missedBlocksDark, + newsFeedBlog, + newsFeedBlogDark, + bookmark, + bookmarkActive, + bitcoinLogo, + toggleSidebar, + toggleSidebarActive, + darkMode, + lightMode, + blocksMonitor, + blocksMonitorActive, + accountsMonitor, + accountsMonitorActive, + transactions, + transactionsDark, + transactionsMonitor, + transactionsMonitorActive, + delegatesMonitor, + delegatesMonitorActive, + networkMonitor, + networkMonitorActive, + voting, + votingActive, + signOut, + plus, + plusActive, + remove, + totalBlocks, + totalBlocksDark, + blocksForged, + blocksForgedDark, + distribution, + clock, + clockDark, + clockActive, + clockActiveDark, + searchInput, + weight, + weightDark, + productivity, + productivityDark, + lock, + unlock, + loading, + unlockToken, + unlockTokenDark, + votingQueueInactive, + votingQueueActive, + download, + upload, + delegateForged, + delegateForgedDark, + delegateMissed, + delegateMissedDark, + delegateWarning, + delegateAwaiting, + delegateAwaitingDark, + delegateActive, + delegateStandby, + delegateNonEligible, + delegatePunished, + delegateBanned, + delegateActiveDark, + delegateStandbyDark, + delegateNonEligibleDark, + delegatePunishedDark, + delegateBannedDark, + eyeActive, + eyeInactive, + liskIcon, + initialiseIcon, + initialiseRegistration, + warningYellow, + linkIcon, + arrowRightWithStroke, + arrowRightWithStrokeDark, + multisignatureTransaction, + multisignatureTransactionDark, + refresh, + reportDelegateMisbehavior, + reportDelegateMisbehaviorDark, +}; + +const Icon = ({ name, noTheme, ...props }) => { + const theme = useTheme(); + const src = theme === 'dark' && !noTheme && icons[`${name}Dark`] ? icons[`${name}Dark`] : icons[name]; + return ; +}; + +Icon.propTypes = { + name: PropTypes.oneOf(Object.keys(icons)).isRequired, +}; + +export default Icon; From 54fc03aed223511ff31b05756981ac09c43a4c2d Mon Sep 17 00:00:00 2001 From: Ikemefuna Obioha Date: Tue, 28 Sep 2021 18:50:40 +0100 Subject: [PATCH 15/16] Minor change --- i18n/locales/en/common.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/i18n/locales/en/common.json b/i18n/locales/en/common.json index 6aaa3682ef..00c557426b 100644 --- a/i18n/locales/en/common.json +++ b/i18n/locales/en/common.json @@ -1,5 +1,5 @@ { - "\r\n You can choose a high, medium, or low transaction priority, each requiring a\r\n corresponding transaction fee. Or you can pay any desired fee of no less than\r\n {{minFee}} {{token}}. If you don't know what fee to pay, choose\r\n one of the provided transaction priorities.\r\n ": "\r\n You can choose a high, medium, or low transaction priority, each requiring a\r\n corresponding transaction fee. Or you can pay any desired fee of no less than\r\n {{minFee}} {{token}}. If you don't know what fee to pay, choose\r\n one of the provided transaction priorities.\r\n ", + "\n You can choose a high, medium, or low transaction priority, each requiring a\n corresponding transaction fee. Or you can pay any desired fee of no less than\n {{minFee}} {{token}}. If you don't know what fee to pay, choose\n one of the provided transaction priorities.\n ": "\n You can choose a high, medium, or low transaction priority, each requiring a\n corresponding transaction fee. Or you can pay any desired fee of no less than\n {{minFee}} {{token}}. If you don't know what fee to pay, choose\n one of the provided transaction priorities.\n ", " - Confirm transaction on your {{deviceModel}}": " - Confirm transaction on your {{deviceModel}}", " is out. ": " is out. ", " to deposit LSK.": " to deposit LSK.", @@ -244,7 +244,7 @@ "Lisk Terms of Use": "Lisk Terms of Use", "Lisk Website": "Lisk Website", "Lisk accounts on {{WalletModel}}": "Lisk accounts on {{WalletModel}}", - "Lisk counts your message in bytes, so keep in mind\r\n that the length of your message may vary in different languages.\r\n Different characters may consume a varying amount of bytes.": "Lisk counts your message in bytes, so keep in mind\r\n that the length of your message may vary in different languages.\r\n Different characters may consume a varying amount of bytes.", + "Lisk counts your message in bytes, so keep in mind\n that the length of your message may vary in different languages.\n Different characters may consume a varying amount of bytes.": "Lisk counts your message in bytes, so keep in mind\n that the length of your message may vary in different languages.\n Different characters may consume a varying amount of bytes.", "Lisk currently supports Ledger Nano S, Ledger Nano X, Trezor One and Trezor Model T wallets": "Lisk currently supports Ledger Nano S, Ledger Nano X, Trezor One and Trezor Model T wallets", "Lisk currently supports Ledger Nano S, Ledger Nano X, Trezor One and Trezor T wallets.": "Lisk currently supports Ledger Nano S, Ledger Nano X, Trezor One and Trezor T wallets.", "Lisk has now been enhanced even further": "Lisk has now been enhanced even further", From a751e48102d75733c77bbcea4d338ef73f8e432d Mon Sep 17 00:00:00 2001 From: Ikemefuna Obioha Date: Wed, 29 Sep 2021 17:32:14 +0100 Subject: [PATCH 16/16] PR comment fixes --- .../screens/wallet/delegatePerformance/styles.css | 7 +++++++ .../screens/wallet/delegateProfile/delegateProfile.css | 6 ++++++ 2 files changed, 13 insertions(+) diff --git a/src/components/screens/wallet/delegatePerformance/styles.css b/src/components/screens/wallet/delegatePerformance/styles.css index 3b3bebd7d1..f42a067754 100644 --- a/src/components/screens/wallet/delegatePerformance/styles.css +++ b/src/components/screens/wallet/delegatePerformance/styles.css @@ -37,4 +37,11 @@ padding-left: 0; } } + + @media (min-width: 1601px) { + & .performanceContainer { + flex-flow: row nowrap; + padding-left: 0; + } + } } diff --git a/src/components/screens/wallet/delegateProfile/delegateProfile.css b/src/components/screens/wallet/delegateProfile/delegateProfile.css index 8d7c0cc151..1d8c89500a 100644 --- a/src/components/screens/wallet/delegateProfile/delegateProfile.css +++ b/src/components/screens/wallet/delegateProfile/delegateProfile.css @@ -94,6 +94,12 @@ & .value { margin-top: 8px; color: var(--color-maastricht-blue); + + @media (--large-viewport) { + & :last-child { + @mixin contentSmall; + } + } } } }