Merge pull request #29 from bancodobrasil/feat/back_Icon

Feat/back button

src/components/PageTitle/PageTitle.tsx

@@ -0,0 +1,19 @@
+import { Box, IconButton, Typography } from '@mui/material';
+import React from 'react';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+
+const PageTitle = ({ onClick, PageTitle }) => (
+  <Box
+    className="flex flex-row space-x-1 items-center"
+    sx={{ minWidth: '10rem', height: '1.5rem', marginTop: '2.1rem', marginBottom: '1.4rem' }}
+  >
+    <IconButton onClick={onClick} size="small">
+      <ArrowBackIcon fontSize="small" color="primary" />
+    </IconButton>
+    <Typography variant="h3" component="h1" sx={{ py: '1rem' }}>
+      {PageTitle}
+    </Typography>
+  </Box>
+);
+
+export default PageTitle;

src/components/PageTitle/index.ts

@@ -0,0 +1,3 @@
+import PageTitle from './PageTitle';
+
+export default PageTitle;

src/pages/Menu/Create/Create.tsx

@@ -13,6 +13,7 @@ import {
   openDefaultErrorNotification,
 } from '../../../contexts/NotificationContext';
 import { FormAction } from '../../../types';
+import PageTitle from '../../../components/PageTitle';
 
 export const CreateMenu = () => {
   const { t } = useTranslation();
@@ -73,10 +74,7 @@ export const CreateMenu = () => {
           ]}
           onBack={onBackClickHandler}
         />
-        <Typography variant="h1" component="h1" sx={{ py: '1rem' }}>
-          {t('menu.create.title')}
-        </Typography>
-        <Divider />
+        <PageTitle onClick={onBackClickHandler} PageTitle={t('menu.create.title')} />
       </Box>
       <FormBasicInfo
         name={name}

src/pages/Menu/Edit/Edit.tsx

@@ -20,6 +20,7 @@ import { EnumInputAction, FormAction, IMenuMetaWithErrors } from '../../../types
 import { FormAttributes } from '../../../components/Menu/Forms/Attributes/FormAttributes';
 import { ItemsPreview } from '../Items';
 import { EditTemplateMenu } from '../EditTemplate';
+import PageTitle from '../../../components/PageTitle';
 
 export const TAB_BASIC_INFO = '1';
 export const TAB_ITEMS = '2';
@@ -204,13 +205,8 @@ export const EditMenu = () => {
           ]}
           onBack={onBackClickHandler}
         />
