Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

spike: style poc improvements #864

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

spike: style poc improvements #864

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9821ea9
style poc improvements
Alessandro100 Dec 20, 2024
f23f2a0
styling chnages feeds
Alessandro100 Dec 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions web-app/src/app/Theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,10 @@ export const theme = createTheme({
border: `2px solid ${palette.primary.main}`,
color: palette.primary.main,
},
'&.MuiButton-outlinedPrimary': {
border: `2px solid ${palette.primary.main}`,
padding: '6px 16px',
},
'&.MuiButton-outlinedPrimary:hover': {
backgroundColor: palette.primary.main,
color: palette.primary.contrastText,
Expand Down
156 changes: 67 additions & 89 deletions web-app/src/app/screens/About.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,105 +1,83 @@
import * as React from 'react';
import CssBaseline from '@mui/material/CssBaseline';
import Box from '@mui/material/Box';

import Container from '@mui/material/Container';
import { Button, Typography } from '@mui/material';
import { OpenInNew } from '@mui/icons-material';
import { theme } from '../Theme';
import { MainPageHeader } from '../styles/PageHeader.style';
import { ColoredContainer } from '../styles/PageLayout.style';

export default function About(): React.ReactElement {
return (
<Container component='main'>
<CssBaseline />
<Box
sx={{
display: 'flex',
flexDirection: 'column',
}}
>
<MainPageHeader>About</MainPageHeader>
<ColoredContainer maxWidth={false} sx={{ mt: 3 }}>
<Typography sx={{ fontWeight: 700 }}>
The Mobility Database is hosted and supported by MobilityData, a
non-profit organization that improves and extends mobility data
formats, including GTFS, GTFS Realtime and GBFS.
<br /> <br />
MobilityData is currently working on the Mobility Database because of
the need for a sustainable, community-supported hub for international
mobility datasets.
</Typography>

<Typography
variant='h5'
color='primary'
sx={{ fontWeight: 700, mt: 5 }}
>
The History
</Typography>
<Typography>
Discoverability is at the heart of mobility: travelers need to know
the mobility options available and understand their intricacies to
plan their journey; app creators need simplified access to data to
relay to app users. Discoverability is the cement of the community
that MobilityData is building around open data formats (such as GTFS
and GBFS) and their datasets.
<br />
<br />
A need to improve discoverability gave rise to the TransitFeeds.com
project, which made it easier to find and query accurate and
up-to-date GTFS, GTFS Realtime, GBFS, and datasets. This project was
housed by MobilityData following a transition from ActionFigure
(formerly TransitScreen).
<br />
<br />
MobilityData created a long-term roadmap for the project, taking into
account the repeated historic challenges the GTFS repositories have
encountered and the need to expand to accommodate additional modes of
transport and data formats.
</Typography>
<Typography
component='h1'
variant='h4'
variant='h5'
color='primary'
sx={{ fontWeight: 700 }}
sx={{ fontWeight: 700, mt: 5 }}
>
About{' '}
About MobilityData
</Typography>
<Box
sx={{
background: theme.palette.background.paper,
mt: 2,
p: 2,
borderRadius: '6px 6px 0px 0px',
}}
<Typography>
MobilityData began in 2015 as a Rocky Mountain Institute project and
became a Canadian non-profit in 2019 with the mission to improve
traveler information. Building on the strength of nearly 20 employees,
MobilityData brings together and supports mobility stakeholders such
as transport agencies, software vendors, mobility apps, and cities to
standardize and expand data formats for public transport (GTFS) and
shared mobility (GBFS).
</Typography>
<Button
component={'a'}
variant='contained'
sx={{ mt: 5 }}
endIcon={<OpenInNew />}
href='https://mobilitydata.org/'
rel='noreferrer'
target='_blank'
className='btn-link-component'
>
<Typography sx={{ fontWeight: 700 }}>
The Mobility Database is hosted and supported by MobilityData, a
non-profit organization that improves and extends mobility data
formats, including GTFS, GTFS Realtime and GBFS.
<br /> <br />
MobilityData is currently working on the Mobility Database because
of the need for a sustainable, community-supported hub for
international mobility datasets.
</Typography>

<Typography
variant='h5'
color='primary'
sx={{ fontWeight: 700, mt: 5 }}
>
The History
</Typography>
<Typography>
Discoverability is at the heart of mobility: travelers need to know
the mobility options available and understand their intricacies to
plan their journey; app creators need simplified access to data to
relay to app users. Discoverability is the cement of the community
that MobilityData is building around open data formats (such as GTFS
and GBFS) and their datasets.
<br />
<br />
A need to improve discoverability gave rise to the TransitFeeds.com
project, which made it easier to find and query accurate and
up-to-date GTFS, GTFS Realtime, GBFS, and datasets. This project was
housed by MobilityData following a transition from ActionFigure
(formerly TransitScreen).
<br />
<br />
MobilityData created a long-term roadmap for the project, taking
into account the repeated historic challenges the GTFS repositories
have encountered and the need to expand to accommodate additional
modes of transport and data formats.
</Typography>
<Typography
variant='h5'
color='primary'
sx={{ fontWeight: 700, mt: 5 }}
>
About MobilityData
</Typography>
<Typography>
MobilityData began in 2015 as a Rocky Mountain Institute project and
became a Canadian non-profit in 2019 with the mission to improve
traveler information. Building on the strength of nearly 20
employees, MobilityData brings together and supports mobility
stakeholders such as transport agencies, software vendors, mobility
apps, and cities to standardize and expand data formats for public
transport (GTFS) and shared mobility (GBFS).
</Typography>
<Button
component={'a'}
variant='contained'
sx={{ mt: 5 }}
endIcon={<OpenInNew />}
href='https://mobilitydata.org/'
rel='noreferrer'
target='_blank'
className='btn-link-component'
>
Learn more about MobilityData
</Button>
</Box>
</Box>
Learn more about MobilityData
</Button>
</ColoredContainer>
</Container>
);
}
2 changes: 0 additions & 2 deletions web-app/src/app/screens/Account.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import * as React from 'react';
import CssBaseline from '@mui/material/CssBaseline';
import '../styles/Account.css';
import { useNavigate } from 'react-router-dom';
import { useTheme } from '@mui/material/styles';
Expand Down Expand Up @@ -298,7 +297,6 @@ export default function APIAccount(): React.ReactElement {
{t('accessToken.refreshSuccess')}
</Alert>
</Snackbar>
<CssBaseline />
<Typography
component='h1'
variant='h4'
Expand Down
2 changes: 0 additions & 2 deletions web-app/src/app/screens/ChangePassword.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import * as React from 'react';
import Button from '@mui/material/Button';
import CssBaseline from '@mui/material/CssBaseline';
import TextField from '@mui/material/TextField';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
Expand Down Expand Up @@ -88,7 +87,6 @@ export default function ChangePassword(): React.ReactElement {

return (
<Container component='main' maxWidth='sm'>
<CssBaseline />
<Box
sx={{
display: 'flex',
Expand Down
162 changes: 77 additions & 85 deletions web-app/src/app/screens/ContactUs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { theme } from '../Theme';
import EmailIcon from '@mui/icons-material/Email';
import GitHubIcon from '@mui/icons-material/GitHub';
import { useTranslation } from 'react-i18next';
import { MainPageHeader } from '../styles/PageHeader.style';

const ContactUsItem = styled(Card)(({ theme }) => ({
padding: theme.spacing(2),
Expand Down Expand Up @@ -48,97 +49,88 @@ const SlackSvg = (
export default function ContactUs(): React.ReactElement {
const { t } = useTranslation('contactUs');
return (
<Container component='main'>
<Box sx={{ maxWidth: '1000px', width: '100%', mx: 'auto' }}>
<Typography
component='h1'
variant='h4'
color='primary'
sx={{ fontWeight: 700 }}
>
{t('title')}
</Typography>
<Box
sx={{
mt: 2,
display: 'flex',
flexWrap: 'wrap',
}}
>
<ContactUsItem variant='outlined'>
<Box className='item-container'>
<EmailIcon color='primary' className='mui-icon' />
<Typography variant='h6' color='primary' sx={{ fontWeight: 700 }}>
{t('email.title')}
</Typography>
</Box>
<Typography variant='body1'>
{t('email.description')}{' '}
<a href='mailto:[email protected]'>[email protected]</a>
<Container component='main' maxWidth={'lg'}>
<MainPageHeader>{t('title')}</MainPageHeader>
<Box
sx={{
mt: 2,
display: 'flex',
flexWrap: 'wrap',
}}
>
<ContactUsItem variant='outlined'>
<Box className='item-container'>
<EmailIcon color='primary' className='mui-icon' />
<Typography variant='h6' color='primary' sx={{ fontWeight: 700 }}>
{t('email.title')}
</Typography>
</ContactUsItem>
</Box>
<Typography variant='body1'>
{t('email.description')}{' '}
<a href='mailto:[email protected]'>[email protected]</a>
</Typography>
</ContactUsItem>

<ContactUsItem variant='outlined'>
<Box className='item-container'>
{SlackSvg}
<Typography variant='h6' color='primary' sx={{ fontWeight: 700 }}>
{t('slack.title')}
</Typography>
</Box>
<Typography variant='body1'>{t('slack.description')}</Typography>
<Button
variant={'contained'}
className='action-button'
href='https://share.mobilitydata.org/slack'
target='_blank'
rel='noopener noreferrer'
>
{t('slack.action')}
</Button>
</ContactUsItem>
<ContactUsItem variant='outlined'>
<Box className='item-container'>
{SlackSvg}
<Typography variant='h6' color='primary' sx={{ fontWeight: 700 }}>
{t('slack.title')}
</Typography>
</Box>
<Typography variant='body1'>{t('slack.description')}</Typography>
<Button
variant={'contained'}
className='action-button'
href='https://share.mobilitydata.org/slack'
target='_blank'
rel='noopener noreferrer'
>
{t('slack.action')}
</Button>
</ContactUsItem>

<ContactUsItem variant='outlined'>
<Box className='item-container'>
<GitHubIcon color='primary' className='mui-icon' />
<Typography variant='h6' color='primary' sx={{ fontWeight: 700 }}>
{t('contribute.title')}
</Typography>
</Box>
<Typography variant='body1' className='text-body'>
{t('contribute.description')}
<ContactUsItem variant='outlined'>
<Box className='item-container'>
<GitHubIcon color='primary' className='mui-icon' />
<Typography variant='h6' color='primary' sx={{ fontWeight: 700 }}>
{t('contribute.title')}
</Typography>
<Button
variant={'contained'}
className='action-button'
href='https://github.com/MobilityData/mobility-feed-api'
target='_blank'
rel='noopener noreferrer'
>
{t('contribute.action')}
</Button>
</ContactUsItem>
</Box>
<Typography variant='body1' className='text-body'>
{t('contribute.description')}
</Typography>
<Button
variant={'contained'}
className='action-button'
href='https://github.com/MobilityData/mobility-feed-api'
target='_blank'
rel='noopener noreferrer'
>
{t('contribute.action')}
</Button>
</ContactUsItem>

<ContactUsItem variant='outlined'>
<Box className='item-container'>
<GitHubIcon color='primary' className='mui-icon' />
<Typography variant='h6' color='primary' sx={{ fontWeight: 700 }}>
{t('addFeeds.title')}
</Typography>
</Box>
<Typography variant='body1' className='text-body'>
{t('addFeeds.description')}
<ContactUsItem variant='outlined'>
<Box className='item-container'>
<GitHubIcon color='primary' className='mui-icon' />
<Typography variant='h6' color='primary' sx={{ fontWeight: 700 }}>
{t('addFeeds.title')}
</Typography>
<Button
variant={'contained'}
className='action-button'
href='https://github.com/MobilityData/mobility-database-catalogs'
target='_blank'
rel='noopener noreferrer'
>
{t('addFeeds.action')}
</Button>
</ContactUsItem>
</Box>
</Box>
<Typography variant='body1' className='text-body'>
{t('addFeeds.description')}
</Typography>
<Button
variant={'contained'}
className='action-button'
href='https://github.com/MobilityData/mobility-database-catalogs'
target='_blank'
rel='noopener noreferrer'
>
{t('addFeeds.action')}
</Button>
</ContactUsItem>
</Box>
</Container>
);
Expand Down
Loading
Loading