From bbd5420f15d846fcff2888311b1602df71f4de3b Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Wed, 9 Jan 2019 17:59:11 +0100 Subject: [PATCH 1/3] slightly redesigned modal --- src/components/modals/confirm/SignTx/index.js | 24 +++++++++++++------ 1 file changed, 17 insertions(+), 7 deletions(-) diff --git a/src/components/modals/confirm/SignTx/index.js b/src/components/modals/confirm/SignTx/index.js index 245b14b7..4ece5a6f 100644 --- a/src/components/modals/confirm/SignTx/index.js +++ b/src/components/modals/confirm/SignTx/index.js @@ -6,7 +6,7 @@ import styled from 'styled-components'; import icons from 'config/icons'; import colors from 'config/colors'; -import { LINE_HEIGHT, FONT_SIZE } from 'config/variables'; +import { LINE_HEIGHT, FONT_SIZE, FONT_WEIGHT } from 'config/variables'; import P from 'components/Paragraph'; import Icon from 'components/Icon'; @@ -21,7 +21,6 @@ type Props = { const Wrapper = styled.div` width: 390px; - padding: 12px 10px; `; const Header = styled.div` @@ -32,16 +31,27 @@ const Content = styled.div` border-top: 1px solid ${colors.DIVIDER}; background: ${colors.MAIN}; padding: 24px 48px; + border-radius: 4px; `; const StyledP = styled(P)` + padding-bottom: 20px; + color: ${colors.TEXT}; + font-size: ${FONT_SIZE.BASE}; + &:last-child { + padding-bottom: 0px; + } +`; + +const Address = styled(StyledP)` word-wrap: break-word; - padding: 5px 0; + padding-bottom: 26px; line-height: ${LINE_HEIGHT.SMALL}; `; const Label = styled.div` - padding-top: 5px; + padding-bottom: 6px; + font-weight: ${FONT_WEIGHT.MEDIUM}; font-size: ${FONT_SIZE.SMALL}; color: ${colors.TEXT_SECONDARY}; `; @@ -64,11 +74,11 @@ const ConfirmSignTx = (props: Props) => { -

{`${amount} ${currency}` }

+ {`${amount} ${currency}` } - { address } +
{ address }
-

{ selectedFeeLevel.label }

+ { selectedFeeLevel.label }
); From 2f3872345d5c8b7b59196ae3fe0d930ce487370f Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Wed, 9 Jan 2019 18:00:18 +0100 Subject: [PATCH 2/3] show used fee level (low/normal/high...) --- src/components/modals/confirm/SignTx/index.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/modals/confirm/SignTx/index.js b/src/components/modals/confirm/SignTx/index.js index 4ece5a6f..75755c9c 100644 --- a/src/components/modals/confirm/SignTx/index.js +++ b/src/components/modals/confirm/SignTx/index.js @@ -56,6 +56,10 @@ const Label = styled.div` color: ${colors.TEXT_SECONDARY}; `; +const FeeLevelName = styled(StyledP)` + padding-bottom: 0px; +`; + const ConfirmSignTx = (props: Props) => { const { amount, @@ -78,6 +82,7 @@ const ConfirmSignTx = (props: Props) => {
{ address }
+ {selectedFeeLevel.value} { selectedFeeLevel.label } From cb2dff467b3306e9bdeaa4e5f544b02972793dbf Mon Sep 17 00:00:00 2001 From: slowbackspace Date: Wed, 9 Jan 2019 18:04:24 +0100 Subject: [PATCH 3/3] cleanup --- src/components/modals/confirm/SignTx/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/modals/confirm/SignTx/index.js b/src/components/modals/confirm/SignTx/index.js index 75755c9c..69278370 100644 --- a/src/components/modals/confirm/SignTx/index.js +++ b/src/components/modals/confirm/SignTx/index.js @@ -45,7 +45,6 @@ const StyledP = styled(P)` const Address = styled(StyledP)` word-wrap: break-word; - padding-bottom: 26px; line-height: ${LINE_HEIGHT.SMALL}; `;