From a7726081f2435a2eaea04253547794a22ef05c89 Mon Sep 17 00:00:00 2001
From: Vladimir Volek <vladimir.volek@satoshilabs.com>
Date: Wed, 29 Aug 2018 13:54:41 +0200
Subject: [PATCH] Separted button and notfication button

---
 src/components/Button/index.js             | 36 --------
 src/components/Notification/index.js       | 44 ++++------
 src/components/NotificationButton/index.js | 98 ++++++++++++++++++++++
 src/styles/index.less                      |  2 -
 src/styles/notification.less               | 68 ---------------
 src/views/Wallet/views/Dashboard/index.js  | 42 ++++++++++
 6 files changed, 156 insertions(+), 134 deletions(-)
 create mode 100644 src/components/NotificationButton/index.js
 delete mode 100644 src/styles/notification.less

diff --git a/src/components/Button/index.js b/src/components/Button/index.js
index f4635573..876fe893 100644
--- a/src/components/Button/index.js
+++ b/src/components/Button/index.js
@@ -29,42 +29,6 @@ const Wrapper = styled.button`
         background: ${colors.GRAY_LIGHT};
     `}
 
-    ${props => props.color === 'blue' && css`
-        background: transparent;
-        border: 1px solid ${colors.INFO_PRIMARY};
-        color: ${colors.INFO_PRIMARY};
-        padding: 12px 58px;
-
-        &:hover {
-            color: ${colors.WHITE};
-            background: ${colors.INFO_PRIMARY};
-        }
-    `}
-
-    ${props => props.color === 'red' && css`
-        background: transparent;
-        border: 1px solid ${colors.ERROR_PRIMARY};
-        color: ${colors.ERROR_SECONDARY};
-        padding: 12px 58px;
-
-        &:hover {
-            color: ${colors.WHITE};
-            background: ${colors.ERROR_PRIMARY};
-        }
-    `}
-
-    ${props => props.color === 'orange' && css`
-        background: transparent;
-        border: 1px solid ${colors.WARNING_PRIMARY};
-        color: ${colors.WARNING_SECONDARY};
-        padding: 12px 58px;
-
-        &:hover {
-            color: ${colors.WHITE};
-            background: ${colors.WARNING_PRIMARY};
-        }
-    `}
-
     ${props => props.color === 'white' && css`
         background: ${colors.WHITE};
         color: ${colors.TEXT_SECONDARY};
diff --git a/src/components/Notification/index.js b/src/components/Notification/index.js
index eb5e6e4b..adbdf83c 100644
--- a/src/components/Notification/index.js
+++ b/src/components/Notification/index.js
@@ -3,7 +3,7 @@ import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import styled, { css } from 'styled-components';
 import colors from 'config/colors';
-import Button from 'components/Button';
+import NotificationButton from 'components/NotificationButton';
 import Icon from 'components/Icon';
 import icons from 'config/icons';
 import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
@@ -55,7 +55,13 @@ const Title = styled.div`
 `;
 
 const ActionContent = styled.div``;
-const CloseClick = styled.div``;
+
+const CloseClick = styled.div`
+    position: absolute;
+    right: 0;
+    top: 0;
+    padding: 20px 10px 0 0;
+`;
 
 const Message = styled.div`
     padding: 5px 0 0 0;
@@ -68,7 +74,7 @@ const IconContent = styled.div`
 
 const StyledIcon = styled(Icon)`
     position: relative;
-    top: -6px;
+    top: -7px;
 `;
 
 const MessageContent = styled.div``;
@@ -76,28 +82,6 @@ const MessageContent = styled.div``;
 export const Notification = (props: NProps): React$Element<string> => {
     const close: Function = typeof props.close === 'function' ? props.close : () => {}; // TODO: add default close action
 
-    const getButtonColor = (type) => {
-        let color;
-        switch (type) {
-            case 'info':
-                color = 'blue';
-                break;
-            case 'error':
-                color = 'red';
-                break;
-            case 'warning':
-                color = 'orange';
-                break;
-            case 'success':
-                color = 'green';
-                break;
-            default:
-                color = null;
-        }
-
-        return color;
-    };
-
     const getIconColor = (type) => {
         let color;
         switch (type) {
@@ -125,7 +109,11 @@ export const Notification = (props: NProps): React$Element<string> => {
             {props.loading && <Loader size={50} /> }
             {props.cancelable && (
                 <CloseClick onClick={() => close()}>
-                    <Icon icon={icons.CLOSE} size={25} />
+                    <Icon
+                        color={getIconColor(props.className)}
+                        icon={icons.CLOSE}
+                        size={20}
+                    />
                 </CloseClick>
             )}
             <Body>
@@ -148,9 +136,9 @@ export const Notification = (props: NProps): React$Element<string> => {
                 <ActionContent>
                     {props.actions
                         .map(action => (
-                            <Button
+                            <NotificationButton
                                 key={action.label}
-                                color={getButtonColor(props.className)}
+                                type={props.className}
                                 text={action.label}
                                 onClick={() => { close(); action.callback(); }}
                             />
diff --git a/src/components/NotificationButton/index.js b/src/components/NotificationButton/index.js
new file mode 100644
index 00000000..0de0e40d
--- /dev/null
+++ b/src/components/NotificationButton/index.js
@@ -0,0 +1,98 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import PropTypes from 'prop-types';
+import Icon from 'components/Icon';
+import colors from 'config/colors';
+import { TRANSITION } from 'config/variables';
+
+const Wrapper = styled.button`
+    padding: 12px 58px;
+    border-radius: 3px;
+    background: transparent;
+    font-size: 14px;
+    font-weight: 300;
+    cursor: pointer;
+    color: ${colors.WHITE};
+    border: 0;
+    transition: ${TRANSITION.HOVER};
+
+    ${props => props.type === 'info' && css`
+        border: 1px solid ${colors.INFO_PRIMARY};
+        color: ${colors.INFO_PRIMARY};
+
+        &:hover {
+            color: ${colors.WHITE};
+            background: ${colors.INFO_PRIMARY};
+        }
+    `}
+
+    ${props => props.type === 'success' && css`
+        border: 1px solid ${colors.SUCCESS_PRIMARY};
+        color: ${colors.SUCCESS_PRIMARY};
+
+        &:hover {
+            color: ${colors.WHITE};
+            background: ${colors.SUCCESS_PRIMARY};
+        }
+    `}
+
+    ${props => props.type === 'error' && css`
+        border: 1px solid ${colors.ERROR_PRIMARY};
+        color: ${colors.ERROR_PRIMARY};
+
+        &:hover {
+            color: ${colors.WHITE};
+            background: ${colors.ERROR_PRIMARY};
+        }
+    `}
+
+    ${props => props.type === 'warning' && css`
+        border: 1px solid ${colors.WARNING_PRIMARY};
+        color: ${colors.WARNING_PRIMARY};
+
+        &:hover {
+            color: ${colors.WHITE};
+            background: ${colors.WARNING_PRIMARY};
+        }
+    `}
+`;
+
+const IconWrapper = styled.span`
+    margin-right: 8px;
+`;
+
+const NotificationButton = ({
+    className, text, icon, onClick = () => { }, type = null,
+}) => (
+    <Wrapper
+        className={className}
+        icon={icon}
+        onClick={onClick}
+        type={type}
+    >
+        {icon && (
+            <IconWrapper>
+                <Icon
+                    icon={icon.type}
+                    color={icon.color}
+                    size={icon.size}
+                />
+            </IconWrapper>
+        )}
+        {text}
+    </Wrapper>
+);
+
+NotificationButton.propTypes = {
+    type: PropTypes.string.isRequired,
+    className: PropTypes.string,
+    onClick: PropTypes.func,
+    icon: PropTypes.shape({
+        type: PropTypes.arrayOf(PropTypes.string).isRequired,
+        color: PropTypes.string,
+        size: PropTypes.number,
+    }),
+    text: PropTypes.string.isRequired,
+};
+
+export default NotificationButton;
\ No newline at end of file
diff --git a/src/styles/index.less b/src/styles/index.less
index 198816e3..e472047a 100644
--- a/src/styles/index.less
+++ b/src/styles/index.less
@@ -11,6 +11,4 @@
 @import './receive.less';
 @import './summary.less';
 
-@import './notification.less';
-
 @import './inputs.less';
\ No newline at end of file
diff --git a/src/styles/notification.less b/src/styles/notification.less
deleted file mode 100644
index 8d58ec64..00000000
--- a/src/styles/notification.less
+++ /dev/null
@@ -1,68 +0,0 @@
-.notification {
-
-    .notification-action button {
-        padding: 12px 58px;
-    }
-
-    .notification-close {
-        position: absolute;
-        top: 8px;
-        right: 0;
-        padding: 12px;
-        color: inherit;
-        transition: opacity 0.3s;
-        z-index: 1;
-
-        &:after {
-            .icomoon-close;
-        }
-        &:active,
-        &:hover {
-            opacity: 0.6;
-            color: inherit;
-        }
-    }
-
-    &.success {
-
-        .notification-action button {
-            border: 1px solid @color_success_primary;
-            color: @color_success_primary;
-            &:hover {
-                color: @color_white;
-                background: @color_success_primary;
-            }
-        }
-    }
-
-    &.warning {
-
-        .notification-action button {
-            border: 1px solid @color_warning_primary;
-            color: @color_warning_primary;
-            &:hover {
-                color: @color_white;
-                background: @color_warning_primary;
-            }
-        }
-    }
-
-    &.error {
-
-        .notification-close {
-            color: @color_error_primary;
-            &:hover {
-                color: @color_error_primary;
-            }
-        }
-
-        .notification-action button {
-            border: 1px solid @color_error_primary;
-            color: @color_error_primary;
-            &:hover {
-                color: @color_white;
-                background: @color_error_primary;
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/src/views/Wallet/views/Dashboard/index.js b/src/views/Wallet/views/Dashboard/index.js
index 1c59f343..ffdf88ff 100644
--- a/src/views/Wallet/views/Dashboard/index.js
+++ b/src/views/Wallet/views/Dashboard/index.js
@@ -2,6 +2,8 @@ import React from 'react';
 import styled from 'styled-components';
 import { connect } from 'react-redux';
 
+import { Notification } from 'components/Notification';
+
 import { H2 } from 'components/Heading';
 import DashboardImg from 'images/dashboard.png';
 
@@ -32,6 +34,46 @@ const P = styled.p`
 
 const Dashboard = () => (
     <Wrapper>
+        <Notification
+            title="TITLE TITLE TITLE TITLETITLE TITLE"
+            message="Config files are missing"
+            className="error"
+            actions={[{
+                label: 'Button action',
+                callback: () => false,
+            }]}
+        />
+
+        <Notification
+            title="TITLE TITLE TITLE TITLETITLE TITLE"
+            message="Config files are missing"
+            className="warning"
+            actions={[{
+                label: 'Button action',
+                callback: () => false,
+            }]}
+        />
+
+        <Notification
+            title="TITLE TITLE TITLE TITLETITLE TITLE"
+            message="Config files are missing"
+            className="success"
+            cancelable={false}
+            actions={[{
+                label: 'Button action',
+                callback: () => false,
+            }]}
+        />
+
+        <Notification
+            title="TITLE TITLE TITLE TITLETITLE TITLE"
+            message="Description hahahah aloglg lfkdlfkdlfk"
+            className="info"
+            actions={[{
+                label: 'Button action',
+                callback: () => false,
+            }]}
+        />
         <StyledH2>Dashboard</StyledH2>
         <Row>
             <H2>Please select your coin</H2>