add tour button banner

src/components/guided-tour/guided-tour-button.tsx

@@ -0,0 +1,21 @@
+import { useMemo } from 'react'
+import { Button } from 'antd'
+import { useEnvironment, useTourContext } from '../../contexts'
+import classNames from 'classnames'
+import './guided-tour.css'
+
+export const GuidedTourButton = ({ }) => {
+    const { tour } = useTourContext()!
+    const { context } = useEnvironment() as any
+
+    return (
+        <div className="guided-tour-button-container">
+            <Button
+                className={ classNames("guided-tour-button", context.brand) }
+                onClick={ () => tour.start() }
+            >
+                Take a Tour
+            </Button>
+        </div>
+    )
+}

src/components/guided-tour/guided-tour.css

@@ -0,0 +1,36 @@
+.guided-tour-button-container {
+    display: flex;
+    position: fixed;
+    top: 60%;
+    right: 0;
+    z-index: 99;
+    transform: rotate(-90deg) translateY(-100%);
+    transform-origin: top right;
+}
+
+button.guided-tour-button {
+    padding: 8px 32px;
+    height: 40px;
+    font-weight: 600;
+    font-size: 16px;
+    /* Improves readability when rotated */
+    letter-spacing: .8px;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    border-bottom-width: 0;
+
+}
+
+.guided-tour-button.heal {
+    background-color: #982465;
+    color: white;
+    border-color: #982465;
+}
+.guided-tour-button.heal:hover {
+    color: #c41d7f;
+    border-color: #c41d7f;
+}
+.guided-tour-button.heal:active, .guided-tour-button.heal:focus {
+    color: #982465;
+    border-color: #982465;
+}

src/components/guided-tour/index.ts

@@ -0,0 +1 @@
+export * from './guided-tour-button'

src/components/index.js

@@ -5,3 +5,4 @@ export * from './debounced-input'
 export * from './bouncing-dots'
 export * from './side-collapse'
 export * from './info-helpers'
+export * from './guided-tour'

src/components/layout/layout.js

@@ -2,7 +2,7 @@ import { Fragment, useState } from 'react'
 import { Layout as AntLayout, Button, Menu, Grid, Divider } from 'antd'
 import { LinkOutlined } from '@ant-design/icons'
 import { useLocation, useNavigate, Link } from '@gatsbyjs/reach-router'
-import { useEnvironment, useAnalytics, useWorkspacesAPI, useTourContext } from '../../contexts';
+import { useEnvironment, useAnalytics, useWorkspacesAPI } from '../../contexts';
 import { MobileMenu } from './menu';
 import { SidePanel } from '../side-panel/side-panel';
 import './layout.css';
@@ -13,7 +13,6 @@ const { useBreakpoint } = Grid
 export const Layout = ({ children }) => {
   const { helxAppstoreUrl, routes, context, basePath } = useEnvironment()
   const { api, loading: apiLoading, loggedIn, appstoreContext } = useWorkspacesAPI()
-  const { tour } = useTourContext()
   const { analyticsEvents } = useAnalytics()
   const { md } = useBreakpoint()
   const baseLinkPath = context.workspaces_enabled === 'true' ? '/helx' : ''
@@ -87,7 +86,6 @@ export const Layout = ({ children }) => {
                 </Button>
               </div>
             )}
-            <div style={{ height: "100%" }}><Button ghost type="primary" onClick={ () => tour.start() }>Tour</Button></div>
           </div>
         ) : (
           <MobileMenu menu={routes} />

src/contexts/tour-context/context.tsx

@@ -668,8 +668,7 @@ export const TourProvider = ({ children }: ITourProvider ) => {
         return []
     }, [searchBarDomMask, basePath, navigate, doSearch])
 
-    const tour = useShepherdTour({ tourOptions, steps: tourSteps });
-    (window as any).tour = tour
+    const tour = useShepherdTour({ tourOptions, steps: tourSteps })
 
     useEffect(() => {
         const cleanupTour = () => {

src/views/search.js

@@ -4,6 +4,7 @@ import { Typography } from 'antd'
 import { Breadcrumbs } from '../components/layout'
 import { useEnvironment } from '../contexts'
 import { useTitle } from './'
+import { GuidedTourButton } from '../components/guided-tour'
 
 const { Title } = Typography
 
@@ -25,6 +26,8 @@ export const SearchView = () => {
 
       {context.workspaces_enabled === 'true' && <Title level={1}>Search</Title>}
 
+      <GuidedTourButton />
+
       <Results />
 
     </Fragment>