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,95 @@
+//@flow
+import React from 'react';
+import { Card, CardContent, DialogContent } 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',
+          alignItems: 'center'
+        }}
+      >
+        <div
+          style={
+            this.props.fullscreen
+              ? {
+                  display: 'flex',
+                  height: '50%',
+                  width: '-webkit-fill-available',
+                  justifyContent: 'center'
+                }
+              : { height: '270px' }
+          }
+        >
+          <img
+            src={
+              this.props.fullscreen
+                ? this.props.screenshotUrlM
+                : this.props.screenshotUrl
+            }
+            alt="screenshot from the page"
+            style={
+              this.props.fullscreen
+                ? {
+                    objectFit: 'contain',
+                    height: '100%',
+                    maxWidth: '100%'
+                  }
+                : { width: '100%' }
+            }
+          />
+        </div>
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'row',
+            marginTop: 20,
+            height: '50%'
+          }}
+        >
+          <img
+            style={{ maxHeight: 170, objectFit: 'scale-down' }}
+            src={this.props.graceImgUrl}
+            alt="Grace"
+          />
+          <Card style={{ marginLeft: '15px', width: '100%' }}>
+            <CardContent
+              style={{
+                display: 'table',
+                height: '100%',
+                width: '100%',
+                padding: 0
+              }}
+            >
+              <p
+                style={{
+                  fontSize: `${this.props.fullscreen ? '14' : '16'}px`,
+                  textAlign: 'center',
+                  verticalAlign: 'middle',
+                  display: 'table-cell',
+                  padding: '0 10px'
+                }}
+              >
+                {this.props.message}
+              </p>
+            </CardContent>
+          </Card>
+        </div>
+      </DialogContent>
+    );
+  }
+}
+
+export default GetDialogContent;