From d54a6ae6586862444a1a35f9fa7050fb5c2e9e2a Mon Sep 17 00:00:00 2001
From: Vladimir Volek <vladimir.volek@satoshilabs.com>
Date: Wed, 5 Sep 2018 16:36:48 +0200
Subject: [PATCH] Adjust notification styles

---
 .babelrc                             |  5 ++++-
 package.json                         |  1 +
 src/components/Notification/index.js | 15 +++++++++++----
 src/support/BaseStyles.js            |  1 -
 yarn.lock                            |  4 ++++
 5 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/.babelrc b/.babelrc
index f0a0c0bc..ca61982f 100644
--- a/.babelrc
+++ b/.babelrc
@@ -16,7 +16,10 @@
             "regenerator": true
         }],
         ["module-resolver", {
-            "root": ["./src"]
+            "root": ["./src"],
+            "alias": {
+                "public": ["./public"]
+            }
         }],
         "babel-plugin-styled-components"
     ],
diff --git a/package.json b/package.json
index ac28cb48..8a93cf8a 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,7 @@
         "redux-raven-middleware": "^1.2.0",
         "redux-thunk": "^2.2.0",
         "styled-components": "^3.3.3",
+        "styled-media-query": "^2.0.2",
         "styled-normalize": "^8.0.0",
         "trezor-connect": "5.0.30",
         "web3": "^0.19.0",
diff --git a/src/components/Notification/index.js b/src/components/Notification/index.js
index 82dec8b1..305beb5d 100644
--- a/src/components/Notification/index.js
+++ b/src/components/Notification/index.js
@@ -45,7 +45,6 @@ const Wrapper = styled.div`
 const Body = styled.div`
     display: flex;
     margin-right: 40px;
-    flex: 1;
 `;
 
 const Title = styled.div`
@@ -53,8 +52,6 @@ const Title = styled.div`
     font-weight: ${FONT_WEIGHT.BIGGER};
 `;
 
-const ActionContent = styled.div``;
-
 const CloseClick = styled.div`
     position: absolute;
     right: 0;
@@ -81,7 +78,17 @@ const Texts = styled.div`
     flex-direction: column;
 `;
 
-const AdditionalContent = styled.div``;
+const AdditionalContent = styled.div`
+    flex: 1;
+    display: flex;
+    justify-content: flex-end;
+    align-items: flex-end;
+`;
+
+const ActionContent = styled.div`
+    justify-content: right;
+    align-items: flex-end;
+`;
 
 export const Notification = (props: NProps): React$Element<string> => {
     const close: Function = typeof props.close === 'function' ? props.close : () => {}; // TODO: add default close action
diff --git a/src/support/BaseStyles.js b/src/support/BaseStyles.js
index 610c1cba..bd8fd525 100644
--- a/src/support/BaseStyles.js
+++ b/src/support/BaseStyles.js
@@ -1,5 +1,4 @@
 import { injectGlobal } from 'styled-components';
-
 import normalize from 'styled-normalize';
 
 const baseStyles = () => injectGlobal`
diff --git a/yarn.lock b/yarn.lock
index 5ff9fa65..6862c6ee 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9321,6 +9321,10 @@ styled-components@^3.3.3:
     stylis-rule-sheet "^0.0.10"
     supports-color "^3.2.3"
 
+styled-media-query@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/styled-media-query/-/styled-media-query-2.0.2.tgz#65347d5367f69458f86dc7dd723f42faae304ad1"
+
 styled-normalize@^8.0.0:
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/styled-normalize/-/styled-normalize-8.0.0.tgz#54881c9389540bf9fb2a3d34dca2e2d4d68601f2"