fix(onboarding): visual bugs

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: "",

components/core/Filter/Content.js

@@ -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 (
-    <div css={[STYLES_DATAVIEWER_WRAPPER, isObjectsEmpty && STYLES_DATAVIEWER_EMPTY]} {...props}>
-      {!isObjectsEmpty ? (
-        <TagsOnboarding
-          onAction={onAction}
-          viewer={viewer}
-          isActive={isOnboardingActive}
-          isMobile={isMobile}
-        >
-          <DataView
-            key="scene-files-folder"
-            /** TODO(amine): when updating filters, update isOwner prop */
-            isOwner={true}
-            items={objects}
-            onAction={onAction}
-            viewer={viewer}
-            page={page}
-            isMobile={isMobile}
-            view="grid"
-          />
-        </TagsOnboarding>
-      ) : (
-        <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>
-  );
-}

components/core/Onboarding/Tags.js

@@ -118,7 +118,7 @@ function TagsWalkthrought({ isMobile }) {
                 </System.P2>
               )}
               <System.ButtonPrimary
-                style={{ display: "block", marginLeft: "auto", marginTop: 14, minHeight: "24px" }}
+                style={{ float: "right", marginTop: 14, maxHeight: "24px" }}
                 onClick={hideOrganizeTagsPopup}
               >
                 Got it
