Merge pull request #290 from Arquisoft/feat/webapp/changes

Adding menu button to the results page and goBack buttons follow conventions
Arquisoft · Apr 26, 2024 · 2fbbd67 · 2fbbd67
2 parents c008391 + 7af12dd
commit 2fbbd67
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 9 deletions.
diff --git a/webapp/src/components/GoBack.jsx b/webapp/src/components/GoBack.jsx
@@ -6,8 +6,8 @@ import { useNavigate } from "react-router";
 export default function GoBack() {
     const {t} = useTranslation();
     const navigate = useNavigate();
-    return <Flex direction="row" justifyContent="center" alignItems="center">
-        <Button data-testid={"GoBack"} type="submit" colorScheme="pigment_green" margin={"10px"} className={"custom-button effect1"} onClick={() => navigate("/dashboard")} w="100%">
+    return <Flex justify={"center"}>
+        <Button size={"lg"} fontSize={"2xl"} flex={1} data-testid={"GoBack"} type="submit" colorScheme="pigment_green" margin={"0.5rem"} className={"custom-button effect1"} onClick={() => navigate("/dashboard")}>
             {t("common.goBack")}
         </Button>
     </Flex>

diff --git a/webapp/src/pages/Results.jsx b/webapp/src/pages/Results.jsx
@@ -1,17 +1,27 @@
-import React from "react";
+import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Button, Flex, Box, Heading, Center } from "@chakra-ui/react";
 import { useNavigate, useLocation } from "react-router-dom";
 import UserStatistics from "../components/statistics/UserStatistics";
+import LateralMenu from '../components/menu/LateralMenu';
+import MenuButton from '../components/menu/MenuButton';
 
 export default function Results() {
-    const { t } = useTranslation();
+    const { t, i18n } = useTranslation();
     const location = useLocation();
     const navigate = useNavigate();
     const correctAnswers = location.state?.correctAnswers || 0;
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+    const changeLanguage = async (selectedLanguage) => {
+        await i18n.changeLanguage(selectedLanguage);
+    };
 
     return (
         <Center display="flex" flexDirection="column" w="100wh" h="100vh" justifyContent="center" alignItems="center" bgImage={'/background.svg'}>
+            <MenuButton onClick={() => setIsMenuOpen(true)} />
+            <LateralMenu isOpen={isMenuOpen} onClose={() => setIsMenuOpen(false)} changeLanguage={changeLanguage} isDashboard={false}/>
+
             <Heading as="h2">{t("common.results")}</Heading>
             <Box bg="white" p={4} borderRadius="md" boxShadow="md" mt={4} mb={4} w="fit-content" shadow="2xl" rounded="1rem">
                 <Heading textAlign={"center"} as="h3" color="green.400" fontSize="xl">{`Correct answers: ${correctAnswers}`}</Heading>

diff --git a/webapp/src/pages/Statistics.jsx b/webapp/src/pages/Statistics.jsx
@@ -1,4 +1,4 @@
-import { Box,  Center, Heading, Stack, StackDivider, Table, Tbody, Text,
+import { Box,  Center, Heading, Stack, Table, Tbody, Text,
         Td, Th, Thead, Tr, CircularProgress} from "@chakra-ui/react";
 import React, {useEffect, useState} from "react";
 import { useTranslation } from "react-i18next";
@@ -80,9 +80,7 @@ export default function Statistics() {
                     t={t} errorWhere={"error.statistics.top"}/> 
                 <FaChartBar style={{ fontSize: '2.5rem', color: 'green' }} /> 
                 <Heading as="h1">{t("common.statistics.title")}</Heading>
-                <Stack spacing={4} divider={<StackDivider />} minH="50vh" 
-                    p="1rem" backgroundColor="whiteAlpha.900" shadow="1.25em"
-                    boxShadow="md" rounded="1rem" alignItems={"center"} data-testid={"leaderboard-component"}>
+                <Stack spacing={4} p="1rem" backgroundColor="whiteAlpha.900" boxShadow="md" rounded="1rem" data-testid={"leaderboard-component"}>
                         {retrievedData ? 
                             <Box display={"flex"} flexDirection={"column"} justifyContent={"center"} alignItems={"center"}>
                             <Heading as="h2" fontSize={"1.75em"}>
@@ -111,8 +109,8 @@ export default function Statistics() {
                         : <CircularProgress data-testid="leaderboard-spinner" isIndeterminate color={"green"} />
                         }
                     <UserStatistics />
+                    <GoBack />
                 </Stack>
-                <GoBack />
             </Stack>
         </Center>
     );