-        <Box className="flex flex-row space-x-1 items-center my-4">
-          <IconButton onClick={onBackClickHandler} size="small">
-            <ArrowBackIcon fontSize="small" color="primary" />
-          </IconButton>
-          <Typography variant="h3" component="h1">
-            {t('menu.edit.title')}
-          </Typography>
+        <Box className="flex flex-row space-x-1 items-center">
+          <PageTitle onClick={onBackClickHandler} PageTitle={t('menu.edit.title')} />
           <Box
             className="space-x-4"
             sx={{

src/pages/Menu/Revisions/Create.tsx

@@ -17,6 +17,7 @@ import {
 } from '../../../contexts/NotificationContext';
 import { MenuRevisionsDiff } from '../../../components/Menu/Revisions';
 import { menuRevisionDiff } from '../../../utils/diff/menuRevisionDiff';
+import PageTitle from '../../../components/PageTitle';
 
 const CreateRevision = () => {
   const { t } = useTranslation();
@@ -28,6 +29,9 @@ const CreateRevision = () => {
     navigate('/');
   };
 
+  const onBackButtonHandler = () => {
+    navigate('../edit');
+  };
   const { dispatch } = React.useContext(NotificationContext);
 
   const [description, setDescription] = React.useState('');
@@ -224,9 +228,7 @@ const CreateRevision = () => {
         ]}
         onBack={onBackClickHandler}
       />
-      <Typography variant="h1" component="h1" sx={{ my: '1rem' }}>
-        {t('menuRevision.create.title')}
-      </Typography>
+      <PageTitle onClick={onBackButtonHandler} PageTitle={t('menuRevision.create.title')} />
       <Typography variant="h2" component="h2" sx={{ my: '0.5rem' }}>
         {t('menuRevision.create.reviewChanges.title')}
       </Typography>

src/pages/Menu/Revisions/Publish.tsx

@@ -26,6 +26,7 @@ import {
   openDefaultErrorNotification,
 } from '../../../contexts/NotificationContext';
 import { menuRevisionDiff } from '../../../utils/diff/menuRevisionDiff';
+import PageTitle from '../../../components/PageTitle';
 
 const PublishRevision = () => {
   const { t } = useTranslation();
@@ -37,6 +38,10 @@ const PublishRevision = () => {
     navigate('/');
   };
 
+  const onBackButtonHandler = () => {
+    navigate('../edit');
+  };
+
   const { dispatch } = React.useContext(NotificationContext);
 
   const [selectedRevision, setSelectedRevision] = React.useState(null);
@@ -264,9 +269,9 @@ const PublishRevision = () => {
         ]}
         onBack={onBackClickHandler}
       />
-      <Typography variant="h1" component="h1" sx={{ py: '1rem' }}>
-        {t('menuRevision.publish.title')}
-      </Typography>
+      <Box>
+        <PageTitle onClick={onBackButtonHandler} PageTitle={t('menuRevision.publish.title')} />
+      </Box>
       <FormControl sx={{ width: '16rem', mb: '1rem' }} className="bg-white">
         <InputLabel id="selectedRevision-label">
           {t('menu.of', { field: 'revision.title_one' })}

src/pages/Menu/Revisions/Restore.tsx

@@ -26,6 +26,7 @@ import {
   openDefaultErrorNotification,
 } from '../../../contexts/NotificationContext';
 import { menuRevisionDiff } from '../../../utils/diff/menuRevisionDiff';
+import PageTitle from '../../../components/PageTitle';
 
 const RestoreRevision = () => {
   const { t } = useTranslation();
@@ -37,6 +38,10 @@ const RestoreRevision = () => {
     navigate('/');
   };
 
+  const onBackButtonHandler = () => {
+    navigate('../edit');
+  };
+
   const { dispatch } = React.useContext(NotificationContext);
 
   const [selectedRevision, setSelectedRevision] = React.useState(null);
@@ -250,9 +255,7 @@ const RestoreRevision = () => {
         ]}
         onBack={onBackClickHandler}
       />
-      <Typography variant="h1" component="h1" sx={{ py: '1rem' }}>
-        {t('menuRevision.restore.title')}
-      </Typography>
+      <PageTitle onClick={onBackButtonHandler} PageTitle={t('menuRevision.restore.title')} />
       <FormControl sx={{ width: '16rem', mb: '1rem' }} className="bg-white">
         <InputLabel id="selectedRevision-label">
           {t('menu.of', { field: 'revision.title_one' })}

src/pages/Menu/Show/Show.tsx

@@ -15,6 +15,7 @@ import {
   openDefaultErrorNotification,
 } from '../../../contexts/NotificationContext';
 import { JAMIE_FEATURE_CONDITIONS } from '../../../constants';
+import PageTitle from '../../../components/PageTitle';
 
 export const ShowMenu = () => {
   const { t, i18n } = useTranslation();
@@ -27,6 +28,10 @@ export const ShowMenu = () => {
     navigate('/');
   };
 
+  const onBackButtonHandler = () => {
+    navigate('../edit');
+  };
+
   const { dispatch } = React.useContext(NotificationContext);
 
   const { loading, error, data, refetch } = useQuery(MenuService.GET_MENU, {
@@ -172,9 +177,12 @@ export const ShowMenu = () => {
         ]}
         onBack={onBackClickHandler}
       />
-      <Typography variant="h1" component="h1" sx={{ py: '1rem' }}>
-        {data?.menu.name}
-      </Typography>
+      <Box className="flex flex-row space-x-1 items-center my-4">
+        <PageTitle onClick={onBackButtonHandler} PageTitle={data?.menu.name} />
+        <Typography variant="h1" component="h1" sx={{ py: '1rem' }}>
+          {data?.menu.name}
+        </Typography>
+      </Box>
       <Box sx={{ mb: '1rem' }} className="space-y-4">
         <Box className="space-y-1">
           <Typography variant="h5" component="h5" className="mb-2">