Refactored notification buttons

src/components/Button/index.js

@@ -29,7 +29,7 @@ const Wrapper = styled.button`
         background: ${colors.GRAY_LIGHT};
     `}
 
-    ${props => props.isBlue && css`
+    ${props => props.color === 'blue' && css`
         background: transparent;
         border: 1px solid ${colors.INFO_PRIMARY};
         color: ${colors.INFO_PRIMARY};
@@ -41,8 +41,8 @@ const Wrapper = styled.button`
         }
     `}
 
-    ${props => props.isWhite && css`
-        background: @color_white;
+    ${props => props.color === 'white' && css`
+        background: ${colors.WHITE};
         color: ${colors.TEXT_SECONDARY};
         border: 1px solid ${colors.DIVIDER};
 
@@ -125,14 +125,14 @@ const IconWrapper = styled.span`
 `;
 
 const Button = ({
-    className, text, icon, onClick = () => { }, disabled, isBlue = false, isWhite = false, isWebUsb = false, isTransparent = false,
+    className, text, icon, onClick = () => { }, disabled, color = null, isWhite = false, isWebUsb = false, isTransparent = false,
 }) => (
     <Wrapper
         className={className}
         icon={icon}
         onClick={onClick}
         disabled={disabled}
-        isBlue={isBlue}
+        color={color}
         isWhite={isWhite}
         isWebUsb={isWebUsb}
         isTransparent={isTransparent}
@@ -154,7 +154,7 @@ Button.propTypes = {
     className: PropTypes.string,
     onClick: PropTypes.func,
     disabled: PropTypes.bool,
-    isBlue: PropTypes.bool,
+    color: PropTypes.string,
     isWhite: PropTypes.bool,
     isWebUsb: PropTypes.bool,
     isTransparent: PropTypes.bool,

src/components/Notification/index.js

@@ -5,8 +5,11 @@ import React from 'react';
 import { H2 } from 'components/Heading';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import colors from 'config/colors';
+import Button from 'components/Button';
+import Icon from 'components/Icon';
+import icons from 'config/icons';
 
 import * as NOTIFICATION from 'actions/constants/notification';
 import * as NotificationActions from 'actions/NotificationActions';
@@ -31,45 +34,77 @@ type NProps = {
 
 const Wrapper = styled.div`
     position: relative;
-    color: ${colors.INFO_PRIMARY};
-    background: ${colors.INFO_SECONDARY};
+    color: ${colors.TEXT_PRIMARY};
+    background: ${colors.TEXT_SECONDARY};
     padding: 24px 48px 24px 80px;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: space-between;
     text-align: left;
+
+    ${props => props.type === 'info' && css`
+        color: ${colors.INFO_PRIMARY};
+        background: ${colors.INFO_SECONDARY};
+    `}
+
+    ${props => props.type === 'success' && css`
+        color: ${colors.SUCCESS_PRIMARY};
+        background: ${colors.SUCCESS_SECONDARY};
+    `}
+
+    ${props => props.type === 'warning' && css`
+        color: ${colors.WARNING_PRIMARY};
+        background: ${colors.WARNING_SECONDARY};
+    `}
+
+    ${props => props.type === 'error' && css`
+        color: ${colors.ERROR_PRIMARY};
+        background: ${colors.ERROR_SECONDARY};
+    `}
+`;
+
+const Body = styled.div`
+    flex: 1;
+    margin-right: 24px;
 `;
 
+const ActionContent = styled.div`
+`;
+
+const CloseClick = styled.div``;
+
 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
     const actionButtons = props.actions ? props.actions.map((a, i) => (
         <button key={i} onClick={(event) => { close(); a.callback(); }} className="transparent">{ a.label }</button>
     )) : null;
 
     return (
-        <Wrapper className={className}>
-            { props.cancelable ? (
-                <button
-                    className="notification-close transparent"
-                    onClick={event => close()}
-                />
-            ) : null }
-            <div className="notification-body">
+        <Wrapper type={props.className}>
+            { props.cancelable && (
+                <CloseClick onClick={() => close()}>
+                    <Icon icon={icons.CLOSE} size={25} />
+                </CloseClick>
+            )
+            }
+            <Body>
                 <H2>{ props.title }</H2>
-                { props.message ? (<p dangerouslySetInnerHTML={{ __html: props.message }} />) : null }
-            </div>
+                { props.message && <p dangerouslySetInnerHTML={{ __html: props.message }} /> }
+            </Body>
             { props.actions && props.actions.length > 0 ? (
-                <div className="notification-action">
-                    { actionButtons }
-                </div>
-            ) : null }
-            { props.loading ? (
-                <Loader
-                    size={50}
-                />
+                <ActionContent>
+                    {props.actions
+                        .map(action => (
+                            <Button
+                                color={props.className}
+                                text={action.label}
+                                onClick={() => { close(); action.callback(); }}
+                            />
+                        ))}
+                </ActionContent>
             ) : null }
+            { props.loading && <Loader size={50} /> }
 
         </Wrapper>
     );

src/styles/notification.less

@@ -1,10 +1,5 @@
 .notification {
 
-    .notification-body {
-        flex: 1;
-        margin-right: 24px;
-    }
-
     .notification-action button {
         padding: 12px 58px;
     }
@@ -28,26 +23,6 @@
         }
     }
 
-    h2 {
-        font-size: 14px;
-        font-weight: bold;
-        
-        padding: 0px;
-        &:before {
-            .icomoon-info;
-            position: absolute;
-            top: 17px;
-            left: 40px;
-            font-size: 32px !important;
-        }
-    }
-
-    p {
-        padding: 0px;
-        margin: 8px 0px;
-        color: inherit;
-    }
-
     &.info {
         .notification-action button {
             border: 1px solid @color_info_primary;
@@ -59,11 +34,7 @@
         }
     }
 
-    
-
     &.success {
-        color: @color_success_primary;
-        background: @color_success_secondary;
 
         .notification-action button {
             border: 1px solid @color_success_primary;
@@ -76,11 +47,6 @@
     }
 
     &.warning {
-        color: @color_warning_primary;
-        background: @color_warning_secondary;
-        h2:before {
-            .icomoon-warning;
-        }
 
         .notification-action button {
             border: 1px solid @color_warning_primary;
@@ -93,11 +59,6 @@
     }
 
     &.error {
-        color: @color_error_primary;
-        background: @color_error_secondary;
-        h2:before {
-            .icomoon-error;
-        }
 
         .notification-close {
             color: @color_error_primary;