add empty states and done button

src/views/studio/l10n.json

@@ -23,6 +23,11 @@
 
     "studio.openToAll": "Anyone can add projects",
 
+    "studio.addProjects.noSharedYet": "You don’t have shared projects that you can add to this studio yet.",
+    "studio.addProjects.noFavoritedYet": "You don’t have favorite projects that you can add to this studio yet.",
+    "studio.addProjects.noRecentYet": "You don’t have recently viewed projects that you can add to this studio yet.",
+    "studio.addProjects.noStudentsYet": "You don’t have student projects that you can add to this studio yet.",
+
     "studio.projectsEmptyCanAdd1": "Your studio is looking a little empty.",
     "studio.projectsEmptyCanAdd2": "Add your first project!",
     "studio.projectsEmpty1": "This studio has no projects yet.",

src/views/studio/modals/user-projects-modal.jsx

@@ -77,33 +77,61 @@ const UserProjectsModal = ({
                 <AlertProvider>
                     {error && <div>Error loading {filter}: {error}</div>}
                     <Alert className="studio-alert" />
-                    <div className="user-projects-modal-grid">
+                    {items.length > 0 ? (
-                        {items.map(project => (
+                        <React.Fragment>
-                            <UserProjectsTile
+                            <div className="user-projects-modal-grid">
-                                key={project.id}
+                                {items.map(project => (
-                                id={project.id}
+                                    <UserProjectsTile
-                                title={project.title}
+                                        key={project.id}
-                                image={project.image}
+                                        id={project.id}
-                                inStudio={project.inStudio}
+                                        title={project.title}
-                                onAdd={onAdd}
+                                        image={project.image}
-                                onRemove={onRemove}
+                                        inStudio={project.inStudio}
+                                        onAdd={onAdd}
+                                        onRemove={onRemove}
+                                    />
+                                ))}
+                            </div>
+                            {moreToLoad &&
+                                <div className="studio-projects-load-more">
+                                    <button
+                                        className={classNames('button', {
+                                            'mod-mutating': loading
+                                        })}
+                                        onClick={() => onLoadMore(filter)}
+                                    >
+                                        <FormattedMessage id="general.loadMore" />
+                                    </button>
+                                </div>
+                            }
+                        </React.Fragment>
+                    ) :
+                        <div>
+                            <img
+                                src="/svgs/studio/add-to-studio-empty.svg"
                             />
-                        ))}
+                            <div>
-                    </div>
+                                {filter === Filters.SHARED &&
-                    {moreToLoad &&
+                                    <FormattedMessage id="studio.addProjects.noSharedYet" />}
-                        <div className="studio-projects-load-more">
+                                {filter === Filters.FAVORITED &&
-                            <button
+                                    <FormattedMessage id="studio.addProjects.noFavoritedYet" />}
-                                className={classNames('button', {
+                                {filter === Filters.RECENT &&
-                                    'mod-mutating': loading
+                                    <FormattedMessage id="studio.addProjects.noRecentYet" />}
-                                })}
+                                {filter === Filters.STUDENTS &&
-                                onClick={() => onLoadMore(filter)}
+                                    <FormattedMessage id="studio.addProjects.noStudentsYet" />}
-                            >
+                            </div>
-                                <FormattedMessage id="general.loadMore" />
-                            </button>
                         </div>
                     }
                 </AlertProvider>
             </ModalInnerContent>
+            <div className="studio-projects-done-row">
+                <button
+                    className="button"
+                    onClick={onRequestClose}
+                >
+                    <FormattedMessage id="general.done" />
+                </button>
+            </div>
         </Modal>
     );
 };

src/views/studio/modals/user-projects-modal.scss

@@ -22,19 +22,26 @@
     .user-projects-modal-content {
         padding: 0 30px 30px;
         background: #E9F1FC;
-        max-height: calc(100vh - 200px);
+        min-height: 300px;
+        max-height: calc(100vh - 270px);
         overflow-y: auto;
         overscroll-behavior: contain;
         border-bottom-left-radius: 12px;
         border-bottom-right-radius: 12px;
         @media #{$intermediate-and-smaller} {
-            & { max-height: calc(100vh - 105px); }
+            & { max-height: calc(100vh - 175px); }
         }
     }
 
     .studio-projects-load-more {
         display: contents;
     }
+
+    .studio-projects-done-row {
+        display: flex;
+        justify-content: flex-end;
+        padding: 6px 12px;
+    }
 }
 
 .studio-tile-added {

static/svgs/studio/add-to-studio-empty.svg

@@ -0,0 +1,46 @@
+<svg width="108" height="100" viewBox="0 0 108 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d)">
+<rect x="4" y="4" width="61.0169" height="53.6164" rx="8" fill="#E5F0FF"/>
+<rect x="6" y="6" width="57.0169" height="49.6164" rx="6" stroke="#4D97FF" stroke-opacity="0.4" stroke-width="4"/>
+</g>
+<path d="M4 12C4 7.58172 7.58172 4 12 4H57.0169C61.4352 4 65.0169 7.58172 65.0169 12V38.5912H4V12Z" fill="#4D97FF" fill-opacity="0.4"/>
+<g filter="url(#filter1_d)">
+<rect x="23.4912" y="23.0249" width="61.0169" height="53.6164" rx="8" fill="#E5F0FF"/>
+<rect x="25.4912" y="25.0249" width="57.0169" height="49.6164" rx="6" stroke="#4D97FF" stroke-opacity="0.4" stroke-width="4"/>
+</g>
+<path d="M23.4912 31.0249C23.4912 26.6066 27.0729 23.0249 31.4912 23.0249H76.5082C80.9264 23.0249 84.5082 26.6066 84.5082 31.0249V57.6161H23.4912V31.0249Z" fill="#4D97FF" fill-opacity="0.4"/>
+<g filter="url(#filter2_d)">
+<rect x="42.9834" y="42.0505" width="61.0169" height="53.6164" rx="8" fill="#E5F0FF"/>
+<rect x="44.9834" y="44.0505" width="57.0169" height="49.6164" rx="6" stroke="#4D97FF" stroke-opacity="0.4" stroke-width="4"/>
+</g>
+<path d="M42.9834 50.0505C42.9834 45.6323 46.5651 42.0505 50.9834 42.0505H96.0003C100.419 42.0505 104 45.6323 104 50.0505V76.6417H42.9834V50.0505Z" fill="#4D97FF" fill-opacity="0.4"/>
+<defs>
+<filter id="filter0_d" x="0" y="0" width="69.0169" height="61.6164" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feMorphology radius="4" operator="dilate" in="SourceAlpha" result="effect1_dropShadow"/>
+<feOffset/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.92549 0 0 0 0 0.956863 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+<filter id="filter1_d" x="19.4912" y="19.0249" width="69.0169" height="61.6164" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feMorphology radius="4" operator="dilate" in="SourceAlpha" result="effect1_dropShadow"/>
+<feOffset/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.92549 0 0 0 0 0.956863 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+<filter id="filter2_d" x="38.9834" y="38.0505" width="69.0169" height="61.6164" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+<feMorphology radius="4" operator="dilate" in="SourceAlpha" result="effect1_dropShadow"/>
+<feOffset/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.92549 0 0 0 0 0.956863 0 0 0 0 1 0 0 0 1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+</filter>
+</defs>
+</svg>