Skip to content
This repository has been archived by the owner on Mar 7, 2023. It is now read-only.

Commit

Permalink
feat(about): add link to point to the app github repository
Browse files Browse the repository at this point in the history
  • Loading branch information
@rhahao
rhahao committed Feb 22, 2022
1 parent 5caabcf commit 9b4c800
Showing 1 changed file with 85 additions and 49 deletions.
134 changes: 85 additions & 49 deletions src/components/root/About.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,60 +3,96 @@ import { useTranslation } from 'react-i18next';
import Box from '@mui/material/Box';
import Dialog from '@mui/material/Dialog';
import DialogContent from '@mui/material/DialogContent';
import Link from '@mui/material/Link';
import Typography from '@mui/material/Typography';
import { isAboutOpenState } from '../../appStates/appSettings';

const About = () => {
const { t } = useTranslation();
const { t } = useTranslation();

const [isOpen, setIsOpen] = useRecoilState(isAboutOpenState);
const [isOpen, setIsOpen] = useRecoilState(isAboutOpenState);

const appVersion = process.env.REACT_APP_VERSION;
const appVersion = process.env.REACT_APP_VERSION;

const handleClose = () => {
setIsOpen(false);
}
const handleClose = () => {
setIsOpen(false);
};

return (
<Dialog
open={isOpen}
onClose={handleClose}
sx={{maxWidth: '500px', margin: 'auto'}}
>
<DialogContent sx={{padding: '10px'}}>
<Box
sx={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}
>
<img src="/img/appLogo.png" alt="App logo" className="appLogoMini" />
<Typography
sx={{
fontWeight: 'bold',
marginTop: '5px',
}}
>
LMM-OA
</Typography>
<Typography variant="body1">{appVersion}</Typography>
</Box>
<Box>
<Typography
variant="body2"
sx={{
marginTop: '10px',
marginBottom: '10px',
}}
>
{t("about.description")}
</Typography>
<Typography variant="body2">Copyright © 2021 | LMM-OA [SWS]</Typography>
</Box>
</DialogContent>
</Dialog>
);
}

export default About;
return (
<Dialog
open={isOpen}
onClose={handleClose}
sx={{ maxWidth: '500px', margin: 'auto' }}
>
<DialogContent sx={{ padding: '10px' }}>
<Box
sx={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}
>
<img src='/img/appLogo.png' alt='App logo' className='appLogoMini' />
<Typography
sx={{
fontWeight: 'bold',
marginTop: '5px',
}}
>
LMM-OA
</Typography>
<Typography variant='body1'>{appVersion}</Typography>
</Box>
<Box>
<Typography
variant='body2'
sx={{
marginTop: '10px',
marginBottom: '15px',
}}
>
{t('about.description')}
</Typography>
<Box
sx={{
display: 'flex',
alignItems: 'center',
border: '1px solid black',
width: '95%',
margin: 'auto',
padding: '5px',
borderRadius: '8px',
backgroundColor: '#bbdefb',
}}
>
<Link
href='https://github.com/sws2apps/lmm-oa-sws'
target='_blank'
rel='noopener'
>
<svg height='32' viewBox='0 0 16 16' width='32'>
<path
fill-rule='evenodd'
d='M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z'
></path>
</svg>
</Link>
<Typography
variant='body2'
sx={{
marginLeft: '10px',
}}
>
Check this project on GitHuB if you want to help us improve it.
</Typography>
</Box>
<Typography variant='body2' sx={{ marginTop: '15px' }}>
Copyright © 2021 | LMM-OA [SWS]
</Typography>
</Box>
</DialogContent>
</Dialog>
);
};

export default About;

0 comments on commit 9b4c800

Please sign in to comment.