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,29 +33,44 @@ var Activity = React.createClass({
                 className="activity"
                 title={formatMessage(defaultMessages.whatsHappening)}>
 
-                <ul>
-                    {this.props.items.map(function (item) {
-                        var actorProfileUrl = '/users/' + item.actor.username + '/';
-                        var actionDate = new Date(item.datetime_created + 'Z');
-                        var activityMessageHTML = '<a href=' + actorProfileUrl + '>' +
-                            item.actor.username + '</a>' + item.message;
-                        if (item.message.replace(/\s/g, '')) {
-                            return (
-                                <li key={item.pk}>
-                                    <a href={actorProfileUrl}>
-                                        <img src={item.actor.thumbnail_url} width="34" height="34" />
-                                        <p dangerouslySetInnerHTML={{__html: activityMessageHTML}}></p>
-                                        <p>
-                                            <span className="stamp">
-                                                <FormattedRelative value={actionDate} />
-                                            </span>
-                                        </p>
-                                    </a>
-                                </li>
-                            );
-                        }
-                    })}
-                </ul>
+                {this.props.items && this.props.items.length > 0 ? [
+                    <ul>
+                        {this.props.items.map(function (item) {
+                            var actorProfileUrl = '/users/' + item.actor.username + '/';
+                            var actionDate = new Date(item.datetime_created + 'Z');
+                            var activityMessageHTML = '<a href=' + actorProfileUrl + '>' +
+                                item.actor.username + '</a>' + item.message;
+                                if (item.message.replace(/\s/g, '')) {
+                                    return (
+                                        <li key={item.pk}>
+                                            <a href={actorProfileUrl}>
+                                                <img src={item.actor.thumbnail_url} width="34" height="34" />
+                                                <p dangerouslySetInnerHTML={{__html: activityMessageHTML}}></p>
+                                                <p>
+                                                    <span className="stamp">
+                                                        <FormattedRelative value={actionDate} />
+                                                    </span>
+                                                </p>
+                                            </a>
+                                        </li>
+                                    );
+                                }
+                        })}
+                    </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;