design updates

localstack-samples · Nov 20, 2024 · 8f5019a · 8f5019a
1 parent c5f3761
commit 8f5019a
Show file tree

Hide file tree

Showing 9 changed files with 436 additions and 90 deletions.
diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -5,18 +5,29 @@ import QuizPage from './components/QuizPage';
 import ResultPage from './components/ResultPage';
 import LeaderboardPage from './components/LeaderboardPage';
 import QuizBuilder from './components/QuizBuilder';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+
+const theme = createTheme({
+  palette: {
+    primary: {
+      main: '#4D0DCF',
+    },
+  },
+});
 
 function App() {
   return (
-    <Router>
-      <Routes>
-        <Route path="/" element={<HomePage />} />
-        <Route path="/quiz" element={<QuizPage />} />
-        <Route path="/result" element={<ResultPage />} />
-        <Route path="/leaderboard" element={<LeaderboardPage />} />
-        <Route path="/create-quiz" element={<QuizBuilder />} />
-      </Routes>
-    </Router>
+    <ThemeProvider theme={theme}>
+      <Router>
+        <Routes>
+          <Route path="/" element={<HomePage />} />
+          <Route path="/quiz" element={<QuizPage />} />
+          <Route path="/result" element={<ResultPage />} />
+          <Route path="/leaderboard" element={<LeaderboardPage />} />
+          <Route path="/create-quiz" element={<QuizBuilder />} />
+        </Routes>
+      </Router>
+    </ThemeProvider>
   );
 }
 

diff --git a/frontend/src/MainLogo.svg b/frontend/src/MainLogo.svg
diff --git a/frontend/src/QuizLogo.svg b/frontend/src/QuizLogo.svg
diff --git a/frontend/src/assets/images/QuestionBg.png b/frontend/src/assets/images/QuestionBg.png
diff --git a/frontend/src/assets/images/question-bg.png b/frontend/src/assets/images/question-bg.png
diff --git a/frontend/src/components/MainLayout.js b/frontend/src/components/MainLayout.js
@@ -1,20 +1,12 @@
 import React from 'react';
-import { Typography, Container, Box } from '@mui/material';
+import { Container, Box } from '@mui/material';
+import MainLogo from '../../src/MainLogo.svg';
 
 function MainLayout({ children }) {
   return (
     <Box>
-      <img
-        src="/Quiz-Show-Logo.png"
-        alt="AWSome Quiz Show"
-        className="main-header-img"
-      />
+      <img src={MainLogo} alt="AWSome Quiz Show" className="main-header-img" />
       <Container>{children}</Container>
-      <Box component="footer" sx={{ p: 2, mt: 'auto', textAlign: 'center' }}>
-        <Typography variant="body2" color="textSecondary">
-          &copy; 2023 My Website
-        </Typography>
-      </Box>
     </Box>
   );
 }

diff --git a/frontend/src/components/QuizLayout.js b/frontend/src/components/QuizLayout.js
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Container, Box } from '@mui/material';
+import QuizLogo from '../../src/QuizLogo.svg';
+
+function QuizLayout({ children }) {
+  return (
+    <Box>
+      <img src={QuizLogo} alt="" className="quiz-header-img" />
+      <Container>{children}</Container>
+    </Box>
+  );
+}
+
+export default QuizLayout;
diff --git a/frontend/src/components/QuizPage.js b/frontend/src/components/QuizPage.js
@@ -10,7 +10,10 @@ import {
   CircularProgress,
   Box,
   LinearProgress,
+  Grid2 as Grid,
+  Alert,
 } from '@mui/material';
