From 820335c2027742e9fa420f689fcd83fb6c5c6962 Mon Sep 17 00:00:00 2001
From: Evelyn Eastmond <evhan55@gmail.com>
Date: Sat, 15 Sep 2018 15:42:05 -0400
Subject: [PATCH] Adding reconnect button, fixing CSS.
---
src/components/alerts/alert.css | 30 +++++++++++++++++++++++++-----
src/components/alerts/alerts.jsx | 10 ++++++++--
src/containers/alerts.jsx | 6 ++++--
src/reducers/alerts.js | 12 +++++++++++-
4 files changed, 48 insertions(+), 10 deletions(-)
diff --git a/src/components/alerts/alert.css b/src/components/alerts/alert.css
index 91bf75dca..505db1619 100644
--- a/src/components/alerts/alert.css
+++ b/src/components/alerts/alert.css
@@ -5,7 +5,10 @@
.alert-container {
position:absolute;
z-index: $z-index-card;
- margin: 0.5rem 2rem;
+ top: 53px;
+ left: 0;
+ right: 0;
+ margin: auto;
border: 1px solid #FF8C1A;
border-radius: 8px;
cursor: move;
@@ -13,23 +16,40 @@
display: flex;
flex-direction: row;
justify-content: center;
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
width: 448px;
- padding: 16px;
+ padding: 12px;
font-size: 10pt;
box-shadow: 2px 2px 2px 2px rgba(255, 140, 26, 0.25);
}
.alert {
- color: #000;
+ color: #555;
z-index: 20;
overflow: hidden;
align-items: left;
width: 100%;
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-weight: bold;
+ font-size: 12px;
+ line-height: 22pt;
+}
+
+.button {
+ cursor: pointer;
+ background-color: #FF8C1A;
+ color: white;
+ border-radius: 5px;
+ line-height: 14pt;
+ padding: 5px 15px;
+ margin-right: 16px;
+ letter-spacing: 1px;
+ font-size: 11px;
}
.remove-button {
cursor: pointer;
- color: #000;
+ color: #FF8C1A;
align-items: center;
+ font-weight: bold;
+ line-height: 22pt;
}
diff --git a/src/components/alerts/alerts.jsx b/src/components/alerts/alerts.jsx
index 04a6d2a7d..dd8ce51dd 100644
--- a/src/components/alerts/alerts.jsx
+++ b/src/components/alerts/alerts.jsx
@@ -8,12 +8,17 @@ import styles from './alert.css';
const Alerts = props => (
<Draggable
bounds="parent"
- position={{x: 500, y: 50}}
>
<div className={styles.alertContainer}>
<div className={styles.alert}>
{props.message}
</div>
+ <div
+ className={styles.button}
+ onClick={props.onReconnect}
+ >
+ Reconnect
+ </div>
<div
className={styles.removeButton}
onClick={props.onCloseAlert}
@@ -26,7 +31,8 @@ const Alerts = props => (
Alerts.propTypes = {
message: PropTypes.string.isRequired,
- onCloseAlert: PropTypes.func.isRequired
+ onCloseAlert: PropTypes.func.isRequired,
+ onReconnect: PropTypes.func.isRequired
};
export default Alerts;
diff --git a/src/containers/alerts.jsx b/src/containers/alerts.jsx
index c47d956de..61106c61a 100644
--- a/src/containers/alerts.jsx
+++ b/src/containers/alerts.jsx
@@ -2,7 +2,8 @@ import {connect} from 'react-redux';
import {
showAlert,
- closeAlert
+ closeAlert,
+ onReconnect
} from '../reducers/alerts';
import AlertsComponent from '../components/alerts/alerts.jsx';
@@ -14,7 +15,8 @@ const mapStateToProps = state => ({
const mapDispatchToProps = dispatch => ({
onShowAlert: () => dispatch(showAlert()),
- onCloseAlert: () => dispatch(closeAlert())
+ onCloseAlert: () => dispatch(closeAlert()),
+ onReconnect: () => dispatch(onReconnect())
});
export default connect(
diff --git a/src/reducers/alerts.js b/src/reducers/alerts.js
index 6e4427f6f..3cf28217f 100644
--- a/src/reducers/alerts.js
+++ b/src/reducers/alerts.js
@@ -1,5 +1,6 @@
const CLOSE_ALERT = 'scratch-gui/alerts/CLOSE_ALERT';
const SHOW_ALERT = 'scratch-gui/alerts/SHOW_ALERT';
+const ON_RECONNECT = 'scratch-gui/alerts/ON_RECONNECT';
const initialState = {
message: 'Alert',
@@ -18,6 +19,10 @@ const reducer = function (state, action) {
return Object.assign({}, state, {
visible: false
});
+ case ON_RECONNECT:
+ return Object.assign({}, state, {
+ visible: false
+ });
default:
return state;
}
@@ -34,9 +39,14 @@ const showAlert = function (message) {
};
};
+const onReconnect = function () {
+ return {type: ON_RECONNECT};
+};
+
export {
reducer as default,
initialState as alertsInitialState,
closeAlert,
- showAlert
+ showAlert,
+ onReconnect
};
--
GitLab