Skip to content

Feat: feed summary redesign + update theme colors #1449

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

Merged
Alessandro100 merged 7 commits into from
Nov 13, 2025
Merged

Feat: feed summary redesign + update theme colors #1449

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
4a0f81f
feed summary redesign
Alessandro100 Nov 7, 2025
3389dd6
new theme colors
Alessandro100 Nov 10, 2025
c028aed
cleanup of previous components
Alessandro100 Nov 10, 2025
0ff28b5
github co-pilot pr review comments
Alessandro100 Nov 10, 2025
92f85af
feed location unique display for 1
Alessandro100 Nov 11, 2025
04972cf
clarifications to service date range status
Alessandro100 Nov 11, 2025
c4e91a5
lint fix
Alessandro100 Nov 11, 2025
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
22 changes: 14 additions & 8 deletions web-app/src/app/Theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,10 @@ declare module '@mui/material/styles' {
routeTextColor?: string;
};
}

interface TypeText {
lightContrast?: string;
}
}

declare module '@mui/material/Typography' {
Expand Down Expand Up @@ -62,10 +66,10 @@ const palette = {
contrastText: '#f9faff',
},
secondary: {
main: '#96a1ff', // original mobility data purple
dark: '#4a5fe8',
light: '#e7e8ff',
contrastText: '#f9faff',
main: '#5E56F7',
dark: '#2B1EB8',
light: '#D7D4FF',
contrastText: '#FFFFFF',
},
background: {
default: '#ffffff',
Expand All @@ -75,6 +79,7 @@ const palette = {
primary: '#474747',
secondary: 'rgba(71, 71, 71, 0.8)',
disabled: 'rgba(0,0,0,0.3)',
lightContrast: '#1D1717',
},
divider: 'rgba(0, 0, 0, 0.23)',
boxShadow: '0px 1px 4px 2px rgba(0,0,0,0.2)',
Expand All @@ -88,10 +93,10 @@ const darkPalette = {
contrastText: '#1D1717',
},
secondary: {
main: '#3959fa',
dark: '#002eea',
light: '#989ffc',
contrastText: '#ffffff',
light: '#C4CCFF',
main: '#5E6DD9',
dark: '#3846A6',
contrastText: '#FFFFFF',
},
background: {
default: '#121212',
Expand All @@ -101,6 +106,7 @@ const darkPalette = {
primary: '#E3E3E3',
secondary: 'rgba(255, 255, 255, 0.7)',
disabled: 'rgba(255, 255, 255, 0.3)',
lightContrast: '#1D1717',
},
divider: 'rgba(255, 255, 255, 0.23)',
boxShadow: '0px 1px 4px 2px rgba(0,0,0,0.6)',
Expand Down
142 changes: 73 additions & 69 deletions web-app/src/app/components/CoveredAreaMap.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ import OpenInNewIcon from '@mui/icons-material/OpenInNew';
import { Link } from 'react-router-dom';
import MapIcon from '@mui/icons-material/Map';
import TravelExploreIcon from '@mui/icons-material/TravelExplore';
import { ContentBox } from './ContentBox';
import { WarningContentBox } from './WarningContentBox';
import { mapBoxPositionStyle } from '../screens/Feed/Feed.styles';
import {
Expand Down Expand Up @@ -269,44 +268,30 @@ const CoveredAreaMap: React.FC<CoveredAreaMapProps> = ({
]);

return (
<ContentBox
<Box
sx={{
flexGrow: 1,
display: 'flex',
flexDirection: 'column',
maxHeight: {
xs: '100%',
md: '70vh', // TODO: optimize this
},
maxHeight: '90vh',
minHeight: '50vh',
p: 2,
backgroundColor: theme.palette.background.default,
borderRadius: '5px',
border:
feed?.data_type === 'gbfs'
? `2px solid ${theme.palette.primary.dark}`
: 'none', // Temporary until gbfs summary redesign
}}
title={t('coveredAreaTitle') + ' - ' + t(view)}
width={{ xs: '100%' }}
outlineColor={theme.palette.primary.dark}
padding={2}
>
<Box
display={'flex'}
justifyContent={
view === 'gtfsVisualizationView' ? 'space-between' : 'flex-end'
}
mb={1}
alignItems={'center'}
>
{view === 'gtfsVisualizationView' &&
config.enableGtfsVisualizationMap && (
<Button
variant='contained'
disableElevation
component={Link}
to='./map'
onClick={handleOpenDetailedMapClick}
endIcon={<OpenInNewIcon></OpenInNewIcon>}
>
{t('openDetailedMap')}
</Button>
)}
{feed?.data_type === 'gbfs' ? (
<Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
<Typography
variant='subtitle1'
sx={{ color: 'text.secondary', mt: 0.5 }}
>
{t('coveredAreaTitle') + ' - ' + t(view)}
</Typography>
{feed?.data_type === 'gbfs' && (
<Box sx={{ textAlign: 'right' }}>
{latestAutodiscoveryUrl != undefined && (
<Button
Expand All @@ -331,47 +316,66 @@ const CoveredAreaMap: React.FC<CoveredAreaMapProps> = ({
</Typography>
)}
</Box>
) : (
<ToggleButtonGroup
value={view}
color='primary'
exclusive
aria-label='map view selection'
onChange={handleViewChange}
>
{config.enableGtfsVisualizationMap && (
<Tooltip title={t('gtfsVisualizationTooltip')}>
<ToggleButton
value='gtfsVisualizationView'
disabled={!enableGtfsVisualizationView}
aria-label={t('gtfsVisualizationViewLabel')}
)}
{feed?.data_type === 'gtfs' && (
<Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 1 }}>
{view === 'gtfsVisualizationView' &&
config.enableGtfsVisualizationMap && (
<Button
variant='text'
disableElevation
component={Link}
to='./map'
onClick={handleOpenDetailedMapClick}
endIcon={<OpenInNewIcon></OpenInNewIcon>}
>
<ModeOfTravelIcon />
</ToggleButton>
</Tooltip>
)}
{config.enableDetailedCoveredArea && (
<Tooltip title={t('detailedCoveredAreaViewTooltip')}>
{t('openDetailedMap')}
</Button>
)}
<ToggleButtonGroup
value={view}
color='primary'
exclusive
aria-label='map view selection'
onChange={handleViewChange}
size='small'
>
{config.enableGtfsVisualizationMap && (
<Tooltip title={t('gtfsVisualizationTooltip')}>
<ToggleButton
value='gtfsVisualizationView'
disabled={!enableGtfsVisualizationView}
aria-label={t('gtfsVisualizationViewLabel')}
>
<ModeOfTravelIcon />
</ToggleButton>
</Tooltip>
)}
{config.enableDetailedCoveredArea && (
<Tooltip title={t('detailedCoveredAreaViewTooltip')}>
<ToggleButton
value='detailedCoveredAreaView'
disabled={
geoJsonLoading ||
geoJsonError ||
boundingBox === undefined
}
aria-label='Detailed Covered Area View'
>
<TravelExploreIcon />
</ToggleButton>
</Tooltip>
)}
<Tooltip title={t('boundingBoxViewTooltip')}>
<ToggleButton
value='detailedCoveredAreaView'
disabled={
geoJsonLoading || geoJsonError || boundingBox === undefined
}
aria-label='Detailed Covered Area View'
value='boundingBoxView'
aria-label='Bounding Box View'
>
<TravelExploreIcon />
<MapIcon />
</ToggleButton>
</Tooltip>
)}
<Tooltip title={t('boundingBoxViewTooltip')}>
<ToggleButton
value='boundingBoxView'
aria-label='Bounding Box View'
>
<MapIcon />
</ToggleButton>
</Tooltip>
</ToggleButtonGroup>
</ToggleButtonGroup>
</Box>
)}
</Box>
{(feed?.data_type === 'gtfs' || feed?.data_type === 'gbfs') &&
Expand Down Expand Up @@ -402,7 +406,7 @@ const CoveredAreaMap: React.FC<CoveredAreaMapProps> = ({
)}
</Box>
)}
</ContentBox>
</Box>
);
};

Expand Down
65 changes: 19 additions & 46 deletions web-app/src/app/components/FeedStatus.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,58 +1,19 @@
import { Box, Chip, Tooltip, useTheme } from '@mui/material';
import { useTranslation } from 'react-i18next';
import { type TFunction } from 'i18next';
import { getFeedStatusData } from '../utils/feedStatusConsts';

export interface FeedStatusProps {
status: string;
}

interface FeedStatusData {
toolTip: string;
label: string;
themeColor: 'success' | 'info' | 'warning' | 'error';
toolTipLong: string;
}

function getFeedStatusData(
status: string,
t: TFunction,
): FeedStatusData | undefined {
const data: Record<string, FeedStatusData> = {
active: {
toolTip: t('feedStatus.active.toolTip'),
label: t('feedStatus.active.label'),
themeColor: 'success',
toolTipLong: t('feedStatus.active.toolTipLong'),
},
future: {
toolTip: t('feedStatus.future.toolTip'),
label: t('feedStatus.future.label'),
themeColor: 'info',
toolTipLong: t('feedStatus.future.toolTipLong'),
},
inactive: {
toolTip: t('feedStatus.inactive.toolTip'),
label: t('feedStatus.inactive.label'),
themeColor: 'warning',
toolTipLong: t('feedStatus.inactive.toolTipLong'),
},
deprecated: {
toolTip: t('feedStatus.deprecated.toolTip'),
label: t('feedStatus.deprecated.label'),
themeColor: 'error',
toolTipLong: t('feedStatus.deprecated.toolTipLong'),
},
};

return data[status];
chipSize?: 'small' | 'medium';
disableTooltip?: boolean;
}

export const FeedStatusIndicator = (
props: React.PropsWithChildren<FeedStatusProps>,
): JSX.Element => {
const { t } = useTranslation('feeds');
const theme = useTheme();
const statusData = getFeedStatusData(props.status, t);
const statusData = getFeedStatusData(props.status, theme, t);
return (
<>
{statusData != undefined && (
Expand All @@ -76,12 +37,24 @@ export const FeedStatusChip = (
props: React.PropsWithChildren<FeedStatusProps>,
): JSX.Element => {
const { t } = useTranslation('feeds');
const statusData = getFeedStatusData(props.status, t);
const theme = useTheme();
const statusData = getFeedStatusData(props.status, theme, t);
return (
<>
{statusData != undefined && (
<Tooltip title={statusData.toolTipLong} placement='top'>
<Chip label={statusData.label} color={statusData.themeColor}></Chip>
<Tooltip
title={
props.disableTooltip != undefined && props.disableTooltip
? ''
: statusData.toolTipLong
}
placement='top'
>
<Chip
label={statusData.label}
color={statusData.themeColor}
size={props.chipSize ?? 'medium'}
></Chip>
</Tooltip>
)}
</>
Expand Down
Loading
Loading