Styled other wallet views

src/views/Landing/index.js

@@ -102,7 +102,7 @@ export default (props: Props) => {
 
                     <LandingContent>
 
-                        {shouldShowUnsupportedBrowser && <BrowserNotSupported />}
+                        {true && <BrowserNotSupported />}
                         {shouldShowInstallBridge && <InstallBridge browserState={browserState} />}
 
                         {(shouldShowConnectDevice || shouldShowDisconnectDevice) && (

src/views/Wallet/index.js

@@ -77,7 +77,7 @@ const Body = styled.div`
     display: flex;
     flex: 1;
     flex-direction: column;
-    padding: 40px 35px 20px 35px;
+    padding: 40px 35px 40px 35px;
 `;
 
 const Wallet = (props: WalletContainerProps) => (

src/views/Wallet/views/Bootloader/index.js

@@ -12,8 +12,6 @@ const Wrapper = styled.div`
 const Row = styled.div`
     flex: 1;
     display: flex;
-    padding: 0px 48px;
-    
     flex-direction: column;
     justify-content: center;
     align-items: center;

src/views/Wallet/views/Dashboard/index.js

@@ -11,10 +11,6 @@ const Wrapper = styled.div`
     flex: 1;
 `;
 
-const StyledH2 = styled(H2)`
-    padding: 24px 48px;
-`;
-
 const Row = styled.div`
     flex: 1;
     display: flex;
@@ -32,7 +28,7 @@ const P = styled.p`
 
 const Dashboard = () => (
     <Wrapper>
-        <StyledH2>Dashboard</StyledH2>
+        <H2>Dashboard</H2>
         <Row>
             <H2>Please select your coin</H2>
             <P>You will gain access to recieving &amp; sending selected coin</P>

src/views/Wallet/views/DeviceSettings/index.js

@@ -4,19 +4,16 @@ import { H2 } from 'components/Heading';
 import Icon from 'components/Icon';
 import colors from 'config/colors';
 import Button from 'components/Button';
+import P from 'components/Paragraph';
+import Link from 'components/Link';
 import ICONS from 'config/icons';
 import { connect } from 'react-redux';
 
 const Section = styled.section`
-`;
-
-const P = styled.p`
-    padding: 12px 0px 24px 0px;
-    text-align: center;
-`;
-
-const StyledH2 = styled(H2)`
-    padding-top: 15px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
 `;
 
 const Row = styled.div`
@@ -25,8 +22,11 @@ const Row = styled.div`
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    padding: 0px 48px;
-    padding-bottom: 98px;
+`;
+
+const StyledP = styled(P)`
+    padding: 10px 0 15px 0;
+    text-align: center;
 `;
 
 const DeviceSettings = () => (
@@ -37,11 +37,11 @@ const DeviceSettings = () => (
                 color={colors.WARNING_PRIMARY}
                 icon={ICONS.WARNING}
             />
-            <StyledH2>Device settings is under construction</StyledH2>
-            <P>Please use Bitcoin wallet interface to change your device settings</P>
-            <a href="https://wallet.trezor.io/">
+            <H2>Device settings is under construction</H2>
+            <StyledP isSmaller>Please use Bitcoin wallet interface to change your device settings</StyledP>
+            <Link href="https://wallet.trezor.io/">
                 <Button>Take me to the Bitcoin wallet</Button>
-            </a>
+            </Link>
         </Row>
     </Section>
 );