From 56255978033ad5c06b4242ef1cb425ff7caf2ede Mon Sep 17 00:00:00 2001
From: spaenleh <spaenleh@gmail.com>
Date: Mon, 16 Oct 2023 11:16:13 +0200
Subject: [PATCH] fix: adapt styling and add custom title for event dialog

---
 src/components/Root.tsx          |  2 +-
 src/components/main/MainMenu.tsx | 80 +++++++++++++++++++-------------
 src/langs/fr.json                |  3 +-
 3 files changed, 50 insertions(+), 35 deletions(-)

diff --git a/src/components/Root.tsx b/src/components/Root.tsx
index 0448a8a97..e77c2ab98 100644
--- a/src/components/Root.tsx
+++ b/src/components/Root.tsx
@@ -37,7 +37,7 @@ const Root = (): JSX.Element => (
         </Router>
       </ThemeProvider>
     </I18nextProvider>
-    {import.meta.env.DEV && <ReactQueryDevtools />}
+    {import.meta.env.DEV && <ReactQueryDevtools position="bottom-right" />}
   </QueryClientProvider>
 );
 
diff --git a/src/components/main/MainMenu.tsx b/src/components/main/MainMenu.tsx
index fdf95fcf5..2edd1c9ea 100644
--- a/src/components/main/MainMenu.tsx
+++ b/src/components/main/MainMenu.tsx
@@ -1,11 +1,19 @@
 import { useLocation, useNavigate } from 'react-router';
 
+import { BugReport } from '@mui/icons-material';
 import AutoStoriesIcon from '@mui/icons-material/AutoStories';
 import DeleteIcon from '@mui/icons-material/Delete';
 import FolderIcon from '@mui/icons-material/Folder';
 import FolderSharedIcon from '@mui/icons-material/FolderShared';
 import Star from '@mui/icons-material/Star';
-import { Box, Button, styled, useTheme } from '@mui/material';
+import {
+  ListItem,
+  ListItemButton,
+  ListItemText,
+  Stack,
+  styled,
+  useTheme,
+} from '@mui/material';
 import ListItemIcon from '@mui/material/ListItemIcon';
 
 import { DEFAULT_LANG } from '@graasp/sdk';
@@ -25,25 +33,18 @@ import {
 import { BUILDER } from '../../langs/constants';
 import { useCurrentUserContext } from '../context/CurrentUserContext';
 
-const BottomContainer = styled(Box)(({ theme }) => ({
-  position: 'absolute',
-  bottom: 0,
-  width: '100%',
-  padding: theme.spacing(2),
-}));
-
-const StyledLink = styled('a')(({ theme }) => ({
-  display: 'flex',
-  alignItems: 'center',
-  boxSizing: 'border-box',
-  color: 'grey',
-  textDecoration: 'none',
-  marginTop: theme.spacing(1),
-
-  '&:hover': {
-    color: theme.palette.primary.main,
-  },
-}));
+// const StyledLink = styled('a')(({ theme }) => ({
+//   display: 'flex',
+//   alignItems: 'center',
+//   boxSizing: 'border-box',
+//   color: 'grey',
+//   textDecoration: 'none',
+//   marginTop: theme.spacing(1),
+
+//   '&:hover': {
+//     color: theme.palette.primary.main,
+//   },
+// }));
 const StyledMenuItem = styled(MenuItem)(({ theme }) => ({
   '&:hover': {
     color: theme.palette.primary.main,
@@ -70,23 +71,31 @@ const MainMenu = (): JSX.Element => {
     // this will be reported in sentry user feedback issues
     showReportDialog({
       eventId,
+      title: translateBuilder(BUILDER.REPORT_A_BUG),
       lang: i18n.language || DEFAULT_LANG,
     });
   };
 
-  const resourceLinks = (
-    <BottomContainer>
-      <Button onClick={openBugReport}>
-        {translateBuilder(BUILDER.REPORT_A_BUG)}
-      </Button>
+  const reportBugLink = (
+    <ListItem disablePadding>
+      <ListItemButton onClick={openBugReport}>
+        <ListItemIcon>
+          <BugReport />
+        </ListItemIcon>
+        <ListItemText>{translateBuilder(BUILDER.REPORT_A_BUG)}</ListItemText>
+      </ListItemButton>
+    </ListItem>
+  );
 
-      <StyledLink href={TUTORIALS_LINK} target="_blank">
+  const resourceLinks = (
+    <ListItem disablePadding>
+      <ListItemButton href={TUTORIALS_LINK} target="_blank">
         <ListItemIcon>
           <AutoStoriesIcon />
         </ListItemIcon>
-        {translateBuilder('Tutorials')}
-      </StyledLink>
-    </BottomContainer>
+        <ListItemText>{translateBuilder('Tutorials')}</ListItemText>
+      </ListItemButton>
+    </ListItem>
   );
 
   const renderAuthenticatedMemberMenuItems = () => {
@@ -101,7 +110,7 @@ const MainMenu = (): JSX.Element => {
     }
 
     return (
-      <>
+      <div>
         <MenuItem
           onClick={() => goTo(HOME_PATH)}
           selected={pathname === HOME_PATH}
@@ -138,14 +147,19 @@ const MainMenu = (): JSX.Element => {
           text={translateBuilder(BUILDER.RECYCLE_BIN_TITLE)}
           icon={<DeleteIcon />}
         />
-      </>
+      </div>
     );
   };
 
   return (
     <GraaspMainMenu fullHeight>
-      {renderAuthenticatedMemberMenuItems()}
-      {resourceLinks}
+      <Stack direction="column" height="100%" justifyContent="space-between">
+        {renderAuthenticatedMemberMenuItems()}
+        <div>
+          {reportBugLink}
+          {resourceLinks}
+        </div>
+      </Stack>
     </GraaspMainMenu>
   );
 };
diff --git a/src/langs/fr.json b/src/langs/fr.json
index 007133728..cb246d300 100644
--- a/src/langs/fr.json
+++ b/src/langs/fr.json
@@ -247,5 +247,6 @@
   "STATUS_TOOLTIP_IS_PUBLISHED": "Publié",
   "STATUS_TOOLTIP_IS_COLLAPSIBLE": "Minifié",
   "STATUS_TOOLTIP_SHOW_CHATBOX": "Chatbox visible",
-  "SETTINGS_FILE_SETTINGS_TITLE": "Paramètres du fichier"
+  "SETTINGS_FILE_SETTINGS_TITLE": "Paramètres du fichier",
+  "REPORT_A_BUG": "Signaler un problème"
 }