+import MainLayout from './QuizLayout';
 
 function QuizPage() {
   const { state } = useLocation();
@@ -124,9 +127,7 @@ function QuizPage() {
   const handleOptionChange = (e) => {
     const selectedOption = e.target.value;
     const timeTaken =
-      quizData && quizData.EnableTimer
-        ? quizData.TimerSeconds - timeLeft
-        : 0;
+      quizData && quizData.EnableTimer ? quizData.TimerSeconds - timeLeft : 0;
 
     setAnswers((prevAnswers) => ({
       ...prevAnswers,
@@ -163,79 +164,125 @@ function QuizPage() {
   const isTimeUp = quizData.EnableTimer && timeLeft <= 0;
 
   return (
-    <Container maxWidth="md">
-      <Typography variant="h4" gutterBottom>
-        {quizData.Title}
-      </Typography>
-      <Typography variant="subtitle1" gutterBottom>
-        Question {currentQuestionIndex + 1} of {quizData.Questions.length}
-      </Typography>
-
-      {quizData.EnableTimer && (
-        <Box sx={{ width: '100%', marginBottom: 2 }}>
-          <LinearProgress
-            variant="determinate"
-            value={(timeLeft / quizData.TimerSeconds) * 100}
-            sx={{ height: 10, borderRadius: 5 }}
-          />
-          <Typography variant="body2" color="textSecondary">
-            Time Left: {timeLeft} seconds
+    <MainLayout>
+      <Container maxWidth="sm" className="main-quiz-container">
+        <Typography variant="h6" gutterBottom align="left" width={'100%'}>
+          Question {currentQuestionIndex + 1} / {quizData.Questions.length}
+        </Typography>
+
+        <Container maxWidth={'100%'} className="question-container">
+          <Typography variant="h4" gutterBottom color="#EAEAF0" align="center">
+            {currentQuestion.QuestionText}
           </Typography>
-        </Box>
-      )}
+        </Container>
 
-      <Typography variant="h6" gutterBottom>
-        {currentQuestion.QuestionText}
-      </Typography>
-      <RadioGroup
-        name={`question-${currentQuestionIndex}`}
-        value={answers[currentQuestionIndex]?.Answer || ''}
-        onChange={handleOptionChange}
-      >
-        {currentQuestion.Options.map((option, idx) => (
-          <FormControlLabel
-            key={idx}
-            value={option}
-            control={<Radio />}
-            label={option}
-            disabled={isSubmitting || isTimeUp}
-          />
-        ))}
-      </RadioGroup>
+        {quizData.EnableTimer && (
+          <Box sx={{ width: '100%', textAlign: 'center' }}>
+            <Grid container spacing={2}>
+              <Typography variant="body2" color="textSecondary" width={'8%'}>
+                Time:
+              </Typography>
+              <LinearProgress
+                variant="determinate"
+                color="primary"
+                value={(timeLeft / quizData.TimerSeconds) * 100}
+                sx={{
+                  height: 5,
+                  borderRadius: 5,
+                  width: '78%',
+                  marginTop: '8px',
+                }}
+              />
+              <Typography variant="body2" color="textSecondary" width={'8%'}>
+                {timeLeft}
+              </Typography>
+            </Grid>
+          </Box>
+        )}
+        <RadioGroup
+          name={`question-${currentQuestionIndex}`}
+          value={answers[currentQuestionIndex]?.Answer || ''}
+          onChange={handleOptionChange}
+          sx={{ width: '100%' }}
+        >
+          {currentQuestion.Options.map((option, idx) => (
+            <FormControlLabel
+              key={idx}
+              value={option}
+              control={<Radio />}
+              label={option}
+              disabled={isSubmitting || isTimeUp}
+              sx={{
+                borderRadius: '4px',
+                border: '1px solid #D9DADF',
+                background: '#EAEAF0',
+                width: '100%',
+                margin: '4px',
+                textAlign: 'left',
+              }}
+            />
+          ))}
+        </RadioGroup>
 
-      {currentQuestion.Trivia && (
-        <Typography variant="body2" color="textSecondary" sx={{ marginTop: 2 }}>
-          Trivia: {currentQuestion.Trivia}
-        </Typography>
-      )}
+        {isSubmitting && (
+          <Box sx={{ textAlign: 'center', marginTop: 4 }}>
+            <CircularProgress />
+            <Typography variant="h6" sx={{ marginTop: 2 }}>
+              Submitting your answers...
+            </Typography>
+          </Box>
+        )}
 
-      {isSubmitting && (
-        <Box sx={{ textAlign: 'center', marginTop: 4 }}>
-          <CircularProgress />
-          <Typography variant="h6" sx={{ marginTop: 2 }}>
-            Submitting your answers...
+        {!isSubmitting &&
+          quizData &&
+          currentQuestionIndex === quizData.Questions.length - 1 && (
+            <Button
+              variant="contained"
+              color="primary"
+              onClick={handleSubmit}
+              disabled={
+                Object.keys(answers).length !== quizData.Questions.length ||
+                isSubmitting ||
+                isTimeUp
+              }
+              sx={{ marginTop: 4 }}
+            >
+              Submit Quiz
+            </Button>
+          )}
+      </Container>
+      {currentQuestion.Trivia && (
+        <Alert
+          severity="info"
+          sx={{
+            marginTop: 4,
+            textAlign: 'center',
+            backgroundColor: '#E6EAFF',
+            width: 320,
+            marginLeft: 'auto',
+            marginRight: 'auto',
+            borderRadius: '4px',
+          }}
+        >
+          <Typography
+            variant="h5"
+            color="textSecondary"
+            align="left"
+            sx={{ marginTop: 2 }}
+          >
+            Hint
           </Typography>
-        </Box>
-      )}
-
-      {!isSubmitting &&
-        quizData &&
-        currentQuestionIndex === quizData.Questions.length - 1 && (
-          <Button
-            variant="contained"
-            color="primary"
-            onClick={handleSubmit}
-            disabled={
-              Object.keys(answers).length !== quizData.Questions.length ||
-              isSubmitting ||
-              isTimeUp
-            }
-            sx={{ marginTop: 4 }}
+          <Typography
+            variant="body2"
+            align="left"
+            color="textSecondary"
+            sx={{ marginTop: 2 }}
           >
-            Submit Quiz
-          </Button>
-        )}
-    </Container>
+            {currentQuestion.Trivia}
+          </Typography>
+        </Alert>
+      )}
+    </MainLayout>
   );
 }
 

diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -21,6 +21,14 @@ code {
   display: block;
 }
 
+.quiz-header-img {
+  width: 100%;
+  max-width: 140px;
+  height: 100%;
+  margin: 16px auto;
+  display: block;
+}
+
 .main-quiz-container {
   border-radius: var(--borderRadius, 4px);
   background: var(--background-paper-elevation-2, #EAEAF0);
@@ -35,6 +43,21 @@ code {
   gap: var(--3, 12px);
 }
 
+.question-container {
+  border-radius: var(--borderRadius, 4px);
+  background-image: url('./assets/images/QuestionBg.png');
+  background-repeat:no-repeat;
+  background-size:contain;
+  background-position:center;
+  display: flex;
+  padding: 118px var(--5, 40px);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  align-self: stretch;
+}
+
 .button {
   border-radius: var(--borderRadius, 4px);
   border: var(--none, 1px) solid var(--primary-_states-outlinedBorder, rgba(77, 13, 207, 0.50));