v1.6.4/tutorial complete

app/src/Create.js

@@ -37,6 +37,7 @@ import {
   updateLocalData,
   getUserUid,
   emptyLocalData,
+  setTutorialStatus,
 } from './Api';
 import { goTo } from 'route-lite';
 import Chat from './Chat';
@@ -90,7 +91,18 @@ export default class Create extends Component {
   }
   componentDidMount() {
     const { lastActive, userName, partyName, partyPin, allowAutoRejoin } = LocalData();
-    if (allowAutoRejoin === true && lastActive && userName && partyName && partyPin) {
+    // CONTINUE TUTORIAL
+    if (this.props.tutorialComplete === false) {
+      this.props.resetTutorial();
+    }
+    if (
+      this.props.showFab === true &&
+      allowAutoRejoin === true &&
+      lastActive &&
+      userName &&
+      partyName &&
+      partyPin
+    ) {
       if (Math.abs(new Date(parseInt(lastActive)) - new Date().getTime()) <= 60000) {
         this.props.updateLoading(true);
         this.props.setVisible(true);
@@ -262,7 +274,7 @@ export default class Create extends Component {
       alertStep,
       expanded,
     } = this.state;
-    const { status } = this.props;
+    const { status, resetTutorial } = this.props;
     return (
       <div className="party-create-container">
         <Typography
@@ -373,7 +385,10 @@ export default class Create extends Component {
             <span>{mode === 'create' ? 'Start Party' : 'Join Party'}</span> <ChevronRight />
           </Button>
         </Paper>
-        <ExpansionPanel expanded={expanded === 'alerts'} className="create-settings-card">
+        <ExpansionPanel
+          expanded={expanded === 'alerts'}
+          className="create-settings-card create-alerts-card"
+        >
           <ExpansionPanelSummary
             onClick={() => this.handleExpanders('alerts')}
             expandIcon={<ExpandLess />}
@@ -431,7 +446,10 @@ export default class Create extends Component {
             )}
           </ExpansionPanelDetails>
         </ExpansionPanel>
-        <ExpansionPanel expanded={expanded === 'settings'} className="create-settings-card">
+        <ExpansionPanel
+          expanded={expanded === 'settings'}
+          className="create-settings-card create-settings-expander"
+        >
           <ExpansionPanelSummary
             onClick={() => this.handleExpanders('settings')}
             expandIcon={<ExpandLess />}
@@ -482,6 +500,18 @@ export default class Create extends Component {
               }
               labelPlacement="end"
             />
+            <Button
+              color="secondary"
+              fullWidth
+              variant="contained"
+              onClick={() => {
+                setTutorialStatus(false);
+                resetTutorial();
+              }}
+              size="small"
+            >
+              START TUTORIAL
+            </Button>
             <Button
               color="secondary"
               fullWidth