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

Author: Alessandro100

web-app/src/app/Theme.ts

@@ -27,6 +27,10 @@ declare module '@mui/material/styles' {
       routeTextColor?: string;
     };
   }
+
+  interface TypeText {
+    lightContrast?: string;
+  }
 }
 
 declare module '@mui/material/Typography' {
@@ -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',
@@ -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)',
@@ -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',
@@ -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)',

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

@@ -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 {
@@ -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
@@ -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') &&
@@ -402,7 +406,7 @@ const CoveredAreaMap: React.FC<CoveredAreaMapProps> = ({
           )}
         </Box>
       )}
-    </ContentBox>
+    </Box>
   );
 };
 

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

@@ -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 && (
@@ -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>
       )}
     </>