feat(Onboarding/Tags): update privacy popup

components/core/Onboarding/Popup.js

@@ -1,11 +1,13 @@
 import * as React from "react";
 import * as System from "~/components/system";
+import * as Styles from "~/common/styles";
 
 import { motion } from "framer-motion";
 import { css } from "@emotion/react";
 import { ModalPortal } from "../ModalPortal";
 
 const STYLES_ONBOARDING_POPUP = (theme) => css`
+  ${Styles.VERTICAL_CONTAINER};
   position: fixed;
   left: 24px;
   bottom: 28px;

components/core/Onboarding/Tags.js

@@ -1,9 +1,11 @@
 import * as React from "react";
 import * as System from "~/components/system";
 import * as Actions from "~/common/actions";
+import * as SVG from "~/common/svg";
 
 import { ModalPortal } from "~/components/core/ModalPortal";
 import { useIsomorphicLayoutEffect } from "~/common/hooks";
+import { css } from "@emotion/react";
 
 import OnboardingPopup from "~/components/core/Onboarding/Popup";
 
@@ -15,14 +17,14 @@ const TagsOnboardingContext = React.createContext();
 export const useTagsOnboardingContext = () => React.useContext(TagsOnboardingContext);
 
 const steps = {
-  tagsTrigger: "tagsTrigger",
-  tagsJumper: "tagsJumper",
+  trigger: "trigger",
+  jumper: "jumper",
   finish: "finish",
 };
 
 function Provider({ children, onAction, viewer, ...props }) {
   const [currentStep, setCurrentStep] = React.useState(
-    viewer?.onboarding?.tags ? steps.finish : steps.tagsTrigger
+    viewer?.onboarding?.tags ? steps.finish : steps.trigger
   );
 
   useIsomorphicLayoutEffect(() => {
@@ -42,7 +44,7 @@ function Provider({ children, onAction, viewer, ...props }) {
       goToNextStep() {
         if (currentStep === steps.finish) return;
 
-        const nextStep = { tagsTrigger: "tagsJumper", tagsJumper: "finish" };
+        const nextStep = { trigger: "jumper", jumper: "finish" };
         setCurrentStep((prev) => nextStep[prev]);
       },
     }),
@@ -60,6 +62,17 @@ function Provider({ children, onAction, viewer, ...props }) {
  * TagsWalkthrought
  * -----------------------------------------------------------------------------------------------*/
 
+const STYLES_TAGS_BUTTON = (theme) => css`
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  background-color: ${theme.semantic.bgGrayLight4};
+  border-radius: 8px;
+  padding: 2px;
+  position: relative;
+  top: 3px;
+`;
+
 function TagsWalkthrought() {
   const [isOrganizeTagsPopupVisible, setOrganizeTagsPopupVisiblity] = React.useState(true);
   const hideOrganizeTagsPopup = () => setOrganizeTagsPopupVisiblity(false);
@@ -69,45 +82,50 @@ function TagsWalkthrought() {
 
   const { currentStep, steps } = useTagsOnboardingContext();
 
-  if (currentStep === steps.tagsTrigger)
-    return isOrganizeTagsPopupVisible ? (
-      <ModalPortal>
-        <OnboardingPopup
-          header={"Organize with tags"}
-          initial={{ y: 10, opacity: 0 }}
-          animate={{ y: 0, opacity: 1 }}
-          transition={{ delay: 1, ease: "easeInOut" }}
-        >
-          <System.P2 color="textBlack">
-            Hover over the object and click on “#” button to apply tags to it.
-          </System.P2>
-          <System.ButtonPrimary
-            style={{ marginLeft: "auto", marginTop: 34, minHeight: "24px" }}
-            onClick={hideOrganizeTagsPopup}
-          >
-            Got it
-          </System.ButtonPrimary>
-        </OnboardingPopup>
-      </ModalPortal>
-    ) : null;
-
-  if (currentStep === steps.tagsJumper) {
+  if (
+    (currentStep === steps.trigger && isOrganizeTagsPopupVisible) ||
+    (currentStep === steps.jumper && isTagsPrivacyPopupVisible)
+  ) {
     return (
       <ModalPortal>
-        {isTagsPrivacyPopupVisible ? (
-          <OnboardingPopup header="Tag privacy">
-            <System.P2 color="textBlack">
-              All your objects are link-access only by default. If you apply public tags on them,
-              they will show up on your profile.
-            </System.P2>
-            <System.ButtonPrimary
-              style={{ marginLeft: "auto", marginTop: 14, minHeight: "24px" }}
-              onClick={hideTagsPrivacyPopup}
-            >
-              Got it
-            </System.ButtonPrimary>
-          </OnboardingPopup>
-        ) : null}
+        <OnboardingPopup
+          header={currentStep === steps.trigger ? "Organize with tags" : "Tag privacy"}
+          initial={{ y: 10, opacity: 0 }}
+          animate={{ y: 0, opacity: 1 }}
+          transition={{ delay: currentStep === steps.trigger ? 1 : 0, ease: "easeInOut" }}
+        >
+          {currentStep === steps.trigger ? (
+            <>
+              <System.P2 color="textBlack">
+                Hover over the object, then select
+                <span css={STYLES_TAGS_BUTTON} style={{ marginLeft: 8, marginRight: 8 }}>
+                  <SVG.Hash width={16} height={16} />
+                </span>
+                to apply tags to it.
+              </System.P2>
+              <System.ButtonPrimary
+                style={{ display: "block", marginLeft: "auto", marginTop: 14, minHeight: "24px" }}
+                onClick={hideOrganizeTagsPopup}
+              >
+                Got it
+              </System.ButtonPrimary>
+            </>
+          ) : null}
+          {currentStep === steps.jumper ? (
+            <>
+              <System.P2 color="textBlack">
+                All your objects are link-access only by default. If you apply public tags on them,
+                they will show up on your profile.
+              </System.P2>
+              <System.ButtonPrimary
+                style={{ display: "block", marginLeft: "auto", marginTop: 14, minHeight: "24px" }}
+                onClick={hideTagsPrivacyPopup}
+              >
+                Got it
+              </System.ButtonPrimary>
+            </>
+          ) : null}
+        </OnboardingPopup>
       </ModalPortal>
     );
   }