Make notification responsive, flow fix

src/actions/NotificationActions.js

@@ -1,6 +1,5 @@
 /* @flow */
-
+import * as React from 'react';
-
 import * as NOTIFICATION from 'actions/constants/notification';
 
 import type {
@@ -13,7 +12,7 @@ export type NotificationAction = {
     payload: {
         +type: string,
         +title: string,
-        +message?: string,
+        +message?: React.Node | string,
         +cancelable: boolean,
         actions?: Array<CallbackAction>
     }

src/components/Notification/index.js

@@ -1,8 +1,6 @@
 /* @flow */
 
 import * as React from 'react';
-import PropTypes from 'prop-types';
-import media from 'styled-media-query';
 import styled, { css } from 'styled-components';
 import colors from 'config/colors';
 import { getColor, getIcon } from 'utils/notification';
@@ -20,7 +18,7 @@ type Props = {
     type: string,
     cancelable?: boolean;
     title: string;
-    className: string;
+    className?: string;
     message?: string;
     actions?: Array<CallbackAction>;
     close?: typeof NotificationActions.close,
@@ -36,6 +34,8 @@ const Wrapper = styled.div`
     display: flex;
     flex-direction: row;
     text-align: left;
+    justify-content: center;
+    align-items: center;
 
     ${props => props.type === 'info' && css`
         color: ${colors.INFO_PRIMARY};
@@ -56,19 +56,10 @@ const Wrapper = styled.div`
         color: ${colors.ERROR_PRIMARY};
         background: ${colors.ERROR_SECONDARY};
     `}
-
-    ${media.lessThan('610px')`
-        flex-direction: column;
-    `}
 `;
 
 const Body = styled.div`
     display: flex;
-    width: 60%;
-
-    ${media.lessThan('610px')`
-        width: 100%;
-    `}
 `;
 
 const Message = styled.div`
@@ -77,6 +68,7 @@ const Message = styled.div`
 
 const Title = styled.div`
     padding-bottom: 5px;
+    line-height: 12px;
     font-weight: ${FONT_WEIGHT.BIGGER};
 `;
 
@@ -99,6 +91,7 @@ const IconWrapper = styled.div`
 
 const Texts = styled.div`
     display: flex;
+    padding: 0 10px 0 0;
     flex-direction: column;
     flex: 1;
 `;
@@ -114,12 +107,6 @@ const ActionContent = styled.div`
     display: flex;
     justify-content: right;
     align-items: flex-end;
-
-    ${media.lessThan('610px')`
-        width: 100%;
-        padding: 10px 0 0 30px;
-        align-items: flex-start;
-    `}
 `;
 
 const Notification = (props: Props): React$Element<string> => {
@@ -167,18 +154,4 @@ const Notification = (props: Props): React$Element<string> => {
     );
 };
 
-Notification.propTypes = {
-    className: PropTypes.string,
-    type: PropTypes.string.isRequired,
-    cancelable: PropTypes.bool,
-    title: PropTypes.string.isRequired,
-    message: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.element,
-    ]).isRequired,
-    actions: PropTypes.arrayOf(PropTypes.object),
-    close: PropTypes.func,
-    loading: PropTypes.bool,
-};
-
 export default Notification;

src/components/notifications/Context/components/Action/components/NotificationsGroups/index.js

@@ -24,45 +24,50 @@ class NotificationsGroup extends PureComponent {
     }
 
     render() {
-        const { close, notifications } = this.props;
+        const { close } = this.props;
-        // const notifications = [
+        const notifications = [
-        //     {
+            {
-        //         key: 1,
+                key: 1,
-        //         title: 'this is a title of error notification',
+                title: 'this is a title of error notification',
-        //         type: 'error',
+                type: 'error',
-        //         message: 'this is a message of error notification',
+                message: 'this is a message of error notification',
-        //     },
+            },
-        //     {
+            {
-        //         key: 2,
+                key: 2,
-        //         title: 'this is a title of warning notification',
+                title: 'this is a title of warning notification',
-        //         type: 'warning',
+                type: 'warning',
-        //         message: 'this is a message of warning notification',
+                message: 'this is a message of warning notification',
-        //     },
+            },
-        //     {
+            {
-        //         key: 3,
+                key: 3,
-        //         title: 'this is a title of warning notification',
+                title: 'this is a title of warning notification',
-        //         type: 'warning',
+                type: 'warning',
-        //         message: 'this is a message of warning notification',
+                message: 'this is a message of warning notification',
-        //     },
+            },
-        //     {
+            {
-        //         key: 4,
+                key: 4,
-        //         title: 'this is a title of warning notification sds d',
+                title: 'this is a title of warning notification sds d',
-        //         type: 'warning',
+                type: 'warning',
-        //         message: 'this is a message of warning notification',
+                message: 'this is a message of warning notification',
-        //     },
+            },
-        //     {
+            {
-        //         key: 5,
+                key: 5,
-        //         title: 'this is a title of warning notification as',
+                title: 'this is a title of warning notification as',
-        //         type: 'info',
+                type: 'info',
-        //         message: 'this is a message of warning notification',
+                message: 'this is a message of warning notification',
-        //     },
+            },
-        //     {
+            {
-        //         key: 6,
+                key: 6,
-        //         title: 'this is a title of info notification s ',
+                title: 'this is a title of info notification s ',
-        //         type: 'info',
+                type: 'info',
-        //         message: 'this is a message of info notification',
+                message: 'this is a message of info notification',
-        //     },
+                actions:
-        // ];
+                    [{
+                        label: 'Update',
+                        callback: 'props.routerActions.gotoBridgeUpdate',
+                    }],
+            },
+        ];
         const notificationGroups = this.groupNotifications(notifications);
         const sortedNotifications = this.sortByPriority(notificationGroups);
 

src/views/Wallet/views/FirmwareUpdate/index.js

@@ -3,7 +3,6 @@
 import React from 'react';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
-import { NavLink } from 'react-router-dom';
 
 import styled from 'styled-components';
 import { H1 } from 'components/Heading';