Issue#624 welcome tutorial

packages/gdl-frontend/components/GlobalMenu/index.js

@@ -33,6 +33,7 @@ import OnlineStatusContext from '../OnlineStatusContext';
 import SelectBookLanguage from './SelectBookLanguage';
 import CategoriesMenu from './CategoriesMenu';
 import offlineLibrary from '../../lib/offlineLibrary';
+import WelcomeTutorial from '../WelcomeTutorial/WelcomeTutorial';
 
 type Props = {|
   onClose(): void,
@@ -71,7 +72,7 @@ class GlobalMenu extends React.Component<Props, State> {
         onOpen={() => {}}
         PaperProps={{
           style: {
-            // By setting variant="temporary" a borde right is applied. Which is why it setting it to "inherit" removes it
+            // By setting variant="temporary" a border right is applied. Which is why it setting it to "inherit" removes it
             borderRight: 'inherit'
           }
         }}
@@ -163,6 +164,13 @@ class GlobalMenu extends React.Component<Props, State> {
               </ListItem>
             </RouteLink>
           )}
+          <div onClick={this.disableSwipe}>
+            <WelcomeTutorial
+              shouldOpen={false}
+              listButton={true}
+              swipeable={this.enableSwipe}
+            />
+          </div>
           {online && (
             <>
               <RouteLink passHref route="translations">
@@ -182,6 +190,7 @@ class GlobalMenu extends React.Component<Props, State> {
                   </ListItemText>
                 </ListItem>
               </RouteLink>
+
               <QueryIsAdmin skip={!this.props.isOpen}>
                 {({ isAdmin }) =>
                   isAdmin && (

packages/gdl-frontend/components/WelcomeTutorial/DialogContent.js

@@ -0,0 +1,82 @@
+//@flow
+import React from 'react';
+import DialogContent from '@material-ui/core/DialogContent';
+import { Card, CardContent } from '@material-ui/core';
+
+type Props = {
+  screenshotUrlM: string,
+  screenshotUrl: string,
+  graceImgUrl: string,
+  message: string,
+  fullscreen: boolean
+};
+
+class GetDialogContent extends React.Component<Props> {
+  render() {
+    return (
+      <DialogContent
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'space-around',
+          height: '100%'
+        }}
+      >
+        <div
+          style={
+            this.props.fullscreen ? { display: 'flex' } : { height: '270px' }
+          }
+        >
+          <img
+            src={
+              this.props.fullscreen
+                ? this.props.screenshotUrlM
+                : this.props.screenshotUrl
+            }
+            alt="screenshot from the page"
+            style={{ width: '100%' }}
+          />
+        </div>
+        <div style={{ display: 'flex', flexDirection: 'row', marginTop: 10 }}>
+          <img
+            style={{ maxHeight: 170 }}
+            src={this.props.graceImgUrl}
+            alt="Grace"
+          />
+          <Card style={{ marginLeft: '15px', width: '100%' }}>
+            <CardContent
+              style={{
+                display: 'table',
+                height: '100%',
+                width: '100%',
+                padding: 0
+              }}
+            >
+              <p
+                style={
+                  this.props.fullscreen
+                    ? {
+                        fontSize: '14px',
+                        textAlign: 'center',
+                        verticalAlign: 'middle',
+                        display: 'table-cell'
+                      }
+                    : {
+                        fontSize: '16px',
+                        textAlign: 'center',
+                        verticalAlign: 'middle',
+                        display: 'table-cell'
+                      }
+                }
+              >
+                {this.props.message}
+              </p>
+            </CardContent>
+          </Card>
+        </div>
+      </DialogContent>
+    );
+  }
+}
+
+export default GetDialogContent;