Add styles to error notification

#98

Author: carolinesalib

app/javascript/components/DialogMessage/DialogMessage.jsx

@@ -4,6 +4,7 @@ import {createStructuredSelector} from "reselect";
 import {connect} from "react-redux";
 import {cleanDialogMessage} from "../../actions/dialogMessage";
 import * as Sentry from "@sentry/browser";
+import classes from './DialogMessage.sass';
 
 const DialogMessage = ({dialogMessage, cleanDialogMessage}) => {
     if (!dialogMessage.message) {
@@ -12,7 +13,7 @@ const DialogMessage = ({dialogMessage, cleanDialogMessage}) => {
 
     Sentry.captureException(dialogMessage.error);
 
-    return <SimpleModal show={true} modalClosed={cleanDialogMessage}>
+    return <SimpleModal show={true} modalClosed={cleanDialogMessage} classStyleModifier={classes.DialogMessageError}>
         <p>{dialogMessage.message}</p>
     </SimpleModal>
 };

app/javascript/components/DialogMessage/DialogMessage.sass

@@ -0,0 +1,14 @@
+@import "../../variables/colors"
+@import "../../variables/fonts"
+@import "../../variables/sizes"
+
+.DialogMessageError
+    top: auto
+    bottom: 10px
+    background-color: $errorColor
+    border-color: $errorColor
+    color: white
+    a
+        color: white !important
+    p
+        margin: auto

app/javascript/components/SimpleModal/SimpleModal.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import styles from './SimpleModal.sass';
+import classes from './SimpleModal.sass';
 import Backdrop from '../Backdrop/Backdrop';
+import cx from "classnames";
 
 class SimpleModal extends React.Component {
     shouldComponentUpdate(nextProps) {
@@ -16,13 +17,13 @@ class SimpleModal extends React.Component {
             <div>
                 <Backdrop show={this.props.show} clicked={this.props.modalClosed}/>
                 <div
-                    className={styles.SimpleModal}
+                    className={cx(classes.SimpleModal, this.props.classStyleModifier)}
                     style={{
                         transform: this.props.show ? 'translateY(0)' : 'translateY(-100vh)',
                         opacity: this.props.show ? '1' : '0'
                     }}
                 >
-                    <a onClick={this.props.modalClosed} className={styles.closeButton}>x</a>
+                    <a onClick={this.props.modalClosed} className={classes.closeButton}>x</a>
                     {this.props.children}
                 </div>
             </div>

app/javascript/variables/colors.sass

@@ -6,3 +6,5 @@ $lightGrey: #EBEBEB
 $grey: #D6D6D6
 $darkFontColor: #454545
 $black: #000000
+$red: #E57373
+$errorColor: $red