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
--
GitLab