Separate group notifications with border

src/components/Notification/index.js

@@ -21,6 +21,7 @@ type Props = {
     type: string,
     cancelable?: boolean;
     title: string;
+    className: string;
     message?: string;
     actions?: Array<CallbackAction>;
     close?: typeof NotificationActions.close,
@@ -127,7 +128,7 @@ const Notification = (props: Props): React$Element<string> => {
     const close: Function = typeof props.close === 'function' ? props.close : () => {}; // TODO: add default close action
 
     return (
-        <Wrapper type={props.type}>
+        <Wrapper className={props.className} type={props.type}>
             {props.loading && <Loader size={50} /> }
             {props.cancelable && (
                 <CloseClick onClick={() => close()}>

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

@@ -32,6 +32,14 @@ const Title = styled.div`
     color: ${props => props.color};
 `;
 
+const StyledNotification = styled(Notification)`
+    border-bottom: 1px solid ${props => getColor(props.type)};
+
+    &:last-child {
+        border: 0;
+    }
+`;
+
 class Group extends PureComponent {
     constructor() {
         super();
@@ -87,7 +95,7 @@ class Group extends PureComponent {
                     {groupNotifications
                         .slice(0, this.state.visibleCount)
                         .map(notification => (
-                            <Notification
+                            <StyledNotification
                                 key={notification.key}
                                 type={notification.type}
                                 title={notification.title}