Add empty states for curators and projects

src/views/studio/l10n.json

@@ -11,6 +11,10 @@
     "studio.projectsHeader": "Projects",
     "studio.addProjectsHeader": "Add Projects",
     "studio.addProject": "Add",
+    "studio.projectsEmptyCanAdd1": "Your studio is looking a little empty.",
+    "studio.projectsEmptyCanAdd2": "Add your first project!",
+    "studio.projectsEmpty1": "This studio has no projects yet.",
+    "studio.projectsEmpty2": "Suggest projects you want to add in the comments!",
 
     "studio.creatorRole": "Studio Creator",
 
@@ -23,6 +27,9 @@
     "studio.inviteCuratorsHeader": "Invite Curators",
     "studio.inviteCurator": "Invite",
     "studio.curatorAcceptInvite": "Accept Invite",
+    "studio.curatorsEmptyCanAdd1": "You don’t have curators right now.",
+    "studio.curatorsEmptyCanAdd2": "Add some curators to collaborate with!",
+    "studio.curatorsEmpty1": "This studio has no curators right now.",
 
     "studio.commentsHeader": "Comments"
 }
\ No newline at end of file

src/views/studio/studio-curators.jsx

@@ -2,6 +2,7 @@ import React, {useEffect} from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import {FormattedMessage} from 'react-intl';
+import classNames from 'classnames';
 
 import {curators} from './lib/redux-modules';
 import Debug from './debug.jsx';
@@ -27,6 +28,27 @@ const StudioCurators = ({
             data={error}
         />}
         <div className="studio-members-grid">
+            {items.length === 0 && !loading ? (
+                <div className="studio-empty">
+                    <img
+                        width="179"
+                        height="111"
+                        className="studio-empty-img"
+                        src="/images/studios/curators-empty.png"
+                    />
+                    {canInviteCurators ? (
+                        <div className="studio-empty-msg">
+                            <div><FormattedMessage id="studio.curatorsEmptyCanAdd1" /></div>
+                            <div><FormattedMessage id="studio.curatorsEmptyCanAdd2" /></div>
+                        </div>
+                    ) : (
+                        <div className="studio-empty-msg">
+                            <div><FormattedMessage id="studio.curatorsEmpty1" /></div>
+                        </div>
+                    )}
+                </div>
+            ) : (
+                <React.Fragment>
                     {items.map(item =>
                         (<CuratorTile
                             key={item.username}
@@ -34,15 +56,20 @@ const StudioCurators = ({
                             image={item.profile.images['90x90']}
                         />)
                     )}
+                    {moreToLoad &&
                         <div className="studio-members-load-more">
-                {loading ? <small>Loading...</small> : (
-                    moreToLoad ?
-                        <button onClick={onLoadMore}>
+                            <button
+                                className={classNames('button', {
+                                    'mod-mutating': loading
+                                })}
+                                onClick={onLoadMore}
+                            >
                                 <FormattedMessage id="general.loadMore" />
-                        </button> :
-                        <small>No more to load</small>
-                )}
+                            </button>
                         </div>
+                    }
+                </React.Fragment>
+            )}
         </div>
     </div>);
 };

src/views/studio/studio-managers.jsx

@@ -2,6 +2,7 @@ import React, {useEffect} from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import {FormattedMessage} from 'react-intl';
+import classNames from 'classnames';
 
 import {managers} from './lib/redux-modules';
 import {loadManagers} from './lib/studio-member-actions';
@@ -30,15 +31,18 @@ const StudioManagers = ({items, error, loading, moreToLoad, onLoadMore}) => {
                         image={item.profile.images['90x90']}
                     />)
                 )}
+                {moreToLoad &&
                     <div className="studio-members-load-more">
-                    {loading ? <small>Loading...</small> : (
-                        moreToLoad ?
-                            <button onClick={onLoadMore}>
+                        <button
+                            className={classNames('button', {
+                                'mod-mutating': loading
+                            })}
+                            onClick={onLoadMore}
+                        >
                             <FormattedMessage id="general.loadMore" />
-                            </button> :
-                            <small>No more to load</small>
-                    )}
+                        </button>
                     </div>
+                }
             </div>
         </div>
     );

src/views/studio/studio-projects.jsx

@@ -10,6 +10,7 @@ import Debug from './debug.jsx';
 import StudioProjectAdder from './studio-project-adder.jsx';
 import StudioProjectTile from './studio-project-tile.jsx';
 import {loadProjects} from './lib/studio-project-actions.js';
+import classNames from 'classnames';
 
 const StudioProjects = ({
     canAddProjects, canEditOpenToAll, items, error, loading, moreToLoad, onLoadMore
@@ -28,6 +29,38 @@ const StudioProjects = ({
                 data={error}
             />}
             <div className="studio-projects-grid">
+                {items.length === 0 && !loading ? (
+                    <div className="studio-empty">
+                        {canAddProjects ? (
+                            <React.Fragment>
+                                <img
+                                    width="388"
+                                    height="265"
+                                    className="studio-empty-img"
+                                    src="/images/studios/projects-empty-can-add.png"
+                                />
+                                <div className="studio-empty-msg">
+                                    <div><FormattedMessage id="studio.projectsEmptyCanAdd1" /></div>
+                                    <div><FormattedMessage id="studio.projectsEmptyCanAdd2" /></div>
+                                </div>
+                            </React.Fragment>
+                        ) : (
+                            <React.Fragment>
+                                <img
+                                    width="186"
+                                    height="138"
+                                    className="studio-empty-img"
+                                    src="/images/studios/projects-empty.png"
+                                />
+                                <div className="studio-empty-msg">
+                                    <div><FormattedMessage id="studio.projectsEmpty1" /></div>
+                                    <div><FormattedMessage id="studio.projectsEmpty2" /></div>
+                                </div>
+                            </React.Fragment>
+                        )}
+                    </div>
+                ) : (
+                    <React.Fragment>
                         {items.map(item =>
                             (<StudioProjectTile
                                 fetching={loading}
@@ -40,15 +73,20 @@ const StudioProjects = ({
                                 addedBy={item.actor_id}
                             />)
                         )}
+                        {moreToLoad &&
                             <div className="studio-projects-load-more">
-                    {loading ? <small>Loading...</small> : (
-                        moreToLoad ?
-                            <button onClick={onLoadMore}>
+                                <button
+                                    className={classNames('button', {
+                                        'mod-mutating': loading
+                                    })}
+                                    onClick={onLoadMore}
+                                >
                                     <FormattedMessage id="general.loadMore" />
-                            </button> :
-                            <small>No more to load</small>
-                    )}
+                                </button>
                             </div>
+                        }
+                    </React.Fragment>
+                )}
             </div>
         </div>
     );

src/views/studio/studio.scss

@@ -236,6 +236,22 @@ $radius: 8px;
     }
 }
 
+.studio-empty {
+    grid-column: 1 / -1; /* take up all columns */
+    text-align: center;
+
+    .studio-empty-img {
+        margin-top: 45px;
+        margin-bottom: 25px;
+    }
+
+    .studio-empty-msg {
+        font-size: 20px;
+        line-height: 30px;
+        font-style: italic;
+    }
+}
+
 /* Modification classes for different interaction states */
 .mod-fetching { /* When a field has no content to display yet */
     position: relative;