Beginning to add alerts component.

src/components/alerts/alert.css

+@import "../../css/units.css";
+@import "../../css/colors.css";
+@import "../../css/z-index.css";
+
+.alert-container {
+    position:absolute;
+    z-index: $z-index-card;
+    margin: 0.5rem 2rem;
+}
+
+.alert {
+    border: 1px solid $ui-tertiary;
+    border-radius: 0.75rem;
+    display: flex;
+    flex-direction: column;
+    cursor: move;
+    background: orange;
+    height: 60px;
+    width: 300px;
+    z-index: 20;
+    overflow: hidden;
+    box-shadow: 0px 5px 25px 5px $ui-black-transparent;
+    align-items: center;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+}

src/components/alerts/alerts.jsx

+import React from 'react';
+import PropTypes from 'prop-types';
+import Draggable from 'react-draggable';
+
+import styles from './alert.css';
+
+// this is a functional component, declared with arrow syntax
+const Alerts = props => (
+    <Draggable
+        bounds="parent"
+        position={{x: 550, y: 0}}
+    >
+        <div className={styles.alertContainer}>
+            <div className={styles.alert}>
+                {props.message}
+            </div>
+        </div>
+    </Draggable>
+);
+
+Alerts.propTypes = {
+    message: PropTypes.string.isRequired
+};
+
+export default Alerts;

src/components/gui/gui.jsx

@@ -27,6 +27,7 @@ import ImportModal from '../../containers/import-modal.jsx';
 import WebGlModal from '../../containers/webgl-modal.jsx';
 import TipsLibrary from '../../containers/tips-library.jsx';
 import Cards from '../../containers/cards.jsx';
+import Alerts from '../../containers/alerts.jsx';
 import DragLayer from '../../containers/drag-layer.jsx';
 
 import layout, {STAGE_SIZE_MODES} from '../../lib/layout-constants';
@@ -53,6 +54,7 @@ let isRendererSupported = null;
 const GUIComponent = props => {
     const {
         activeTabIndex,
+        alertsVisible,
         basePath,
         backdropLibraryVisible,
         backpackOptions,
@@ -133,6 +135,9 @@ const GUIComponent = props => {
                 {cardsVisible ? (
                     <Cards />
                 ) : null}
+                {alertsVisible ? (
+                    <Alerts />
+                ) : null}
                 {costumeLibraryVisible ? (
                     <CostumeLibrary
                         vm={vm}

src/containers/alerts.jsx

+import {connect} from 'react-redux';
+
+import AlertsComponent from '../components/alerts/alerts.jsx';
+
+const mapStateToProps = state => ({
+    visible: state.scratchGui.alerts.visible,
+    message: state.scratchGui.alerts.message
+});
+
+/* const mapDispatchToProps = dispatch => ({
+    onActivateDeckFactory: id => () => dispatch(activateDeck(id)),
+    onShowAll: () => {
+        dispatch(openTipsLibrary());
+        dispatch(closeCards());
+    },
+    onCloseCards: () => dispatch(closeCards()),
+    onNextStep: () => dispatch(nextStep()),
+    onPrevStep: () => dispatch(prevStep()),
+    onDrag: (e_, data) => dispatch(dragCard(data.x, data.y)),
+    onStartDrag: () => dispatch(startDrag()),
+    onEndDrag: () => dispatch(endDrag())
+}); */
+
+export default connect(
+    mapStateToProps
+)(AlertsComponent);

src/containers/gui.jsx

@@ -125,6 +125,7 @@ GUI.propTypes = {
 
 const mapStateToProps = (state, ownProps) => ({
     activeTabIndex: state.scratchGui.editorTab.activeTabIndex,
+    alertsVisible: state.scratchGui.alerts.visible,
     backdropLibraryVisible: state.scratchGui.modals.backdropLibrary,
     blocksTabVisible: state.scratchGui.editorTab.activeTabIndex === BLOCKS_TAB_INDEX,
     cardsVisible: state.scratchGui.cards.visible,

src/reducers/alerts.js

+const CLOSE_ALERT = 'scratch-gui/alerts/CLOSE_ALERT';
+
+const initialState = {
+    message: 'testing alerts!!',
+    visible: true
+};
+
+const reducer = function (state, action) {
+    if (typeof state === 'undefined') state = initialState;
+    switch (action.type) {
+    case CLOSE_ALERT:
+        return Object.assign({}, state, {
+            message: 'closing alert!'
+        });
+    default:
+        return state;
+    }
+};
+
+const closeAlert = function () {
+    return {type: CLOSE_ALERT};
+};
+
+export {
+    reducer as default,
+    initialState as alertsInitialState,
+    closeAlert
+};

src/reducers/gui.js

 import {applyMiddleware, compose, combineReducers} from 'redux';
+import alertsReducer, {alertsInitialState} from './alerts';
 import assetDragReducer, {assetDragInitialState} from './asset-drag';
 import cardsReducer, {cardsInitialState} from './cards';
 import colorPickerReducer, {colorPickerInitialState} from './color-picker';
@@ -24,6 +25,7 @@ import throttle from 'redux-throttle';
 const guiMiddleware = compose(applyMiddleware(throttle(300, {leading: true, trailing: true})));
 
 const guiInitialState = {
+    alerts: alertsInitialState,
     assetDrag: assetDragInitialState,
     blockDrag: blockDragInitialState,
     cards: cardsInitialState,
@@ -68,6 +70,7 @@ const initFullScreen = function (currentState) {
 };
 
 const guiReducer = combineReducers({
+    alerts: alertsReducer,
     assetDrag: assetDragReducer,
     blockDrag: blockDragReducer,
     cards: cardsReducer,