new device menu + device settings

src/js/components/wallet/DeviceSettings.js

@@ -7,8 +7,13 @@ import { connect } from 'react-redux';
 
 export const DeviceSettings = () => {
     return (
-        <section className="settings">
+        <section className="device-settings">
-            Device settings
+            <h2>Device settings</h2>
+            <div className="row">
+                <h2>Device settings is under construction</h2>
+                <p>Please use old wallet to edit your device settings</p>
+                <a className="button" href="https://wallet.trezor.io/">Take me to the old wallet</a>
+            </div>
         </section>
     );
 }

src/js/components/wallet/account/DeviceSettingsTabs.js

@@ -0,0 +1,31 @@
+/* @flow */
+'use strict';
+
+import React, { Component } from 'react';
+import { NavLink } from 'react-router-dom';
+
+
+type Props = {
+    pathname: string;
+}
+type State = {
+    style: {
+        width: number,
+        left: number
+    };
+}
+
+const AccountTabs = (props: any): any => {
+
+    const urlParams = props.match.params;
+    //const urlParams = props.match ? props.match.params : { address: '0' };
+    const basePath = `/device/${urlParams.device}/network/${urlParams.network}/address/${urlParams.address}`;
+
+    return (
+        <div className="account-tabs">
+            <a>Device settings</a>
+        </div>
+    );
+}
+
+export default AccountTabs;

src/js/components/wallet/aside/DeviceSelection.js

@@ -245,7 +245,7 @@ export class DeviceDropdown extends Component<Props> {
             );
         }
 
-        const deviceList: Array<any> = devices.map((dev, index) => {
+        const deviceList = devices.map((dev, index) => {
             if (dev === selected) return null;
 
             let deviceStatus: string = "Connected";
@@ -272,11 +272,14 @@ export class DeviceDropdown extends Component<Props> {
             );
         });
 
+
+
         return (
             <section>
                 { currentDeviceMenu }
-                { webUsbButton }
+                { deviceList.length > 1 ? <div className="device-divider">Other devices</div> : null }
                 { deviceList }
+                { webUsbButton }
             </section>
         );
     }

src/js/components/wallet/index.js

@@ -9,6 +9,7 @@ import { Route, withRouter } from 'react-router-dom';
 import Header from '../common/Header';
 import Footer from '../common/Footer';
 import AccountTabs from './account/AccountTabs';
+import DeviceSettingsTabs from './account/DeviceSettingsTabs';
 import AsideContainer from './aside';
 import ModalContainer from '../modal';
 import Notifications from '../common/Notification';
@@ -25,6 +26,7 @@ const Content = (props: Props) => {
         <article>
             <nav>
                 <Route path="/device/:device/network/:network/address/:address" component={ AccountTabs } />
+                <Route path="/device/:device/device-settings" component={ DeviceSettingsTabs } />
             </nav>
             <Notifications />
             <Log />

src/styles/aside.less

@@ -57,7 +57,6 @@ aside {
         }
     }
 
-    
 
     .sticky-container {
         position: relative;
@@ -92,11 +91,11 @@ aside {
     }
 
     .trezor-webusb-button {
-        margin: 12px 0px 12px 80px;
+        margin: 12px 0px 12px 30px;
+        padding: 6px 24px 6px 40px;
+        width: 256px;
     }
 
-    
-
     .device-select {
         background: @color_white;
         border-bottom: 1px solid @color_divider;
@@ -123,6 +122,8 @@ aside {
         }
 
         &.opened {
+            border-bottom: 0px;
+            box-shadow: none;
             .arrow:after {
                 transform: rotate(180deg);
             }
@@ -250,11 +251,13 @@ aside {
 
     .device-menu {
         padding: 8px 0px;
-        // padding-left: 80px;
+        padding-left: 28px;
-        padding-left: 74px;
+        // padding-left: 74px;
         border-bottom: 1px solid @color_divider;
+        background: @color_white;
 
         div {
+            padding: 4px 0px;
             display: flex;
             align-items: center;
             line-height: 24px;
@@ -267,7 +270,8 @@ aside {
                 // color: @color_text_secondary;
                 position: relative;
                 font-size: 24px;
-                margin-right: 12px;
+                // margin-right: 12px;
+                margin-right: 28px;
                 .hover();
             }
 
@@ -286,7 +290,10 @@ aside {
 
             &.clone {
                 &:before {
-                    .icomoon-settings;
+                    .icomoon-T1;
+                    font-size: 32px;
+                    transform: translateX(-4px);
+                    margin-right: 20px;
                 }
             }
 
@@ -493,6 +500,16 @@ aside {
         }
     }
 
+    .device-divider {
+        font-size: 12px;
+        display: flex;
+        justify-content: space-between;
+        color: @color_text_secondary;
+        background: @color_gray_light;
+        padding: 8px 30px 8px 31px;
+        border-bottom: 1px solid @color_divider;
+    }
+
     .help {
         width: 320px;
         padding: 14px 0px;

src/styles/deviceSettings.less

@@ -0,0 +1,32 @@
+.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

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