From f513aa04ca074eed3f570e62fb0fe2b7c9d17d41 Mon Sep 17 00:00:00 2001
From: Evelyn Eastmond <evhan55@gmail.com>
Date: Wed, 19 Sep 2018 11:53:10 -0400
Subject: [PATCH] Changing Alerts component to props definition, and passing
 alertsContainer style down from gui.

---
 src/components/alerts/alert.css  |  1 -
 src/components/alerts/alerts.jsx | 14 ++++++++++----
 src/components/gui/gui.jsx       |  4 ++--
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/components/alerts/alert.css b/src/components/alerts/alert.css
index d44f6d471..3bc1c932c 100644
--- a/src/components/alerts/alert.css
+++ b/src/components/alerts/alert.css
@@ -1,7 +1,6 @@
 @import "../../css/units.css";
 @import "../../css/colors.css";
 @import "../../css/z-index.css";
-@import "../gui/gui.css";
 
 .alert {
     width: 100%;
diff --git a/src/components/alerts/alerts.jsx b/src/components/alerts/alerts.jsx
index 663c5c5d0..c90e0fdc8 100644
--- a/src/components/alerts/alerts.jsx
+++ b/src/components/alerts/alerts.jsx
@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 import Box from '../box/box.jsx';
@@ -5,20 +6,24 @@ import Button from '../button/button.jsx';
 
 import styles from './alert.css';
 
-const Alerts = props => (
+const Alerts = ({
+    className,
+    message,
+    onCloseAlert
+}) => (
     <Box
         bounds="parent"
-        className={styles.alertsContainer}
+        className={classNames(styles.alertsContainer, className)}
     >
         <Box
             className={styles.alert}
         >
             <div className={styles.alertMessage}>
-                {props.message}
+                {message}
             </div>
             <Button
                 className={styles.alertRemoveButton}
-                onClick={props.onCloseAlert}
+                onClick={onCloseAlert}
             >
                 { /* eslint-disable react/jsx-no-literals */ }
                 x
@@ -28,6 +33,7 @@ const Alerts = props => (
 );
 
 Alerts.propTypes = {
+    className: PropTypes.string,
     message: PropTypes.string.isRequired,
     onCloseAlert: PropTypes.func.isRequired
 };
diff --git a/src/components/gui/gui.jsx b/src/components/gui/gui.jsx
index ec480e3e7..76ef997d8 100644
--- a/src/components/gui/gui.jsx
+++ b/src/components/gui/gui.jsx
@@ -112,7 +112,7 @@ const GUIComponent = props => {
                 vm={vm}
             >
                 {alertsVisible ? (
-                    <Alerts />
+                    <Alerts className={styles.alertsContainer} />
                 ) : null}
             </StageWrapper>
         ) : (
@@ -140,7 +140,7 @@ const GUIComponent = props => {
                     <Cards />
                 ) : null}
                 {alertsVisible ? (
-                    <Alerts />
+                    <Alerts className={styles.alertsContainer} />
                 ) : null}
                 {costumeLibraryVisible ? (
                     <CostumeLibrary