diff --git a/src/views/Wallet/components/Content/components/FirmwareUnsupported/index.js b/src/views/Wallet/components/Content/components/FirmwareUnsupported/index.js index 12ca6882..b48f562b 100644 --- a/src/views/Wallet/components/Content/components/FirmwareUnsupported/index.js +++ b/src/views/Wallet/components/Content/components/FirmwareUnsupported/index.js @@ -3,8 +3,8 @@ import React from 'react'; import styled from 'styled-components'; import colors from 'config/colors'; -import { FONT_SIZE } from 'config/variables'; -import { H2 } from 'components/Heading'; +import { H1 } from 'components/Heading'; +import Paragraph from 'components/Paragraph'; import Button from 'components/Button'; import Link from 'components/Link'; import CoinLogo from 'components/images/CoinLogo'; @@ -39,21 +39,17 @@ const StyledCoinLogo = styled(CoinLogo)` width: 32px; `; -const StyledLink = styled(Link)` - padding-top: 24px; -`; - const Row = styled.div` - flex: 1; display: flex; + padding: 50px 0; + flex-direction: column; - justify-content: center; align-items: center; + text-align: center; `; -const Message = styled.div` - font-size: ${FONT_SIZE.SMALL}; - color: ${colors.TEXT_SECONDARY}; +const Message = styled(Paragraph)` + padding: 0 0 15px 0; text-align: center; `; @@ -61,11 +57,11 @@ const FirmwareUnsupported = (props: Props) => ( {props.networkShortcut && } - {props.title} + {props.title} {props.message} - + Find out more info - + ); diff --git a/src/views/Wallet/views/Bootloader/index.js b/src/views/Wallet/views/Bootloader/index.js index 15230db0..d82a7a2a 100644 --- a/src/views/Wallet/views/Bootloader/index.js +++ b/src/views/Wallet/views/Bootloader/index.js @@ -1,30 +1,32 @@ import React from 'react'; import styled from 'styled-components'; -import { H2 } from 'components/Heading'; +import { H1 } from 'components/Heading'; +import P from 'components/Paragraph'; import { connect } from 'react-redux'; const Wrapper = styled.div` display: flex; flex-direction: column; + padding: 40px 35px 40px 35px; `; const Row = styled.div` display: flex; flex-direction: column; align-items: center; - padding: 100px 48px; + padding: 50px 0; `; -const P = styled.p` - padding: 10px 0px; +const StyledP = styled(P)` + padding: 0 0 15px 0; text-align: center; `; const Bootloader = () => ( - Your device is in firmware update mode - Please re-connect it + Your device is in firmware update mode + Please re-connect it ); diff --git a/src/views/Wallet/views/Dashboard/index.js b/src/views/Wallet/views/Dashboard/index.js index ea4dfc35..84c7a462 100644 --- a/src/views/Wallet/views/Dashboard/index.js +++ b/src/views/Wallet/views/Dashboard/index.js @@ -3,7 +3,8 @@ import styled from 'styled-components'; import { connect } from 'react-redux'; import Content from 'views/Wallet/components/Content'; -import { H2 } from 'components/Heading'; +import { H1 } from 'components/Heading'; +import Paragraph from 'components/Paragraph'; import DashboardImg from 'images/dashboard.png'; const Wrapper = styled.div` @@ -14,24 +15,23 @@ const Wrapper = styled.div` const Row = styled.div` flex: 1; display: flex; - padding: 100px 48px; + padding: 50px 0; flex-direction: column; align-items: center; `; -const P = styled.p` - padding: 24px 0px; +const StyledP = styled(Paragraph)` + padding: 0 0 15px 0; text-align: center; `; const Dashboard = () => ( - Dashboard - Please select your coin - You will gain access to receiving & sending selected coin + Please select your coin + You will gain access to receiving & sending selected coin diff --git a/src/views/Wallet/views/DeviceSettings/index.js b/src/views/Wallet/views/DeviceSettings/index.js index ca5c384e..4dbc1546 100644 --- a/src/views/Wallet/views/DeviceSettings/index.js +++ b/src/views/Wallet/views/DeviceSettings/index.js @@ -1,6 +1,6 @@ import React from 'react'; import styled from 'styled-components'; -import { H2 } from 'components/Heading'; +import { H1 } from 'components/Heading'; import Icon from 'components/Icon'; import colors from 'config/colors'; import Button from 'components/Button'; @@ -20,11 +20,11 @@ const Row = styled.div` display: flex; flex-direction: column; align-items: center; - padding: 100px 48px; + padding: 50px 0; `; const StyledP = styled(P)` - padding: 10px 0 15px 0; + padding: 0 0 15px 0; text-align: center; `; @@ -37,8 +37,8 @@ const DeviceSettings = () => ( color={colors.WARNING_PRIMARY} icon={ICONS.WARNING} /> - Device settings is under construction - Please use Bitcoin wallet interface to change your device settings + Device settings is under construction + Please use Bitcoin wallet interface to change your device settings Take me to the Bitcoin wallet diff --git a/src/views/Wallet/views/FirmwareUpdate/index.js b/src/views/Wallet/views/FirmwareUpdate/index.js index 6c6699ea..f15bcfa4 100644 --- a/src/views/Wallet/views/FirmwareUpdate/index.js +++ b/src/views/Wallet/views/FirmwareUpdate/index.js @@ -31,7 +31,7 @@ const Wrapper = styled.section` flex-direction: column; justify-content: center; align-items: center; - padding: 100px 48px; + padding: 90px 35px 40px 35px; `; const StyledNavLink = styled(Link)` @@ -46,6 +46,7 @@ const Image = styled.div` const StyledP = styled(P)` padding: 0 0 15px 0; + text-align: center; `; const FirmwareUpdate = (props: Props) => ( diff --git a/src/views/Wallet/views/Initialize/index.js b/src/views/Wallet/views/Initialize/index.js index 1a5a5309..39055a9f 100644 --- a/src/views/Wallet/views/Initialize/index.js +++ b/src/views/Wallet/views/Initialize/index.js @@ -1,5 +1,5 @@ import styled from 'styled-components'; -import { H2 } from 'components/Heading'; +import { H1 } from 'components/Heading'; import Button from 'components/Button'; import Paragraph from 'components/Paragraph'; import React from 'react'; @@ -8,27 +8,27 @@ import { connect } from 'react-redux'; const Wrapper = styled.div` display: flex; flex-direction: column; + padding: 40px 35px 40px 35px; `; const Row = styled.div` display: flex; flex-direction: column; align-items: center; - padding: 100px 48px; + padding: 50px 0; `; const A = styled.a``; const StyledParagraph = styled(Paragraph)` - margin: 10px 50px; - display: block; + padding: 0 0 15px 0; text-align: center; `; const Initialize = () => ( - Your device is in not initialized + Your device is not initialized Please use Bitcoin wallet interface to start initialization process Take me to the Bitcoin wallet diff --git a/src/views/Wallet/views/Seedless/index.js b/src/views/Wallet/views/Seedless/index.js index 15dd943d..bde5f915 100644 --- a/src/views/Wallet/views/Seedless/index.js +++ b/src/views/Wallet/views/Seedless/index.js @@ -1,31 +1,32 @@ import styled from 'styled-components'; -import { H2 } from 'components/Heading'; +import { H1 } from 'components/Heading'; import Paragraph from 'components/Paragraph'; import React from 'react'; import { connect } from 'react-redux'; + const Wrapper = styled.div` display: flex; flex-direction: column; + padding: 40px 35px 40px 35px; `; const Row = styled.div` display: flex; flex-direction: column; align-items: center; - padding: 100px 48px; + padding: 50px 0; `; const StyledParagraph = styled(Paragraph)` - margin: 10px 50px; - display: block; + padding: 0 0 15px 0; text-align: center; `; const Seedless = () => ( - Device is in seedless mode + Device is in seedless mode It's not suitable to use this service. diff --git a/src/views/Wallet/views/WalletSettings/index.js b/src/views/Wallet/views/WalletSettings/index.js index c584f958..5f2b3c66 100644 --- a/src/views/Wallet/views/WalletSettings/index.js +++ b/src/views/Wallet/views/WalletSettings/index.js @@ -6,7 +6,7 @@ import colors from 'config/colors'; import icons from 'config/icons'; import Content from 'views/Wallet/components/Content'; -import { H2 } from 'components/Heading'; +import { H1 } from 'components/Heading'; import Icon from 'components/Icon'; import Link from 'components/Link'; import Button from 'components/Button'; @@ -20,7 +20,7 @@ const Row = styled.div` display: flex; flex-direction: column; align-items: center; - padding: 100px 48px; + padding: 50px 0; `; const WalletSettings = () => ( @@ -32,7 +32,7 @@ const WalletSettings = () => ( color={colors.WARNING_PRIMARY} icon={icons.WARNING} /> - Wallet settings is under construction + Wallet settings is under construction Take me back
Please re-connect it
You will gain access to receiving & sending selected coin