fixed scrolling of pages that are empty and removed filter from 404 and signin pages

common/styles.js

@@ -279,3 +279,12 @@ export const PROFILE_PREVIEW_GRID = (theme) => css`
     grid-template-columns: repeat(auto-fill, minmax(${theme.grids.profile.mobile.width}px, 1fr));
   }
 `;
+
+export const PAGE_CONTENT_WRAPPER = (theme) => css`
+  width: 100%;
+  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;
+  }
+`;

components/core/Application.js

@@ -520,7 +520,7 @@ export default class ApplicationPage extends React.Component {
         >
           <Filter
             isProfilePage={isProfilePage}
-            isActive={true}
+            isActive={page.id !== "NAV_SIGN_IN" && page.id !== "NAV_ERROR"}
             viewer={this.state.viewer}
             page={page}
             data={this.state.data}

components/core/EmptyState.js

@@ -5,7 +5,8 @@ import { css } from "@emotion/react";
 
 const STYLES_EMPTY_STATE = css`
   width: 100%;
-  height: 50vh;
+  height: 100%;
+  min-height: 50vh;
   color: ${Constants.semantic.textGray};
   display: flex;
   align-items: center;

components/core/Filter/Filters.js

@@ -153,7 +153,7 @@ function Profile({ viewer, data, page, onAction, ...props }) {
   const isOwner = viewer?.id === data.id;
 
   const [isFollowing, setIsFollowing] = React.useState(() =>
-    isOwner
+    isOwner || !viewer
       ? false
       : !!viewer?.following.some((entry) => {
           return entry.id === data.id;
@@ -161,7 +161,8 @@ function Profile({ viewer, data, page, onAction, ...props }) {
   );
 
   React.useEffect(() => {
-    let updatedIsFollowing = isOwner
+    let updatedIsFollowing =
+      isOwner || !viewer
         ? false
         : !!viewer?.following.some((entry) => {
             return entry.id === data.id;

components/core/Search/index.js

@@ -173,22 +173,13 @@ function Dismiss({ css, ...props }) {
  *  Content
  * -----------------------------------------------------------------------------------------------*/
 
-const STYLES_SEARCH_CONTENT = (theme) => css`
-  width: 100%;
-  min-height: 100vh;
-  padding: calc(20px + ${theme.sizes.filterNavbar}px) 24px 44px;
-  @media (max-width: ${theme.sizes.mobile}px) {
-    padding: calc(31px + ${theme.sizes.filterNavbar}px) 16px 44px;
-  }
-`;
-
 function Content({ onAction, viewer, page }) {
   const { results } = useSearchStore();
   const { files, slates } = results;
 
   if (results.files.length === 0 && results.slates.length === 0) {
     return (
-      <div css={STYLES_SEARCH_CONTENT}>
+      <div css={Styles.PAGE_CONTENT_WRAPPER}>
         <EmptyState>
           <FileTypeGroup />
           <div style={{ marginTop: 24 }}>Sorry we couldn&apos;t find any results.</div>
@@ -198,7 +189,7 @@ function Content({ onAction, viewer, page }) {
   }
 
   return (
-    <div css={STYLES_SEARCH_CONTENT}>
+    <div css={Styles.PAGE_CONTENT_WRAPPER}>
       <DataView
         key="scene-files-folder"
         isOwner={true}

scenes/SceneFilesFolder.js

@@ -18,15 +18,6 @@ const STYLES_SCENE_PAGE = css`
   }
 `;
 
-const STYLES_DATAVIEW_WRAPPER = (theme) => css`
-  width: 100%;
-  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 default function SceneFilesFolder({ viewer, page, onAction, isMobile }) {
   const [index, setIndex] = React.useState(-1);
 
@@ -49,7 +40,7 @@ export default function SceneFilesFolder({ viewer, page, onAction, isMobile }) {
           index={index}
           onChange={(index) => setIndex(index)}
         />
-        <div css={STYLES_DATAVIEW_WRAPPER}>
+        <div css={Styles.PAGE_CONTENT_WRAPPER}>
           {objects.length ? (
             <DataView
               key="scene-files-folder"

scenes/SceneProfile.js

@@ -23,15 +23,6 @@ const STYLES_LOADER = css`
   width: 100%;
 `;
 
-const STYLES_DATAVIEW_WRAPPER = (theme) => css`
-  width: 100%;
-  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 default class SceneProfile extends React.Component {
   state = {
     notFound: false,
@@ -169,10 +160,12 @@ export default class SceneProfile extends React.Component {
         url={`${Constants.hostname}${this.props.page.pathname}`}
       >
         <ScenePage>
+          <div css={Styles.PAGE_CONTENT_WRAPPER}>
             <EmptyState>
               <SVG.Users height="24px" style={{ marginBottom: 24 }} />
               <div>This user doesn't have any public content</div>
             </EmptyState>
+          </div>
         </ScenePage>
       </WebsitePrototypeWrapper>
     );
@@ -199,7 +192,7 @@ export default class SceneProfile extends React.Component {
         url={`${Constants.hostname}${this.props.page.pathname}`}
         image={image}
       >
-        <div css={STYLES_DATAVIEW_WRAPPER}>
+        <div css={Styles.PAGE_CONTENT_WRAPPER}>
           {user.library?.length ? (
             <DataView
               key="scene-files-folder"

scenes/SceneSlate.js

@@ -204,10 +204,12 @@ export default class SceneSlate extends React.Component {
           url={`${Constants.hostname}${this.props.page.pathname}`}
         >
           <ScenePage>
+            <div css={Styles.PAGE_CONTENT_WRAPPER}>
               <EmptyState>
                 <SVG.Layers height="24px" style={{ marginBottom: 24 }} />
                 <div>We were unable to locate that collection</div>
               </EmptyState>
+            </div>
           </ScenePage>
         </WebsitePrototypeWrapper>
       );
@@ -268,15 +270,6 @@ const STYLES_RESET_SCENE_PAGE_PADDING = css`
   }
 `;
 
-const STYLES_DATAVIEW_WRAPPER = (theme) => css`
-  width: 100%;
-  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;
-  }
-`;
-
 class SlatePage extends React.Component {
   _copy = null;
   _timeout = null;
@@ -452,7 +445,7 @@ class SlatePage extends React.Component {
               index={this.state.index}
               onChange={(index) => this.setState({ index })}
             />
-            <div css={STYLES_DATAVIEW_WRAPPER}>
+            <div css={Styles.PAGE_CONTENT_WRAPPER}>
               <DataView
                 key="scene-files-folder"
                 type="collection"
@@ -467,7 +460,7 @@ class SlatePage extends React.Component {
             </div>
           </>
         ) : isOwner ? (
-          <div>
+          <div css={Styles.PAGE_CONTENT_WRAPPER}>
             <EmptyState>
               <FileTypeGroup />
               <div style={{ marginTop: 24 }}>
@@ -476,7 +469,7 @@ class SlatePage extends React.Component {
             </EmptyState>
           </div>
         ) : (
-          <div>
+          <div css={Styles.PAGE_CONTENT_WRAPPER}>
             <EmptyState>There's nothing here :)</EmptyState>
           </div>
         )}

server.js

@@ -295,7 +295,7 @@ app.prepare().then(async () => {
 
     let viewer = null;
     if (id) {
-      viewer = await Data.getUserById({
+      viewer = await ViewerManager.getById({
         id,
       });
     }