Update onboarding and a few mentions of "Collections" turned into "Sp…

…aces"
WorldBrain · Dec 31, 2021 · 3154966 · 3154966
1 parent f22c34f
commit 3154966
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 59 deletions.
diff --git a/src/common-ui/components/design-library/icons.tsx b/src/common-ui/components/design-library/icons.tsx
@@ -10,6 +10,7 @@ export const settings = browser.extension.getURL('/img/settings.svg')
 
 export const check = browser.runtime.getURL('/img/check.svg')
 export const checkRound = browser.runtime.getURL('/img/checkRound.svg')
+export const highlighterFull = browser.runtime.getURL('/img/highlightOn.svg')
 export const alertRound = browser.runtime.getURL('/img/alertRound.svg')
 export const close = browser.runtime.getURL('/img/close.svg')
 export const tagFull = browser.runtime.getURL('/img/tag_full.svg')

diff --git a/src/in-page-ui/guided-tutorial/content-script/components/tutorial-cards-content.tsx b/src/in-page-ui/guided-tutorial/content-script/components/tutorial-cards-content.tsx
@@ -33,6 +33,10 @@ const FinishHeader = styled.div`
     margin-bottom: 17px;
 `
 
+const SaveTextContainer = styled.div`
+    padding-left: 40px;
+`
+
 const OptionsList = styled.div`
     display: grid;
     grid-auto-flow: column;
@@ -50,7 +54,7 @@ const OptionItem = styled.div`
     text-align: center;
     padding: 10px 10px;
     cursor: pointer;
-    font-size: bold;
+    font-weight: bold;
     height: 140px;
     width: 140px;
     color: ${(props) => props.theme.colors.primary};
@@ -128,40 +132,49 @@ const AnnotationTitleImage = styled.div`
     padding: 0 5px 0 0;
 `
 
-const MouseOverArea = styled.div`
+const MouseOverArea = styled.div<{ top: string }>`
     width: 20px;
     height: 360px;
     position: absolute;
-    top: -100px;
-    right: -90px;
+    top: ${(props) => (props.top ? props.top : '-100px')};
+    right: -70px;
     background: #ff000040;
     border: 2px solid #ff000080;
     border-radius: 3px;
     opacity: 0;
