Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Revert all components up to questions to the old design #62

Open
wants to merge 1 commit into
base: staging
Choose a base branch
from
Open

Revert all components up to questions to the old design #62

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 30 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
17 changes: 7 additions & 10 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand All @@ -24,19 +23,17 @@ const ROUTES = [
];

const App = () => {
const [theme, setTheme] = useState("cyber");
const [theme, setTheme] = useState("kiddy");
return (
<Router>
<ThemeProvider theme={theme === "kiddy" ? kiddyTheme : cyberTheme}>
<CssBaseline />
<Layout theme={theme} onThemeChange={setTheme}>
<Routes>
{ROUTES.map((route) => {
const key = route.path === "" ? "/home" : route.path;
return <Route {...route} key={key} />;
})}
</Routes>
</Layout>
<Routes>
{ROUTES.map((route) => {
const key = route.path === "" ? "/home" : route.path;
return <Route {...route} key={key} />;
})}
</Routes>
</ThemeProvider>
</Router>
);
Expand Down
38 changes: 33 additions & 5 deletions src/theme/kiddy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
};

Expand All @@ -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 = {
Expand Down Expand Up @@ -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(
Expand Down
90 changes: 58 additions & 32 deletions src/views/components/AboutPanel/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<ResponsivePanel small>
<Box mb={RESPONSIVE_PANEL_SPACING}>
<Typography variant="h4">About the Game</Typography>
</Box>
<Box mb={RESPONSIVE_PANEL_SPACING}>
<Box mb={RESPONSIVE_PANEL_SPACING}>
<Typography align="justify">
The purpose of this quiz is to help you better understand how your
child would naturally respond when playing online games.
</Typography>
</Box>
<Box mb={RESPONSIVE_PANEL_SPACING}>
<Typography align="justify">
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.
</Typography>
</Box>
<Box mb={RESPONSIVE_PANEL_SPACING}>
<Typography align="justify">
Use this opportunity to engage with your child. Ask them why they
picked the particular option before proceeding to the next question.
</Typography>
</Box>
<Layout variant="welcome">
<Box
sx={{
height: "100%",
display: "flex",
flexDirection: "column",
justifyContent: "flex-end",
alignItems: "center",
padding: "16px",
}}
>
<Box sx={{ flexGrow: 1 }} />
<Box mb={RESPONSIVE_PANEL_SPACING}>
<Typography align="justify">
Their answers might surprise you.
</Typography>
<Typography variant="h1">INTRODUCTION</Typography>
</Box>
<ResponsivePanel>
<Box mb={RESPONSIVE_PANEL_SPACING}>
<Typography variant="h4">About the Game</Typography>
</Box>
<Box mb={RESPONSIVE_PANEL_SPACING}>
<Box mb={RESPONSIVE_PANEL_SPACING}>
<Typography align="justify">
The purpose of this quiz is to help you better understand how
your child would naturally respond when playing online games.
</Typography>
</Box>
<Box mb={RESPONSIVE_PANEL_SPACING}>
<Typography align="justify">
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.
</Typography>
</Box>
<Box mb={RESPONSIVE_PANEL_SPACING}>
<Typography align="justify">
Use this opportunity to engage with your child. Ask them why
they picked the particular option before proceeding to the next
question.
</Typography>
</Box>
<Box mb={RESPONSIVE_PANEL_SPACING}>
<Typography align="justify">
Their answers might surprise you.
</Typography>
</Box>
</Box>
</ResponsivePanel>
<Box mb={RESPONSIVE_PANEL_SPACING} />
<PreviousNextButtons onPrevious={navigateToHome} onNext={onNext} />
</Box>
<PreviousNextButtons onPrevious={onPrevious} onNext={onNext} />
</ResponsivePanel>
</Layout>
);
};

Expand Down
Loading