@@ -132,7 +132,7 @@ function TagsWalkthrought({ isMobile }) {
                 they will show up on your profile.
               </System.P2>
               <System.ButtonPrimary
-                style={{ display: "block", marginLeft: "auto", marginTop: 14, minHeight: "24px" }}
+                style={{ float: "right", marginTop: 14, maxHeight: "24px" }}
                 onClick={hideTagsPrivacyPopup}
               >
                 Got it

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
       </System.ButtonSecondary>
-      <System.ButtonPrimary style={{ marginLeft: 8, minHeight: "24px" }} onClick={goToNextStep}>
+      <System.ButtonPrimary style={{ marginLeft: 8, maxHeight: "24px" }} onClick={goToNextStep}>
         Got it
       </System.ButtonPrimary>
     </>
@@ -221,11 +222,11 @@ function ExtensionOnboarding({ isMobile }) {
     <>
       <System.ButtonSecondary
         onClick={goToNextStep}
-        style={{ marginLeft: "auto", minHeight: "24px" }}
+        style={{ marginLeft: "auto", maxHeight: "24px" }}
       >
         Later
       </System.ButtonSecondary>
-      <DownloadExtensionButton style={{ marginLeft: 8, minHeight: "24px" }} />
+      <DownloadExtensionButton style={{ marginLeft: 8, minHeight: "24px", maxHeight: "24px" }} />
     </>
   );
 
@@ -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() {
           <>
             <System.P2>
               Save something you find interesting today.
-              <br /> Or try pasting →{" "}
+              <br /> Or try pasting →
               <button
                 css={[Styles.ICON_CONTAINER, Styles.BUTTON_RESET]}
                 style={{ display: "inline-flex" }}
@@ -334,16 +339,20 @@ function UploadWalkthrough() {
                 <DynamicIcon
                   successState={
                     <span css={STYLES_COPIED_SUCCESS}>
-                      <span css={Styles.LINK}>{LINK_ARCHILLECT}</span>
-                      <SVG.Check height="16px" style={{ position: "relative", top: 4, left: 4 }} />
+                      <System.P2 as="span" style={{ marginLeft: 4 }}>
+                        {LINK_ARCHILLECT}
+                      </System.P2>
+                      <SVG.Check height="16px" style={{ marginLeft: 4 }} />
                     </span>
                   }
                 >
-                  <span css={STYLES_COPIED_INITIAL}>
-                    <span css={Styles.LINK}>{LINK_ARCHILLECT}</span>
+                  <span css={[STYLES_COPIED_INITIAL]}>
+                    <System.P2 as="span" style={{ marginLeft: 4 }}>
+                      {LINK_ARCHILLECT}
+                    </System.P2>
                     <SVG.CopyAndPaste
                       height="16px"
-                      style={{ position: "relative", top: 4, left: 4 }}
+                      style={{ marginLeft: 4, color: Constants.semantic.textGrayDark }}
                     />
                   </span>
                 </DynamicIcon>

components/system/components/Buttons.js

@@ -142,12 +142,12 @@ const STYLES_BUTTON_SECONDARY_TRANSPARENT = css`
   color: ${Constants.system.grayLight2};
 `;
 
-export const ButtonSecondary = (props) => {
+export const ButtonSecondary = ({ style, ...props }) => {
   if (props.loading) {
     return (
       <button
         css={props.transparent ? STYLES_BUTTON_SECONDARY_TRANSPARENT : STYLES_BUTTON_SECONDARY}
-        style={{ width: props.full ? "100%" : "auto", ...props.style }}
+        style={{ width: props.full ? "100%" : "auto", ...style }}
         type={props.type}
       >
         <LoaderSpinner style={{ height: 16, width: 16 }} />
@@ -159,7 +159,7 @@ export const ButtonSecondary = (props) => {
     return (
       <label
         css={props.transparent ? STYLES_BUTTON_SECONDARY_TRANSPARENT : STYLES_BUTTON_SECONDARY}
-        style={{ width: props.full ? "100%" : "auto", ...props.style }}
+        style={{ width: props.full ? "100%" : "auto", ...style }}
         onClick={props.onClick}
         children={props.children}
         type={props.label}
@@ -172,7 +172,7 @@ export const ButtonSecondary = (props) => {
     return (
       <a
         css={props.transparent ? STYLES_BUTTON_SECONDARY_TRANSPARENT : STYLES_BUTTON_SECONDARY}
-        style={{ width: props.full ? "100%" : "auto", ...props.style }}
+        style={{ width: props.full ? "100%" : "auto", ...style }}
         {...props}
       />
     );
@@ -184,7 +184,7 @@ export const ButtonSecondary = (props) => {
       onClick={props.onClick}
       children={props.children}
       type={props.type}
-      style={{ width: props.full ? "100%" : "auto", ...props.style }}
+      style={{ width: props.full ? "100%" : "auto", ...style }}
     />
   );
 };

scenes/SceneFilesFolder.js

@@ -7,6 +7,7 @@ import * as SVG from "~/common/svg";
 import { css } from "@emotion/react";
 import { GlobalCarousel } from "~/components/system/components/GlobalCarousel";
 import { FileTypeGroup } from "~/components/core/FileTypeIcon";
+import { TagsOnboarding } from "~/components/core/Onboarding/Tags";
 
 import ScenePage from "~/components/core/ScenePage";
 import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
@@ -53,6 +54,8 @@ export default function SceneFilesFolder({ viewer, page, onAction, isMobile }) {
   let objects = viewer.library;
   // const tab = page.params?.tab || "grid";
 
+  const isOnboardingActive = viewer?.onboarding?.upload && !viewer?.onboarding?.tags;
+
   return (
     <WebsitePrototypeWrapper
       title={`${page.pageTitle} • Slate`}
@@ -70,7 +73,13 @@ export default function SceneFilesFolder({ viewer, page, onAction, isMobile }) {
           onChange={(index) => setIndex(index)}
         />
         <div css={Styles.PAGE_CONTENT_WRAPPER}>
-          {objects.length ? (
+          {objects.length > 0 ? (
+            <TagsOnboarding
+              onAction={onAction}
+              viewer={viewer}
+              isActive={isOnboardingActive}
+              isMobile={isMobile}
+            >
               <DataView
                 key="scene-files-folder"
                 isOwner={true}
@@ -80,6 +89,7 @@ export default function SceneFilesFolder({ viewer, page, onAction, isMobile }) {
                 page={page}
                 view="grid"
               />
+            </TagsOnboarding>
           ) : (
             <EmptyState css={STYLES_EMPTY_STATE_WRAPPER}>
               <FileTypeGroup />