From 9c400f0b6e9c78a79096c0dca749fae15185c481 Mon Sep 17 00:00:00 2001
From: slowbackspace <slowbackspace@gmail.com>
Date: Mon, 7 Jan 2019 10:52:26 +0100
Subject: [PATCH 1/4] unify paddings in wallet views

---
 src/views/Wallet/views/Bootloader/index.js    | 11 ++++----
 src/views/Wallet/views/Dashboard/index.js     | 12 ++++-----
 .../Wallet/views/DeviceSettings/index.js      |  8 +++---
 .../Wallet/views/FirmwareUpdate/index.js      |  1 +
 src/views/Wallet/views/Initialize/index.js    | 26 ++++++++++---------
 src/views/Wallet/views/Seedless/index.js      | 21 ++++++++-------
 .../Wallet/views/WalletSettings/index.js      |  4 +--
 7 files changed, 45 insertions(+), 38 deletions(-)

diff --git a/src/views/Wallet/views/Bootloader/index.js b/src/views/Wallet/views/Bootloader/index.js
index 15230db0..273c0211 100644
--- a/src/views/Wallet/views/Bootloader/index.js
+++ b/src/views/Wallet/views/Bootloader/index.js
@@ -1,6 +1,7 @@
 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`
@@ -15,16 +16,16 @@ const Row = styled.div`
     padding: 100px 48px;
 `;
 
-const P = styled.p`
-    padding: 10px 0px;
+const StyledP = styled(P)`
+    padding: 0 0 15px 0;
     text-align: center;
 `;
 
 const Bootloader = () => (
     <Wrapper>
         <Row>
-            <H2>Your device is in firmware update mode</H2>
-            <P>Please re-connect it</P>
+            <H1>Your device is in firmware update mode</H1>
+            <StyledP>Please re-connect it</StyledP>
         </Row>
     </Wrapper>
 );
diff --git a/src/views/Wallet/views/Dashboard/index.js b/src/views/Wallet/views/Dashboard/index.js
index ea4dfc35..636e1b3a 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`
@@ -20,18 +21,17 @@ const Row = styled.div`
     align-items: center;
 `;
 
-const P = styled.p`
-    padding: 24px 0px;
+const StyledP = styled(Paragraph)`
+    padding: 0 0 15px 0;
     text-align: center;
 `;
 
 const Dashboard = () => (
     <Content>
         <Wrapper>
-            <H2>Dashboard</H2>
             <Row>
-                <H2>Please select your coin</H2>
-                <P>You will gain access to receiving &amp; sending selected coin</P>
+                <H1>Please select your coin</H1>
+                <StyledP>You will gain access to receiving &amp; sending selected coin</StyledP>
                 <img src={DashboardImg} height="34" width="auto" alt="Dashboard" />
             </Row>
         </Wrapper>
diff --git a/src/views/Wallet/views/DeviceSettings/index.js b/src/views/Wallet/views/DeviceSettings/index.js
index ca5c384e..4899d548 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';
@@ -24,7 +24,7 @@ const Row = styled.div`
 `;
 
 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}
                 />
-                <H2>Device settings is under construction</H2>
-                <StyledP isSmaller>Please use Bitcoin wallet interface to change your device settings</StyledP>
+                <H1>Device settings is under construction</H1>
+                <StyledP>Please use Bitcoin wallet interface to change your device settings</StyledP>
                 <Link href="https://beta-wallet.trezor.io/">
                     <Button>Take me to the Bitcoin wallet</Button>
                 </Link>
diff --git a/src/views/Wallet/views/FirmwareUpdate/index.js b/src/views/Wallet/views/FirmwareUpdate/index.js
index 6c6699ea..9cfa2ab1 100644
--- a/src/views/Wallet/views/FirmwareUpdate/index.js
+++ b/src/views/Wallet/views/FirmwareUpdate/index.js
@@ -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..8a9ecace 100644
--- a/src/views/Wallet/views/Initialize/index.js
+++ b/src/views/Wallet/views/Initialize/index.js
@@ -1,7 +1,8 @@
 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 Content from 'views/Wallet/components/Content';
 import React from 'react';
 import { connect } from 'react-redux';
 
