From 13ef2ce27a5dc092e1bbe7c4bc011d7143b4af32 Mon Sep 17 00:00:00 2001 From: Maxime Clauss Date: Mon, 4 Jul 2022 21:13:04 +0800 Subject: [PATCH] Revert all components up to questions to the old design --- package-lock.json | 30 +++ package.json | 1 + src/App.js | 17 +- src/theme/kiddy.js | 38 +++- src/views/components/AboutPanel/index.jsx | 90 +++++---- src/views/components/AvatarPanel/index.jsx | 109 +++++++---- src/views/components/Layout/index.jsx | 153 ++++++++++++--- src/views/components/NamePanel/index.jsx | 81 +++++--- src/views/components/QuestionPanel/index.jsx | 187 +++++++++++++------ src/views/pages/Home/index.jsx | 125 ++----------- src/views/pages/Rules/index.jsx | 111 +++++------ src/views/pages/Start/index.jsx | 20 +- 12 files changed, 582 insertions(+), 380 deletions(-) diff --git a/package-lock.json b/package-lock.json index c1021ab..2bf3b4e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,6 +20,7 @@ "firebase-tools": "^10.0.1", "lodash.throttle": "^4.1.1", "react": "^17.0.2", + "react-alice-carousel": "^2.6.1", "react-art": "^17.0.2", "react-dom": "^17.0.2", "react-firebase-hooks": "^5.0.3", @@ -22945,6 +22946,17 @@ "node": ">=0.10.0" } }, + "node_modules/react-alice-carousel": { + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/react-alice-carousel/-/react-alice-carousel-2.6.1.tgz", + "integrity": "sha512-U1EJ7zVVgXDp28hus/Tt9WPAlj9KovFkP2Rd8zpo1rxspDpSQpAxSSyL+w0luMf/8m0KTuDCOcf1M0QLm7X+qQ==", + "dependencies": { + "vanilla-swipe": "^2.2.0" + }, + "peerDependencies": { + "react": ">=15.4" + } + }, "node_modules/react-app-polyfill": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/react-app-polyfill/-/react-app-polyfill-3.0.0.tgz", @@ -27548,6 +27560,11 @@ "resolved": "https://registry.npmjs.org/valid-url/-/valid-url-1.0.9.tgz", "integrity": "sha1-HBRHm0DxOXp1eC8RXkCGRHQzogA=" }, + "node_modules/vanilla-swipe": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/vanilla-swipe/-/vanilla-swipe-2.4.0.tgz", + "integrity": "sha512-EdZdBWhPQvKz8DWHRXEHxsbJnU5wWKXrXblOV9ENElDnEK3tPkrBlAYK1pgPeuUb8k2DPQEK3tFi6W4cMZgUAg==" + }, "node_modules/vary": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", @@ -45651,6 +45668,14 @@ "object-assign": "^4.1.1" } }, + "react-alice-carousel": { + "version": "2.6.1", + "resolved": "https://registry.npmjs.org/react-alice-carousel/-/react-alice-carousel-2.6.1.tgz", + "integrity": "sha512-U1EJ7zVVgXDp28hus/Tt9WPAlj9KovFkP2Rd8zpo1rxspDpSQpAxSSyL+w0luMf/8m0KTuDCOcf1M0QLm7X+qQ==", + "requires": { + "vanilla-swipe": "^2.2.0" + } + }, "react-app-polyfill": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/react-app-polyfill/-/react-app-polyfill-3.0.0.tgz", @@ -49203,6 +49228,11 @@ "resolved": "https://registry.npmjs.org/valid-url/-/valid-url-1.0.9.tgz", "integrity": "sha1-HBRHm0DxOXp1eC8RXkCGRHQzogA=" }, + "vanilla-swipe": { + "version": "2.4.0", + "resolved": "https://registry.npmjs.org/vanilla-swipe/-/vanilla-swipe-2.4.0.tgz", + "integrity": "sha512-EdZdBWhPQvKz8DWHRXEHxsbJnU5wWKXrXblOV9ENElDnEK3tPkrBlAYK1pgPeuUb8k2DPQEK3tFi6W4cMZgUAg==" + }, "vary": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", diff --git a/package.json b/package.json index 10ad6e6..50d09a8 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "firebase-tools": "^10.0.1", "lodash.throttle": "^4.1.1", "react": "^17.0.2", + "react-alice-carousel": "^2.6.1", "react-art": "^17.0.2", "react-dom": "^17.0.2", "react-firebase-hooks": "^5.0.3", diff --git a/src/App.js b/src/App.js index d97e5d8..b1e0b95 100644 --- a/src/App.js +++ b/src/App.js @@ -3,7 +3,6 @@ import { BrowserRouter as Router, Route, Routes } from "react-router-dom"; import CssBaseline from "@mui/material/CssBaseline"; import { ThemeProvider } from "@mui/material/styles"; import { cyberTheme, kiddyTheme } from "./theme"; -import Layout from "./views/components/Layout"; import ROUTE_NAMES from "./constants/routeNames"; @@ -24,19 +23,17 @@ const ROUTES = [ ]; const App = () => { - const [theme, setTheme] = useState("cyber"); + const [theme, setTheme] = useState("kiddy"); return ( - - - {ROUTES.map((route) => { - const key = route.path === "" ? "/home" : route.path; - return ; - })} - - + + {ROUTES.map((route) => { + const key = route.path === "" ? "/home" : route.path; + return ; + })} + ); diff --git a/src/theme/kiddy.js b/src/theme/kiddy.js index ed81616..0e936ca 100644 --- a/src/theme/kiddy.js +++ b/src/theme/kiddy.js @@ -3,12 +3,13 @@ import { createTheme, responsiveFontSizes } from "@mui/material/styles"; import Bangers from "../fonts/Bangers-Regular.ttf"; import Nunito from "../fonts/Nunito-Regular.ttf"; -const orange = "rgb(252, 174, 22)"; +export const orange = "#fcaf16"; +export const white = "#ffffff"; const palette = { mode: "dark", primary: { - main: "rgb(252, 174, 22)", + main: orange, }, }; @@ -18,23 +19,29 @@ const typography = { h1: { fontFamily: "Bangers", color: orange, - WebkitTextStroke: "0.5px white", + WebkitTextStroke: "0.5px black", }, h2: { fontFamily: "Bangers", color: orange, - WebkitTextStroke: "0.5px white", + WebkitTextStroke: "0.5px black", }, h3: { fontFamily: "Bangers", color: orange, - WebkitTextStroke: "0.5px white", + WebkitTextStroke: "0.5px black", }, h4: { fontFamily: "Bangers", color: orange, WebkitTextStroke: "0.5px black", }, + h5: { + fontFamily: "Arial", + color: white, + fontSize: "18px", + fontWeight: "700", + }, }; const components = { @@ -94,6 +101,27 @@ const components = { }, }, }, + MuiInput: { + styleOverrides: { + input: { + fontSize: "24px", + fontWeight: "700", + }, + }, + }, + MuiInputLabel: { + styleOverrides: { + root: { + width: "100%", + textAlign: "center", + fontSize: "24px", + fontWeight: "700", + }, + shrink: { + display: "none", + }, + }, + }, }; const kiddyTheme = responsiveFontSizes( diff --git a/src/views/components/AboutPanel/index.jsx b/src/views/components/AboutPanel/index.jsx index 5682a17..2e24cc3 100644 --- a/src/views/components/AboutPanel/index.jsx +++ b/src/views/components/AboutPanel/index.jsx @@ -1,44 +1,70 @@ -import * as React from "react"; +import { useCallback } from "react"; +import { useNavigate } from "react-router-dom"; import Typography from "@mui/material/Typography"; import Box from "@mui/material/Box"; +import ROUTE_NAMES from "../../../constants/routeNames"; import ResponsivePanel, { RESPONSIVE_PANEL_SPACING } from "../ResponsivePanel"; +import Layout from "../Layout"; import PreviousNextButtons from "../PreviousNextButtons"; -const AboutPanel = ({ onPrevious, onNext }) => { +const { HOME } = ROUTE_NAMES; + +const AboutPanel = ({ onNext }) => { + const navigate = useNavigate(); + const navigateToHome = useCallback(() => navigate(HOME), [navigate]); return ( - - - About the Game - - - - - The purpose of this quiz is to help you better understand how your - child would naturally respond when playing online games. - - - - - Both you (the parent) and your child will each answer the same list - of questions. There is no right or wrong answer. Instead, the goal - is to spark a conversation on online safety, bridge any knowledge - gaps and foster closer family bonds. - - - - - Use this opportunity to engage with your child. Ask them why they - picked the particular option before proceeding to the next question. - - + + + - - Their answers might surprise you. - + INTRODUCTION + + + About the Game + + + + + The purpose of this quiz is to help you better understand how + your child would naturally respond when playing online games. + + + + + Both you (the parent) and your child will each answer the same + list of questions. There is no right or wrong answer. Instead, + the goal is to spark a conversation on online safety, bridge any + knowledge gaps and foster closer family bonds. + + + + + Use this opportunity to engage with your child. Ask them why + they picked the particular option before proceeding to the next + question. + + + + + Their answers might surprise you. + + + + + + - - + ); }; diff --git a/src/views/components/AvatarPanel/index.jsx b/src/views/components/AvatarPanel/index.jsx index 17dacdb..dbdcc57 100644 --- a/src/views/components/AvatarPanel/index.jsx +++ b/src/views/components/AvatarPanel/index.jsx @@ -1,48 +1,79 @@ -import * as React from "react"; -import Paper from "@mui/material/Paper"; +import { useState, useCallback, useMemo } from "react"; import Box from "@mui/material/Box"; -import Grid from "@mui/material/Grid"; import Typography from "@mui/material/Typography"; -import IconButton from "@mui/material/IconButton"; +import AliceCarousel from "react-alice-carousel"; +import "react-alice-carousel/lib/alice-carousel.css"; +import { RESPONSIVE_PANEL_SPACING } from "../ResponsivePanel"; import PreviousNextButtons from "../PreviousNextButtons"; +import Layout from "../Layout"; -const AvatarPanel = ({ step, avatars, onPrevious, onSelect }) => { +const AvatarPanel = ({ title, avatars, onPrevious, onSelect }) => { + const [selectedIndex, setSelectedIndex] = useState(1); + const handleSlideChange = useCallback( + (e) => setSelectedIndex((e.item + 1) % avatars.length), + [avatars] + ); + const handleNext = useCallback( + () => onSelect(avatars[selectedIndex]), + [avatars, selectedIndex] + ); + const avatarComponents = useMemo( + () => + avatars.map((avatar, i) => ( + {`avatar-${i}`} + )), + [avatars, selectedIndex] + ); return ( - - + - - - Select your avatar! - - - {avatars.map((avatar, i) => ( - - onSelect(avatar)} - sx={{ padding: "0px" }} - > - - {`child-${i}`} - - - - ))} - - - - + + + + + + + {title} + + + Choose + your + Avatar! + + + + + + ); }; diff --git a/src/views/components/Layout/index.jsx b/src/views/components/Layout/index.jsx index a9ba8bb..bc6d823 100644 --- a/src/views/components/Layout/index.jsx +++ b/src/views/components/Layout/index.jsx @@ -1,37 +1,144 @@ import Box from "@mui/material/Box"; -import ResponsiveMenu from "../ResponsiveMenu"; -import BackgroundShapes from "../../assets/images/background_shapes.png"; +import LogoTop from "../../assets/icons/logoTop.svg"; +import Top from "../../assets/icons/top.svg"; +import Bottom from "../../assets/icons/bottom.svg"; +import Banner from "../../assets/icons/banner.svg"; -const Layout = ({ children, theme, onThemeChange }) => { +const VARIANTS = { + WELCOME: "welcome", + AVATAR: "avatar", + DARK_BLUE: "dark_blue", + QUESTION: "question", +}; + +const Layout = ({ children, variant }) => { return ( - + <> + {(!variant || + variant === VARIANTS.WELCOME || + variant === VARIANTS.AVATAR || + variant === VARIANTS.QUESTION) && } + {variant === VARIANTS.DARK_BLUE && } - - {children} + {(!variant || variant === VARIANTS.WELCOME) && ( + <> + + + + )} + {variant === VARIANTS.AVATAR && } + {variant === VARIANTS.QUESTION && ( + <> + + + + )} + + {children} + - + ); }; +const WelcomeHeader = () => ( + +); + +const WelcomeFooter = () => ( + +); + +const WelcomeBackground = () => ( + +); + +const AvatarHeader = () => ( + <> + + +); + +const QuestionHeader = () => ( + <> + + +); + +const QuestionFooter = () => ( + <> + + +); + +const DarkBlueBackground = () => ( + +); + export default Layout; diff --git a/src/views/components/NamePanel/index.jsx b/src/views/components/NamePanel/index.jsx index 1fef8a6..a375247 100644 --- a/src/views/components/NamePanel/index.jsx +++ b/src/views/components/NamePanel/index.jsx @@ -2,8 +2,9 @@ import { useState, useCallback } from "react"; import Typography from "@mui/material/Typography"; import TextField from "@mui/material/TextField"; import Box from "@mui/material/Box"; -import ResponsivePanel, { RESPONSIVE_PANEL_SPACING } from "../ResponsivePanel"; +import { RESPONSIVE_PANEL_SPACING } from "../ResponsivePanel"; import PreviousNextButtons from "../PreviousNextButtons"; +import Layout from "../Layout"; const maxNameLength = 24; @@ -19,41 +20,59 @@ const NamePanel = ({ title, name, onChange, onPrevious, onNext }) => { [onChange] ); return ( - - - {title} - - - Enter your name! - + { - e.preventDefault(); - onNext(); + sx={{ + height: "100%", + display: "flex", + flexDirection: "column", + justifyContent: "flex-end", + alignItems: "center", + padding: "16px", }} > - + + {title} + + + Enter + your + name! + + + { + e.preventDefault(); + onNext(); + }} + > + + + + + - - + ); }; diff --git a/src/views/components/QuestionPanel/index.jsx b/src/views/components/QuestionPanel/index.jsx index d4639ce..92b769f 100644 --- a/src/views/components/QuestionPanel/index.jsx +++ b/src/views/components/QuestionPanel/index.jsx @@ -2,14 +2,18 @@ import { useState, useCallback } from "react"; import Typography from "@mui/material/Typography"; import Box from "@mui/material/Box"; import Button from "@mui/material/Button"; -import ResponsivePanel, { RESPONSIVE_PANEL_SPACING } from "../ResponsivePanel"; +import { RESPONSIVE_PANEL_SPACING } from "../ResponsivePanel"; import PreviousNextButtons from "../PreviousNextButtons"; +import Layout from "../Layout"; +import { orange } from "../../../theme/kiddy"; const CHILD = 0; const PARENT = 1; const REVIEW = 2; -const avatarSize = { xs: "75px", sm: "150px" }; +const avatarSize = { xs: "150px", sm: "300px" }; + +const horizontalPadding = "10%"; /* This component has internal steps for the child, parent, and review phase @@ -43,17 +47,27 @@ const QuestionPanel = ({ if (player === PARENT) setParentAnswer(answer); }; return ( - -
- + + + +
+ {currentTurn === REVIEW && childAnswer === answer && ( <img @@ -98,7 +114,7 @@ const QuestionPanel = ({ onClick={() => setAnswer(currentTurn, answer)} sx={{ width: "100%", - margin: "10px", + margin: "4px 0px", height: { xs: "80px", md: "40px" }, }} > @@ -128,8 +144,9 @@ const QuestionPanel = ({ onPrevious={previousTurn} onNext={nextTurn} /> - </ResponsivePanel> - </Box> + <Box mb={RESPONSIVE_PANEL_SPACING} /> + </Box> + </Layout> ); }; @@ -143,33 +160,84 @@ const Header = ({ parentAvatar, }) => ( <> - <Typography variant="h4"> - Question {currentQuestion + 1} / {totalQuestions} - </Typography> - {currentTurn === CHILD && ( - <Box height={avatarSize}> - <img - src={childAvatar} - alt="Child Avatar" - style={{ height: "100%", objectFit: "contain" }} - /> - </Box> - )} - {currentTurn === PARENT && ( - <Box height={avatarSize}> - <img - src={parentAvatar} - alt="Parent Avatar" - style={{ height: "100%", objectFit: "contain" }} - /> - </Box> - )} - {currentTurn !== REVIEW && ( - <Typography variant="h4"> - {currentTurn === CHILD ? childName : parentName}, it's your turn + <Box + sx={{ paddingLeft: horizontalPadding, paddingRight: horizontalPadding }} + > + <Typography variant="h3"> + Question {currentQuestion + 1} / {totalQuestions} </Typography> - )} - <Box mb={RESPONSIVE_PANEL_SPACING} /> + </Box> + <Box sx={{ position: "relative", textAlign: "center" }}> + {currentTurn !== REVIEW && ( + <Box + sx={{ + position: "absolute", + top: "0px", + height: "48px", + width: "50%", + backgroundImage: `linear-gradient(to right, rgba(252, 174, 22, 1), 90%, rgba(252, 174, 22, 0))`, + paddingLeft: "24px", + textAlign: "center", + }} + > + <Typography variant="h5" sx={{ color: "black", lineHeight: "48px" }}> + {currentTurn === CHILD ? childName : parentName} + </Typography> + </Box> + )} + <Box + sx={{ + position: "absolute", + top: "0px", + width: "100%", + paddingLeft: horizontalPadding, + paddingRight: horizontalPadding, + }} + > + {currentTurn === CHILD && ( + <Box height={avatarSize}> + <img + src={parentAvatar} + alt="Child Avatar" + style={{ + height: "50%", + objectFit: "contain", + marginBottom: "4%", + marginRight: "-4%", + }} + /> + <img + src={childAvatar} + alt="Child Avatar" + style={{ height: "100%", objectFit: "contain" }} + /> + </Box> + )} + {currentTurn === PARENT && ( + <Box height={avatarSize}> + <img + src={childAvatar} + alt="Parent Avatar" + style={{ + height: "50%", + objectFit: "contain", + marginBottom: "4%", + marginRight: "-4%", + }} + /> + <img + src={parentAvatar} + alt="Child Avatar" + style={{ height: "100%", objectFit: "contain" }} + /> + </Box> + )} + {currentTurn !== REVIEW && ( + <Typography variant="h1">It's your turn</Typography> + )} + </Box> + <Box mb={RESPONSIVE_PANEL_SPACING} /> + </Box> </> ); @@ -180,30 +248,29 @@ const Title = ({ childAnswer, parentAnswer, }) => ( - <> - {currentTurn === CHILD && ( - <Box mb={RESPONSIVE_PANEL_SPACING}> + <Box paddingLeft={horizontalPadding} paddingRight={horizontalPadding}> + <Box + backgroundColor="#c842f6" + margin="4px 0px" + padding="24px" + borderRadius="15px" + > + {currentTurn === CHILD && ( <Typography variant="h5">{questionChild}</Typography> - </Box> - )} - {currentTurn === PARENT && ( - <Box mb={RESPONSIVE_PANEL_SPACING}> + )} + {currentTurn === PARENT && ( <Typography variant="h5">{questionParent}</Typography> - </Box> - )} - {currentTurn === REVIEW && childAnswer === parentAnswer && ( - <Box mb={RESPONSIVE_PANEL_SPACING}> + )} + {currentTurn === REVIEW && childAnswer === parentAnswer && ( <Typography variant="h5">Answers matched!</Typography> - </Box> - )} - {currentTurn === REVIEW && childAnswer !== parentAnswer && ( - <Box mb={RESPONSIVE_PANEL_SPACING}> + )} + {currentTurn === REVIEW && childAnswer !== parentAnswer && ( <Typography variant="h5"> Uh Oh! Looks like you two don't agree </Typography> - </Box> - )} - </> + )} + </Box> + </Box> ); const Subtitle = ({ currentTurn, childAnswer, parentAnswer }) => ( diff --git a/src/views/pages/Home/index.jsx b/src/views/pages/Home/index.jsx index 6b5b130..b03ff02 100644 --- a/src/views/pages/Home/index.jsx +++ b/src/views/pages/Home/index.jsx @@ -1,136 +1,39 @@ import { useCallback } from "react"; import Box from "@mui/material/Box"; -import Grid from "@mui/material/Grid"; -import Paper from "@mui/material/Paper"; import Typography from "@mui/material/Typography"; import Button from "@mui/material/Button"; import { useNavigate } from "react-router-dom"; -import KidsPlaySafer from "../../assets/vectors/kids_play_safer.svg"; -import DigitalForLife from "../../assets/images/digitalForLife.png"; -import BetterSG from "../../assets/images/bettersg.png"; import ROUTE_NAMES from "../../../constants/routeNames"; +import Layout from "../../components/Layout"; const { START, RULES } = ROUTE_NAMES; const Home = () => { const navigate = useNavigate(); const navigateToGame = useCallback(() => navigate(START), [navigate]); - const navigateToRules = useCallback(() => navigate(RULES), [navigate]); return ( - <Box - sx={{ - height: "100%", - padding: { - xs: "0px 20px 20px 20px", - sm: "0px 100px", - md: "0px 200px", - }, - display: "flex", - flexDirection: "column", - alignItems: "start", - justifyContent: "center", - }} - > - <Box ml="-40px" mb="-60px" sx={{ display: { xs: "none", md: "block" } }}> - <img src={KidsPlaySafer} alt="Kids Play Safer Text" width="650" /> - </Box> + <Layout> <Box - ml="-30px" - mb="-45px" - sx={{ display: { xs: "none", sm: "block", md: "none" } }} + height="100%" + display="flex" + flexDirection="column" + justifyContent="flex-end" + alignItems="center" > - <img src={KidsPlaySafer} alt="Kids Play Safer Text" width="460" /> - </Box> - <Box ml="-20px" mb="-30px" sx={{ display: { xs: "block", sm: "none" } }}> - <img src={KidsPlaySafer} alt="Kids Play Safer Text" width="325" /> - </Box> - <Box> - <Typography variant="h6" color="white"> - Understand how your kids behave online. - </Typography> - <Typography variant="h6" color="white"> - Discuss, educate, learn, there is no right or wrong answer. + <Typography variant="h1" color="#ba43db"> + Welcome </Typography> - </Box> - <Box mt="32px"> + <Box height="24px" /> <Button - onClick={navigateToRules} - variant="outlined" - sx={{ - mr: "32px", - mb: "32px", - fontSize: "24px", - height: "48px", - borderRadius: "30px", - }} - > - How to play - </Button> - <Button - onClick={navigateToGame} variant="contained" - sx={{ - mr: "32px", - mb: "32px", - fontSize: "24px", - height: "48px", - borderRadius: "30px", - }} + sx={{ backgroundColor: "#dc24fc" }} + onClick={navigateToGame} > Start </Button> + <Box height="15%" /> </Box> - <Box - mt="80px" - paddingRight={{ xs: "60px", sm: "0px" }} - width={{ xs: "100%", sm: "70%", md: "600px" }} - > - <Grid container spacing={2} alignItems="stretch"> - <Grid item xs={12} sm={4} md={4}> - <a - href="https://www.digitalforlife.gov.sg/" - target="_blank" - rel="noreferrer" - > - <Paper - elevation={0} - sx={{ - padding: "4px", - width: "100%", - height: "100%", - display: "flex", - alignItems: "center", - background: "rgba(39, 2, 69, 0.6)", - }} - > - <img - src={DigitalForLife} - alt="Digital For Life Logo" - width="100%" - /> - </Paper> - </a> - </Grid> - <Grid item xs={12} sm={4} md={4}> - <a href="https://better.sg/" target="_blank" rel="noreferrer"> - <Paper - elevation={0} - sx={{ - padding: "4px", - width: "100%", - height: "100%", - display: "flex", - alignItems: "center", - background: "rgba(255, 255, 255, 0.8)", - }} - > - <img src={BetterSG} alt="Better.sg Logo" width="100%" /> - </Paper> - </a> - </Grid> - </Grid> - </Box> - </Box> + </Layout> ); }; diff --git a/src/views/pages/Rules/index.jsx b/src/views/pages/Rules/index.jsx index dbffa8e..a742d79 100644 --- a/src/views/pages/Rules/index.jsx +++ b/src/views/pages/Rules/index.jsx @@ -7,6 +7,7 @@ import ResponsivePanel, { } from "../../components/ResponsivePanel"; import Button from "@mui/material/Button"; import ROUTE_NAMES from "../../../constants/routeNames"; +import Layout from "../../components/Layout"; const { START, HOME } = ROUTE_NAMES; const Rules = () => { @@ -14,68 +15,70 @@ const Rules = () => { const navigateToGame = useCallback(() => navigate(START), [navigate]); const navigateToHome = useCallback(() => navigate(HOME), [navigate]); return ( - <Box - sx={{ - padding: { xs: "0px 8px", sm: "0px 16px", md: "0px 24px" }, - height: "100%", - display: "flex", - flexDirection: "column", - alignItems: "center", - justifyContent: "center", - }} - > - <ResponsivePanel small> - <Box mb={RESPONSIVE_PANEL_SPACING}> - <Typography variant="h4">How To Play</Typography> - </Box> - <Box mb={RESPONSIVE_PANEL_SPACING}> + <Layout> + <Box + sx={{ + padding: { xs: "0px 8px", sm: "0px 16px", md: "0px 24px" }, + height: "100%", + display: "flex", + flexDirection: "column", + alignItems: "center", + justifyContent: "center", + }} + > + <ResponsivePanel small> <Box mb={RESPONSIVE_PANEL_SPACING}> - <Typography align="justify"> - For each question, let your child answer first, then record your - response after. - </Typography> + <Typography variant="h4">How To Play</Typography> </Box> <Box mb={RESPONSIVE_PANEL_SPACING}> - <Typography align="justify"> - At the end of the quiz, the results will be compared. - </Typography> + <Box mb={RESPONSIVE_PANEL_SPACING}> + <Typography align="justify"> + For each question, let your child answer first, then record your + response after. + </Typography> + </Box> + <Box mb={RESPONSIVE_PANEL_SPACING}> + <Typography align="justify"> + At the end of the quiz, the results will be compared. + </Typography> + </Box> </Box> - </Box> - <Box pb={RESPONSIVE_PANEL_SPACING} /> - <Box mb={RESPONSIVE_PANEL_SPACING}> - <Typography variant="h4">Instructions to Parent</Typography> - </Box> - <Box mb={RESPONSIVE_PANEL_SPACING}> + <Box pb={RESPONSIVE_PANEL_SPACING} /> <Box mb={RESPONSIVE_PANEL_SPACING}> - <Typography align="justify"> - Select your response based on the answer you would like your child - to provide. - </Typography> + <Typography variant="h4">Instructions to Parent</Typography> </Box> <Box mb={RESPONSIVE_PANEL_SPACING}> - <Typography align="justify"> - Remember to use this opportunity to connect with your child by - having early and frequent discussions about online safety, so that - they will instinctively approach you when in doubt. - </Typography> + <Box mb={RESPONSIVE_PANEL_SPACING}> + <Typography align="justify"> + Select your response based on the answer you would like your + child to provide. + </Typography> + </Box> + <Box mb={RESPONSIVE_PANEL_SPACING}> + <Typography align="justify"> + Remember to use this opportunity to connect with your child by + having early and frequent discussions about online safety, so + that they will instinctively approach you when in doubt. + </Typography> + </Box> + <Button + onClick={navigateToHome} + variant="outlined" + sx={{ margin: "10px" }} + > + Home + </Button> + <Button + onClick={navigateToGame} + variant="contained" + sx={{ margin: "10px" }} + > + Start + </Button> </Box> - <Button - onClick={navigateToHome} - variant="outlined" - sx={{ margin: "10px" }} - > - Home - </Button> - <Button - onClick={navigateToGame} - variant="contained" - sx={{ margin: "10px" }} - > - Start - </Button> - </Box> - </ResponsivePanel> - </Box> + </ResponsivePanel> + </Box> + </Layout> ); }; diff --git a/src/views/pages/Start/index.jsx b/src/views/pages/Start/index.jsx index 2a41fba..7eb3168 100644 --- a/src/views/pages/Start/index.jsx +++ b/src/views/pages/Start/index.jsx @@ -2,7 +2,6 @@ import { useState, useCallback } from "react"; import { collection } from "firebase/firestore"; import { useCollection } from "react-firebase-hooks/firestore"; import { db } from "../../../firebase"; -import Box from "@mui/material/Box"; import CircularProgress from "@mui/material/CircularProgress"; import NamePanel from "../../components/NamePanel"; import AvatarPanel from "../../components/AvatarPanel"; @@ -49,16 +48,8 @@ const Start = () => { setIsSubscribed(true); }, []); return ( - <Box - sx={{ - padding: { xs: "0px 8px", sm: "0px 16px", md: "0px 24px" }, - height: "100%", - display: "flex", - flexDirection: "column", - alignItems: "center", - justifyContent: "center", - }} - > + <> + {step === STEPS.ABOUT_PANEL && <AboutPanel onNext={nextStep} />} {step === STEPS.CHILD_NAME && ( <NamePanel title="Hi, little one," @@ -70,7 +61,7 @@ const Start = () => { )} {step === STEPS.CHILD_AVATAR && ( <AvatarPanel - step={step} + title="Hi, little one," avatars={AVATARS.children} onPrevious={previousStep} onSelect={(avatar) => setChildAvatar(avatar) || nextStep()} @@ -87,13 +78,12 @@ const Start = () => { )} {step === STEPS.PARENT_AVATAR && ( <AvatarPanel - step={step} + title="Dear parent," avatars={AVATARS.parents} onPrevious={previousStep} onSelect={(avatar) => setParentAvatar(avatar) || nextStep()} /> )} - {step === STEPS.ABOUT_PANEL && <AboutPanel onNext={nextStep} />} {step >= STEPS.QUESTIONS && step < STEPS.QUESTIONS + level1QuestionsSnapshot?.docs?.length && (loading ? ( @@ -130,7 +120,7 @@ const Start = () => { <SubscriptionPanel onNext={nextStep} onSubscribe={handleSubscribe} /> )} {step === STEPS.SHARE_PAGE && <SharePanel isSubscribed={isSubscribed} />} - </Box> + </> ); };