Skip to content

Commit e11fd88

Browse files
Alessandro100Alessandro100
authored
contact us page (#791)
1 parent 27b733c commit e11fd88

File tree

5 files changed

+171
-7
lines changed

5 files changed

+171
-7
lines changed

‎web-app/public/locales/en/contactUs.json‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"title": "Contact Us",
3+
"email": {
4+
"title": "Email Us",
5+
"description": "For general inquiries regarding the Mobility Database API, please email us at"
6+
},
7+
"slack": {
8+
"title": "Join our Slack",
9+
"description": "Join the MobilityData Slack channel to ask questions, share feedback, and connect with others",
10+
"action": "Join Slack"
11+
},
12+
"contribute": {
13+
"title": "Contribute",
14+
"description": "Help us improve the Mobility Database by contributing to our open-source projects on GitHub",
15+
"action": "View on GitHub"
16+
},
17+
"addFeeds": {
18+
"title": "Add Feeds",
19+
"description": "Looking to add many feeds? You can contribute by heading over to our GitHub catalog repository",
20+
"action": "View Catalogs Repository"
21+
}
22+
23+
}

‎web-app/src/app/constants/Navigation.ts‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -52,15 +52,14 @@ export function buildNavigationItems(
5252
color: 'inherit',
5353
},
5454
{
55-
title: 'API Docs',
56-
target:
57-
'https://mobilitydata.github.io/mobility-feed-api/SwaggerUI/index.html',
55+
title: 'Contact Us',
56+
target: 'contact-us',
5857
color: 'inherit',
59-
external: true,
6058
},
6159
{
62-
title: 'Contact Us',
63-
target: 'mailto:[email protected]',
60+
title: 'API Docs',
61+
target:
62+
'https://mobilitydata.github.io/mobility-feed-api/SwaggerUI/index.html',
6463
color: 'inherit',
6564
external: true,
6665
},

‎web-app/src/app/router/Router.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ import GTFSFeatureAnalytics from '../screens/Analytics/GTFSFeatureAnalytics';
3333
import GBFSFeedAnalytics from '../screens/Analytics/GBFSFeedAnalytics';
3434
import GBFSNoticeAnalytics from '../screens/Analytics/GBFSNoticeAnalytics';
3535
import GBFSVersionAnalytics from '../screens/Analytics/GBFSVersionAnalytics';
36+
import ContactUs from '../screens/ContactUs';
3637

