From 8698040e6b5ab4e3505bfe92a2e18332ee48d9bc Mon Sep 17 00:00:00 2001
From: Aminejv <elouartinra@hotmail.com>
Date: Fri, 19 Nov 2021 13:36:37 +0100
Subject: [PATCH] feat(ObjectPreview): pass isMobile props

---
 components/core/DataView.js                        |  1 +
 components/core/Filter/Content.js                  | 12 +++++++++---
 components/core/ObjectPreview/LinkObjectPreview.js |  2 +-
 components/core/Upload/Popup.js                    |  7 +++----
 components/core/Upload/index.js                    |  4 ++--
 scenes/SceneFilesFolder.js                         |  1 -
 6 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/components/core/DataView.js b/components/core/DataView.js
index ccfc526a..72d18185 100644
--- a/components/core/DataView.js
+++ b/components/core/DataView.js
@@ -858,6 +858,7 @@ export default class DataView extends React.Component {
                           onAction={this.props.onAction}
                           isOwner={this.props.isOwner}
                           isSelected={i in this.state.checked}
+                          isMobile={this.props.isMobile}
                         />
                         <span css={STYLES_MOBILE_HIDDEN} style={{ pointerEvents: "auto" }}>
                           {numChecked || this.state.hover === i || this.state.menu === each.id ? (
diff --git a/components/core/Filter/Content.js b/components/core/Filter/Content.js
index 3f727705..480e40da 100644
--- a/components/core/Filter/Content.js
+++ b/components/core/Filter/Content.js
@@ -16,7 +16,7 @@ const STYLES_DATAVIEWER_WRAPPER = (theme) => css`
   min-height: 100vh;
   padding: calc(20px + ${theme.sizes.filterNavbar}px) 24px 44px;
   @media (max-width: ${theme.sizes.mobile}px) {
-    padding: 31px 16px 44px;
+    padding: calc(31px + ${theme.sizes.filterNavbar}px) 16px 44px;
   }
 `;
 
@@ -36,7 +36,7 @@ const STYLES_UPLOAD_BUTTON = (theme) => css`
   box-shadow: ${theme.shadow.lightSmall};
 `;
 
-export function Content({ viewer, onAction, page, ...props }) {
+export function Content({ viewer, onAction, isMobile, page, ...props }) {
   const [{ filterState }] = useFilterContext();
   const { objects } = filterState;
 
@@ -49,7 +49,12 @@ export function Content({ viewer, onAction, page, ...props }) {
   return (
     <div css={STYLES_DATAVIEWER_WRAPPER} {...props}>
       {objects.length > 0 ? (
-        <TagsOnboarding onAction={onAction} viewer={viewer} isActive={isOnboardingActive}>
+        <TagsOnboarding
+          onAction={onAction}
+          viewer={viewer}
+          isActive={isOnboardingActive}
+          isMobile={isMobile}
+        >
           <DataView
             key="scene-files-folder"
             /** TODO(amine): when updating filters, update isOwner prop */
@@ -58,6 +63,7 @@ export function Content({ viewer, onAction, page, ...props }) {
             onAction={onAction}
             viewer={viewer}
             page={page}
+            isMobile={isMobile}
             view="grid"
           />
         </TagsOnboarding>
diff --git a/components/core/ObjectPreview/LinkObjectPreview.js b/components/core/ObjectPreview/LinkObjectPreview.js
index 219ced59..a4c41960 100644
--- a/components/core/ObjectPreview/LinkObjectPreview.js
+++ b/components/core/ObjectPreview/LinkObjectPreview.js
@@ -75,7 +75,7 @@ export default function LinkObjectPreview({ file, ratio, ...props }) {
       href={file.url}
       target="_blank"
       rel="noreferrer"
-      style={{ position: "relative", zIndex: 2 }}
+      style={{ position: "relative" }}
       onClick={(e) => e.stopPropagation()}
     >
       <div css={STYLES_TAG_CONTAINER}>
diff --git a/components/core/Upload/Popup.js b/components/core/Upload/Popup.js
index 783733ae..71e0a438 100644
--- a/components/core/Upload/Popup.js
+++ b/components/core/Upload/Popup.js
@@ -28,7 +28,6 @@ const STYLES_POPUP_WRAPPER = (theme) => css`
   z-index: ${theme.zindex.tooltip};
   @media (max-width: ${theme.sizes.mobile}px) {
     right: 50%;
-    transform: translateX(50%);
   }
 `;
 
@@ -164,7 +163,7 @@ const useUploadSummary = ({ fileLoading }) =>
     };
   }, [fileLoading]);
 
-export function Popup() {
+export function Popup({ isMobile }) {
   const {
     state: { isFinished, fileLoading },
     handlers: { resetUploadState },
@@ -184,7 +183,7 @@ export function Popup() {
       {popupState.isVisible ? (
         <motion.div
           css={STYLES_POPUP_WRAPPER}
-          initial={{ opacity: 0, y: 0 }}
+          initial={{ opacity: 0, y: 0, x: "50%" }}
           animate={{ opacity: 1, y: 0 }}
           exit={{ opacity: 0, y: 10 }}
           onMouseEnter={handleOnMouseEnter}
@@ -211,7 +210,7 @@ export function Popup() {
               collapseUploadSummary={collapseUploadSummary}
             />
           </div>
-          <Show when={isHovered && isFinished}>
+          <Show when={isFinished && (isHovered || isMobile)}>
             <button
               css={STYLES_DISMISS_BUTTON}
               onClick={() => (hideUploadPopup(), resetUploadState())}
diff --git a/components/core/Upload/index.js b/components/core/Upload/index.js
index 86a915e1..93c609b6 100644
--- a/components/core/Upload/index.js
+++ b/components/core/Upload/index.js
@@ -13,13 +13,13 @@ import DropIndicator from "~/components/core/Upload/DropIndicator";
 /* -------------------------------------------------------------------------------------------------
  * Root
  * -----------------------------------------------------------------------------------------------*/
-const Root = ({ children, data }) => {
+const Root = ({ children, data, isMobile }) => {
   return (
     <>
       {children}
       <Jumper data={data} />
       <ModalPortal>
-        <Popup />
+        <Popup isMobile={isMobile} />
         <DropIndicator data={data} />
       </ModalPortal>
     </>
diff --git a/scenes/SceneFilesFolder.js b/scenes/SceneFilesFolder.js
index 5b69fc94..cfa8185c 100644
--- a/scenes/SceneFilesFolder.js
+++ b/scenes/SceneFilesFolder.js
@@ -1,6 +1,5 @@
 import * as React from "react";
 import * as Constants from "~/common/constants";
-import * as Styles from "~/common/styles";
 
 import { css } from "@emotion/react";
 import { GlobalCarousel } from "~/components/system/components/GlobalCarousel";