feat: New search page design (#1131)

* added boxshadow to theme

* feed locations sorted by most stops

* addition of advanced search table

* accessibility addition

* more feature data function

* feature api integration

* cleanup

* advanced search country name hover

* filter defaults

* select defaults fix

* filter title + padding

* lint

* revert padding + filter title

Author: Alessandro100

web-app/public/locales/en/common.json

@@ -10,6 +10,9 @@
     "feeds": "Feeds",
     "gtfsSchedule": "GTFS Schedule",
     "gtfsRealtime": "GTFS Realtime",
+    "gtfs": "GTFS Schedule",
+    "gtfs_rt": "GTFS Realtime",
+    "gbfs": "GBFS",
     "gtfsRealtimeEntities": {
         "tripUpdates": "Trip Updates",
         "vehiclePositions": "Vehicle Positions",

web-app/public/locales/en/feeds.json

@@ -51,6 +51,7 @@
   "linkToLicense": "Link to feed license",
   "authenticationType": "Authentication type",
   "selectAuthenticationType": "Please select an authentication type",
+  "authenticationRequired": "This feed requires authentication",
   "registerToDownloadFeed": "Register to download feed",
   "feedContactEmail": "Feed contact email",
   "copyFeedContactEmail": "Copy feed contact email",

web-app/src/app/Theme.ts

@@ -5,6 +5,15 @@ import {
 } from '@mui/material/styles';
 import { type Property } from 'csstype';
 
+declare module '@mui/material/styles' {
+  interface Palette {
+    boxShadow: string;
+  }
+  interface PaletteOptions {
+    boxShadow?: string;
+  }
+}
+
 declare module '@mui/material/Typography' {
   interface TypographyPropsVariantOverrides {
     sectionTitle: true;
@@ -53,6 +62,7 @@ const palette = {
     disabled: 'rgba(0,0,0,0.3)',
   },
   divider: 'rgba(0, 0, 0, 0.23)',
+  boxShadow: '0px 1px 4px 2px rgba(0,0,0,0.2)',
 };
 
 const darkPalette = {
@@ -78,6 +88,7 @@ const darkPalette = {
     disabled: 'rgba(255, 255, 255, 0.3)',
   },
   divider: 'rgba(255, 255, 255, 0.23)',
+  boxShadow: '0px 1px 4px 2px rgba(0,0,0,0.6)',
 };
 
 export const getTheme = (mode: ThemeModeEnum): Theme => {

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

@@ -63,6 +63,7 @@ export const FeedStatusIndicator = (
               width: '12px',
               height: '12px',
               borderRadius: '50%',
+              minWidth: '12px',
             }}
           ></Box>
         </Tooltip>

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

@@ -3,17 +3,38 @@ import { useTranslation } from 'react-i18next';
 import { verificationBadgeStyle } from '../styles/VerificationBadge.styles';
 import VerifiedIcon from '@mui/icons-material/Verified';
 
-export default function OfficialChip(): React.ReactElement {
+interface OfficialChipProps {
+  isLongDisplay?: boolean;
+}
+
+export default function OfficialChip({
+  isLongDisplay = true,
+}: OfficialChipProps): React.ReactElement {
   const { t } = useTranslation('feeds');
   return (
     <>
-      <Tooltip title={t('officialFeedTooltip')} placement='top'>
-        <Chip
-          sx={verificationBadgeStyle}
-          icon={<VerifiedIcon sx={{ fill: 'white' }}></VerifiedIcon>}
-          label={t('officialFeed')}
-        ></Chip>
-      </Tooltip>
+      {isLongDisplay ? (
+        <Tooltip title={t('officialFeedTooltip')} placement='top'>
+          <Chip
+            sx={verificationBadgeStyle}
+            icon={<VerifiedIcon sx={{ fill: 'white' }}></VerifiedIcon>}
+            label={t('officialFeed')}
+          ></Chip>
+        </Tooltip>
+      ) : (
+        <Tooltip title={t('officialFeedTooltipShort')} placement='top'>
+          <VerifiedIcon
+            sx={(theme) => ({
+              display: 'block',
+              borderRadius: '50%',
+              padding: '0.1rem',
+              ml: 0,
+              mr: 2,
+              ...verificationBadgeStyle(theme),
+            })}
+          ></VerifiedIcon>
+        </Tooltip>
+      )}
     </>
   );
 }

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

@@ -7,7 +7,7 @@ const ThemeToggle = (): JSX.Element => {
   const { toggleTheme } = useTheme();
 
   return (
-    <IconButton onClick={toggleTheme} color='inherit'>
+    <IconButton onClick={toggleTheme} color='inherit' aria-label='Theme Toggle'>
       {localStorage.getItem('theme') === 'dark' ? (
         <Brightness7Icon />
       ) : (

web-app/src/app/screens/Feed/FeedSummary.tsx

@@ -21,7 +21,7 @@ import {
 import { type components } from '../../services/feeds/types';
 import { useTranslation } from 'react-i18next';
 import OpenInNewIcon from '@mui/icons-material/OpenInNew';
-import { getDataFeatureUrl } from '../../utils/consts';
+import { getFeatureComponentDecorators } from '../../utils/consts';
 import PublicIcon from '@mui/icons-material/Public';
 import DirectionsBusIcon from '@mui/icons-material/DirectionsBus';
 import LinkIcon from '@mui/icons-material/Link';
@@ -370,7 +370,10 @@ export default function FeedSummary({
                     },
                   }}
                   onClick={() => {
-                    window.open(getDataFeatureUrl(feature), '_blank');
+                    window.open(
+                      getFeatureComponentDecorators(feature)?.linkToInfo,
+                      '_blank',
+                    );
                   }}
                 />
               </Grid>