3738
export const AppRouter: React.FC = () => {
3839
const navigateTo = useNavigate();
@@ -88,6 +89,7 @@ export const AppRouter: React.FC = () => {
8889
<Route path='forgot-password' element={<ForgotPassword />} />
8990
<Route path='faq' element={<FAQ />} />
9091
<Route path='about' element={<About />} />
92+
<Route path='contact-us' element={<ContactUs />} />
9193
<Route path='feeds' element={<Feeds />} />
9294
<Route path='feeds/:feedId' element={<Feed />} />
9395
<Route path='contribute' element={<FeedSubmission />} />

‎web-app/src/app/screens/ContactUs.tsx‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
import * as React from 'react';
2+
import Box from '@mui/material/Box';
3+
import Container from '@mui/material/Container';
4+
import { Button, Card, styled, Typography } from '@mui/material';
5+
import { theme } from '../Theme';
6+
import EmailIcon from '@mui/icons-material/Email';
7+
import GitHubIcon from '@mui/icons-material/GitHub';
8+
import { useTranslation } from 'react-i18next';
9+
10+
const ContactUsItem = styled(Card)(({ theme }) => ({
11+
padding: theme.spacing(2),
12+
margin: theme.spacing(1),
13+
textAlign: 'center',
14+
width: '100%',
15+
[theme.breakpoints.up('sm')]: {
16+
width: 'calc(50% - 50px)',
17+
},
18+
'.item-container': {
19+
textAlign: 'center',
20+
},
21+
'.mui-icon': {
22+
fontSize: '4rem',
23+
},
24+
'.text-body': {
25+
textAlign: 'left',
26+
padding: `0 ${theme.spacing(2)}`,
27+
},
28+
'.action-button': {
29+
margin: theme.spacing(1),
30+
marginTop: theme.spacing(2),
31+
},
32+
}));
33+
34+
const SlackSvg = (
35+
<svg
36+
xmlns='http://www.w3.org/2000/svg'
37+
width='4rem'
38+
height='4rem'
39+
viewBox='0 0 24 24'
40+
>
41+
<path
42+
fill={theme.palette.primary.main}
43+
d='M6 15a2 2 0 0 1-2 2a2 2 0 0 1-2-2a2 2 0 0 1 2-2h2zm1 0a2 2 0 0 1 2-2a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2a2 2 0 0 1-2-2zm2-8a2 2 0 0 1-2-2a2 2 0 0 1 2-2a2 2 0 0 1 2 2v2zm0 1a2 2 0 0 1 2 2a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2a2 2 0 0 1 2-2zm8 2a2 2 0 0 1 2-2a2 2 0 0 1 2 2a2 2 0 0 1-2 2h-2zm-1 0a2 2 0 0 1-2 2a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2a2 2 0 0 1 2 2zm-2 8a2 2 0 0 1 2 2a2 2 0 0 1-2 2a2 2 0 0 1-2-2v-2zm0-1a2 2 0 0 1-2-2a2 2 0 0 1 2-2h5a2 2 0 0 1 2 2a2 2 0 0 1-2 2z'
44+
/>
45+
</svg>
46+
);
47+
48+
export default function ContactUs(): React.ReactElement {
49+
const { t } = useTranslation('contactUs');
50+
return (
51+
<Container component='main'>
52+
<Box sx={{ maxWidth: '1000px', width: '100%', mx: 'auto' }}>
53+
<Typography variant='h4' color='primary' sx={{ fontWeight: 700 }}>
54+
{t('title')}
55+
</Typography>
56+
<Box
57+
sx={{
58+
mt: 2,
59+
display: 'flex',
60+
flexWrap: 'wrap',
61+
}}
62+
>
63+
<ContactUsItem variant='outlined'>
64+
<Box className='item-container'>
65+
<EmailIcon color='primary' className='mui-icon' />
66+
<Typography variant='h6' color='primary' sx={{ fontWeight: 700 }}>
67+
{t('email.title')}
68+
</Typography>
69+
</Box>
70+
<Typography variant='body1'>
71+
{t('email.description')}{' '}
72+
<a href='mailto:[email protected]'>[email protected]</a>
73+
</Typography>
74+
</ContactUsItem>
75+
76+
<ContactUsItem variant='outlined'>
77+
<Box className='item-container'>
78+
{SlackSvg}
79+
<Typography variant='h6' color='primary' sx={{ fontWeight: 700 }}>
80+
{t('slack.title')}
81+
</Typography>
82+
</Box>
83+
<Typography variant='body1'>{t('slack.description')}</Typography>
84+
<Button
85+
variant={'contained'}
86+
className='action-button'
87+
href='https://share.mobilitydata.org/slack'
88+
target='_blank'
89+
rel='noopener noreferrer'
90+
>
91+
{t('slack.action')}
92+
</Button>
93+
</ContactUsItem>
94+
95+
<ContactUsItem variant='outlined'>
96+
<Box className='item-container'>
97+
<GitHubIcon color='primary' className='mui-icon' />
98+
<Typography variant='h6' color='primary' sx={{ fontWeight: 700 }}>
99+
{t('contribute.title')}
100+
</Typography>
101+
</Box>
102+
<Typography variant='body1' className='text-body'>
103+
{t('contribute.description')}
104+
</Typography>
105+
<Button
106+
variant={'contained'}
107+
className='action-button'
108+
href='https://github.com/MobilityData/mobility-feed-api'
109+
target='_blank'
110+
rel='noopener noreferrer'
111+
>
112+
{t('contribute.action')}
113+
</Button>
114+
</ContactUsItem>
115+
116+
<ContactUsItem variant='outlined'>
117+
<Box className='item-container'>
118+
<GitHubIcon color='primary' className='mui-icon' />
119+
<Typography variant='h6' color='primary' sx={{ fontWeight: 700 }}>
120+
{t('addFeeds.title')}
121+
</Typography>
122+
</Box>
123+
<Typography variant='body1' className='text-body'>
124+
{t('addFeeds.description')}
125+
</Typography>
126+
<Button
127+
variant={'contained'}
128+
className='action-button'
129+
href='https://github.com/MobilityData/mobility-database-catalogs'
130+
target='_blank'
131+
rel='noopener noreferrer'
132+
>
133+
{t('addFeeds.action')}
134+
</Button>
135+
</ContactUsItem>
136+
</Box>
137+
</Box>
138+
</Container>
139+
);
140+
}

‎web-app/src/i18n.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ i18n
1313
fallbackLng: 'en',
1414
debug: false,
1515
supportedLngs: supportedLanguages,
16-
ns: ['common', 'account', 'feeds'], // List your namespaces here
16+
ns: ['common', 'account', 'feeds', 'contactUs'], // List your namespaces here
1717
defaultNS: 'common', // Default namespace
1818
interpolation: {
1919
escapeValue: false, // React already escapes by default

0 commit comments

Comments
 (0)