From f2ed4258ea0ee300c1db54e79d8d03a062bcc53a Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam.fitzgerald@tlon.io>
Date: Tue, 9 Mar 2021 10:55:23 +1000
Subject: [PATCH 1/3] Tutorial: fix profile step

---
 pkg/interface/src/logic/lib/tutorialModal.ts  |  2 +-
 .../views/apps/profile/components/Profile.tsx | 60 +++++++++----------
 2 files changed, 29 insertions(+), 33 deletions(-)

diff --git a/pkg/interface/src/logic/lib/tutorialModal.ts b/pkg/interface/src/logic/lib/tutorialModal.ts
index 8e93c7a531..25dfaaf28e 100644
--- a/pkg/interface/src/logic/lib/tutorialModal.ts
+++ b/pkg/interface/src/logic/lib/tutorialModal.ts
@@ -156,7 +156,7 @@ export const progressDetails: Record<TutorialProgress, StepDetail> = {
     alignX: 'right',
     arrow: 'South',
     offsetX: -300 + MODAL_WIDTH / 2,
-    offsetY: -60,
+    offsetY: -4,
   },
   leap: {
     title: 'Leap',
diff --git a/pkg/interface/src/views/apps/profile/components/Profile.tsx b/pkg/interface/src/views/apps/profile/components/Profile.tsx
index ca120ecdac..0f7b641d67 100644
--- a/pkg/interface/src/views/apps/profile/components/Profile.tsx
+++ b/pkg/interface/src/views/apps/profile/components/Profile.tsx
@@ -29,6 +29,10 @@ export function ProfileImages(props: any): ReactElement {
   const { contact, hideCover, ship } = { ...props };
   const hexColor = contact?.color ? `#${uxToHex(contact.color)}` : '#000000';
 
+  const anchorRef = useRef<HTMLElement | null>(null)
+
+  useTutorialModal('profile', ship === `~${window.ship}`, anchorRef);
+
   const cover =
     contact?.cover && !hideCover ? (
       <BaseImage
@@ -60,7 +64,7 @@ export function ProfileImages(props: any): ReactElement {
 
   return (
     <>
-      <Row width='100%' height='300px' position='relative'>
+      <Row ref={anchorRef} width='100%' height='300px' position='relative'>
         {cover}
         <Center position='absolute' width='100%' height='100%'>
           {props.children}
@@ -145,9 +149,6 @@ export function ProfileOwnControls(props: any): ReactElement {
 export function Profile(props: any): ReactElement {
   const history = useHistory();
 
-  if (!props.ship) {
-    return null;
-  }
   const { contact, nackedContacts, hasLoaded, isPublic, isEdit, ship } = props;
   const nacked = nackedContacts.has(ship);
   const formRef = useRef(null);
@@ -160,30 +161,17 @@ export function Profile(props: any): ReactElement {
 
   const anchorRef = useRef<HTMLElement | null>(null);
 
-  useTutorialModal('profile', ship === `~${window.ship}`, anchorRef);
+  console.log(ship);
 
-  const ViewInterface = () => {
-    return (
-      <Center p={[0, 4]} height='100%' width='100%'>
-        <Box ref={anchorRef} maxWidth='600px' width='100%' position='relative'>
-          <ViewProfile
-            nacked={nacked}
-            ship={ship}
-            contact={contact}
-            isPublic={isPublic}
-            api={props.api}
-            groups={props.groups}
-            associations={props.associations}
-          />
-        </Box>
-      </Center>
-    );
-  };
 
-  const EditInterface = () => {
-    return (
-      <Center p={[0, 4]} height='100%' width='100%'>
-        <Box ref={anchorRef} maxWidth='600px' width='100%' position='relative'>
+  if (!props.ship) {
+    return null;
+  }
+
+  return (
+    <Center p={[0, 4]} height='100%' width='100%'>
+      <Box maxWidth='600px' width='100%' position='relative'>
+        { isEdit ? (
           <EditProfile
             ship={ship}
             contact={contact}
@@ -193,10 +181,18 @@ export function Profile(props: any): ReactElement {
             associations={props.associations}
             isPublic={isPublic}
           />
-        </Box>
-      </Center>
-    );
-  };
-
-  return isEdit ? <EditInterface /> : <ViewInterface />;
+        ) : (
+          <ViewProfile
+            nacked={nacked}
+            ship={ship}
+            contact={contact}
+            isPublic={isPublic}
+            api={props.api}
+            groups={props.groups}
+            associations={props.associations}
+          />
+        )}
+      </Box>
+    </Center>
+  );
 }

From 0bb4aff757c3e5466b8591a2d920b933877b1786 Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam.fitzgerald@tlon.io>
Date: Tue, 9 Mar 2021 10:56:43 +1000
Subject: [PATCH 2/3] Tutorial: hide caret on mobile

---
 pkg/interface/src/views/landscape/components/TutorialModal.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/pkg/interface/src/views/landscape/components/TutorialModal.tsx b/pkg/interface/src/views/landscape/components/TutorialModal.tsx
index 6df42a6e08..a58565b309 100644
--- a/pkg/interface/src/views/landscape/components/TutorialModal.tsx
+++ b/pkg/interface/src/views/landscape/components/TutorialModal.tsx
@@ -228,6 +228,7 @@ export function TutorialModal(props: { api: GlobalApi }) {
             direction={arrow}
             height="0px"
             width="0px"
+            display={["none", "block"]}
           />
 
           <Box

From e296a5d98681a9c469f9f53ccfe9ba56b3a33290 Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam.fitzgerald@tlon.io>
Date: Tue, 9 Mar 2021 12:58:49 +1000
Subject: [PATCH 3/3] Tutorial: dismiss correctly

---
 pkg/interface/src/views/apps/profile/components/Profile.tsx    | 3 ---
 pkg/interface/src/views/landscape/components/TutorialModal.tsx | 1 +
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/pkg/interface/src/views/apps/profile/components/Profile.tsx b/pkg/interface/src/views/apps/profile/components/Profile.tsx
index 0f7b641d67..c9015d59ca 100644
--- a/pkg/interface/src/views/apps/profile/components/Profile.tsx
+++ b/pkg/interface/src/views/apps/profile/components/Profile.tsx
@@ -161,9 +161,6 @@ export function Profile(props: any): ReactElement {
 
   const anchorRef = useRef<HTMLElement | null>(null);
 
-  console.log(ship);
-
-
   if (!props.ship) {
     return null;
   }
diff --git a/pkg/interface/src/views/landscape/components/TutorialModal.tsx b/pkg/interface/src/views/landscape/components/TutorialModal.tsx
index a58565b309..03d4b7facf 100644
--- a/pkg/interface/src/views/landscape/components/TutorialModal.tsx
+++ b/pkg/interface/src/views/landscape/components/TutorialModal.tsx
@@ -98,6 +98,7 @@ export function TutorialModal(props: { api: GlobalApi }) {
   }, [tutorialRef]);
 
   const dismiss = useCallback(async () => {
+    setPaused(false);
     hideTutorial();
     await props.api.settings.putEntry('tutorial', 'seen', true);
   }, [hideTutorial, props.api]);