@@ -20,21 +21,22 @@ const Row = styled.div`
 const A = styled.a``;
 
 const StyledParagraph = styled(Paragraph)`
-    margin: 10px 50px;
-    display: block;
+    padding: 0 0 15px 0;
     text-align: center;
 `;
 
 const Initialize = () => (
-    <Wrapper>
-        <Row>
-            <H2>Your device is in not initialized</H2>
-            <StyledParagraph>Please use Bitcoin wallet interface to start initialization process</StyledParagraph>
-            <A href="https://beta-wallet.trezor.io/">
-                <Button>Take me to the Bitcoin wallet</Button>
-            </A>
-        </Row>
-    </Wrapper>
+    <Content>
+        <Wrapper>
+            <Row>
+                <H1>Your device is in not initialized</H1>
+                <StyledParagraph>Please use Bitcoin wallet interface to start initialization process</StyledParagraph>
+                <A href="https://beta-wallet.trezor.io/">
+                    <Button>Take me to the Bitcoin wallet</Button>
+                </A>
+            </Row>
+        </Wrapper>
+    </Content>
 );
 
 export default connect(null, null)(Initialize);
diff --git a/src/views/Wallet/views/Seedless/index.js b/src/views/Wallet/views/Seedless/index.js
index 15dd943d..c8266a72 100644
--- a/src/views/Wallet/views/Seedless/index.js
+++ b/src/views/Wallet/views/Seedless/index.js
@@ -1,9 +1,11 @@
 import styled from 'styled-components';
-import { H2 } from 'components/Heading';
+import { H1 } from 'components/Heading';
 import Paragraph from 'components/Paragraph';
+import Content from 'views/Wallet/components/Content';
 import React from 'react';
 import { connect } from 'react-redux';
 
+
 const Wrapper = styled.div`
     display: flex;
     flex-direction: column;
@@ -17,18 +19,19 @@ const Row = styled.div`
 `;
 
 const StyledParagraph = styled(Paragraph)`
-    margin: 10px 50px;
-    display: block;
+    padding: 0 0 15px 0;
     text-align: center;
 `;
 
 const Seedless = () => (
-    <Wrapper>
-        <Row>
-            <H2>Device is in seedless mode</H2>
-            <StyledParagraph>It&apos;s not suitable to use this service.</StyledParagraph>
-        </Row>
-    </Wrapper>
+    <Content>
+        <Wrapper>
+            <Row>
+                <H1>Device is in seedless mode</H1>
+                <StyledParagraph>It&apos;s not suitable to use this service.</StyledParagraph>
+            </Row>
+        </Wrapper>
+    </Content>
 );
 
 export default connect(null, null)(Seedless);
diff --git a/src/views/Wallet/views/WalletSettings/index.js b/src/views/Wallet/views/WalletSettings/index.js
index c584f958..43c2bd12 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';
@@ -32,7 +32,7 @@ const WalletSettings = () => (
                     color={colors.WARNING_PRIMARY}
                     icon={icons.WARNING}
                 />
-                <H2>Wallet settings is under construction</H2>
+                <H1>Wallet settings is under construction</H1>
                 <Link to="/">
                     <Button>Take me back</Button>
                 </Link>

From 0be0c918debb32eb11d2b4addf55213d9bb9eb14 Mon Sep 17 00:00:00 2001
From: slowbackspace <slowbackspace@gmail.com>
Date: Mon, 7 Jan 2019 13:54:33 +0100
Subject: [PATCH 2/4] unify paddings in wallet views

---
 .../components/FirmwareUnsupported/index.js   | 24 ++++++++-----------
 src/views/Wallet/views/Bootloader/index.js    |  3 ++-
 src/views/Wallet/views/Dashboard/index.js     |  2 +-
 .../Wallet/views/DeviceSettings/index.js      |  2 +-
 .../Wallet/views/FirmwareUpdate/index.js      |  2 +-
 src/views/Wallet/views/Initialize/index.js    |  2 +-
 src/views/Wallet/views/Seedless/index.js      |  2 +-
 .../Wallet/views/WalletSettings/index.js      |  2 +-
 8 files changed, 18 insertions(+), 21 deletions(-)

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) => (
     <Wrapper>
         <Row>
             {props.networkShortcut && <CoinLogoWrapper><StyledCoinLogo standalone network={props.networkShortcut} /></CoinLogoWrapper>}
-            <H2>{props.title}</H2>
+            <H1>{props.title}</H1>
             <Message>{props.message}</Message>
-            <StyledLink href={getInfoUrl(props.networkShortcut)}>
+            <Link href={getInfoUrl(props.networkShortcut)}>
                 <Button>Find out more info</Button>
-            </StyledLink>
+            </Link>
         </Row>
     </Wrapper>
 );
