From 73f62d82f9baaabbb6046a018f812b806bb99fe8 Mon Sep 17 00:00:00 2001
From: Vladimir Volek <vladimir.volek@satoshilabs.com>
Date: Tue, 28 Aug 2018 14:33:42 +0200
Subject: [PATCH] Notification wrapper added, indent

---
 src/components/Notification/index.js          | 18 +++++++++++++--
 src/styles/notification.less                  |  9 --------
 .../DeviceMenu/components/MenuItems/index.js  | 22 +++++++++++++++----
 3 files changed, 34 insertions(+), 15 deletions(-)

diff --git a/src/components/Notification/index.js b/src/components/Notification/index.js
index 097cee8c..46e99ccb 100644
--- a/src/components/Notification/index.js
+++ b/src/components/Notification/index.js
@@ -5,6 +5,8 @@ import React from 'react';
 import { H2 } from 'components/Heading';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
+import styled from 'styled-components';
+import colors from 'config/colors';
 
 import * as NOTIFICATION from 'actions/constants/notification';
 import * as NotificationActions from 'actions/NotificationActions';
@@ -27,6 +29,18 @@ type NProps = {
     loading?: boolean
 }
 
+const Wrapper = styled.div`
+    position: relative;
+    color: ${colors.INFO_PRIMARY};
+    background: ${colors.INFO_SECONDARY};
+    padding: 24px 48px 24px 80px;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    text-align: left;
+`;
+
 export const Notification = (props: NProps): React$Element<string> => {
     const className = `notification ${props.className}`;
     const close: Function = typeof props.close === 'function' ? props.close : () => {}; // TODO: add default close action
@@ -35,7 +49,7 @@ export const Notification = (props: NProps): React$Element<string> => {
     )) : null;
 
     return (
-        <div className={className}>
+        <Wrapper className={className}>
             { props.cancelable ? (
                 <button
                     className="notification-close transparent"
@@ -57,7 +71,7 @@ export const Notification = (props: NProps): React$Element<string> => {
                 />
             ) : null }
 
-        </div>
+        </Wrapper>
     );
 };
 
diff --git a/src/styles/notification.less b/src/styles/notification.less
index dc8aab70..30356063 100644
--- a/src/styles/notification.less
+++ b/src/styles/notification.less
@@ -1,13 +1,4 @@
 .notification {
-    position: relative;
-    color: @color_info_primary;
-    background: @color_info_secondary;
-    padding: 24px 48px 24px 80px;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: space-between;
-    text-align: left;
 
     .notification-body {
         flex: 1;
diff --git a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js
index e1c6d43d..5c0b9d15 100644
--- a/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js
+++ b/src/views/Wallet/components/LeftNavigation/components/DeviceMenu/components/MenuItems/index.js
@@ -53,21 +53,35 @@ class MenuItems extends Component {
         return (
             <Wrapper>
                 <Item onClick={() => this.onDeviceMenuClick('settings', this.props.device)}>
-                    <Icon icon={icons.COG} size={25} color={colors.TEXT_SECONDARY} />
+                    <Icon
+                        icon={icons.COG}
+                        size={25}
+                        color={colors.TEXT_SECONDARY}
+                    />
                     <Label>Device settings</Label>
                 </Item>
                 <Item onClick={() => this.onDeviceMenuClick('forget', this.props.device)}>
-                    <Icon icon={icons.EJECT} size={25} color={colors.TEXT_SECONDARY} />
+                    <Icon
+                        icon={icons.EJECT}
+                        size={25}
+                        color={colors.TEXT_SECONDARY}
+                    />
                     <Label>Forget</Label>
                 </Item>
                 {this.showClone() && (
                     <Item onClick={() => this.onDeviceMenuClick('clone', this.props.device)}>
-                        <Icon icon={icons.T1} size={25} color={colors.TEXT_SECONDARY} />
+                        <Icon
+                            icon={icons.T1}
+                            size={25}
+                            color={colors.TEXT_SECONDARY}
+                        />
                         <Label>Create hidden wallet</Label>
                     </Item>
                 )}
                 {this.showRenewSession() && (
-                    <Item onClick={() => this.onDeviceMenuClick('reload')}>
+                    <Item
+                        onClick={() => this.onDeviceMenuClick('reload')}
+                    >
                         <Icon icon={icons.T1} size={25} color={colors.TEXT_SECONDARY} />
                         <Label>Renew session</Label>
                     </Item>