fix(EmptyState): use Styles.PAGE_EMPTY_STATE_WRAPPER

common/styles.js

@@ -282,9 +282,18 @@ export const PROFILE_PREVIEW_GRID = (theme) => css`
 
 export const PAGE_CONTENT_WRAPPER = (theme) => css`
   width: 100%;
-  min-height: calc(100vh - ${theme.sizes.filterNavbar}px) - ${theme.sizes.header}px;
+  min-height: calc(100vh - ${theme.sizes.filterNavbar}px - ${theme.sizes.header}px);
   padding: 20px 20px 44px;
   @media (max-width: ${theme.sizes.mobile}px) {
     padding: 16px 16px 44px;
   }
 `;
+
+export const PAGE_EMPTY_STATE_WRAPPER = (theme) => css`
+  height: calc(100vh - ${theme.sizes.filterNavbar + theme.sizes.header}px);
+  padding: 20px;
+  @media (max-width: ${theme.sizes.mobile}px) {
+    padding: 0px;
+    height: calc(100vh - ${theme.sizes.header}px - 44px);
+  }
+`;

components/core/EmptyState.js

@@ -4,9 +4,9 @@ import { css } from "@emotion/react";
 
 const STYLES_EMPTY_STATE = (theme) => css`
   position: relative;
-  width: 100%;
   height: 100%;
   min-height: 50vh;
+  padding: 20px;
   color: ${theme.semantic.textGray};
   background-color: ${theme.semantic.bgLight};
   display: flex;
