Skip to content

Commit b4d6274

Browse files
Alessandro100Alessandro100
authored
spike: style poc improvements (#864)
* style poc improvements
1 parent 92f4547 commit b4d6274

File tree

13 files changed

+597
-666
lines changed

13 files changed

+597
-666
lines changed

‎web-app/src/app/Theme.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,10 @@ export const theme = createTheme({
100100
border: `2px solid ${palette.primary.main}`,
101101
color: palette.primary.main,
102102
},
103+
'&.MuiButton-outlinedPrimary': {
104+
border: `2px solid ${palette.primary.main}`,
105+
padding: '6px 16px',
106+
},
103107
'&.MuiButton-outlinedPrimary:hover': {
104108
backgroundColor: palette.primary.main,
105109
color: palette.primary.contrastText,

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

Lines changed: 67 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,105 +1,83 @@
11
import * as React from 'react';
2-
import CssBaseline from '@mui/material/CssBaseline';
3-
import Box from '@mui/material/Box';
2+
43
import Container from '@mui/material/Container';
54
import { Button, Typography } from '@mui/material';
65
import { OpenInNew } from '@mui/icons-material';
7-
import { theme } from '../Theme';
6+
import { MainPageHeader } from '../styles/PageHeader.style';
7+
import { ColoredContainer } from '../styles/PageLayout.style';
88

99
export default function About(): React.ReactElement {
1010
return (
1111
<Container component='main'>
12-
<CssBaseline />
13-
<Box
14-
sx={{
15-
display: 'flex',
16-
flexDirection: 'column',
17-
}}
18-
>
12+
<MainPageHeader>About</MainPageHeader>
13+
<ColoredContainer maxWidth={false} sx={{ mt: 3 }}>
14+
<Typography sx={{ fontWeight: 700 }}>
15+
The Mobility Database is hosted and supported by MobilityData, a
16+
non-profit organization that improves and extends mobility data
17+
formats, including GTFS, GTFS Realtime and GBFS.
18+
<br /> <br />
19+
MobilityData is currently working on the Mobility Database because of
20+
the need for a sustainable, community-supported hub for international
21+
mobility datasets.
22+
</Typography>
23+
24+
<Typography
25+
variant='h5'
26+
color='primary'
27+
sx={{ fontWeight: 700, mt: 5 }}
28+
>
29+
The History
30+
</Typography>
31+
<Typography>
32+
Discoverability is at the heart of mobility: travelers need to know
33+
the mobility options available and understand their intricacies to
34+
plan their journey; app creators need simplified access to data to
35+
relay to app users. Discoverability is the cement of the community
36+
that MobilityData is building around open data formats (such as GTFS
37+
and GBFS) and their datasets.
38+
<br />
39+
<br />
40+
A need to improve discoverability gave rise to the TransitFeeds.com
41+
project, which made it easier to find and query accurate and
42+
up-to-date GTFS, GTFS Realtime, GBFS, and datasets. This project was
43+
housed by MobilityData following a transition from ActionFigure
44+
(formerly TransitScreen).
45+
<br />
46+
<br />
47+
MobilityData created a long-term roadmap for the project, taking into
48+
account the repeated historic challenges the GTFS repositories have
49+
encountered and the need to expand to accommodate additional modes of
50+
transport and data formats.
51+
</Typography>
1952
<Typography
20-
component='h1'
21-
variant='h4'
53+
variant='h5'
2254
color='primary'
23-
sx={{ fontWeight: 700 }}
55+
sx={{ fontWeight: 700, mt: 5 }}
2456
>
25-
About{' '}
57+
About MobilityData
2658
</Typography>
27-
<Box
28-
sx={{
29-
background: theme.palette.background.paper,
30-
mt: 2,
31-
p: 2,
32-
borderRadius: '6px 6px 0px 0px',
33-
}}
59+
<Typography>
60+
MobilityData began in 2015 as a Rocky Mountain Institute project and
61+
became a Canadian non-profit in 2019 with the mission to improve
62+
traveler information. Building on the strength of nearly 20 employees,
63+
MobilityData brings together and supports mobility stakeholders such
64+
as transport agencies, software vendors, mobility apps, and cities to
65+
standardize and expand data formats for public transport (GTFS) and
66+
shared mobility (GBFS).
67+
</Typography>
68+
<Button
69+
component={'a'}
70+
variant='contained'
71+
sx={{ mt: 5 }}
72+
endIcon={<OpenInNew />}
73+
href='https://mobilitydata.org/'
74+
rel='noreferrer'
75+
target='_blank'
76+
className='btn-link-component'
3477
>
35-
<Typography sx={{ fontWeight: 700 }}>
36-
The Mobility Database is hosted and supported by MobilityData, a
37-
non-profit organization that improves and extends mobility data
38-
formats, including GTFS, GTFS Realtime and GBFS.
39-
<br /> <br />
40-
MobilityData is currently working on the Mobility Database because
41-
of the need for a sustainable, community-supported hub for
42-
international mobility datasets.
43-
</Typography>
44-
45-
<Typography
46-
variant='h5'
47-
color='primary'
48-
sx={{ fontWeight: 700, mt: 5 }}
49-
>
50-
The History
51-
</Typography>
52-
<Typography>
53-
Discoverability is at the heart of mobility: travelers need to know
54-
the mobility options available and understand their intricacies to
55-
plan their journey; app creators need simplified access to data to
56-
relay to app users. Discoverability is the cement of the community
57-
that MobilityData is building around open data formats (such as GTFS
58-
and GBFS) and their datasets.
59-
<br />
60-
<br />
61-
A need to improve discoverability gave rise to the TransitFeeds.com
62-
project, which made it easier to find and query accurate and
63-
up-to-date GTFS, GTFS Realtime, GBFS, and datasets. This project was
64-
housed by MobilityData following a transition from ActionFigure
65-
(formerly TransitScreen).
66-
<br />
67-
<br />
68-
MobilityData created a long-term roadmap for the project, taking
69-
into account the repeated historic challenges the GTFS repositories
70-
have encountered and the need to expand to accommodate additional
71-
modes of transport and data formats.
72-
</Typography>
73-
<Typography
74-
variant='h5'
75-
color='primary'
76-
sx={{ fontWeight: 700, mt: 5 }}
77-
>
78-
About MobilityData
79-
</Typography>
80-
<Typography>
81-
MobilityData began in 2015 as a Rocky Mountain Institute project and
82-
became a Canadian non-profit in 2019 with the mission to improve
83-
traveler information. Building on the strength of nearly 20
84-
employees, MobilityData brings together and supports mobility
85-
stakeholders such as transport agencies, software vendors, mobility
86-
apps, and cities to standardize and expand data formats for public
87-
transport (GTFS) and shared mobility (GBFS).
88-
</Typography>
89-
<Button
90-
component={'a'}
91-
variant='contained'
92-
sx={{ mt: 5 }}
93-
endIcon={<OpenInNew />}
94-
href='https://mobilitydata.org/'
95-
rel='noreferrer'
96-
target='_blank'
97-
className='btn-link-component'
98-
>
99-
Learn more about MobilityData
100-
</Button>
101-
</Box>
102-
</Box>
78+
Learn more about MobilityData
79+
</Button>
80+
</ColoredContainer>
10381
</Container>
10482
);
10583
}

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import * as React from 'react';
2-
import CssBaseline from '@mui/material/CssBaseline';
32
import '../styles/Account.css';
43
import { useNavigate } from 'react-router-dom';
54
import { useTheme } from '@mui/material/styles';
@@ -298,7 +297,6 @@ export default function APIAccount(): React.ReactElement {
298297
{t('accessToken.refreshSuccess')}
299298
</Alert>
300299
</Snackbar>
301-
<CssBaseline />
302300
<Typography
303301
component='h1'
304302
variant='h4'

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import * as React from 'react';
22
import Button from '@mui/material/Button';
3-
import CssBaseline from '@mui/material/CssBaseline';
43
import TextField from '@mui/material/TextField';
54
import Box from '@mui/material/Box';
65
import Typography from '@mui/material/Typography';
@@ -88,7 +87,6 @@ export default function ChangePassword(): React.ReactElement {
8887

8988
return (
9089
<Container component='main' maxWidth='sm'>
91-
<CssBaseline />
9290
<Box
9391
sx={{
9492
display: 'flex',

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

Lines changed: 77 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { theme } from '../Theme';
66
import EmailIcon from '@mui/icons-material/Email';
77
import GitHubIcon from '@mui/icons-material/GitHub';
88
import { useTranslation } from 'react-i18next';
9+
import { MainPageHeader } from '../styles/PageHeader.style';
910

1011
const ContactUsItem = styled(Card)(({ theme }) => ({
1112
padding: theme.spacing(2),
@@ -48,97 +49,88 @@ const SlackSvg = (
4849
export default function ContactUs(): React.ReactElement {
4950
const { t } = useTranslation('contactUs');
5051
return (
51-
<Container component='main'>
52-
<Box sx={{ maxWidth: '1000px', width: '100%', mx: 'auto' }}>
53-
<Typography
54-
component='h1'
55-
variant='h4'
56-
color='primary'
57-
sx={{ fontWeight: 700 }}
58-
>
59-
{t('title')}
60-
</Typography>
61-
<Box
62-
sx={{
63-
mt: 2,
64-
display: 'flex',
65-
flexWrap: 'wrap',
66-
}}
67-
>
68-
<ContactUsItem variant='outlined'>
69-
<Box className='item-container'>
70-
<EmailIcon color='primary' className='mui-icon' />
71-
<Typography variant='h6' color='primary' sx={{ fontWeight: 700 }}>
72-
{t('email.title')}
73-
</Typography>
74-
</Box>
75-
<Typography variant='body1'>
76-
{t('email.description')}{' '}
77-
<a href='mailto:[email protected]'>[email protected]</a>
52+
<Container component='main' maxWidth={'lg'}>
53+
<MainPageHeader>{t('title')}</MainPageHeader>
54+
<Box
55+
sx={{
56+
mt: 2,
57+
display: 'flex',
58+
flexWrap: 'wrap',
59+
}}
60+
>
61+
<ContactUsItem variant='outlined'>
62+
<Box className='item-container'>
63+
<EmailIcon color='primary' className='mui-icon' />
64+
<Typography variant='h6' color='primary' sx={{ fontWeight: 700 }}>
65+
{t('email.title')}
7866
</Typography>
79-
</ContactUsItem>
67+
</Box>
68+
<Typography variant='body1'>
69+
{t('email.description')}{' '}
70+
<a href='mailto:[email protected]'>[email protected]</a>
71+
</Typography>
72+
</ContactUsItem>
8073

81-
<ContactUsItem variant='outlined'>
82-
<Box className='item-container'>
83-
{SlackSvg}
84-
<Typography variant='h6' color='primary' sx={{ fontWeight: 700 }}>
85-
{t('slack.title')}
86-
</Typography>
87-
</Box>
88-
<Typography variant='body1'>{t('slack.description')}</Typography>
89-
<Button
90-
variant={'contained'}
91-
className='action-button'
92-
href='https://share.mobilitydata.org/slack'
93-
target='_blank'
94-
rel='noopener noreferrer'
95-
>
96-
{t('slack.action')}
97-
</Button>
98-
</ContactUsItem>
74+
<ContactUsItem variant='outlined'>
75+
<Box className='item-container'>
76+
{SlackSvg}
77+
<Typography variant='h6' color='primary' sx={{ fontWeight: 700 }}>
78+
{t('slack.title')}
79+
</Typography>
80+
</Box>
81+
<Typography variant='body1'>{t('slack.description')}</Typography>
82+
<Button
83+
variant={'contained'}
84+
className='action-button'
85+
href='https://share.mobilitydata.org/slack'
86+
target='_blank'
87+
rel='noopener noreferrer'
88+
>
89+
{t('slack.action')}
90+
</Button>
91+
</ContactUsItem>
9992

100-
<ContactUsItem variant='outlined'>
101-
<Box className='item-container'>
102-
<GitHubIcon color='primary' className='mui-icon' />
103-
<Typography variant='h6' color='primary' sx={{ fontWeight: 700 }}>
104-
{t('contribute.title')}
105-
</Typography>
106-
</Box>
107-
<Typography variant='body1' className='text-body'>
108-
{t('contribute.description')}
93+
<ContactUsItem variant='outlined'>
94+
<Box className='item-container'>
95+
<GitHubIcon color='primary' className='mui-icon' />
96+
<Typography variant='h6' color='primary' sx={{ fontWeight: 700 }}>
97+
{t('contribute.title')}
10998
</Typography>
110-
<Button
111-
variant={'contained'}
112-
className='action-button'
113-
href='https://github.com/MobilityData/mobility-feed-api'
114-
target='_blank'
115-
rel='noopener noreferrer'
116-
>
117-
{t('contribute.action')}
118-
</Button>
119-
</ContactUsItem>
99+
</Box>
100+
<Typography variant='body1' className='text-body'>
101+
{t('contribute.description')}
102+
</Typography>
103+
<Button
104+
variant={'contained'}
105+
className='action-button'
106+
href='https://github.com/MobilityData/mobility-feed-api'
107+
target='_blank'
108+
rel='noopener noreferrer'
109+
>
110+
{t('contribute.action')}
111+
</Button>
112+
</ContactUsItem>
120113

121-
<ContactUsItem variant='outlined'>
122-
<Box className='item-container'>
123-
<GitHubIcon color='primary' className='mui-icon' />
124-
<Typography variant='h6' color='primary' sx={{ fontWeight: 700 }}>
125-
{t('addFeeds.title')}
126-
</Typography>
127-
</Box>
128-
<Typography variant='body1' className='text-body'>
129-
{t('addFeeds.description')}
114+
<ContactUsItem variant='outlined'>
115+
<Box className='item-container'>
116+
<GitHubIcon color='primary' className='mui-icon' />
117+
<Typography variant='h6' color='primary' sx={{ fontWeight: 700 }}>
118+
{t('addFeeds.title')}
130119
</Typography>
131-
<Button
132-
variant={'contained'}
133-
className='action-button'
134-
href='https://github.com/MobilityData/mobility-database-catalogs'
135-
target='_blank'
136-
rel='noopener noreferrer'
137-
>
138-
{t('addFeeds.action')}
139-
</Button>
140-
</ContactUsItem>
141-
</Box>
120+
</Box>
121+
<Typography variant='body1' className='text-body'>
122+
{t('addFeeds.description')}
123+
</Typography>
124+
<Button
125+
variant={'contained'}
126+
className='action-button'
127+
href='https://github.com/MobilityData/mobility-database-catalogs'
128+
target='_blank'
129+
rel='noopener noreferrer'
130+
>
131+
{t('addFeeds.action')}
132+
</Button>
133+
</ContactUsItem>
142134
</Box>
143135
</Container>
144136
);

0 commit comments

Comments
 (0)