Added support for icons and styled components

.babelrc

@@ -17,14 +17,7 @@
         }],
         ["babel-plugin-root-import", {
             "rootPathSuffix": "./src",
-            "rootPathPrefix": "~",
+            "rootPathPrefix": "~"
-            "alias": {
-                "components": "./src/js/components",
-                "config": "./src/js/config",
-                "reducers": "./src/js/reducers",
-                "actions": "./src/js/actions",
-                "services": "./src/js/services"
-            }
         }],
         "babel-plugin-styled-components"
     ],

.eslintrc

@@ -10,6 +10,7 @@
         "jest": true
     },
     "rules": {
+        "react/destructuring-assignment": 0,
         "react/jsx-one-expression-per-line": 0,
         "react/jsx-indent": [2, 4],
         "react/jsx-indent-props": [2, 4],

src/js/components/common/Header.js

@@ -16,6 +16,8 @@ const Wrapper = styled.header`
     }
 `;
 
+const LinkWrapper = styled.div``;
+
 const LayoutWrapper = styled.div`
     width: 100%;
     height: 100%;
@@ -57,12 +59,12 @@ const Header = (): React$Element<string> => (
                 <path d="M79.4,20.3c0-4.5-3.1-7.4-7.7-7.4H61.2v22.3H67v-7.5h2.2l4.1,7.5H80l-4.9-8.3C77.2,26.1,79.4,24,79.4,20.3z M71,22.5h-4V18 h4c1.5,0,2.5,0.9,2.5,2.2C73.5,21.6,72.5,22.5,71,22.5z" />
                 <polygon points="40.5,12.8 58.6,12.8 58.6,18.1 52.4,18.1 52.4,35.2 46.6,35.2 46.6,18.1 40.5,18.1 " />
             </svg>
-            <div>
+            <LinkWrapper>
                 <A href="https://trezor.io/" target="_blank" rel="noreferrer noopener">TREZOR</A>
                 <A href="https://doc.satoshilabs.com/trezor-user/" target="_blank" rel="noreferrer noopener">Docs</A>
                 <A href="https://blog.trezor.io/" target="_blank" rel="noreferrer noopener">Blog</A>
                 <A href="https://trezor.io/support/" target="_blank" rel="noreferrer noopener">Support</A>
-            </div>
+            </LinkWrapper>
         </LayoutWrapper>
     </Wrapper>
 );

src/js/components/common/Icon.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Icon = (props) => {
+    const styles = {
+        svg: {
+            display: 'inline-block',
+            verticalAlign: 'middle',
+        },
+        path: {
+            fill: props.color,
+        },
+    };
+
+    return (
+        <svg
+            style={styles.svg}
+            width={`${props.size}`}
+            height={`${props.size}`}
+            viewBox="0 0 16 16"
+        >
+            <path
+                style={styles.path}
+                d={props.icon}
+
+            />
+        </svg>
+    );
+};
+
+Icon.propTypes = {
+    icon: PropTypes.string.isRequired,
+    size: PropTypes.number,
+    color: PropTypes.string,
+};
+
+Icon.defaultProps = {
+    size: 30,
+    color: 'black',
+};
+
+export default Icon;

src/js/components/common/LoaderCircle.js

@@ -1,6 +1,5 @@
 /* @flow */
 
-
 import React from 'react';
 
 export default (props: { size: string, label?: string, className?: string }): React$Element<string> => {
@@ -11,7 +10,7 @@ export default (props: { size: string, label?: string, className?: string }): Re
     };
 
     return (
-        <div className={ className } style={style}>
+        <div className={className} style={style}>
             <p>{ props.label }</p>
             <svg className="circular" viewBox="25 25 50 50">
                 <circle className="route" cx="50" cy="50" r="20" fill="none" stroke="" strokeWidth="1" strokeMiterlimit="10" />

src/js/components/landing/InstallBridge.js

@@ -1,6 +1,6 @@
 /* @flow */
 
-
+import installers from '~/js/constants/bridge';
 import React, { Component } from 'react';
 import Select from 'react-select';
 import Preloader from './Preloader';
@@ -17,15 +17,6 @@ type InstallTarget = {
     label: string;
 }
 
-const installers: Array<InstallTarget> = [
-    { id: 'Windows', value: 'trezor-bridge-2.0.11-win32-install.exe', label: 'Windows' },
-    { id: 'macOS', value: 'trezor-bridge-2.0.11.pkg', label: 'Mac OS X' },
-    { id: 'Linux', value: 'trezor-bridge_2.0.11_amd64.deb', label: 'Linux 64-bit (deb)' },
-    { id: 'Linux-rpm', value: 'trezor-bridge_2.0.11_amd64.rpm', label: 'Linux 64-bit (rpm)' },
-    { id: '01', value: 'trezor-bridge_2.0.11_amd32.deb', label: 'Linux 32-bit (deb)' },
-    { id: '02', value: 'trezor-bridge_2.0.11_amd32.rpm', label: 'Linux 32-bit (rpm)' },
-];
-
 // import type { Props } from './index';
 
 type Props = {

src/js/components/wallet/pages/DeviceSettings.js

@@ -1,15 +1,45 @@
 import React from 'react';
+import styled from 'styled-components';
 import { H2 } from '~/js/components/common/Heading';
+import Icon from '~/js/components/common/Icon';
+import colors from '~/js/config/colors';
+import ICONS from '~/js/constants/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;
+`;
+
+const Row = styled.div`
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: 0px 48px;
+    padding-bottom: 98px;
+`;
+
 export const DeviceSettings = () => (
-    <section className="device-settings">
+    <Section>
-        <div className="row">
+        <Row>
-            <H2>Device settings is under construction</H2>
+            <Icon
-            <p>Please use Bitcoin wallet interface to change your device settings</p>
+                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 className="button" href="https://wallet.trezor.io/">Take me to the Bitcoin wallet</a>
-        </div>
+        </Row>
-    </section>
+    </Section>
 );
 
 export default connect(null, null)(DeviceSettings);

src/js/constants/bridge.js

@@ -0,0 +1,8 @@
+export default [
+    { id: 'Windows', value: 'trezor-bridge-2.0.11-win32-install.exe', label: 'Windows' },
+    { id: 'macOS', value: 'trezor-bridge-2.0.11.pkg', label: 'Mac OS X' },
+    { id: 'Linux', value: 'trezor-bridge_2.0.11_amd64.deb', label: 'Linux 64-bit (deb)' },
+    { id: 'Linux-rpm', value: 'trezor-bridge_2.0.11_amd64.rpm', label: 'Linux 64-bit (rpm)' },
+    { id: '01', value: 'trezor-bridge_2.0.11_amd32.deb', label: 'Linux 32-bit (deb)' },
+    { id: '02', value: 'trezor-bridge_2.0.11_amd32.rpm', label: 'Linux 32-bit (rpm)' },
+];

src/js/constants/icons.js

@@ -0,0 +1,3 @@
+export default {
+    WARNING: 'M8.893 1.5c-.183-.31-.52-.5-.887-.5s-.703.19-.886.5L.138 13.499a.98.98 0 0 0 0 1.001c.193.31.53.501.886.501h13.964c.367 0 .704-.19.877-.5a1.03 1.03 0 0 0 .01-1.002L8.893 1.5zm.133 11.497H6.987v-2.003h2.039v2.003zm0-3.004H6.987V5.987h2.039v4.006z',
+};

src/js/utils/networkUtils.js

@@ -10,9 +10,9 @@ export const httpRequest = async (url: string, type: string = 'text'): any => {
             const txt: string = await response.text();
             return JSON.parse(txt);
         } if (type === 'binary') {
-            return await response.arrayBuffer();
+            await response.arrayBuffer();
         }
-        return await response.text();
+        await response.text();
     }
     throw new Error(`${url} ${response.statusText}`);
 