diff --git a/src/views/Wallet/views/Bootloader/index.js b/src/views/Wallet/views/Bootloader/index.js
index 273c0211..d82a7a2a 100644
--- a/src/views/Wallet/views/Bootloader/index.js
+++ b/src/views/Wallet/views/Bootloader/index.js
@@ -7,13 +7,14 @@ 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 StyledP = styled(P)`
diff --git a/src/views/Wallet/views/Dashboard/index.js b/src/views/Wallet/views/Dashboard/index.js
index 636e1b3a..84c7a462 100644
--- a/src/views/Wallet/views/Dashboard/index.js
+++ b/src/views/Wallet/views/Dashboard/index.js
@@ -15,7 +15,7 @@ const Wrapper = styled.div`
 const Row = styled.div`
     flex: 1;
     display: flex;
-    padding: 100px 48px;
+    padding: 50px 0;
     
     flex-direction: column;
     align-items: center;
diff --git a/src/views/Wallet/views/DeviceSettings/index.js b/src/views/Wallet/views/DeviceSettings/index.js
index 4899d548..4dbc1546 100644
--- a/src/views/Wallet/views/DeviceSettings/index.js
+++ b/src/views/Wallet/views/DeviceSettings/index.js
@@ -20,7 +20,7 @@ const Row = styled.div`
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 100px 48px;
+    padding: 50px 0;
 `;
 
 const StyledP = styled(P)`
diff --git a/src/views/Wallet/views/FirmwareUpdate/index.js b/src/views/Wallet/views/FirmwareUpdate/index.js
index 9cfa2ab1..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)`
diff --git a/src/views/Wallet/views/Initialize/index.js b/src/views/Wallet/views/Initialize/index.js
index 8a9ecace..a537b57a 100644
--- a/src/views/Wallet/views/Initialize/index.js
+++ b/src/views/Wallet/views/Initialize/index.js
@@ -15,7 +15,7 @@ const Row = styled.div`
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 100px 48px;
+    padding: 50px 0;
 `;
 
 const A = styled.a``;
diff --git a/src/views/Wallet/views/Seedless/index.js b/src/views/Wallet/views/Seedless/index.js
index c8266a72..db253641 100644
--- a/src/views/Wallet/views/Seedless/index.js
+++ b/src/views/Wallet/views/Seedless/index.js
@@ -15,7 +15,7 @@ const Row = styled.div`
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 100px 48px;
+    padding: 50px 0;
 `;
 
 const StyledParagraph = styled(Paragraph)`
