Refactored notifications buttons

src/components/Button/index.js

@@ -41,6 +41,30 @@ const Wrapper = styled.button`
         }
     `}
 
+    ${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};

src/components/Notification/index.js

@@ -76,9 +76,28 @@ const CloseClick = 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 actionButtons = props.actions ? props.actions.map((a, i) => (
-        <button key={i} onClick={(event) => { close(); a.callback(); }} className="transparent">{ a.label }</button>
-    )) : null;
+
+    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;
+    };
 
     return (
         <Wrapper type={props.className}>
@@ -92,18 +111,19 @@ export const Notification = (props: NProps): React$Element<string> => {
                 <H2>{ props.title }</H2>
                 { props.message && <p dangerouslySetInnerHTML={{ __html: props.message }} /> }
             </Body>
-            { props.actions && props.actions.length > 0 ? (
+            { props.actions && props.actions.length > 0 && (
                 <ActionContent>
                     {props.actions
                         .map(action => (
                             <Button
-                                color={props.className}
+                                color={getButtonColor(props.className)}
                                 text={action.label}
                                 onClick={() => { close(); action.callback(); }}
                             />
                         ))}
                 </ActionContent>
-            ) : null }
+            )
+            }
             { props.loading && <Loader size={50} /> }
 
         </Wrapper>

src/styles/notification.less

@@ -23,16 +23,16 @@
         }
     }
 
-    &.info {
-        .notification-action button {
-            border: 1px solid @color_info_primary;
-            color: @color_info_primary;
-            &:hover {
-                color: @color_white;
-                background: @color_info_primary;
-            }
-        }
-    }
+    // &.info {
+        // .notification-action button {
+        //     border: 1px solid @color_info_primary;
+        //     color: @color_info_primary;
+        //     &:hover {
+        //         color: @color_white;
+        //         background: @color_info_primary;
+        //     }
+        // }
+    // }
 
     &.success {