Improvement of the results page (#184)

* Upgraded the Accordion Design with a little CSS

* Changed The Color on Hover and Disabled Square margins

* Made GUI changes in the Information pannel above the Accordion

* Added some box shadow to the accordion

* Justified and Improved Question Text on Accordion

* Increased Emoji size and reduced spacing

* Altered Color of Text and Distribution. Along with a divider

* Fixed Assymetry

* Add static to gitignore

* Added /200 sufix to the final grade string

.gitignore

@@ -6,3 +6,4 @@ __pycache__
 node_modules
 backend/static/images
 /data
+static/

frontend/src/components/questions/QuestionAccordion.js

@@ -11,6 +11,18 @@ import remarRehype from 'remark-rehype';
 const useStyles = makeStyles(() => ({
 	rootAccordion: {
 		width: '60%',
+		borderRadius: 40,
+		margin: '0rem 0rem 1rem 0rem',
+		boxShadow: '3px 4px 6px rgba(0, 0, 0, 0.25)',
+	},
+	summaryAccordion: {
+		borderRadius: 40,
+	},
+	questionText: {
+		whiteSpace: 'pre-line',
+		textAlign: 'justify',
+		textJustify: 'inter-word',
+		wordWrap: 'break-word',
 	},
 }));
 
@@ -20,20 +32,32 @@ const QuestionAccordion = ({ question, failed }) => {
 	let correctAnswer = question.answer.find((e) => e.correct);
 
 	return (
-		<Accordion className={classes.rootAccordion}>
+		<Accordion
+			sx={{
+				'&:before': {
+					display: 'none',
+				},
+			}}
+			className={classes.rootAccordion}
+			square
+		>
 			<AccordionSummary
+				className={classes.summaryAccordion}
 				expandIcon={<ExpandMoreIcon />}
-				style={{
+				sx={{
 					backgroundColor: failed ? '#ff8c8c' : '#b4ff8c',
+					'&:hover': {
+						backgroundColor: failed ? '#FFBABA' : '#DCFFC9',
+					},
 				}}
 			>
-				<Typography>
+				<Typography className={classes.questionText}>
 					<ReactMarkdown remarkPlugins={[remarkMath, remarRehype, remarkKatex]}>
 						{question.text}
 					</ReactMarkdown>
 				</Typography>
 			</AccordionSummary>
-			<AccordionDetails>
+			<AccordionDetails className={classes.detailAccordion}>
 				<Typography>
 					<ReactMarkdown remarkPlugins={[remarkMath, remarRehype, remarkKatex]}>
 						{correctAnswer.text}

frontend/src/components/questions/QuestionAccordionGroup.js

@@ -3,7 +3,7 @@ import QuestionAccordion from './QuestionAccordion';
 
 const QuestionAccordionGroup = ({ exam }) => {
 	return (
-		<div>
+		<div style={{ padding: '1rem' }}>
 			{exam.questions.map((question) => {
 				return (
 					<QuestionAccordion

frontend/src/pages/ResultsPage.js

@@ -2,10 +2,34 @@ import React from 'react';
 import { useEffect, useState } from 'react';
 import { examInfo } from '../api';
 import Loading from '../components/loading/Loading';
-import { Button, Grid, Typography } from '@mui/material';
+import { Grid, Typography, Paper, Divider } from '@mui/material';
 import QuestionAccordionGroup from '../components/questions/QuestionAccordionGroup';
+import theme from '../globalTheme';
+import makeStyles from '@mui/styles/makeStyles/';
+import NormalButton from '../components/buttons/NormalButton';
+
+const useStyles = makeStyles(() => ({
+	paper: {
+		width: '100%',
+		borderRadius: 40,
+		border: '3px solid #D9D9D9',
+		boxShadow: '-6px 4px 6px rgba(0, 0, 0, 0.25)',
+		margin: '0rem 0rem 1rem 0rem',
+		padding: '2rem 0rem',
+	},
+	resultInfo: {
+		width: '100%',
+		margin: '4rem 1rem',
+		padding: '1rem',
+		borderRadius: 40,
+	},
+	divider: {
+		width: '85%',
+	},
+}));
 
 const ResultsPage = (props) => {
+	const classes = useStyles();
 	const [loading, setLoading] = useState(true);
 	const [exam, setExam] = useState();
 
@@ -19,34 +43,66 @@ const ResultsPage = (props) => {
 	if (loading) return <Loading />;
 
 	return (
-		<Grid container align='center' spacing={4} xs={12}>
-			<Grid item xs={12}>
-				<Typography variant='h2'>Resultados</Typography>
-			</Grid>
-			<Grid item xs={6}>
-				<Typography variant='h6'>Erradas: {exam.failed.length}</Typography>
-			</Grid>
-			<Grid item xs={6}>
-				<Typography variant='h6'>Corretas: {exam.correct.length}</Typography>
-			</Grid>
-			<Grid item xs={6}>
-				<Typography variant='h6'>Nota: {exam.score}</Typography>
-			</Grid>
-			<Grid item xs={12}>
-				<Typography variant='h6'>Perguntas:</Typography>
-				<QuestionAccordionGroup exam={exam} />
-			</Grid>
-			<Grid item xs={6}>
-				<Button variant='contained' href='/exames'>
-					Gerar outro exame
-				</Button>
+		<Paper theme={theme} className={classes.paper}>
+			<Grid container align='center' spacing={2} xs={12}>
+				<Grid item xs={12}>
+					<Typography variant='h2'>Resultados</Typography>
+				</Grid>
+				<Grid item xs={12}>
+					<Divider
+						className={classes.divider}
+						orientation='horizontal'
+						flexItem
+					></Divider>
+				</Grid>
+				<Grid className={classes.resultInfo} container xs={12}>
+					<Grid item xs={4}>
+						<Typography style={{ color: 'RGB(22, 198, 12)' }} variant='h4'>
+							{' '}
+							✅ Corretas: {exam.correct.length}
+						</Typography>
+					</Grid>
+					<Grid item xs={4}>
+						<Typography variant='h4'> 🏆 Nota: {exam.score} / 200</Typography>
+					</Grid>
+					<Grid item xs={4}>
+						<Typography style={{ color: 'RGB(237, 57, 22)' }} variant='h4'>
+							{' '}
+							❌ Erradas: {exam.failed.length}
+						</Typography>
+					</Grid>
+				</Grid>
 			</Grid>
-			<Grid item xs={6}>
-				<Button variant='contained' href='/'>
-					Sair
-				</Button>
+			<Grid
+				container
+				direction='row'
+				justifyContent='center'
+				align='center'
+				spacing={2}
+				xs={12}
+			>
+				<Grid item xs={12}>
+					<Typography variant='h6'>Perguntas:</Typography>
+					<QuestionAccordionGroup exam={exam} />
+				</Grid>
+				<Grid item xs={6}>
+					<NormalButton
+						fontSize={20}
+						text='Gerar outro exame'
+						variant='contained'
+						href='/exames'
+					></NormalButton>
+				</Grid>
+				<Grid item xs={6}>
+					<NormalButton
+						fontSize={20}
+						text='Sair'
+						variant='contained'
+						href='/'
+					></NormalButton>
+				</Grid>
 			</Grid>
-		</Grid>
+		</Paper>
 	);
 };