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

martinalong · Dec 14, 2021 · d0269ab · d0269ab
1 parent 69cee75
commit d0269ab
Show file tree

Hide file tree

Showing 6 changed files with 141 additions and 82 deletions.
diff --git a/common/styles.js b/common/styles.js
@@ -33,17 +33,17 @@ 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}
 `;
 
 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}

diff --git a/components/core/ApplicationHeader.js b/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}>

diff --git a/components/core/Onboarding/Popup.js b/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`

diff --git a/components/core/Onboarding/Upload.js b/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,50 +126,65 @@ function WelcomeOnboarding({ viewer }) {
  * Privacy And Security
  * -----------------------------------------------------------------------------------------------*/
 
-function PrivacyAndSecurityOnboarding() {
+function PrivacyAndSecurityOnboarding({ isMobile }) {
   const { goToNextStep } = useUploadOnboardingContext();
 
+  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 />
+      Anyone can access your files on IPFS with a CID link.
+      <br />
+      <br />
+      Example:
+      <br />
+      <a
+        css={Styles.LINK}
+        href="https://ipfs.io/bafkreiabty76ayakifavlpzwvxjha255aajcii2dwl7pdfmcuubswx7qja"
+        target="_blank"
+        rel="noreferrer"
+      >
+        https://ipfs.io/bafkreiabty76ayakifavlpzwvxjha255aajcii2dwl7pdfmcuubswx7qja
+      </a>
+    </System.P2>
+  );
+
+  const actions = (
+    <>
+      <System.ButtonSecondary
+        type="link"
+        href={PROTO_SCHOOL_CID}
+        target="_blank"
+        rel="noreferrer"
+        style={{ marginLeft: "auto", minHeight: "24px" }}
+      >
+        Learn More
+      </System.ButtonSecondary>
+      <System.ButtonPrimary style={{ marginLeft: 8, minHeight: "24px" }} onClick={goToNextStep}>
+        Got it
+      </System.ButtonPrimary>
+    </>
+  );
+
   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 }}>
-          <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 />
-            Anyone can access your files on IPFS with a CID link.
-            <br />
-            <br />
-            Example:
-            <br />
-            <a
-              css={Styles.LINK}
-              href="https://ipfs.io/bafkreiabty76ayakifavlpzwvxjha255aajcii2dwl7pdfmcuubswx7qja"
-              target="_blank"
-              rel="noreferrer"
-            >
-              https://ipfs.io/bafkreiabty76ayakifavlpzwvxjha255aajcii2dwl7pdfmcuubswx7qja{" "}
-            </a>
-          </System.P2>
-        </Jumper.Item>
-        <Jumper.Divider style={{ marginTop: "auto" }} />
-        <Jumper.Item css={STYLES_JUMPER_FOOTER} style={{ marginTop: "auto" }}>
-          <System.ButtonSecondary
-            type="link"
-            href={PROTO_SCHOOL_CID}
-            target="_blank"
-            rel="noreferrer"
-            style={{ marginLeft: "auto", minHeight: "24px" }}
-          >
-            Learn More
-          </System.ButtonSecondary>
-          <System.ButtonPrimary style={{ marginLeft: 8, minHeight: "24px" }} onClick={goToNextStep}>
-            Got it
-          </System.ButtonPrimary>
-        </Jumper.Item>
-      </Jumper.Root>
+      {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,37 +193,65 @@ function PrivacyAndSecurityOnboarding() {
  * Extension
  * -----------------------------------------------------------------------------------------------*/
 
-function ExtensionOnboarding() {
+function ExtensionOnboarding({ isMobile }) {
   const { goToNextStep } = useUploadOnboardingContext();
 
+  const header = (
+    <System.H2 as="h1">
+      Save to Slate <br />
+      as you browse the web
+    </System.H2>
+  );
+
+  const body = (
+    <img
+      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"
+    />
+  );
+
+  const actions = (
+    <>
+      <System.ButtonSecondary
+        onClick={goToNextStep}
+        style={{ marginLeft: "auto", minHeight: "24px" }}
+      >
+        Later
+      </System.ButtonSecondary>
+      <DownloadExtensionButton style={{ marginLeft: 8, minHeight: "24px" }} />
+    </>
+  );
+
   return (
     <ModalPortal>
-      <Jumper.Root withDismissButton={false}>
-        <Jumper.Header>
-          <System.H2>
-            Save to Slate <br />
-            as you browse the web
-          </System.H2>
-        </Jumper.Header>
-        <Jumper.Item style={{ flexGrow: 1, paddingLeft: 0, paddingRight: 0, paddingBottom: 0 }}>
-          <img
-            src="/static/chrome-extension-jumper.png"
-            height={281}
-            width={640}
-            alt="chrome extension"
-          />
-        </Jumper.Item>
-        <Jumper.Divider style={{ marginTop: "auto" }} />
-        <Jumper.Item css={STYLES_JUMPER_FOOTER} style={{ marginTop: "auto" }}>
-          <System.ButtonSecondary
-            onClick={goToNextStep}
-            style={{ marginLeft: "auto", minHeight: "24px" }}
-          >
-            Later
-          </System.ButtonSecondary>
-          <DownloadExtensionButton style={{ marginLeft: 8, minHeight: "24px" }} />
-        </Jumper.Item>
-      </Jumper.Root>
+      <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>
   );

diff --git a/components/system/components/fragments/MobileJumper.js b/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 };
diff --git a/public/static/chrome-extension-jumper-mobile.png b/public/static/chrome-extension-jumper-mobile.png