welcome tour started

openfoodfacts · Aug 1, 2022 · 6846a54 · 6846a54
1 parent f54cfed
commit 6846a54
Show file tree

Hide file tree

Showing 5 changed files with 444 additions and 14 deletions.
diff --git a/package.json b/package.json
@@ -19,6 +19,8 @@
     "react-medium-image-zoom": "^4.4.3",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
+    "reactour": "^1.18.7",
+    "styled-components": "^4.0.0",
     "web-vitals": "^2.1.4"
   },
   "devDependencies": {

diff --git a/src/components/ResponsiveAppBar.jsx b/src/components/ResponsiveAppBar.jsx
@@ -18,6 +18,7 @@ import logo from "../assets/logo.png";
 import { Link } from "react-router-dom";
 
 import { useTranslation } from "react-i18next";
+import Welcome from "./welcome/Welcome";
 
 // Object wit no url are subheader in the menu
 const pages = [
@@ -181,19 +182,17 @@ const ResponsiveAppBar = () => {
                   </Button>
                 ) : null
               )}
-
           </Box>
-
+          </Box>
             <Button
               color="inherit"
               onClick={handleCloseNavMenu}
-              sx={{ my: 2, display: "block"}}
               component={Link}
               to={`/settings`}
             >
               <SettingsIcon />
             </Button>
-          </Box>
+          <Welcome />
         </Toolbar>
       </Container>
     </AppBar>

diff --git a/src/components/welcome/Buttons.jsx b/src/components/welcome/Buttons.jsx
@@ -0,0 +1,41 @@
+import React from "react";
+import { Button } from "@mui/material";
+import styled from "styled-components";
+
+const CustomButton = styled(Button)`
+  background: #4c5c6b !important;
+  color: white !important;
+  padding: 0.3em 0.7em !important;
+  fontsize: inherit !important;
+  cursor: pointer !important;
+  margin: 0.2em !important;
+  &:hover {
+    background: white !important;
+    color: #4c5c6b !important;
+    border: 1px solid #4c5c6b;
+  }
+`;
+
+const Buttons = () => {
+  return (
+    <div style={{ display: "flex", justifyContent: "flex-end" }}>
+      <CustomButton
+      // onClick={() => setIsTourOpen(false)}
+      >
+        Skip Tour
+      </CustomButton>
+      <CustomButton
+      // onClick={() => setIsTourOpen(false)}
+      >
+        Login
+      </CustomButton>
+      <CustomButton
+      // onClick={() => setIsTourOpen(false)}
+      >
+        Next
+      </CustomButton>
+    </div>
+  );
+};
+
+export default Buttons;
diff --git a/src/components/welcome/Welcome.jsx b/src/components/welcome/Welcome.jsx
@@ -0,0 +1,132 @@
+import { Button, Box, Typography } from "@mui/material";
+import React, { useState } from "react";
+import Tour from "reactour";
+import Buttons from "./Buttons";
+import QuestionMarkIcon from "@mui/icons-material/QuestionMark";
+
+const Welcome = () => {
+  const steps = [
+    {
+      style: {
+        minWidth: "750px",
+      },
+      content: () => (
+        <Box
+          sx={{
+            minWidth: "500px",
+          }}
+        >
+          <div style={{ display: "flex" }}>
+            <img
+              alt="logo"
+              style={{
+                maxWidth: "50px",
+                height: "auto",
+                flex: "20%",
+              }}
+              src={require("../../assets/logo.png")}
+            />
+            <Typography
+              variant="h6"
+              component="h2"
+              sx={{ flex: "80%", marginTop: "8px" }}
+            >
+              Welcome to Hunger Games
+            </Typography>
+          </div>
+          <Typography sx={{ mt: 2 }} component="p">
+            Hunger Games is a collection of mini-games that help contribute to
+            Open Food Facts in many ways. You can play are really exciting games
+            from anywhere. Here is a guided tour of the entire website which
+            will get you started.
+          </Typography>
+          <Typography sx={{ mt: 2 }} component="p">
+            Make sure to login to the Open Food Facts website to get credit for
+            your contributions. If you make a mistake, please take the time to
+            correct it by heading to the website.
+          </Typography>
+          <Typography sx={{ mt: 2 }} component="p">
+            In case of any doubt about the games, click on the question mark
+            icon at the top right of the page, and you can reach us on slack at
+            the #hunger-games channel
+          </Typography>
+          <hr />
+          <Buttons />
+        </Box>
+      ),
+    },
+    {
+      style: {
+        minWidth: "750px",
+      },
+      selector: ".questions",
+      content: () => (
+        <Box
+          sx={{
+            minWidth: "500px",
+          }}
+        >
+          <div style={{ display: "flex" }}>
+            <img
+              alt="logo"
+              style={{
+                maxWidth: "50px",
+                height: "auto",
+                flex: "20%",
+              }}
+              src={require("../../assets/logo.png")}
+            />
+            <Typography
+              variant="h6"
+              component="h2"
+              sx={{ flex: "80%", marginTop: "8px" }}
+            >
+              Welcome to Hunger Games
+            </Typography>
+          </div>
+          <Typography sx={{ mt: 2 }} component="p">
+            Hunger Games is a collection of mini-games that help contribute to
+            Open Food Facts in many ways. You can play are really exciting games
+            from anywhere. Here is a guided tour of the entire website which
+            will get you started.
+          </Typography>
+          <Typography sx={{ mt: 2 }} component="p">
+            Make sure to login to the Open Food Facts website to get credit for
+            your contributions. If you make a mistake, please take the time to
+            correct it by heading to the website.
+          </Typography>
+          <Typography sx={{ mt: 2 }} component="p">
+            In case of any doubt about the games, click on the question mark
+            icon at the top right of the page, and you can reach us on slack at
+            the #hunger-games channel
+          </Typography>
+          <hr />
+          <Buttons />
+        </Box>
+      ),
+    },
+  ];
+
+  const [isTourOpen, setIsTourOpen] = useState(true);
+
+  return (
+    <>
+      <Tour
+        steps={steps}
+        isOpen={isTourOpen}
+        showButtons={true}
+        onRequestClose={() => setIsTourOpen(false)}
+      />
+      <Button
+        color="inherit"
+        onClick={() => {
+          setIsTourOpen(true);
+        }}
+      >
+        <QuestionMarkIcon />
+      </Button>
+    </>
+  );
+};
+
+export default Welcome;