Home page layout

localstack-samples · Nov 15, 2024 · c5f3761 · c5f3761
1 parent d9b49a0
commit c5f3761
Show file tree

Hide file tree

Showing 4 changed files with 146 additions and 75 deletions.
diff --git a/frontend/public/Quiz-Show-Logo.png b/frontend/public/Quiz-Show-Logo.png
diff --git a/frontend/src/components/HomePage.js b/frontend/src/components/HomePage.js
@@ -1,3 +1,4 @@
+import MainLayout from './MainLayout';
 import React, { useState, useEffect } from 'react';
 import {
   TextField,
@@ -14,6 +15,7 @@ import {
 } from '@mui/material';
 import { useNavigate } from 'react-router-dom';
 import QRCode from 'react-qr-code';
+import { purple } from '@mui/material/colors';
 
 function HomePage() {
   const [quizID, setQuizID] = useState('');
@@ -73,84 +75,92 @@ function HomePage() {
   const pageURL = 'https://demo.localstack.cloud/';
 
   return (
-    <Container maxWidth="sm">
-      <Typography variant="h4" gutterBottom>
-        Enter Quiz Details
-      </Typography>
-
-      {errorMessage && (
-        <Alert severity="error" sx={{ marginBottom: 2 }}>
-          {errorMessage}
-        </Alert>
-      )}
-
-      {publicQuizzes.length > 0 ? (
-        <FormControl fullWidth margin="normal">
-          <InputLabel id="public-quiz-label">Select a Public Quiz</InputLabel>
-          <Select
-            labelId="public-quiz-label"
-            value={selectedQuizID}
-            label="Select a Public Quiz"
-            onChange={handleQuizSelect}
-          >
-            {publicQuizzes.map((quiz) => (
-              <MenuItem key={quiz.QuizID} value={quiz.QuizID}>
-                {quiz.Title}
-              </MenuItem>
-            ))}
-          </Select>
-        </FormControl>
-      ) : (
-        <Typography variant="body1" gutterBottom>
-          No public quizzes are available.
+    <MainLayout>
+      <Container maxWidth="sm" className="main-quiz-container">
+        <Typography variant="h4" gutterBottom>
+          Welcome
         </Typography>
-      )}
 
-      <TextField
-        label="Quiz ID"
-        fullWidth
-        margin="normal"
-        value={quizID}
-        onChange={handleQuizIDChange}
-        disabled={selectedQuizID !== ''}
-      />
-      <TextField
-        label="Username"
-        fullWidth
-        margin="normal"
-        value={username}
-        onChange={(e) => setUsername(e.target.value)}
-      />
-      <TextField
-        label="Email (Optional)"
-        fullWidth
-        margin="normal"
-        value={email}
-        onChange={(e) => setEmail(e.target.value)}
-      />
+        {errorMessage && (
+          <Alert severity="error" sx={{ marginBottom: 2 }}>
+            {errorMessage}
+          </Alert>
+        )}
 
-      <Stack spacing={2} marginTop={4}>
-        <Button
-          variant="contained"
-          color="primary"
-          onClick={handleStart}
-          disabled={!quizID || !username}
-        >
-          Start Playing
-        </Button>
-        <Button
-          variant="contained"
-          color="secondary"
-          onClick={handleCreateQuiz}
-        >
-          Create a New Quiz
-        </Button>
-      </Stack>
+        {publicQuizzes.length > 0 ? (
+          <FormControl fullWidth margin="normal">
+            <InputLabel id="public-quiz-label">Select a Public Quiz</InputLabel>
+            <Select
+              labelId="public-quiz-label"
+              value={selectedQuizID}
+              label="Select a Public Quiz"
+              onChange={handleQuizSelect}
+            >
+              {publicQuizzes.map((quiz) => (
+                <MenuItem key={quiz.QuizID} value={quiz.QuizID}>
+                  {quiz.Title}
+                </MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+        ) : (
+          <Typography variant="body1" gutterBottom>
+            No public quizzes are available.
+          </Typography>
+        )}
 
-      <Box sx={{ marginTop: 4, textAlign: 'center' }}>
-        <Typography variant="h6" gutterBottom>
-          Share this Page
-        </Typography>
+        <TextField
+          label="Quiz ID"
+          fullWidth
+          margin="normal"
+          value={quizID}
+          onChange={handleQuizIDChange}
+          disabled={selectedQuizID !== ''}
+        />
+        <TextField
+          label="Username"
+          fullWidth
+          margin="normal"
+          value={username}
+          onChange={(e) => setUsername(e.target.value)}
+        />
+        <TextField
+          label="Email (Optional)"
+          fullWidth
+          margin="normal"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+        />
+
+        <Stack spacing={2}>
+          <Button
+            variant="contained"
+            style={{ backgroundColor: purple[500], color: 'white' }}
+            onClick={handleStart}
+            disabled={!quizID || !username}
+          >
+            Start Playing
+          </Button>
+          <Button
+            variant="outlined"
+            color="secondary"
+            onClick={handleCreateQuiz}
+          >
+            Create a New Quiz
+          </Button>
+        </Stack>
+      </Container>
+      <Box
+        sx={{
+          marginTop: 4,
+          textAlign: 'center',
+          backgroundColor: 'white',
+          width: 166,
+          marginLeft: 'auto',
+          marginRight: 'auto',
+          borderRadius: '4px',
+        }}
+      >
         <Box
           sx={{
             background: 'white',
@@ -160,8 +170,11 @@ function HomePage() {
         >
           <QRCode value={pageURL} size={128} />
         </Box>
+        <Typography variant="h6" gutterBottom>
+          Share this Page
+        </Typography>
       </Box>
-    </Container>
+    </MainLayout>
   );
 }
 

diff --git a/frontend/src/components/MainLayout.js b/frontend/src/components/MainLayout.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import { Typography, Container, Box } from '@mui/material';
+
+function MainLayout({ children }) {
+  return (
+    <Box>
+      <img
+        src="/Quiz-Show-Logo.png"
+        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>
+  );
+}
+
+export default MainLayout;
diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -5,9 +5,45 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background: var(--gray-950, #030712);
 }
 
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+.main-header-img {
+  width: 100%;
+  max-width: 482px;
+  height: 100%;
+  margin: 16px auto;
+  display: block;
+}
+
+.main-quiz-container {
+  border-radius: var(--borderRadius, 4px);
+  background: var(--background-paper-elevation-2, #EAEAF0);
+
+  /* elevation/2 */
+  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.12), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.20);
+  display: flex;
+  width: var(--sm, 600px);
+  padding: var(--3, 24px) var(--2, 16px);
+  flex-direction: column;
+  align-items: center;
+  gap: var(--3, 12px);
+}
+
+.button {
+  border-radius: var(--borderRadius, 4px);
+  border: var(--none, 1px) solid var(--primary-_states-outlinedBorder, rgba(77, 13, 207, 0.50));
+}
+
+.purple-button {
+  border-radius: var(--borderRadius, 4px);
+  background: var(--primary-main, #4D0DCF);
+
+  /* elevation/2 */
+  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.12), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 3px 1px -2px rgba(0, 0, 0, 0.20);
+}