Skip to content

Commit 8c98eb4

Browse files
Alessandro100Alessandro100
authored
Feat: feed summary redesign + update theme colors (#1449)
* feed summary redesign * new theme colors * cleanup of previous components * github co-pilot pr review comments * feed location unique display for 1 * clarifications to service date range status * lint fix
1 parent b64cb0c commit 8c98eb4

16 files changed

Lines changed: 1074 additions & 670 deletions

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

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,10 @@ declare module '@mui/material/styles' {
2727
routeTextColor?: string;
2828
};
2929
}
30+
31+
interface TypeText {
32+
lightContrast?: string;
33+
}
3034
}
3135

3236
declare module '@mui/material/Typography' {
@@ -62,10 +66,10 @@ const palette = {
6266
contrastText: '#f9faff',
6367
},
6468
secondary: {
65-
main: '#96a1ff', // original mobility data purple
66-
dark: '#4a5fe8',
67-
light: '#e7e8ff',
68-
contrastText: '#f9faff',
69+
main: '#5E56F7',
70+
dark: '#2B1EB8',
71+
light: '#D7D4FF',
72+
contrastText: '#FFFFFF',
6973
},
7074
background: {
7175
default: '#ffffff',
@@ -75,6 +79,7 @@ const palette = {
7579
primary: '#474747',
7680
secondary: 'rgba(71, 71, 71, 0.8)',
7781
disabled: 'rgba(0,0,0,0.3)',
82+
lightContrast: '#1D1717',
7883
},
7984
divider: 'rgba(0, 0, 0, 0.23)',
8085
boxShadow: '0px 1px 4px 2px rgba(0,0,0,0.2)',
@@ -88,10 +93,10 @@ const darkPalette = {
8893
contrastText: '#1D1717',
8994
},
9095
secondary: {
91-
main: '#3959fa',
92-
dark: '#002eea',
93-
light: '#989ffc',
94-
contrastText: '#ffffff',
96+
light: '#C4CCFF',
97+
main: '#5E6DD9',
98+
dark: '#3846A6',
99+
contrastText: '#FFFFFF',
95100
},
96101
background: {
97102
default: '#121212',
@@ -101,6 +106,7 @@ const darkPalette = {
101106
primary: '#E3E3E3',
102107
secondary: 'rgba(255, 255, 255, 0.7)',
103108
disabled: 'rgba(255, 255, 255, 0.3)',
109+
lightContrast: '#1D1717',
104110
},
105111
divider: 'rgba(255, 255, 255, 0.23)',
106112
boxShadow: '0px 1px 4px 2px rgba(0,0,0,0.6)',

‎web-app/src/app/components/CoveredAreaMap.tsx‎

Lines changed: 73 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import OpenInNewIcon from '@mui/icons-material/OpenInNew';
1313
import { Link } from 'react-router-dom';
1414
import MapIcon from '@mui/icons-material/Map';
1515
import TravelExploreIcon from '@mui/icons-material/TravelExplore';
16-
import { ContentBox } from './ContentBox';
1716
import { WarningContentBox } from './WarningContentBox';
1817
import { mapBoxPositionStyle } from '../screens/Feed/Feed.styles';
1918
import {
@@ -269,44 +268,30 @@ const CoveredAreaMap: React.FC<CoveredAreaMapProps> = ({
269268
]);
270269

271270
return (
272-
<ContentBox
271+
<Box
273272
sx={{
274273
flexGrow: 1,
275274
display: 'flex',
276275
flexDirection: 'column',
277-
maxHeight: {
278-
xs: '100%',
279-
md: '70vh', // TODO: optimize this
280-
},
276+
maxHeight: '90vh',
281277
minHeight: '50vh',
278+
p: 2,
279+
backgroundColor: theme.palette.background.default,
280+
borderRadius: '5px',
281+
border:
282+
feed?.data_type === 'gbfs'
283+
? `2px solid ${theme.palette.primary.dark}`
284+
: 'none', // Temporary until gbfs summary redesign
282285
}}
283-
title={t('coveredAreaTitle') + ' - ' + t(view)}
284-
width={{ xs: '100%' }}
285-
outlineColor={theme.palette.primary.dark}
286-
padding={2}
287286
>
288-
<Box
289-
display={'flex'}
290-
justifyContent={
291-
view === 'gtfsVisualizationView' ? 'space-between' : 'flex-end'
292-
}
293-
mb={1}
294-
alignItems={'center'}
295-
>
296-
{view === 'gtfsVisualizationView' &&
297-
config.enableGtfsVisualizationMap && (
298-
<Button
299-
variant='contained'
300-
disableElevation
301-
component={Link}
302-
to='./map'
303-
onClick={handleOpenDetailedMapClick}
304-
endIcon={<OpenInNewIcon></OpenInNewIcon>}
305-
>
306-
{t('openDetailedMap')}
307-
</Button>
308-
)}
309-
{feed?.data_type === 'gbfs' ? (
287+
<Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
288+
<Typography
289+
variant='subtitle1'
290+
sx={{ color: 'text.secondary', mt: 0.5 }}
291+
>
292+
{t('coveredAreaTitle') + ' - ' + t(view)}
293+
</Typography>
294+
{feed?.data_type === 'gbfs' && (
310295
<Box sx={{ textAlign: 'right' }}>
311296
{latestAutodiscoveryUrl != undefined && (
312297
<Button
@@ -331,47 +316,66 @@ const CoveredAreaMap: React.FC<CoveredAreaMapProps> = ({
331316
</Typography>
332317
)}
333318
</Box>
334-
) : (
335-
<ToggleButtonGroup
336-
value={view}
337-
color='primary'
338-
exclusive
339-
aria-label='map view selection'
340-
onChange={handleViewChange}
341-
>
342-
{config.enableGtfsVisualizationMap && (
343-
<Tooltip title={t('gtfsVisualizationTooltip')}>
344-
<ToggleButton
345-
value='gtfsVisualizationView'
346-
disabled={!enableGtfsVisualizationView}
347-
aria-label={t('gtfsVisualizationViewLabel')}
319+
)}
320+
{feed?.data_type === 'gtfs' && (
321+
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 1 }}>
322+
{view === 'gtfsVisualizationView' &&
323+
config.enableGtfsVisualizationMap && (
324+
<Button
325+
variant='text'
326+
disableElevation
327+
component={Link}
328+
to='./map'
329+
onClick={handleOpenDetailedMapClick}
330+
endIcon={<OpenInNewIcon></OpenInNewIcon>}
348331
>
349-
<ModeOfTravelIcon />
350-
</ToggleButton>
351-
</Tooltip>
352-
)}
353-
{config.enableDetailedCoveredArea && (
354-
<Tooltip title={t('detailedCoveredAreaViewTooltip')}>
332+
{t('openDetailedMap')}
333+
</Button>
334+
)}
335+
<ToggleButtonGroup
336+
value={view}
337+
color='primary'
338+
exclusive
339+
aria-label='map view selection'
340+
onChange={handleViewChange}
341+
size='small'
342+
>
343+
{config.enableGtfsVisualizationMap && (
344+
<Tooltip title={t('gtfsVisualizationTooltip')}>
345+
<ToggleButton
346+
value='gtfsVisualizationView'
347+
disabled={!enableGtfsVisualizationView}
348+
aria-label={t('gtfsVisualizationViewLabel')}
349+
>
350+
<ModeOfTravelIcon />
351+
</ToggleButton>
352+
</Tooltip>
353+
)}
354+
{config.enableDetailedCoveredArea && (
355+
<Tooltip title={t('detailedCoveredAreaViewTooltip')}>
356+
<ToggleButton
357+
value='detailedCoveredAreaView'
358+
disabled={
359+
geoJsonLoading ||
360+
geoJsonError ||
361+
boundingBox === undefined
362+
}
363+
aria-label='Detailed Covered Area View'
364+
>
365+
<TravelExploreIcon />
366+
</ToggleButton>
367+
</Tooltip>
368+
)}
369+
<Tooltip title={t('boundingBoxViewTooltip')}>
355370
<ToggleButton
356-
value='detailedCoveredAreaView'
357-
disabled={
358-
geoJsonLoading || geoJsonError || boundingBox === undefined
359-
}
360-
aria-label='Detailed Covered Area View'
371+
value='boundingBoxView'
372+
aria-label='Bounding Box View'
361373
>
362-
<TravelExploreIcon />
374+
<MapIcon />
363375
</ToggleButton>
364376
</Tooltip>
365-
)}
366-
<Tooltip title={t('boundingBoxViewTooltip')}>
367-
<ToggleButton
368-
value='boundingBoxView'
369-
aria-label='Bounding Box View'
370-
>
371-
<MapIcon />
372-
</ToggleButton>
373-
</Tooltip>
374-
</ToggleButtonGroup>
377+
</ToggleButtonGroup>
378+
</Box>
375379
)}
376380
</Box>
377381
{(feed?.data_type === 'gtfs' || feed?.data_type === 'gbfs') &&
@@ -402,7 +406,7 @@ const CoveredAreaMap: React.FC<CoveredAreaMapProps> = ({
402406
)}
403407
</Box>
404408
)}
405-
</ContentBox>
409+
</Box>
406410
);
407411
};
408412

‎web-app/src/app/components/FeedStatus.tsx‎

Lines changed: 19 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,19 @@
11
import { Box, Chip, Tooltip, useTheme } from '@mui/material';
22
import { useTranslation } from 'react-i18next';
3-
import { type TFunction } from 'i18next';
3+
import { getFeedStatusData } from '../utils/feedStatusConsts';
44

55
export interface FeedStatusProps {
66
status: string;
7-
}
8-
9-
interface FeedStatusData {
10-
toolTip: string;
11-
label: string;
12-
themeColor: 'success' | 'info' | 'warning' | 'error';
13-
toolTipLong: string;
14-
}
15-
16-
function getFeedStatusData(
17-
status: string,
18-
t: TFunction,
19-
): FeedStatusData | undefined {
20-
const data: Record<string, FeedStatusData> = {
21-
active: {
22-
toolTip: t('feedStatus.active.toolTip'),
23-
label: t('feedStatus.active.label'),
24-
themeColor: 'success',
25-
toolTipLong: t('feedStatus.active.toolTipLong'),
26-
},
27-
future: {
28-
toolTip: t('feedStatus.future.toolTip'),
29-
label: t('feedStatus.future.label'),
30-
themeColor: 'info',
31-
toolTipLong: t('feedStatus.future.toolTipLong'),
32-
},
33-
inactive: {
34-
toolTip: t('feedStatus.inactive.toolTip'),
35-
label: t('feedStatus.inactive.label'),
36-
themeColor: 'warning',
37-
toolTipLong: t('feedStatus.inactive.toolTipLong'),
38-
},
39-
deprecated: {
40-
toolTip: t('feedStatus.deprecated.toolTip'),
41-
label: t('feedStatus.deprecated.label'),
42-
themeColor: 'error',
43-
toolTipLong: t('feedStatus.deprecated.toolTipLong'),
44-
},
45-
};
46-
47-
return data[status];
7+
chipSize?: 'small' | 'medium';
8+
disableTooltip?: boolean;
489
}
4910

5011
export const FeedStatusIndicator = (
5112
props: React.PropsWithChildren<FeedStatusProps>,
5213
): JSX.Element => {
5314
const { t } = useTranslation('feeds');
5415
const theme = useTheme();
55-
const statusData = getFeedStatusData(props.status, t);
16+
const statusData = getFeedStatusData(props.status, theme, t);
5617
return (
5718
<>
5819
{statusData != undefined && (
@@ -76,12 +37,24 @@ export const FeedStatusChip = (
7637
props: React.PropsWithChildren<FeedStatusProps>,
7738
): JSX.Element => {
7839
const { t } = useTranslation('feeds');
79-
const statusData = getFeedStatusData(props.status, t);
40+
const theme = useTheme();
41+
const statusData = getFeedStatusData(props.status, theme, t);
8042
return (
8143
<>
8244
{statusData != undefined && (
83-
<Tooltip title={statusData.toolTipLong} placement='top'>
84-
<Chip label={statusData.label} color={statusData.themeColor}></Chip>
45+
<Tooltip
46+
title={
47+
props.disableTooltip != undefined && props.disableTooltip
48+
? ''
49+
: statusData.toolTipLong
50+
}
51+
placement='top'
52+
>
53+
<Chip
54+
label={statusData.label}
55+
color={statusData.themeColor}
56+
size={props.chipSize ?? 'medium'}
57+
></Chip>
8558
</Tooltip>
8659
)}
8760
</>

0 commit comments

Comments
 (0)