Changing alert to 'peripheral error'.

src/components/alerts/alert.css

@@ -17,6 +17,8 @@
     background: orange;
     height: 60px;
     width: 300px;
+    line-height: 60px;
+    color: $ui-white;
     z-index: 20;
     overflow: hidden;
     box-shadow: 0px 5px 25px 5px $ui-black-transparent;

src/lib/vm-listener-hoc.jsx

@@ -37,7 +37,7 @@ const vmListenerHOC = function (WrappedComponent) {
             this.props.vm.on('TURBO_MODE_OFF', this.props.onTurboModeOff);
             this.props.vm.on('PROJECT_RUN_START', this.props.onProjectRunStart);
             this.props.vm.on('PROJECT_RUN_STOP', this.props.onProjectRunStop);
-            this.props.vm.on('PERIPHERAL_CONNECTED', this.props.onShowAlert);
+            this.props.vm.on('PERIPHERAL_ERROR', this.props.onShowAlert);
         }
         componentDidMount () {
             if (this.props.attachKeyboardEvents) {
@@ -110,10 +110,10 @@ const vmListenerHOC = function (WrappedComponent) {
         onMonitorsUpdate: PropTypes.func.isRequired,
         onProjectRunStart: PropTypes.func.isRequired,
         onProjectRunStop: PropTypes.func.isRequired,
+        onShowAlert: PropTypes.func.isRequired,
         onTargetsUpdate: PropTypes.func.isRequired,
         onTurboModeOff: PropTypes.func.isRequired,
         onTurboModeOn: PropTypes.func.isRequired,
-        onViewAlert: PropTypes.func.isRequired,
         username: PropTypes.string,
         vm: PropTypes.instanceOf(VM).isRequired
     };

src/reducers/alerts.js

@@ -2,7 +2,7 @@ const CLOSE_ALERT = 'scratch-gui/alerts/CLOSE_ALERT';
 const SHOW_ALERT = 'scratch-gui/alerts/SHOW_ALERT';
 
 const initialState = {
-    message: 'testing alerts!!',
+    message: 'Peripheral error',
     visible: false
 };
 
@@ -15,7 +15,7 @@ const reducer = function (state, action) {
         });
     case CLOSE_ALERT:
         return Object.assign({}, state, {
-            message: 'closing alert!'
+            message: 'Closing alert!'
         });
     default:
         return state;