-    animation: 0.3s ease-in-out 1s MouseAreaAppear 1;
-    animation-fill-mode: forwards;
+    animation: 3s ease-in-out 0.5s MouseAreaAppear infinite;
+    animation-iteration-count: infinite;
+    display: ${(props) => (props.onMouseEnter ? 'none' : 'flex')};
 
     @keyframes MouseAreaAppear {
         0% {
             opacity: 0;
         }
-        100% {
+        50% {
             opacity: 1;
         }
+        100% {
+            opacity: 0;
+        }
     }
 `
 
+const ShortcutLabelContainer = styled.div`
+    margin: 20px 0px;
+`
+
 const ShortcutLabel = styled.span`
     border: 1px solid #f29d9d;
     border-radius: 3px;
-    padding: 2px 5px;
-    font-size: 12px;
+    padding: 4px 14px;
+    font-size: 16px;
     width: fit-content;
     background-color: #f29d9d60;
     white-space: nowrap;
     vertical-align: top;
     color: #545454;
     font-weight: 600;
+    margin: 2px 0px;
 `
 
 const PinTutorialArrow = styled.span`
@@ -256,27 +269,38 @@ export const tutorialSteps: TutorialStepContent[] = [
 
     {
         subtitle: (
-            <PinTitleContainer>
-                <PinTitleImage src={icons.pin} />
-                Pin Memex to your menu
-                <PinTutorialArrow />
-            </PinTitleContainer>
+            <>
+                <PinTitleContainer>
+                    <AnnotationTitleContainer>
+                        <AnnotationTitleBox>
+                            <PinTitleImage src={icons.heartEmpty} />
+                            <AnnotationTitleText>
+                                Bookmark this page
+                            </AnnotationTitleText>
+                        </AnnotationTitleBox>
+                    </AnnotationTitleContainer>
+                    <RibbonTutorialArrow />
+                </PinTitleContainer>
+                <MouseOverArea />
+            </>
         ),
         text: (
-            <div>
-                <p>Easy access to bookmarking, tagging & searching.</p>
-                Save a page with{' '}
-                <ShortcutLabel>{getKeyName({ key: 'alt' })} + s</ShortcutLabel>,
-                search with{' '}
-                <ShortcutLabel>{getKeyName({ key: 'alt' })} + f</ShortcutLabel>
-            </div>
+            <SaveTextContainer>
+                <PinTitleContainer>
+                    Use the sidebar or keyboard shortcuts
+                </PinTitleContainer>
+                <ShortcutLabelContainer>
+                    <ShortcutLabel>{getKeyName({ key: 'alt' })}</ShortcutLabel>{' '}
+                    + <ShortcutLabel>s</ShortcutLabel>
+                </ShortcutLabelContainer>
+            </SaveTextContainer>
         ),
-        top: '30px',
+        top: '120px',
         bottom: null,
         left: null,
-        right: '140px',
-        width: '400px',
-        height: '200px',
+        right: '60px',
+        width: '470px',
+        height: '220px',
     },
 
     {
@@ -285,35 +309,32 @@ export const tutorialSteps: TutorialStepContent[] = [
                 <PinTitleContainer>
                     <AnnotationTitleContainer>
                         <AnnotationTitleBox>
-                            <AnnotationTitleImage>✍🏽</AnnotationTitleImage>
+                            <PinTitleImage src={icons.highlighterFull} />
                             <AnnotationTitleText>
-                                Add Highlights to the text
+                                Add Highlights and Annotations
                             </AnnotationTitleText>
                         </AnnotationTitleBox>
-                        <ShortcutLabel>
-                            {getKeyName({ key: 'alt' })} + a/w
-                        </ShortcutLabel>
                     </AnnotationTitleContainer>
                     <AnnotationTutorialArrow />
                 </PinTitleContainer>
             </>
         ),
         text: (
-            <div>
-                <p>
-                    Select some text, then use the tooltip or keyboard
-                    shortcuts.
-                </p>
-                Hold the <ShortcutLabel>shift</ShortcutLabel> key to instantly
-                create a link to the highlight.
-            </div>
+            <SaveTextContainer>
+                <p>Select text and use the tooltip or keyboard shortcuts</p>
+                <ShortcutLabelContainer>
+                    <ShortcutLabel>{getKeyName({ key: 'alt' })}</ShortcutLabel>{' '}
+                    + <ShortcutLabel>a</ShortcutLabel> or{' '}
+                    <ShortcutLabel>w</ShortcutLabel>
+                </ShortcutLabelContainer>
+            </SaveTextContainer>
         ),
         top: '30px',
         bottom: null,
         left: null,
-        right: '140px',
+        right: '40px',
         width: '480px',
-        height: '220px',
+        height: '230px',
     },
 
     {
@@ -322,33 +343,55 @@ export const tutorialSteps: TutorialStepContent[] = [
                 <PinTitleContainer>
                     <AnnotationTitleContainer>
                         <AnnotationTitleBox>
-                            <AnnotationTitleImage>📝</AnnotationTitleImage>
+                            <PinTitleImage src={icons.openSidebar} />
                             <AnnotationTitleText>
-                                Quick Access Ribbon & Sidebar
+                                View your annotations
                             </AnnotationTitleText>
                         </AnnotationTitleBox>
                     </AnnotationTitleContainer>
                     <RibbonTutorialArrow />
                 </PinTitleContainer>
-                <MouseOverArea />
+                <MouseOverArea top={'-20px'} />
             </>
         ),
         text: (
-            <div>
-                Hover over the red area to explore the quick access ribbon.{' '}
-                <br />
-                Click on the <SmallImages src={icons.openSidebar} /> to open the
-                annotation sidebar.
-            </div>
+            <SaveTextContainer>
+                Hover over the red area to open the annotation sidebar. <br />
+                <ShortcutLabelContainer>
+                    <ShortcutLabel>{getKeyName({ key: 'alt' })}</ShortcutLabel>{' '}
+                    + <ShortcutLabel>q</ShortcutLabel>
+                </ShortcutLabelContainer>
+            </SaveTextContainer>
         ),
-        top: '120px',
+        top: '40px',
         bottom: null,
         left: null,
-        right: '80px',
-        width: '470px',
+        right: '60px',
+        width: '540px',
         height: '220px',
     },
 
+    {
+        subtitle: (
+            <PinTitleContainer>
+                <PinTitleImage src={icons.pin} />
+                Pin Memex to your menu
+                <PinTutorialArrow />
+            </PinTitleContainer>
+        ),
+        text: (
+            <SaveTextContainer>
+                <p>Easy access to bookmarking, tagging & searching.</p>
+            </SaveTextContainer>
+        ),
+        top: '30px',
+        bottom: null,
+        left: null,
+        right: '140px',
+        width: '480px',
+        height: '170px',
+    },
+
     {
         subtitle: (
             <>

diff --git a/src/popup/collections-button/components/CollectionsButton.tsx b/src/popup/collections-button/components/CollectionsButton.tsx
@@ -72,7 +72,7 @@ class CollectionsButton extends PureComponent<Props> {
                     itemClass={styles.button}
                 >
                     <div className={styles.buttonInnerContent}>
-                        Add To Collection(s)
+                        Add to Spaces
                         <p className={buttonStyles.subTitle}>
                             {this.state.highlightInfo}
                         </p>

diff --git a/src/popup/container.tsx b/src/popup/container.tsx
@@ -253,15 +253,14 @@ class PopupContainer extends StatefulUIElement<Props, State, Event> {
                 <div className={styles.item}>
                     <BookmarkButton closePopup={this.closePopup} />
                 </div>
-                <div className={styles.item}>
-                    <TagsButton fetchTags={this.fetchTagsForPage} />
-                </div>
-
                 <div className={styles.item}>
                     <CollectionsButton
                         fetchCollections={this.fetchListsForPage}
                     />
                 </div>
+                <div className={styles.item}>
+                    <TagsButton fetchTags={this.fetchTagsForPage} />
+                </div>
                 <hr />
 
                 <div className={styles.item}>

diff --git a/src/sidebar/annotations-sidebar/components/AnnotationsSidebar.tsx b/src/sidebar/annotations-sidebar/components/AnnotationsSidebar.tsx
@@ -350,7 +350,7 @@ class AnnotationsSidebar extends React.Component<
                     bottom={this.props.isExpanded ? '20px' : '15px'}
                 >
                     <FollowedListSectionTitle>
-                        From Shared Spaces
+                        Annotations from Shared Spaces
                     </FollowedListSectionTitle>
 
                     {this.props.followedListLoadState ===
@@ -530,7 +530,7 @@ class AnnotationsSidebar extends React.Component<
                         }
                     >
                         <FollowedListSectionTitle>
-                            My Notes
+                            My Annotations
                         </FollowedListSectionTitle>
                         {this.props.annotations.length > 0 && (
                             <FollowedListDropdownIcon