From db2949b5c19a523a379deb4373ed76efba8175f3 Mon Sep 17 00:00:00 2001
From: Aminejv <elouartinra@hotmail.com>
Date: Fri, 19 Nov 2021 20:28:25 +0100
Subject: [PATCH] fix(EmptyState): update mobile empty state

---
 components/core/ApplicationLayout.js |  5 ----
 components/core/EmptyState.js        |  4 +++
 components/core/FileTypeIcon.js      | 12 +++-----
 components/core/Filter/Content.js    | 43 ++++++++++++++++++++++------
 components/core/Upload/Popup.js      |  6 ++--
 5 files changed, 47 insertions(+), 23 deletions(-)

diff --git a/components/core/ApplicationLayout.js b/components/core/ApplicationLayout.js
index f42a6915..33020311 100644
--- a/components/core/ApplicationLayout.js
+++ b/components/core/ApplicationLayout.js
@@ -32,11 +32,6 @@ const STYLES_CONTENT = css`
   min-width: 10%;
   min-height: 100vh;
   position: relative;
-
-  @media (max-width: ${Constants.sizes.mobile}px) {
-    padding-left: 0px;
-    padding: 0 0 88px 0;
-  }
 `;
 
 const STYLES_SIDEBAR_ELEMENTS = css`
diff --git a/components/core/EmptyState.js b/components/core/EmptyState.js
index 4a9c214f..2190dac7 100644
--- a/components/core/EmptyState.js
+++ b/components/core/EmptyState.js
@@ -24,6 +24,10 @@ const STYLES_EMPTY_FRAME = (theme) => css`
   border-left: 2px solid;
   border-top: 2px solid;
   border-color: ${theme.semantic.borderGrayLight4};
+
+  @media (max-width: ${theme.sizes.mobile}px) {
+    display: none;
+  }
 `;
 
 export default function EmptyState({ children, css, ...props }) {
diff --git a/components/core/FileTypeIcon.js b/components/core/FileTypeIcon.js
index 32443f77..1d99da64 100644
--- a/components/core/FileTypeIcon.js
+++ b/components/core/FileTypeIcon.js
@@ -48,22 +48,18 @@ export function FileTypeIcon({ file, ...props }) {
 
 const STYLES_FILE_TYPE_GROUP_WRAPPER = (theme) => css`
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(4, 120px);
   grid-gap: 24px;
 
   @media (max-width: ${theme.sizes.mobile}px) {
-    grid-template-columns: repeat(2, 1fr);
-
-    & > :nth-child(n + 5) {
-      display: none;
-    }
+    grid-template-columns: repeat(4, 1fr);
+    grid-gap: 15px;
   }
 `;
 
 const STYLES_FILE_TYPE_PLACEHOLDER = css`
   ${Styles.CONTAINER_CENTERED};
-  height: 120px;
-  width: 120px;
+  width: 100%;
 `;
 
 export function FileTypeGroup(props) {
diff --git a/components/core/Filter/Content.js b/components/core/Filter/Content.js
index 480e40da..8799aaca 100644
--- a/components/core/Filter/Content.js
+++ b/components/core/Filter/Content.js
@@ -20,14 +20,31 @@ const STYLES_DATAVIEWER_WRAPPER = (theme) => css`
   }
 `;
 
+const STYLES_DATAVIEWER_EMPTY = (theme) => css`
+  @media (max-width: ${theme.sizes.mobile}px) {
+    padding: calc(${theme.sizes.filterNavbar}px) 0px 0px;
+  }
+`;
+
 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-top: 0px;
+  @media (max-width: ${theme.sizes.mobile}px) {
+    height: 100%;
+  }
+`;
+
+const STYLES_EMPTY_STATE_DEMO = (theme) => css`
+  margin-top: 36px;
+  @media (max-width: ${theme.sizes.mobile}px) {
+    margin-top: 65px;
+  }
 `;
 
 const STYLES_UPLOAD_BUTTON = (theme) => css`
   ${Styles.CONTAINER_CENTERED};
+  display: inline-flex;
   background-color: ${theme.semantic.bgGrayLight};
   border-radius: 8px;
   width: 24px;
@@ -46,9 +63,11 @@ export function Content({ viewer, onAction, isMobile, page, ...props }) {
     filterState?.type === "library" &&
     objects.length > 0;
 
+  const isObjectsEmpty = objects.length === 0;
+
   return (
-    <div css={STYLES_DATAVIEWER_WRAPPER} {...props}>
-      {objects.length > 0 ? (
+    <div css={[STYLES_DATAVIEWER_WRAPPER, isObjectsEmpty && STYLES_DATAVIEWER_EMPTY]} {...props}>
+      {!isObjectsEmpty ? (
         <TagsOnboarding
           onAction={onAction}
           viewer={viewer}
@@ -70,12 +89,20 @@ export function Content({ viewer, onAction, isMobile, page, ...props }) {
       ) : (
         <EmptyState css={STYLES_EMPTY_STATE_WRAPPER}>
           <FileTypeGroup />
-          <div style={{ marginTop: 24 }} css={Styles.HORIZONTAL_CONTAINER_CENTERED}>
-            <System.H5>Use</System.H5>
-            <span css={STYLES_UPLOAD_BUTTON} style={{ marginLeft: 8 }}>
-              <SVG.Plus height="16px" />
-            </span>
-            <System.H5 style={{ marginLeft: 8 }}>or drop files to save to Slate</System.H5>
+          <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>
       )}
diff --git a/components/core/Upload/Popup.js b/components/core/Upload/Popup.js
index 71e0a438..9015c614 100644
--- a/components/core/Upload/Popup.js
+++ b/components/core/Upload/Popup.js
@@ -22,12 +22,14 @@ import ObjectBoxPreview from "~/components/core/ObjectBoxPreview";
  * -----------------------------------------------------------------------------------------------*/
 
 const STYLES_POPUP_WRAPPER = (theme) => css`
+  width: 264px;
   position: fixed;
   bottom: 24px;
   right: 24px;
   z-index: ${theme.zindex.tooltip};
   @media (max-width: ${theme.sizes.mobile}px) {
-    right: 50%;
+    left: 0px;
+    margin: 0 auto;
   }
 `;
 
@@ -183,7 +185,7 @@ export function Popup({ isMobile }) {
       {popupState.isVisible ? (
         <motion.div
           css={STYLES_POPUP_WRAPPER}
-          initial={{ opacity: 0, y: 0, x: "50%" }}
+          initial={{ opacity: 0, y: 0 }}
           animate={{ opacity: 1, y: 0 }}
           exit={{ opacity: 0, y: 10 }}
           onMouseEnter={handleOnMouseEnter}