From 8d9a6f3008d50c8045a32bfdbe127aa6cee49f5e Mon Sep 17 00:00:00 2001
From: Evelyn Eastmond <evhan55@gmail.com>
Date: Sat, 15 Sep 2018 15:10:00 -0400
Subject: [PATCH] Adding dismissal of alert.
---
src/components/alerts/alert.css | 24 ++++++++++++++++--------
src/components/alerts/alerts.jsx | 11 +++++++++--
src/containers/alerts.jsx | 6 ++++--
src/reducers/alerts.js | 2 +-
4 files changed, 30 insertions(+), 13 deletions(-)
diff --git a/src/components/alerts/alert.css b/src/components/alerts/alert.css
index ffff03275..91bf75dca 100644
--- a/src/components/alerts/alert.css
+++ b/src/components/alerts/alert.css
@@ -6,22 +6,30 @@
position:absolute;
z-index: $z-index-card;
margin: 0.5rem 2rem;
-}
-
-.alert {
border: 1px solid #FF8C1A;
border-radius: 8px;
- display: flex;
- flex-direction: column;
cursor: move;
background: #FFF0DF;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
width: 448px;
+ padding: 16px;
+ font-size: 10pt;
+ box-shadow: 2px 2px 2px 2px rgba(255, 140, 26, 0.25);
+}
+
+.alert {
color: #000;
z-index: 20;
overflow: hidden;
- padding: 16px;
- font-size: 10pt;
- box-shadow: 2px 2px 2px 2px rgba(255, 140, 26, 0.25);;
align-items: left;
+ width: 100%;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
+
+.remove-button {
+ cursor: pointer;
+ color: #000;
+ align-items: center;
+}
diff --git a/src/components/alerts/alerts.jsx b/src/components/alerts/alerts.jsx
index 6e585af37..04a6d2a7d 100644
--- a/src/components/alerts/alerts.jsx
+++ b/src/components/alerts/alerts.jsx
@@ -8,18 +8,25 @@ import styles from './alert.css';
const Alerts = props => (
<Draggable
bounds="parent"
- position={{x: 500, y: 0}}
+ position={{x: 500, y: 50}}
>
<div className={styles.alertContainer}>
<div className={styles.alert}>
{props.message}
</div>
+ <div
+ className={styles.removeButton}
+ onClick={props.onCloseAlert}
+ >
+ x
+ </div>
</div>
</Draggable>
);
Alerts.propTypes = {
- message: PropTypes.string.isRequired
+ message: PropTypes.string.isRequired,
+ onCloseAlert: PropTypes.func.isRequired
};
export default Alerts;
diff --git a/src/containers/alerts.jsx b/src/containers/alerts.jsx
index 96d8151cd..c47d956de 100644
--- a/src/containers/alerts.jsx
+++ b/src/containers/alerts.jsx
@@ -1,7 +1,8 @@
import {connect} from 'react-redux';
import {
- showAlert
+ showAlert,
+ closeAlert
} from '../reducers/alerts';
import AlertsComponent from '../components/alerts/alerts.jsx';
@@ -12,7 +13,8 @@ const mapStateToProps = state => ({
});
const mapDispatchToProps = dispatch => ({
- onShowAlert: () => dispatch(showAlert())
+ onShowAlert: () => dispatch(showAlert()),
+ onCloseAlert: () => dispatch(closeAlert())
});
export default connect(
diff --git a/src/reducers/alerts.js b/src/reducers/alerts.js
index 74e488829..6e4427f6f 100644
--- a/src/reducers/alerts.js
+++ b/src/reducers/alerts.js
@@ -16,7 +16,7 @@ const reducer = function (state, action) {
});
case CLOSE_ALERT:
return Object.assign({}, state, {
- message: 'Closing alert!'
+ visible: false
});
default:
return state;
--
GitLab