fix formatting for numbers and for dismiss icon

fixes #1494

src/views/messages/message-rows/admin-message.jsx

@@ -21,10 +21,10 @@ var AdminMessage = React.createClass({
                     </span>
                     <Button
                         className="mod-admin-message-dismiss"
-                        onClick={this.props.onDismiss.bind(this, 'notification', this.props.id)}
+                        onClick={this.props.onDismiss}
                     >
                         <img
-                            className="mod-admin-message-icon"
+                            className="admin-message-icon"
                             src="/svgs/modal/close-x.svg"
                             alt="close-icon"
                         />

src/views/messages/message-rows/scratcher-invite.jsx

@@ -25,11 +25,7 @@ var AdminMessage = injectIntl(React.createClass({
                     </span>
                     <Button
                         className="mod-scratcher-invite-dismiss"
-                        onClick={
-                            function () {
-                                this.props.onDismiss('invite', this.props.id);
-                            }.bind(this)
-                        }
+                        onClick={this.props.onDismiss}
                     >
                         <img
                             className="mod-scratcher-invite-icon"

src/views/messages/messages.scss

@@ -39,6 +39,20 @@
     list-style-type: none;
 }
 
+.messages-header {
+    display: flex;
+    align-items: center;
+}
+
+.messages-header-unread {
+    margin-left: 1rem;
+    border-radius: 1rem;
+    background-color: $ui-orange;
+    padding: .25rem .5rem;
+    line-height: 1rem;
+    color: $type-white;
+}
+
 .admin-message {
     border: 1px solid darken($ui-gray, 10);
     border-radius: 5px;
@@ -51,6 +65,10 @@
     align-items: center;
 }
 
+.admin-message-icon {
+    vertical-align: middle;
+}
+
 .admin-message-content {
     margin: 0;
 }
@@ -70,14 +88,6 @@
     }
 }
 
-.messages-social-title-unread {
-    margin-left: 1rem;
-    border-radius: 1rem;
-    background-color: $ui-orange;
-    padding: .25rem .5rem;
-    color: $type-white;
-}
-
 .messages-social-list {
     border: 1px solid $ui-border;
     border-bottom-width: 0;

src/views/messages/presentation.jsx

@@ -181,11 +181,11 @@ var SocialMessagesList = React.createClass({
             <section className="messages-social">
                 {this.props.messages.length > 0 ? [
                     <div className="messages-social-title" key="messages-social-title">
-                        <h4>
+                        <h4 className="messages-header">
                             <FormattedMessage id='messages.messageTitle' />
-                            <span className="messages-social-title-unread">
+                            <div className="messages-header-unread">
                                 <FormattedNumber value={this.props.numNewMessages} />
-                            </span>
+                            </div>
                         </h4>
                     </div>,
                     <ul className="messages-social-list" key="messages-social-list">
@@ -270,11 +270,11 @@ var MessagesPresentation = injectIntl(React.createClass({
                     {this.props.adminMessages.length > 0 || Object.keys(this.props.scratcherInvite).length > 0 ? [
                         <section className="messages-admin">
                             <div className="messages-admin-title">
-                                <h4>
+                                <h4 className="messages-header">
                                     <FormattedMessage id='messages.scratchTeamTitle' />
-                                    <span className="messages-social-title-unread">
+                                    <div className="messages-header-unread">
                                         <FormattedNumber value={adminMessageLength} />
-                                    </span>
+                                    </div>
                                 </h4>
                             </div>
                             <ul className="messages-admin-list">
@@ -283,7 +283,9 @@ var MessagesPresentation = injectIntl(React.createClass({
                                         id={this.props.scratcherInvite.id}
                                         username={this.props.user.username}
                                         datetimeCreated={this.props.scratcherInvite.datetime_created}
-                                        onDismiss={this.props.handleAdminDismiss}
+                                        onDismiss={function () {
+                                            this.props.handleAdminDismiss('invite', this.props.scratcherInvite.id);
+                                        }.bind(this)}
                                     />
                                 ] : []}
                                 {this.props.adminMessages.map(function (item) {
@@ -292,11 +294,9 @@ var MessagesPresentation = injectIntl(React.createClass({
                                         id={item.id}
                                         message={item.message}
                                         datetimeCreated={item.datetime_created}
-                                        onDismiss={
-                                            function () {
+                                        onDismiss={function () {
                                             this.props.handleAdminDismiss('notification', item.id);
-                                            }.bind(this)
-                                        }
+                                        }.bind(this)}
                                     />;
                                 }.bind(this))}
                             </ul>