Add empty state for What's Happening box

src/components/activity/activity.jsx

 var React = require('react');
 var ReactIntl = require('react-intl');
 var defineMessages = ReactIntl.defineMessages;
+var FormattedMessage = ReactIntl.FormattedMessage;
 var FormattedRelative = ReactIntl.FormattedRelative;
 var injectIntl = ReactIntl.injectIntl;
 
@@ -32,6 +33,7 @@ var Activity = React.createClass({
                 className="activity"
                 title={formatMessage(defaultMessages.whatsHappening)}>
 
+                {this.props.items && this.props.items.length > 0 ? [
                     <ul>
                         {this.props.items.map(function (item) {
                             var actorProfileUrl = '/users/' + item.actor.username + '/';
@@ -55,6 +57,20 @@ var Activity = React.createClass({
                                 }
                         })}
                     </ul>
+                ] : [
+                    <div className="empty">
+                        <h4>
+                            <FormattedMessage
+                                id="activity.seeUpdates"
+                                defaultMessage="This is where you will see updates from Scratchers you follow" />
+                        </h4>
+                        <a href="/studios/146521/">
+                            <FormattedMessage
+                                id="activity.checkOutScratchers"
+                                defaultMessage="Check out some Scratchers you might like to follow" />
+                        </a>
+                    </div>
+                ]}
             </Box>
         );
     }

src/components/box/box.scss

@@ -44,4 +44,8 @@ $base-bg: $ui-white;
         background-color: $base-bg;
         padding: 8px 20px;
     }
+
+    .empty {
+        margin-top: 20px;
+    }
 }

src/main.scss

@@ -52,6 +52,20 @@ a:hover {
     width: 942px;
 }
 
+.empty {
+    $bg-blue: #d9edf7;
+    $bg-blue-accent: #bce8f1;
+    border: 1px solid $bg-blue-accent;
+    border-radius: 5px;
+    background-color: $bg-blue;
+    text-align: center;
+    line-height: 2rem;
+    color: $type-gray;
+    h4 {
+        color: $type-gray;
+    }
+}
+
 #view {
     /* NOTE: Margin should match height in navigation.scss */
     margin-top: 50px;