diff --git a/src/views/Wallet/views/WalletSettings/index.js b/src/views/Wallet/views/WalletSettings/index.js
index 43c2bd12..5f2b3c66 100644
--- a/src/views/Wallet/views/WalletSettings/index.js
+++ b/src/views/Wallet/views/WalletSettings/index.js
@@ -20,7 +20,7 @@ const Row = styled.div`
     display: flex;
     flex-direction: column;
     align-items: center;
-    padding: 100px 48px;
+    padding: 50px 0;
 `;
 
 const WalletSettings = () => (

From 313b40c546e1622761c757ec5b2f4a30ca86df27 Mon Sep 17 00:00:00 2001
From: slowbackspace <slowbackspace@gmail.com>
Date: Mon, 7 Jan 2019 14:03:44 +0100
Subject: [PATCH 3/4] revert wrapping with Content component

---
 src/views/Wallet/views/Initialize/index.js | 22 ++++++++++------------
 src/views/Wallet/views/Seedless/index.js   | 16 +++++++---------
 2 files changed, 17 insertions(+), 21 deletions(-)

diff --git a/src/views/Wallet/views/Initialize/index.js b/src/views/Wallet/views/Initialize/index.js
index a537b57a..34843190 100644
--- a/src/views/Wallet/views/Initialize/index.js
+++ b/src/views/Wallet/views/Initialize/index.js
@@ -2,13 +2,13 @@ import styled from 'styled-components';
 import { H1 } from 'components/Heading';
 import Button from 'components/Button';
 import Paragraph from 'components/Paragraph';
-import Content from 'views/Wallet/components/Content';
 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`
@@ -26,17 +26,15 @@ const StyledParagraph = styled(Paragraph)`
 `;
 
 const Initialize = () => (
-    <Content>
-        <Wrapper>
-            <Row>
-                <H1>Your device is in not initialized</H1>
-                <StyledParagraph>Please use Bitcoin wallet interface to start initialization process</StyledParagraph>
-                <A href="https://beta-wallet.trezor.io/">
-                    <Button>Take me to the Bitcoin wallet</Button>
-                </A>
-            </Row>
-        </Wrapper>
-    </Content>
+    <Wrapper>
+        <Row>
+            <H1>Your device is in not initialized</H1>
+            <StyledParagraph>Please use Bitcoin wallet interface to start initialization process</StyledParagraph>
+            <A href="https://beta-wallet.trezor.io/">
+                <Button>Take me to the Bitcoin wallet</Button>
+            </A>
+        </Row>
+    </Wrapper>
 );
 
 export default connect(null, null)(Initialize);
diff --git a/src/views/Wallet/views/Seedless/index.js b/src/views/Wallet/views/Seedless/index.js
index db253641..bde5f915 100644
--- a/src/views/Wallet/views/Seedless/index.js
+++ b/src/views/Wallet/views/Seedless/index.js
@@ -1,7 +1,6 @@
 import styled from 'styled-components';
 import { H1 } from 'components/Heading';
 import Paragraph from 'components/Paragraph';
-import Content from 'views/Wallet/components/Content';
 import React from 'react';
 import { connect } from 'react-redux';
 
@@ -9,6 +8,7 @@ import { connect } from 'react-redux';
 const Wrapper = styled.div`
     display: flex;
     flex-direction: column;
+    padding: 40px 35px 40px 35px;
 `;
 
 const Row = styled.div`
@@ -24,14 +24,12 @@ const StyledParagraph = styled(Paragraph)`
 `;
 
 const Seedless = () => (
-    <Content>
-        <Wrapper>
-            <Row>
-                <H1>Device is in seedless mode</H1>
-                <StyledParagraph>It&apos;s not suitable to use this service.</StyledParagraph>
-            </Row>
-        </Wrapper>
-    </Content>
+    <Wrapper>
+        <Row>
+            <H1>Device is in seedless mode</H1>
+            <StyledParagraph>It&apos;s not suitable to use this service.</StyledParagraph>
+        </Row>
+    </Wrapper>
 );
 
 export default connect(null, null)(Seedless);

From 035a45df19696e515847026385a153c8f27eb502 Mon Sep 17 00:00:00 2001
From: slowbackspace <slowbackspace@gmail.com>
Date: Mon, 7 Jan 2019 14:24:36 +0100
Subject: [PATCH 4/4] fix typo

---
 src/views/Wallet/views/Initialize/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/Wallet/views/Initialize/index.js b/src/views/Wallet/views/Initialize/index.js
index 34843190..39055a9f 100644
--- a/src/views/Wallet/views/Initialize/index.js
+++ b/src/views/Wallet/views/Initialize/index.js
@@ -28,7 +28,7 @@ const StyledParagraph = styled(Paragraph)`
 const Initialize = () => (
     <Wrapper>
         <Row>
-            <H1>Your device is in not initialized</H1>
+            <H1>Your device is not initialized</H1>
             <StyledParagraph>Please use Bitcoin wallet interface to start initialization process</StyledParagraph>
             <A href="https://beta-wallet.trezor.io/">
                 <Button>Take me to the Bitcoin wallet</Button>