style messages

opentech/static_src/src/app/src/components/MessageBar/index.js

@@ -4,12 +4,15 @@ import PropTypes from 'prop-types'
 import { MESSAGE_TYPES } from '@actions/messages'
 
 const MessageBar = ({ message, type, onDismiss }) => {
+    const modifierClass = type ? `messages__text--${type}` : '';
 
     return (
-        <div className={type}>
-            <p>{message}</p>
-            {onDismiss && <button onClick={onDismiss}>[X]</button>}
-        </div>
+        <li className={`messages__text ${modifierClass}`}>
+            <div className="messages__inner">
+                <p className="messages__copy">{message}</p>
+                {onDismiss && <button className="messages__button" onClick={onDismiss}>Ok</button>}
+            </div>
+        </li>
     )
 }
 

opentech/static_src/src/app/src/containers/MessagesContainer.js

 import React from 'react'
 import { connect } from 'react-redux'
+import PropTypes from 'prop-types'
 
 import MessageBar from '@components/MessageBar'
 import { getMessages } from '@selectors/messages'
 import { dismissMessage } from '@actions/messages'
 
 const MessagesContainer = ({ messages, dismiss }) => {
-    return Object.values(messages).map(({ message, type, id}) =>
-        <MessageBar key={id} message={message} type={type}
-            onDismiss={() => dismiss(id)} />
+    return (
+        <ul className="messages">
+            {Object.values(messages).map(({ message, type, id}) =>
+                <MessageBar key={id} message={message} type={type}
+                    onDismiss={() => dismiss(id)} />
+            )}
+        </ul>
     )
 }
 
@@ -20,4 +25,9 @@ const mapDispatchToProps = dispatch => ({
     dismiss: id => dispatch(dismissMessage(id)),
 })
 
+MessagesContainer.propTypes = {
+    messages: PropTypes.object,
+    dismiss: PropTypes.func,
+}
+
 export default connect(mapStateToProps, mapDispatchToProps)(MessagesContainer)