src/styles/content.less

@@ -59,12 +59,6 @@ article {
         display: flex;
         flex-direction: column;
         background: @color_white;
-
-        h2 {
-            font-size: 16px;
-            font-weight: 600;
-            padding: 24px 48px;
-        }
     
         p {
             padding: 0px 48px;

src/styles/deviceSettings.less

@@ -1,32 +0,0 @@
-.device-settings {
-    .row {
-        flex: 1;
-        
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        padding: 0px 48px;
-        padding-bottom: 98px;
-
-        h2 {
-            padding: 0;
-            position: relative;
-            &:before {
-                .icomoon-warning;
-                position: absolute;
-                color: @color_warning_primary;
-                font-size: 48px;
-                top: -48px;
-                left: 0;
-                right: 0;
-                text-align: center;
-            }
-        }
-
-        p {
-            padding: 12px 0px 24px 0px;
-            text-align: center;
-        }
-    }
-}

src/styles/index.less

@@ -14,7 +14,6 @@
 @import './send.less';
 @import './receive.less';
 @import './summary.less';
-@import './deviceSettings.less';
 
 @import './landingPage.less';
 

src/styles/landingPage.less

@@ -169,11 +169,6 @@
 
         main {
 
-            h2.claim {
-                font-size: 36px;
-                padding-bottom: 24px;
-            }
-
             .row {
                 display: flex;
                 flex-direction: row;