From 607ac67ec4eb48bcbdf24d47114f95e4f4f205c2 Mon Sep 17 00:00:00 2001 From: Aminejv Date: Mon, 6 Dec 2021 17:36:00 +0100 Subject: [PATCH] fix(onboarding): visual bugs --- common/upload-utilities.js | 1 + components/core/Filter/Content.js | 111 ------------------------ components/core/Onboarding/Tags.js | 4 +- components/core/Onboarding/Upload.js | 31 ++++--- components/system/components/Buttons.js | 10 +-- scenes/SceneFilesFolder.js | 26 ++++-- 6 files changed, 46 insertions(+), 137 deletions(-) delete mode 100644 components/core/Filter/Content.js diff --git a/common/upload-utilities.js b/common/upload-utilities.js index bffeb228..4d33febb 100644 --- a/common/upload-utilities.js +++ b/common/upload-utilities.js @@ -207,6 +207,7 @@ export function createUploadProvider({ const addLinkToUploadQueue = async ({ url, slate }) => { const linkAsBlob = { name: url, + filename: url, type: "link", size: getLinkSize(url), lastModified: "", diff --git a/components/core/Filter/Content.js b/components/core/Filter/Content.js deleted file mode 100644 index 8799aaca..00000000 --- a/components/core/Filter/Content.js +++ /dev/null @@ -1,111 +0,0 @@ -import * as React from "react"; -import * as System from "~/components/system"; -import * as SVG from "~/common/svg"; -import * as Styles from "~/common/styles"; - -import { FileTypeGroup } from "~/components/core/FileTypeIcon"; -import { css } from "@emotion/react"; -import { useFilterContext } from "~/components/core/Filter/Provider"; -import { TagsOnboarding } from "~/components/core/Onboarding/Tags"; - -import DataView from "~/components/core/DataView"; -import EmptyState from "~/components/core/EmptyState"; - -const STYLES_DATAVIEWER_WRAPPER = (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; - } -`; - -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; - height: 24px; - pointer-events: auto; - box-shadow: ${theme.shadow.lightSmall}; -`; - -export function Content({ viewer, onAction, isMobile, page, ...props }) { - const [{ filterState }] = useFilterContext(); - const { objects } = filterState; - - const isOnboardingActive = - viewer?.onboarding?.upload && - !viewer?.onboarding?.tags && - filterState?.type === "library" && - objects.length > 0; - - const isObjectsEmpty = objects.length === 0; - - return ( -
- {!isObjectsEmpty ? ( - - - - ) : ( - - -
- - Use - - - - on the top right corner
- - - or drop files {isMobile ? on desktop : null} to save to Slate - -
- - )} -
- ); -} diff --git a/components/core/Onboarding/Tags.js b/components/core/Onboarding/Tags.js index a8702133..a6e13ff3 100644 --- a/components/core/Onboarding/Tags.js +++ b/components/core/Onboarding/Tags.js @@ -118,7 +118,7 @@ function TagsWalkthrought({ isMobile }) { )} Got it @@ -132,7 +132,7 @@ function TagsWalkthrought({ isMobile }) { they will show up on your profile. Got it diff --git a/components/core/Onboarding/Upload.js b/components/core/Onboarding/Upload.js index fc68b655..6bae4ac1 100644 --- a/components/core/Onboarding/Upload.js +++ b/components/core/Onboarding/Upload.js @@ -6,6 +6,7 @@ import * as Jumper from "~/components/system/components/fragments/Jumper"; import * as MobileJumper from "~/components/system/components/fragments/MobileJumper"; import * as Utilities from "~/common/utilities"; import * as Actions from "~/common/actions"; +import * as Constants from "~/common/constants"; import { css } from "@emotion/react"; import { ModalPortal } from "~/components/core/ModalPortal"; @@ -157,11 +158,11 @@ function PrivacyAndSecurityOnboarding({ isMobile }) { href={PROTO_SCHOOL_CID} target="_blank" rel="noreferrer" - style={{ marginLeft: "auto", minHeight: "24px" }} + style={{ marginLeft: "auto", maxHeight: "24px" }} > Learn More - + Got it @@ -221,11 +222,11 @@ function ExtensionOnboarding({ isMobile }) { <> Later - + ); @@ -291,10 +292,14 @@ const STYLES_UPLOAD_BUTTON = (theme) => css` `; const STYLES_COPIED_INITIAL = (theme) => css` - color: ${theme.semantic.textGrayDark}; + ${Styles.LINK}; + ${Styles.HORIZONTAL_CONTAINER_CENTERED}; + color: ${theme.system.blue}; `; const STYLES_COPIED_SUCCESS = (theme) => css` + ${Styles.LINK}; + ${Styles.HORIZONTAL_CONTAINER_CENTERED}; color: ${theme.system.blue}; `; @@ -325,7 +330,7 @@ function UploadWalkthrough() { <> Save something you find interesting today. -
Or try pasting →{" "} +
Or try pasting →