Feat: UI corrections (#723)

MobilityData · Sep 5, 2024 · ce1b726 · ce1b726
1 parent c92a714
commit ce1b726
Show file tree

Hide file tree

Showing 4 changed files with 138 additions and 40 deletions.
diff --git a/web-app/src/app/components/Header.tsx b/web-app/src/app/components/Header.tsx
@@ -263,6 +263,7 @@ export default function DrawerAppBar(): React.ReactElement {
               style={{
                 textDecoration: 'none',
                 display: 'flex',
+                alignItems: 'center',
               }}
               className='btn-link'
             >
@@ -272,7 +273,6 @@ export default function DrawerAppBar(): React.ReactElement {
                 component='div'
                 className='website-title'
                 sx={{
-                  flexGrow: 1,
                   display: { xs: 'none', md: 'block' },
                 }}
               >
@@ -284,11 +284,11 @@ export default function DrawerAppBar(): React.ReactElement {
           <Box sx={{ display: { xs: 'none', md: 'block' } }}>
             {navigationItems.map((item) => (
               <Button
+                href={item.target}
                 key={item.title}
-                sx={{ color: item.color, minWidth: 'fit-content' }}
-                onClick={() => {
-                  handleNavigation(item);
-                }}
+                sx={{ color: item.color, minWidth: 'fit-content', mx: 1 }}
+                target={item.external === true ? '_blank' : '_self'}
+                rel={item.external === true ? 'noopener noreferrer' : ''}
                 variant={'text'}
                 endIcon={item.external === true ? <OpenInNew /> : null}
               >

diff --git a/web-app/src/app/screens/FAQ.tsx b/web-app/src/app/screens/FAQ.tsx
@@ -33,18 +33,17 @@ export default function FAQ(): React.ReactElement {
           }}
         >
           <Typography className='question'>
-            Why would I use the Mobility Database?
+            Why use the Mobility Database?
           </Typography>
           <Typography className='answer'>
-            The Mobility Database has over 100 feeds that were inaccurate on
-            TransitFeeds, and over 250 new feeds. It&apos;s a more accurate and
-            comprehensive resource for ensuring your data is discoverable and
-            for scraping the data you need. The community regularly adds and
-            updates feeds using Github. The Mobility Database integrates with{' '}
+            The Mobility Database is a catalog that makes it easy to find over
+            2,000 GTFS and GTFS Realtime feeds, including more accurate and
+            newer feeds not found on TransitFeeds. The Mobility Database
+            integrates with{' '}
             <a href={WEB_VALIDATOR_LINK} target='_blank' rel='noreferrer'>
               the Canonical GTFS Schedule Validator
             </a>{' '}
-            to display data quality information about each feed.
+            to provide data quality insights.
           </Typography>
           <Typography className='question'>
             How do I use the Mobility Database?
@@ -55,8 +54,12 @@ export default function FAQ(): React.ReactElement {
             <br />
             1. The feed search on the website, where you can discover feeds and
             see details on their bounding box, data quality, and historical
-            data. 2. The API, where you can pull feed information to display in
-            your own application or for research analysis 3. The{' '}
+            data.
+            <br />
+            2. The API, where you can pull feed information to display in your
+            own application or for research analysis
+            <br />
+            3. The{' '}
             <a href='https://bit.ly/catalogs-csv'>
               spreadsheet export available here
             </a>
@@ -115,14 +118,12 @@ export default function FAQ(): React.ReactElement {
             If you need to access historical data from previous years from the
             TransitFeeds API, you are still able to. Your systems will be
             unaffected until the to-be-determined deprecation date, when the
-            TransitFeeds API will no longer be available. MobilityData will
-            migrate the historical data from TransitFeeds to the Mobility
-            Database before deprecating the old API.
+            TransitFeeds API will no longer be available.
           </Typography>
           <Typography className='question'>What’s coming next?</Typography>
           <Typography className='answer'>
-            The MobilityData team is working to add historical data before 2024
-            and route and stop visualizations to the Mobility Database.
+            The MobilityData team is working to add historical data and route
+            and stop visualizations to the Mobility Database.
             <br /> <br />
             <a
               href='https://mobilitydata.org/roadmaps/'

diff --git a/web-app/src/app/screens/Home.tsx b/web-app/src/app/screens/Home.tsx
@@ -15,6 +15,7 @@ import { useNavigate } from 'react-router-dom';
 import LegacyHome from './LegacyHome';
 import { useRemoteConfig } from '../context/RemoteConfigProvider';
 import { WEB_VALIDATOR_LINK } from '../constants/Navigation';
+import '../styles/TextShimmer.css';
 
 interface ActionBoxProps {
   IconComponent: React.ElementType;
@@ -76,19 +77,18 @@ function Component(): React.ReactElement {
         <Typography
           sx={{
             fontSize: {
-              xs: '48px',
-              sm: '60px',
-              md: '72px',
+              xs: '36px',
+              sm: '48px',
             },
             fontStyle: 'normal',
             fontWeight: 700,
             lineHeight: 'normal',
             textAlign: 'center',
           }}
-          color='primary'
           data-testid='home-title'
+          className='shimmer'
         >
-          The Mobility Database
+          Explore and Access Global Transit Data
         </Typography>
         <Typography
           component='h1'
@@ -98,16 +98,16 @@ function Component(): React.ReactElement {
             color: 'black',
             fontWeight: 700,
             mt: 4,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            gap: 1,
           }}
         >
           Currently serving over
-          <Box sx={{ fontSize: 30, color: '#3859FA' }}>2000</Box>
-          transit data feeds from{' '}
-          <Box sx={{ fontSize: 30, color: '#3859FA' }}>70</Box>
+          <Box component='span' sx={{ fontSize: 30, color: '#3859FA', mx: 1 }}>
+            2000
+          </Box>
+          transit data feeds from
+          <Box component='span' sx={{ fontSize: 30, color: '#3859FA', mx: 1 }}>
+            70
+          </Box>
           countries.
         </Typography>
         <Box
@@ -184,7 +184,8 @@ function Component(): React.ReactElement {
         <Box
           sx={{
             display: 'flex',
-            justifyContent: 'space-around',
+            justifyContent: 'center',
+            flexDirection: { xs: 'column', sm: 'row' },
           }}
         >
           <ActionBox
@@ -218,17 +219,19 @@ function Component(): React.ReactElement {
             mt: 5,
           }}
         >
-          The Mobility Database is a directory of 2000+ mobility feeds across
-          the world. It has over 250 updated feeds previously unavailable on
-          TransitFeeds (OpenMobilityData) and shares data quality reports from{' '}
+          The Mobility Database is an international catalog of public transit
+          data for transit agencies, rider-facing apps, technology vendors,
+          researchers, and others to use. It features over 2,000 GTFS and GTFS
+          Realtime feeds, including 500+ feeds unavailable on the old
+          TransitFeeds website.
+          <br />
+          <br />
+          It offers data quality reports from{' '}
           <a href={WEB_VALIDATOR_LINK} rel='noreferrer' target='_blank'>
             the Canonical GTFS Schedule Validator
           </a>
-          .
-          <br />
-          <br />
-          We’re in the first phase of building a sustainable, central hub for
-          mobility data internationally.
+          aiming to improve data transparency and quality. The platform aspires
+          to become a sustainable, central hub for global mobility data.
         </Box>
       </Box>
     </Container>

diff --git a/web-app/src/app/styles/TextShimmer.css b/web-app/src/app/styles/TextShimmer.css
@@ -0,0 +1,94 @@
+.shimmer {
+  text-align: center;
+  color: rgba(255, 255, 255, 0.1);
+  background: -webkit-gradient(
+    linear,
+    left top,
+    right top,
+    from(rgba(56, 89, 250, 0.6)),
+    to(rgba(56, 89, 250, 0.6)),
+    color-stop(0.5, rgba(56, 89, 250, 1))
+  );
+  background: -moz-gradient(
+    linear,
+    left top,
+    right top,
+    from(rgba(56, 89, 250, 0.6)),
+    to(rgba(56, 89, 250, 0.6)),
+    color-stop(0.5, rgba(56, 89, 250, 1))
+  );
+  background: gradient(
+    linear,
+    left top,
+    right top,
+    from(rgba(56, 89, 250, 0.6)),
+    to(rgba(56, 89, 250, 0.6)),
+    color-stop(0.5, rgba(56, 89, 250, 1))
+  );
+  -webkit-background-size: 125px 100%;
+  -moz-background-size: 125px 100%;
+  background-size: 125px 100%;
+  -webkit-background-clip: text;
+  -moz-background-clip: text;
+  background-clip: text;
+  -webkit-animation-name: shimmer;
+  -moz-animation-name: shimmer;
+  animation-name: shimmer;
+  -webkit-animation-duration: 8s;
+  -moz-animation-duration: 8s;
+  animation-duration: 8s;
+  -webkit-animation-iteration-count: infinite;
+  -moz-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
+  background-repeat: no-repeat;
+  background-position: 0 0;
+  background-color: rgba(56, 89, 250, 0.5);
+}
+
+@-moz-keyframes shimmer {
+  0% {
+    background-position: top left;
+  }
+  25% {
+    background-position: calc(104% + 115px) 0%;
+  }
+  100% {
+    background-position: calc(104% + 115px) 0%;
+  }
+}
+
+@-webkit-keyframes shimmer {
+  0% {
+    background-position: top left;
+  }
+  25% {
+    background-position: calc(104% + 115px) 0%;
+  }
+  100% {
+    background-position: calc(104% + 115px) 0%;
+  }
+}
+
+@-o-keyframes shimmer {
+  0% {
+    background-position: top left;
+  }
+  25% {
+    background-position: calc(104% + 115px) 0%;
+  }
+  100% {
+    background-position: calc(104% + 115px) 0%;
+  }
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: top left;
+  }
+  25% {
+    background-position: calc(104% + 115px) 0%;
+  }
+  100% {
+    background-position: calc(104% + 115px) 0%;
+  }
+}