@@ -14,7 +14,6 @@ const STYLES_EMPTY_STATE = (theme) => css`
   justify-content: center;
   flex-direction: column;
   text-align: center;
-  margin-top: 48px;
 `;
 
 const STYLES_EMPTY_FRAME = (theme) => css`

components/core/Search/index.js

@@ -179,7 +179,7 @@ function Content({ onAction, viewer, page }) {
 
   if (results.files.length === 0 && results.slates.length === 0) {
     return (
-      <div css={Styles.PAGE_CONTENT_WRAPPER}>
+      <div css={Styles.PAGE_EMPTY_STATE_WRAPPER}>
         <EmptyState>
           <FileTypeGroup />
           <div style={{ marginTop: 24 }}>No results found</div>

scenes/SceneFilesFolder.js

@@ -21,16 +21,6 @@ const STYLES_SCENE_PAGE = css`
   }
 `;
 
-const STYLES_EMPTY_STATE_WRAPPER = (theme) => css`
-  // NOTE(amine): 100vh - headers' height - Dataviewer's bottom padding
-  height: calc(100vh - ${theme.sizes.filterNavbar + theme.sizes.header}px - 44px);
-  margin: 20px;
-  @media (max-width: ${theme.sizes.mobile}px) {
-    margin: 0px;
-    height: calc(100vh - ${theme.sizes.header}px - 44px);
-  }
-`;
-
 const STYLES_EMPTY_STATE_DEMO = (theme) => css`
   margin-top: 36px;
   @media (max-width: ${theme.sizes.mobile}px) {
@@ -71,7 +61,7 @@ export default function SceneFilesFolder({ viewer, page, onAction, isMobile }) {
           index={index}
           onChange={(index) => setIndex(index)}
         />
-        {objects.length > 0 ? (
+        {objects.length ? (
           <div css={Styles.PAGE_CONTENT_WRAPPER}>
             <TagsOnboarding onAction={onAction} viewer={viewer} isMobile={isMobile}>
               <DataView
@@ -86,24 +76,26 @@ export default function SceneFilesFolder({ viewer, page, onAction, isMobile }) {
             </TagsOnboarding>
           </div>
         ) : (
-          <EmptyState css={STYLES_EMPTY_STATE_WRAPPER}>
-            <FileTypeGroup />
-            <div css={STYLES_EMPTY_STATE_DEMO}>
-              <System.H5 as="p" color="textDark" style={{ textAlign: "center" }}>
-                Use
-                <span
-                  css={STYLES_UPLOAD_BUTTON}
-                  style={{ marginLeft: 8, marginRight: 8, position: "relative", top: 2 }}
-                >
-                  <SVG.Plus height="16px" />
-                </span>
-                on the top right corner <br />
-              </System.H5>
-              <System.H5 as="p" color="textDark" style={{ marginTop: 4, textAlign: "center" }}>
-                or drop files {isMobile ? <span> on desktop</span> : null} to save to Slate
-              </System.H5>
-            </div>
-          </EmptyState>
+          <div css={Styles.PAGE_EMPTY_STATE_WRAPPER}>
+            <EmptyState>
+              <FileTypeGroup />
+              <div css={STYLES_EMPTY_STATE_DEMO}>
+                <System.H5 as="p" color="textDark" style={{ textAlign: "center" }}>
+                  Use
+                  <span
+                    css={STYLES_UPLOAD_BUTTON}
+                    style={{ marginLeft: 8, marginRight: 8, position: "relative", top: 2 }}
+                  >
+                    <SVG.Plus height="16px" />
+                  </span>
+                  on the top right corner <br />
+                </System.H5>
+                <System.H5 as="p" color="textDark" style={{ marginTop: 4, textAlign: "center" }}>
+                  or drop files {isMobile ? <span> on desktop</span> : null} to save to Slate
+                </System.H5>
+              </div>
+            </EmptyState>
+          </div>
         )}
       </ScenePage>
     </WebsitePrototypeWrapper>

scenes/SceneProfile.js

@@ -160,7 +160,7 @@ export default class SceneProfile extends React.Component {
         url={`${Constants.hostname}${this.props.page.pathname}`}
       >
         <ScenePage>
-          <div css={Styles.PAGE_CONTENT_WRAPPER}>
+          <div css={Styles.PAGE_EMPTY_STATE_WRAPPER}>
             <EmptyState>
               <SVG.Users height="24px" style={{ marginBottom: 24 }} />
               <div>This user doesn't have any public content</div>

scenes/SceneSlate.js

@@ -232,7 +232,7 @@ export default class SceneSlate extends React.Component {
           url={`${Constants.hostname}${this.props.page.pathname}`}
         >
           <ScenePage>
-            <div css={Styles.PAGE_CONTENT_WRAPPER}>
+            <div css={Styles.PAGE_EMPTY_STATE_WRAPPER}>
               <EmptyState>
                 <SVG.Layers height="24px" style={{ marginBottom: 24 }} />
                 <div>We were unable to locate that collection</div>
@@ -486,7 +486,7 @@ class SlatePage extends React.Component {
             </div>
           </>
         ) : isOwner ? (
-          <div css={Styles.PAGE_CONTENT_WRAPPER}>
+          <div css={Styles.PAGE_EMPTY_STATE_WRAPPER}>
             <EmptyState>
               <FileTypeGroup />
               <div css={STYLES_EMPTY_STATE_DEMO}>
@@ -508,9 +508,7 @@ class SlatePage extends React.Component {
             </EmptyState>
           </div>
         ) : (
-          <div>
-            <EmptyState>There's nothing here :)</EmptyState>
-          </div>
+          <EmptyState>There's nothing here :)</EmptyState>
         )}
         <input
           ref={(c) => {

scenes/SceneSlates.js

@@ -79,15 +79,17 @@ export default class SceneSlates extends React.Component {
                   ))}
                 </div>
               ) : (
-                <EmptyState>
-                  <FileTypeGroup />
-                  <div style={{ marginTop: 24 }}>
-                    Use collections to create mood boards, share files, and organize research.
-                  </div>
-                  <ButtonSecondary onClick={this._handleAdd} style={{ marginTop: 32 }}>
-                    Create collection
-                  </ButtonSecondary>
-                </EmptyState>
+                <div css={Styles.PAGE_EMPTY_STATE_WRAPPER}>
+                  <EmptyState>
+                    <FileTypeGroup />
+                    <div style={{ marginTop: 24 }}>
+                      Use collections to create mood boards, share files, and organize research.
+                    </div>
+                    <ButtonSecondary onClick={this._handleAdd} style={{ marginTop: 32 }}>
+                      Create collection
+                    </ButtonSecondary>
+                  </EmptyState>
+                </div>
               )
             ) : null}