Styled MenuItems component

src/js/config/icons.js

@@ -1,4 +1,13 @@
 export default {
+    REFRESH: [
+      'M347.392 473.312c17.28-82.24 90.4-142.336 173.92-142.336 31.648 0 61.92 8.704 88.576 24.416 6.656 3.936 12.8 8.672 18.944 13.504l-68.832 68.736 192 33.056-32-198.272-38.4 42.016c-5.92-5.024-12.064-9.728-18.336-14.144-40.928-28.672-89.92-44.288-141.92-44.288-121.664 0-225.12 89.312-245.984 210.368l-3.36 20.896h72.672l2.72-13.952zM676.608 550.688c-17.28 82.24-90.4 142.336-173.92 142.336-31.648 0-61.92-8.704-88.576-24.416-6.624-3.936-12.8-8.672-18.944-13.504l68.832-68.736-192-33.056 32 198.272 38.4-42.016c5.92 5.024 12.032 9.696 18.336 14.144 40.928 28.672 89.92 44.288 141.952 44.288 121.664 0 225.12-89.312 245.984-210.368l3.328-20.864h-72.672l-2.72 13.92z',
+    ],
+    T1: [
+        'M603.2 265.6h-6.4c-25.494-5.341-54.79-8.398-84.8-8.398s-59.305 3.058-87.592 8.879l2.792-0.48h-6.72c-30.053 5.643-52.489 31.68-52.489 62.956 0 0.367 0.003 0.733 0.009 1.099l-0.001-0.055v234.88c0.075 40.921 11.238 79.22 30.643 112.071l-0.563-1.031 35.2 60.48c11.655 19.297 32.515 32.001 56.342 32.001 0.105 0 0.209 0 0.314-0.001h44.144c0.359 0.007 0.783 0.011 1.208 0.011 23.569 0 44.162-12.74 55.269-31.709l0.164-0.302 36.16-64c18.232-31.447 29.027-69.173 29.12-109.413v-232.987c0.005-0.293 0.008-0.639 0.008-0.986 0-31.391-22.599-57.503-52.416-62.954l-0.392-0.059zM629.76 563.2c-0.193 35.364-9.792 68.446-26.418 96.923l0.498-0.923-35.84 64c-6.868 11.865-19.463 19.742-33.906 19.84h-44.174c-0.073 0-0.159 0.001-0.246 0.001-14.427 0-27.041-7.762-33.894-19.338l-0.1-0.183-34.88-59.84c-16.656-28.155-26.515-62.042-26.56-98.227v-235.853c0.133-19.025 13.742-34.833 31.751-38.359l0.249-0.041h6.72c24.050-5.126 51.682-8.062 80-8.062s55.949 2.936 82.608 8.519l-2.608-0.457h6.72c18.258 3.568 31.867 19.375 32 38.386v0.014zM422.4 353.92h179.2c3.535 0 6.4 2.865 6.4 6.4v99.2c0 3.535-2.865 6.4-6.4 6.4h-179.2c-3.535 0-6.4-2.865-6.4-6.4v-99.2c0-3.535 2.865-6.4 6.4-6.4z',
+    ],
+    COG: [
+        'M739.552 462.144h-71.328c-4.256-13.664-10.208-26.56-17.472-38.56l47.264-47.424c11.2-11.008 11.2-29.056 0-40.192l-20.064-20.032c-11.136-11.104-29.152-11.040-40.192 0l-48.128 48.032c-12.992-7.392-27.072-13.152-42.080-16.992v-62.496c0-15.68-12.672-28.48-28.448-28.48h-28.448c-15.68 0-28.416 12.8-28.416 28.48v62.464c-16.352 4.128-31.68 10.656-45.728 19.2l-40.288-40.224c-11.072-11.040-29.184-11.104-40.288 0l-20.096 20.096c-11.104 11.072-10.976 29.152 0.064 40.288l40.992 40.992c-8.672 15.136-15.168 31.648-18.88 49.152h-53.504c-15.776 0-28.544 12.736-28.544 28.48v28.416c0 15.68 12.768 28.416 28.544 28.416h57.152c5.184 17.152 12.992 32.928 23.008 47.328l-38.656 38.656c-11.136 11.136-11.136 29.216-0.064 40.288l20.064 20.096c11.2 11.040 29.248 11.040 40.32-0.032l43.232-43.2c14.528 7.232 30.336 12.48 46.944 15.2v59.488c0 15.68 12.736 28.448 28.448 28.48h28.448c15.68-0.032 28.448-12.8 28.448-28.48v-66.816c14.336-5.088 27.904-11.872 40.224-20.544l45.76 45.888c11.104 11.072 29.12 11.072 40.224 0l20.096-20.128c11.168-11.072 11.168-29.056-0.096-40.288l-50.144-50.24c6.144-12.512 10.944-25.792 13.92-39.904h67.776c15.744 0 28.448-12.672 28.48-28.448v-28.448c-0.096-15.68-12.8-28.512-28.544-28.512zM504.928 583.072c-39.264 0-71.072-31.776-71.072-71.104 0-39.264 31.808-71.040 71.072-71.040 39.296 0 71.136 31.776 71.136 71.040 0 39.328-31.84 71.104-71.136 71.104z',
+    ],
     EJECT: [
         'M276 768h471.968c11.072 0 20.032-9.76 20.032-21.824v-75.968c0-12.064-8.96-21.824-20-21.824h-472c-11.040 0-20 9.76-20 21.824v75.968c0 12.064 8.96 21.824 20 21.824zM503.552 260.192l-231.232 288.128c-6.368 7.904-1.184 20.32 8.448 20.32h462.496c9.664 0 14.816-12.384 8.448-20.32l-231.232-288.128c-4.512-5.6-12.448-5.6-16.928 0z',
     ],

src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js

@@ -3,26 +3,73 @@ import styled from 'styled-components';
 import Icon from 'components/Icon';
 import icons from 'config/icons';
 import colors from 'config/colors';
+import { FONT_SIZE } from 'config/variables';
 
-const Wrapper = styled.div``;
+const Wrapper = styled.div`
-const Item = styled.div``;
+    padding: 0px 24px 8px 19px;
+    border-bottom: 1px solid ${colors.DIVIDER};
+    background: ${colors.WHITE};
+`;
+
+const Item = styled.div`
+    padding: 4px 2px;
+    display: flex;
+    align-items: center;
+    font-size: ${FONT_SIZE.SMALL};
+    line-height: 24px;
+    cursor: pointer;
+    color: ${colors.TEXT_SECONDARY};    
+`;
+
+const Label = styled.div`
+    padding-left: 15px;
+`;
 
 class MenuItems extends Component {
+    onClick(action, device) {
+        if (action === 'reload') {
+            this.props.acquireDevice();
+        } else if (action === 'forget') {
+            this.props.forgetDevice(device);
+        } else if (action === 'clone') {
+            this.props.duplicateDevice(device);
+        } else if (action === 'settings') {
+            this.props.toggleDeviceDropdown(false);
+            this.props.gotoDeviceSettings(device);
+        }
+    }
+
     showClone() {
         return this.props.selectedDevice.features.passphrase_protection && this.props.selectedDevice.connected && this.props.selectedDevice.available;
     }
 
     showRenewSession() {
-        return this.props.selectedDevice.status;
+        return this.props.selectedDevice.status !== 'available';
     }
 
     render() {
         return (
             <Wrapper>
-                <Item>Device settings</Item>
+                <Item>
-                <Item>Forget</Item>
+                    <Icon icon={icons.COG} size={25} color={colors.TEXT_SECONDARY} />
-                {this.showClone() && <Item>Create hidden wallet</Item>}
+                    <Label>Device settings</Label>
-                {this.showRenewSession() && <Item>Renew session</Item>}
+                </Item>
+                <Item>
+                    <Icon icon={icons.EJECT} size={25} color={colors.TEXT_SECONDARY} />
+                    <Label>Forget</Label>
+                </Item>
+                {this.showClone() && (
+                    <Item>
+                        <Icon icon={icons.T1} size={25} color={colors.TEXT_SECONDARY} />
+                        <Label>Create hidden wallet</Label>
+                    </Item>
+                )}
+                {this.showRenewSession() && (
+                    <Item>
+                        <Icon icon={icons.T1} size={25} color={colors.TEXT_SECONDARY} />
+                        <Label>Renew session</Label>
+                    </Item>
+                )}
             </Wrapper>
         );
     }

src/js/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js

@@ -6,6 +6,7 @@ import type { TrezorDevice } from 'flowtype';
 import DeviceHeader from 'components/DeviceHeader';
 import Button from 'components/Button';
 import { isWebUSB } from 'utils/device';
+import MenuItems from './components/MenuItems';
 import DeviceList from './components/DeviceList';
 
 import type { Props } from '../common';
@@ -13,6 +14,7 @@ import type { Props } from '../common';
 import AsideDivider from '../Divider';
 
 const Wrapper = styled.div``;
+const ButtonWrapper = styled.div``;
 
 export const DeviceSelect = (props: Props) => {
     const handleOpen = () => {
@@ -84,25 +86,12 @@ export class DeviceDropdown extends Component<Props> {
         // window.removeEventListener('blur', this.blurHandler, false);
     }
 
-    onDeviceMenuClick(item: DeviceMenuItem, device: TrezorDevice): void {
-        if (item.type === 'reload') {
-            this.props.acquireDevice();
-        } else if (item.type === 'forget') {
-            this.props.forgetDevice(device);
-        } else if (item.type === 'clone') {
-            this.props.duplicateDevice(device);
-        } else if (item.type === 'settings') {
-            this.props.toggleDeviceDropdown(false);
-            this.props.gotoDeviceSettings(device);
-        }
-    }
-
     showDivider() {
         return this.props.devices.length > 1;
     }
 
-    getMenu() {
+    showMenuItems() {
-
+        return this.props.wallet.selectedDevice;
     }
 
     render() {
@@ -139,20 +128,23 @@ export class DeviceDropdown extends Component<Props> {
 
         return (
             <Wrapper>
-                {currentDeviceMenu}
+                {/* {currentDeviceMenu} */}
+                {this.showMenuItems() && <MenuItems selectedDevice={selectedDevice} />}
                 {this.showDivider() && <AsideDivider textLeft="Other devices" />}
                 <DeviceList
                     devices={devices}
                     selectedDevice={selectedDevice}
                     onSelectDevice={onSelectDevice}
                 />
-                {isWebUSB(transport) && (
+                <ButtonWrapper>
-                    <Button
+                    {isWebUSB(transport) && (
-                        className="trezor-webusb-button"
+                        <Button
-                        text="Check for devices"
+                            className="trezor-webusb-button"
-                        isWebUsb
+                            text="Check for devices"
-                    />
+                            isWebUsb
-                )}
+                        />
+                    )}
+                </ButtonWrapper>
             </Wrapper>
         );
     }