feat(Onboarding/Upload): add mobile jumpers to onboarding

common/styles.js

@@ -33,8 +33,8 @@ const TEXT = css`
 
 export const H1 = css`
   font-family: ${Constants.font.medium};
-  font-size: 32px;
-  line-height: 48px;
+  font-size: 2rem;
+  line-height: 1.5;
   letter-spacing: -0.021px;
 
   ${TEXT}
@@ -42,8 +42,8 @@ export const H1 = css`
 
 export const H2 = css`
   font-family: ${Constants.font.medium};
-  font-size: 24px;
-  line-height: 36px;
+  font-size: 1.5rem;
+  line-height: 1.5;
   letter-spacing: -0.019px;
 
   ${TEXT}

components/core/ApplicationHeader.js

@@ -112,7 +112,7 @@ const STYLES_UPLOAD_BUTTON = css`
   }
 `;
 
-export default function ApplicationHeader({ viewer, page, data, onAction }) {
+export default function ApplicationHeader({ viewer, page, data, onAction, isMobile }) {
   const [state, setState] = React.useState({
     showDropdown: false,
     popup: null,
@@ -157,7 +157,7 @@ export default function ApplicationHeader({ viewer, page, data, onAction }) {
             {/**TODO: update Search component */}
             <Search.Input viewer={viewer} data={data} onAction={onAction} page={page} />
           </div>
-          <UploadOnboarding onAction={onAction} viewer={viewer}>
+          <UploadOnboarding onAction={onAction} viewer={viewer} isMobile={isMobile}>
             <Upload.Provider page={page} data={data} viewer={viewer}>
               <Upload.Root data={data}>
                 <div css={STYLES_RIGHT}>

components/core/Onboarding/Popup.js

@@ -23,6 +23,11 @@ const STYLES_ONBOARDING_POPUP = (theme) => css`
     backdrop-filter: blur(75px);
     background-color: ${theme.semantic.bgBlurWhiteOp};
   }
+
+  @media (max-width: ${theme.sizes.mobile}px) {
+    left: 17px;
+    bottom: 16px;
+  }
 `;
 
 const STYLES_POPUP_HEADER = css`

components/core/Onboarding/Upload.js

@@ -3,6 +3,7 @@ import * as Styles from "~/common/styles";
 import * as System from "~/components/system";
 import * as SVG from "~/common/svg";
 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";
 
@@ -79,6 +80,7 @@ const STYLES_WELCOME_WRAPPER = (theme) => css`
   position: fixed;
   height: 100vh;
   width: 100%;
+  padding: 16px;
   top: 0;
   left: 0;
   z-index: ${theme.zindex.cta};
@@ -101,7 +103,7 @@ function WelcomeOnboarding({ viewer }) {
       <div css={STYLES_WELCOME_WRAPPER}>
         <div css={Styles.VERTICAL_CONTAINER_CENTERED}>
           <ProfilePhoto user={viewer} style={{ borderRadius: "12px" }} size={64} />
-          <System.H2 style={{ marginTop: 25 }} as="h1">
+          <System.H2 style={{ marginTop: 25, textAlign: "center" }} as="h1">
             Welcome to Slate, {viewer.username}
           </System.H2>
           <System.P1 style={{ marginTop: 5, textAlign: "center" }}>
@@ -124,19 +126,14 @@ function WelcomeOnboarding({ viewer }) {
  * Privacy And Security
  * -----------------------------------------------------------------------------------------------*/
 
-function PrivacyAndSecurityOnboarding() {
+function PrivacyAndSecurityOnboarding({ isMobile }) {
   const { goToNextStep } = useUploadOnboardingContext();
 
-  return (
-    <ModalPortal>
-      <Jumper.Root withDismissButton={false}>
-        <Jumper.Header>
-          <System.H2 as="h1">Privacy, security & portability of your data</System.H2>
-        </Jumper.Header>
-        <Jumper.Item style={{ flexGrow: 1 }}>
+  const header = <System.H2 as="h1">Privacy, security & portability of your data</System.H2>;
+  const body = (
     <System.P2>
-            Files (not including links) you save to Slate will be stored on IPFS. <br /> You will
-            get a CID link when you save with Slate. <br />
+      Files (not including links) you save to Slate will be stored on IPFS. <br /> You will get a
+      CID link when you save with Slate. <br />
       Anyone can access your files on IPFS with a CID link.
       <br />
       <br />
@@ -148,12 +145,13 @@ function PrivacyAndSecurityOnboarding() {
         target="_blank"
         rel="noreferrer"
       >
-              https://ipfs.io/bafkreiabty76ayakifavlpzwvxjha255aajcii2dwl7pdfmcuubswx7qja{" "}
+        https://ipfs.io/bafkreiabty76ayakifavlpzwvxjha255aajcii2dwl7pdfmcuubswx7qja
       </a>
     </System.P2>
-        </Jumper.Item>
-        <Jumper.Divider style={{ marginTop: "auto" }} />
-        <Jumper.Item css={STYLES_JUMPER_FOOTER} style={{ marginTop: "auto" }}>
+  );
+
+  const actions = (
+    <>
       <System.ButtonSecondary
         type="link"
         href={PROTO_SCHOOL_CID}
@@ -166,8 +164,27 @@ function PrivacyAndSecurityOnboarding() {
       <System.ButtonPrimary style={{ marginLeft: 8, minHeight: "24px" }} onClick={goToNextStep}>
         Got it
       </System.ButtonPrimary>
+    </>
+  );
+
+  return (
+    <ModalPortal>
+      {isMobile ? (
+        <MobileJumper.Root>
+          <MobileJumper.Header>{header}</MobileJumper.Header>
+          <MobileJumper.Content>{body}</MobileJumper.Content>
+          <MobileJumper.Footer style={{ display: "flex" }}>{actions}</MobileJumper.Footer>
+        </MobileJumper.Root>
+      ) : (
+        <Jumper.Root withDismissButton={false}>
+          <Jumper.Header>{header}</Jumper.Header>
+          <Jumper.Item style={{ flexGrow: 1 }}>{body}</Jumper.Item>
+          <Jumper.Divider style={{ marginTop: "auto" }} />
+          <Jumper.Item css={STYLES_JUMPER_FOOTER} style={{ marginTop: "auto" }}>
+            {actions}
           </Jumper.Item>
         </Jumper.Root>
+      )}
     </ModalPortal>
   );
 }
@@ -176,28 +193,32 @@ function PrivacyAndSecurityOnboarding() {
  * Extension
  * -----------------------------------------------------------------------------------------------*/
 
-function ExtensionOnboarding() {
+function ExtensionOnboarding({ isMobile }) {
   const { goToNextStep } = useUploadOnboardingContext();
 
-  return (
-    <ModalPortal>
-      <Jumper.Root withDismissButton={false}>
-        <Jumper.Header>
-          <System.H2>
+  const header = (
+    <System.H2 as="h1">
       Save to Slate <br />
       as you browse the web
     </System.H2>
-        </Jumper.Header>
-        <Jumper.Item style={{ flexGrow: 1, paddingLeft: 0, paddingRight: 0, paddingBottom: 0 }}>
+  );
+
+  const body = (
     <img
-            src="/static/chrome-extension-jumper.png"
-            height={281}
-            width={640}
+      src={
+        isMobile
+          ? "/static/chrome-extension-jumper-mobile.png"
+          : "/static/chrome-extension-jumper.png"
+      }
+      height={isMobile ? 411 : 281}
+      width={isMobile ? 390 : 640}
+      style={{ width: "100%" }}
       alt="chrome extension"
     />
-        </Jumper.Item>
-        <Jumper.Divider style={{ marginTop: "auto" }} />
-        <Jumper.Item css={STYLES_JUMPER_FOOTER} style={{ marginTop: "auto" }}>
+  );
+
+  const actions = (
+    <>
       <System.ButtonSecondary
         onClick={goToNextStep}
         style={{ marginLeft: "auto", minHeight: "24px" }}
@@ -205,8 +226,32 @@ function ExtensionOnboarding() {
         Later
       </System.ButtonSecondary>
       <DownloadExtensionButton style={{ marginLeft: 8, minHeight: "24px" }} />
+    </>
+  );
+
+  return (
+    <ModalPortal>
+      <MobileJumper.AnimatePresence>
+        {isMobile ? (
+          <MobileJumper.Root>
+            <MobileJumper.Header>{header}</MobileJumper.Header>
+            <MobileJumper.Content style={{ padding: 0 }}>{body}</MobileJumper.Content>
+            <MobileJumper.Footer style={{ display: "flex" }}>{actions}</MobileJumper.Footer>
+          </MobileJumper.Root>
+        ) : null}
+      </MobileJumper.AnimatePresence>
+      {!isMobile ? (
+        <Jumper.Root withDismissButton={false}>
+          <Jumper.Header>{header}</Jumper.Header>
+          <Jumper.Item style={{ flexGrow: 1, paddingLeft: 0, paddingRight: 0, paddingBottom: 0 }}>
+            {body}
+          </Jumper.Item>
+          <Jumper.Divider style={{ marginTop: "auto" }} />
+          <Jumper.Item css={STYLES_JUMPER_FOOTER} style={{ marginTop: "auto" }}>
+            {actions}
           </Jumper.Item>
         </Jumper.Root>
+      ) : null}
     </ModalPortal>
   );
 }
@@ -314,21 +359,22 @@ function UploadWalkthrough() {
   );
 }
 
-function UploadSteps({ viewer }) {
+function UploadSteps({ viewer, isMobile }) {
   const { currentStep, steps } = useUploadOnboardingContext();
 
   if (currentStep === steps.welcome) return <WelcomeOnboarding viewer={viewer} />;
-  if (currentStep === steps.privacyAndSecurity) return <PrivacyAndSecurityOnboarding />;
-  if (currentStep === steps.extension) return <ExtensionOnboarding />;
+  if (currentStep === steps.privacyAndSecurity)
+    return <PrivacyAndSecurityOnboarding isMobile={isMobile} />;
+  if (currentStep === steps.extension) return <ExtensionOnboarding isMobile={isMobile} />;
   if (currentStep === steps.trigger || currentStep === steps.jumper) return <UploadWalkthrough />;
 
   return null;
 }
 
-export function UploadOnboarding({ viewer, onAction, children }) {
+export function UploadOnboarding({ viewer, isMobile, onAction, children }) {
   return (
     <Provider viewer={viewer} onAction={onAction}>
-      <UploadSteps viewer={viewer} />
+      <UploadSteps viewer={viewer} isMobile={isMobile} />
       {children}
     </Provider>
   );

components/system/components/fragments/MobileJumper.js

@@ -2,8 +2,16 @@ import * as React from "react";
 import * as Styles from "~/common/styles";
 
 import { css } from "@emotion/react";
-import { motion } from "framer-motion";
 import { FullHeightLayout } from "~/components/system/components/FullHeightLayout";
+import { motion, AnimatePresence as FramerAnimatePresence } from "framer-motion";
+
+/* -------------------------------------------------------------------------------------------------
+ *  AnimatePresence
+ * -----------------------------------------------------------------------------------------------*/
+
+function AnimatePresence({ children, ...props }) {
+  return <FramerAnimatePresence {...props}>{children}</FramerAnimatePresence>;
+}
 
 /* -------------------------------------------------------------------------------------------------
  *  Root
@@ -88,7 +96,7 @@ const STYLES_JUMPER_MOBILE_FOOTER = (theme) => css`
   border-top: 1px solid ${theme.semantic.borderGrayLight4};
   background-color: ${theme.semantic.bgWhite};
   @supports ((-webkit-backdrop-filter: blur(75px)) or (backdrop-filter: blur(75px))) {
-    background-color: ${theme.semantic.bgBlurWhite};
+    background-color: ${theme.semantic.bgBlurLight};
     -webkit-backdrop-filter: blur(75px);
     backdrop-filter: blur(75px);
   }
@@ -106,4 +114,4 @@ function Footer({ children, css, ...props }) {
   );
 }
 
-export { Root, Header, Content, Footer };
+export { Root, AnimatePresence, Header, Content, Footer };