Add loading state for notification button

src/components/Notification/components/NotificationButton/index.js

@@ -5,6 +5,8 @@ import styled, { css } from 'styled-components';
 import PropTypes from 'prop-types';
 import Icon from 'components/Icon';
 import colors from 'config/colors';
+import { getPrimaryColor, getSecondaryColor } from 'utils/notification';
+import Loader from 'components/Loader';
 import { TRANSITION } from 'config/variables';
 
 type Props = {
@@ -18,56 +20,35 @@ type Props = {
     children: React.Node;
 };
 
+const LoaderContent = styled.div`
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: default;
+    background: ${props => getSecondaryColor(props.type)};
+`;
+
 const Wrapper = styled.button`
     padding: 12px 58px;
     border-radius: 3px;
     background: transparent;
     font-size: 14px;
+    position: relative;
     font-weight: 300;
     cursor: pointer;
-    color: ${colors.WHITE};
+    color: ${props => getPrimaryColor(props.type)};
-    border: 0;
+    border: 1px solid ${props => getPrimaryColor(props.type)};
     transition: ${TRANSITION.HOVER};
 
-    ${props => props.type === 'info' && css`
+    &:hover {
-        border: 1px solid ${colors.INFO_PRIMARY};
+        color: ${colors.WHITE};
-        color: ${colors.INFO_PRIMARY};
+        background: ${props => getPrimaryColor(props.type)};
-
+    }
-        &: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`
@@ -75,13 +56,18 @@ const IconWrapper = styled.span`
 `;
 
 const NotificationButton = ({
-    type, icon, onClick, children,
+    type, icon, onClick, children, isLoading,
 }: Props) => (
     <Wrapper
         icon={icon}
         onClick={onClick}
         type={type}
     >
+        {isLoading && (
+            <LoaderContent type={type}>
+                <Loader size={30} />
+            </LoaderContent>
+        )}
         {icon && (
             <IconWrapper>
                 <Icon
@@ -102,6 +88,7 @@ NotificationButton.propTypes = {
         color: PropTypes.string,
         size: PropTypes.number,
     }),
+    isLoading: PropTypes.bool,
     onClick: PropTypes.func,
     children: PropTypes.node.isRequired,
 };

src/components/Notification/index.js

@@ -1,9 +1,7 @@
 /* @flow */
-
 import * as React from 'react';
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
-import colors from 'config/colors';
+import { getPrimaryColor, getSecondaryColor, getIcon } from 'utils/notification';
-import { getColor, getIcon } from 'utils/notification';
 import Icon from 'components/Icon';
 import icons from 'config/icons';
 import { FONT_WEIGHT, FONT_SIZE } from 'config/variables';
@@ -28,34 +26,14 @@ type Props = {
 const Wrapper = styled.div`
     width: 100%;
     position: relative;
-    color: ${colors.TEXT_PRIMARY};
-    background: ${colors.TEXT_SECONDARY};
     padding: 24px 48px 9px 24px;
     display: flex;
     flex-direction: row;
     text-align: left;
     justify-content: center;
     align-items: center;
-
+    color: ${props => getPrimaryColor(props.type)};
-    ${props => props.type === 'info' && css`
+    background: ${props => getSecondaryColor(props.type)};
-        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`
@@ -119,7 +97,7 @@ const Notification = (props: Props): React$Element<string> => {
             {props.cancelable && (
                 <CloseClick onClick={() => close()}>
                     <Icon
-                        color={getColor(props.type)}
+                        color={getPrimaryColor(props.type)}
                         icon={icons.CLOSE}
                         size={20}
                     />
@@ -128,7 +106,7 @@ const Notification = (props: Props): React$Element<string> => {
             <Body>
                 <IconWrapper>
                     <StyledIcon
-                        color={getColor(props.type)}
+                        color={getPrimaryColor(props.type)}
                         icon={getIcon(props.type)}
                     />
                 </IconWrapper>

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

@@ -5,7 +5,7 @@ import Icon from 'components/Icon';
 import ICONS from 'config/icons';
 import colors from 'config/colors';
 import Notification from 'components/Notification';
-import { getIcon, getColor } from 'utils/notification';
+import { getIcon, getPrimaryColor } from 'utils/notification';
 
 const Wrapper = styled.div``;
 
@@ -65,7 +65,7 @@ class Group extends PureComponent {
 
     render() {
         const { type, groupNotifications, close } = this.props;
-        const color = getColor(type);
+        const color = getPrimaryColor(type);
         return (
             <Wrapper>
                 {groupNotifications.length > 1 && (

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

@@ -54,7 +54,6 @@ class NotificationsGroup extends PureComponent {
         //         key: 5,
         //         title: 'this is a title of warning notification as',
         //         type: 'success',
-        //         message: <Link href="link" isGreen>See transaction detail</Link>,
         //     },
         //     {
         //         key: 6,

src/utils/notification.js

@@ -1,7 +1,7 @@
 import colors from 'config/colors';
 import icons from 'config/icons';
 
-const getColor = (type) => {
+const getPrimaryColor = (type) => {
     let color;
     switch (type) {
         case 'info':
@@ -23,9 +23,32 @@ const getColor = (type) => {
     return color;
 };
 
+const getSecondaryColor = (type) => {
+    let color;
+    switch (type) {
+        case 'info':
+            color = colors.INFO_SECONDARY;
+            break;
+        case 'error':
+            color = colors.ERROR_SECONDARY;
+            break;
+        case 'warning':
+            color = colors.WARNING_SECONDARY;
+            break;
+        case 'success':
+            color = colors.SUCCESS_SECONDARY;
+            break;
+        default:
+            color = null;
+    }
+
+    return color;
+};
+
 const getIcon = type => icons[type.toUpperCase()];
 
 export {
-    getColor,
+    getPrimaryColor,
+    getSecondaryColor,
     getIcon,
 };