Bump veda-ui to v6.1.1 and catchup to changes

app/(datasets)/data-catalog/[slug]/page.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { notFound } from 'next/navigation';
 import { CustomMDX } from 'app/components/mdx';
 import { getDatasets } from 'app/content/utils/mdx';
-import { PageHero } from '@lib';
+import { PageHero, LegacyGlobalStyles } from '@lib';
 import Providers from 'app/(datasets)/providers';
 
 export default function DatasetOverviewPage({ params }: { params: any }) {
@@ -16,6 +16,7 @@ export default function DatasetOverviewPage({ params }: { params: any }) {
     <section>
       <article className='prose'>
         <Providers>
+          <LegacyGlobalStyles />
           <PageHero
             title={dataset.metadata.name}
             description={dataset.metadata.description}

app/(datasets)/data-catalog/catalog.tsx

@@ -1,23 +1,18 @@
 'use client';
 import React from 'react';
-import { CatalogView, useFiltersWithQS } from '@lib';
-import { useRouter } from 'next/navigation';
+import { CatalogContent, useFiltersWithQS } from '@lib';
 import Providers from '../providers';
 
 export default function Catalog({ datasets }: { datasets: any }) {
   const controlVars = useFiltersWithQS();
-  const router = useRouter();
-
-  const handleCardNavigation = (path: string) => {
-    router.push(path);
-  };
 
   return (
     <Providers>
-      <CatalogView
+      <CatalogContent
         datasets={datasets}
-        onFilterChanges={() => controlVars}
-        onCardNavigate={handleCardNavigation}
+        search={controlVars.search}
+        onAction={controlVars.onAction}
+        taxonomies={controlVars.taxonomies}
       />
     </Providers>
   );

app/(datasets)/data-catalog/page.tsx

@@ -3,21 +3,25 @@ import dynamic from 'next/dynamic';
 import { getTransformedDatasetMetadata } from 'app/content/utils/mdx';
 
 // @NOTE: Dynamically load to ensure only CSR since this depends ContextProviders for routing and etc...
-const Catalog = dynamic(
-  () => import('./catalog'),
-  { 
-    ssr: false,
-    loading: () => <p>Loading...</p> // @NOTE @TODO: We need a loading state!!!
-  },
-);
+const Catalog = dynamic(() => import('./catalog'), {
+  ssr: false,
+  loading: () => <p>Loading...</p>, // @NOTE @TODO: We need a loading state!!!
+});
 
 export default function Page() {
   const transformed = getTransformedDatasetMetadata();
 
   return (
     <div className='grid-container'>
       <section>
-      <h1 className='font-ui-lg'>Data Catalog</h1>
+        <div className='margin-top-8 margin-bottom-3'>
+          <h1 className='font-sans-xl'>Data Catalog</h1>
+          <p className='font-sans-md margin-top-1'>
+            This dashboard explores key indicators to track and compare changes
+            over time.
+          </p>
+        </div>
+
         <Catalog datasets={transformed} />
       </section>
     </div>

app/(datasets)/exploration/exploration.tsx

@@ -1,12 +1,12 @@
 'use client';
 import React, { useState } from 'react';
-import Link from 'next/link';
 import {
   ExplorationAndAnalysis,
   DatasetSelectorModal,
   useTimelineDatasetAtom,
   externalDatasetsAtom,
-} from 'app/lib';
+  LegacyGlobalStyles,
+} from '@lib';
 import { useSetAtom } from 'jotai';
 import useElementHeight from '@utils/hooks/use-element-height';
 import Providers from '../providers';
@@ -32,6 +32,7 @@ export default function ExplorationAnalysis({ datasets }: { datasets: any }) {
 
   return (
     <Providers datasets={datasets}>
+      <LegacyGlobalStyles />
       <div
         id='ea-wrapper'
         // The below styles adjust the E&A page to match what we have on earthdata.nasa.gov

app/(datasets)/stories/[slug]/page.tsx

@@ -2,14 +2,14 @@ import React from 'react';
 import { notFound } from 'next/navigation';
 import { CustomMDX } from 'app/components/mdx';
 import { getStories } from 'app/content/utils/mdx';
-import { PageHero } from '@lib';
+import { LegacyGlobalStyles, PageHero } from '@lib';
+import './index.scss';
+import Providers from 'app/(datasets)/providers';
 
 async function generateStaticParams() {
   const posts = getStories();
 
-  return posts.map((post) => ({
-    slug: post.slug,
-  }));
+  return posts.map((post) => ({ slug: post.slug }));
 }
 
 export default function StoryOverview({ params }: { params: any }) {
@@ -21,7 +21,7 @@ export default function StoryOverview({ params }: { params: any }) {
 
   return (
     <section>
-      <script 
+      <script
         type='application/ld+json'
         suppressHydrationWarning
         dangerouslySetInnerHTML={{
@@ -31,18 +31,22 @@ export default function StoryOverview({ params }: { params: any }) {
             title: post.metadata.name,
             description: post.metadata.description,
             coverSrc: post.metadata.media?.src,
-            coverAlt: post.metadata.media?.alt
+            coverAlt: post.metadata.media?.alt,
           }),
         }}
       />
       <article className='prose'>
-        <PageHero
-          title={post.metadata.name}
-          description={post.metadata.description}
-          coverSrc={post.metadata.media?.src}
-          coverAlt={post.metadata.media?.alt}
-        />
-        <CustomMDX source={post.content} />
+        <Providers>
+          <LegacyGlobalStyles />
+
+          <PageHero
+            title={post.metadata.name}
+            description={post.metadata.description}
+            coverSrc={post.metadata.media?.src}
+            coverAlt={post.metadata.media?.alt}
+          />
+          <CustomMDX source={post.content} />
+        </Providers>
       </article>
     </section>
   );

app/(datasets)/stories/page.tsx

@@ -3,13 +3,10 @@ import dynamic from 'next/dynamic';
 import { getStoriesMetadata } from 'app/content/utils/mdx';
 
 // @NOTE: Dynamically load to ensure only CSR since these depends on VedaUI ContextProvider for routing...
-const StoriesHub = dynamic(
-  () => import('./hub'),
-  { 
-    ssr: false,
-    loading: () => <p>Loading...</p> // @NOTE @TODO: We need a loading state!!!
-  },
-);
+const StoriesHub = dynamic(() => import('./hub'), {
+  ssr: false,
+  loading: () => <p>Loading...</p>, // @NOTE @TODO: We need a loading state!!!
+});
 
 export default function Page() {
   const stories = getStoriesMetadata().map((d) => ({
@@ -19,7 +16,13 @@ export default function Page() {
 
   return (
     <div className='grid-container'>
-      <h1 className='font-ui-lg'>Stories</h1>
+      <div className='margin-top-8 margin-bottom-3'>
+        <h1 className='font-sans-xl'>Stories</h1>
+        <p className='font-sans-md margin-top-1'>
+          This dashboard explores key indicators to track and compare changes
+          over time.
+        </p>
+      </div>
       <StoriesHub stories={stories} />
     </div>
   );

app/components/header.tsx

@@ -63,7 +63,6 @@ export default function Header() {
               TODO: Ideally we can address this on the veda-ui side so that the color applies to all elements within the logo.
             */}
             <NasaLogoColor />
-            <span style={{ color: '#1b1b1b' }}>Earthdata VEDA Dashboard</span>
           </div>
         }
       />

app/components/mdx.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import Link from 'next/link';
 import { MDXRemote } from 'next-mdx-remote/rsc';
 import { highlight } from 'sugar-high';
+import { LegacyGlobalStyles } from '@lib';
 
 import {
   Block,
@@ -106,6 +107,7 @@ export function CustomMDX(props: any) {
   const datasets = getDatasetsMetadata();
   return (
     <Providers datasets={datasets}>
+      <LegacyGlobalStyles />
       <MDXRemote
         {...props}
         components={{ ...components, ...(props.components || {}) }}

app/content/stories/air-quality-and-covid-19.mdx

@@ -14,7 +14,6 @@ taxonomy:
     values:
       - Covid 19
 ---
-### Covid 
 
 <ScrollytellingBlock>
   <Chapter
@@ -125,7 +124,7 @@ taxonomy:
     ## Like Flipping a Switch: Lockdowns and NO2
 
     Nitrogen dioxide is only one component of air quality: sulfur dioxide (SO2), ozone (O3), formaldehyde (CH2O), and carbon monoxide, along with a host of other atmospheric constituents, also influence the quality of the air we breathe. The difference in nitrogen dioxide is that it has a relatively short lifetime in the atmosphere; once it’s emitted, it only lasts a few hours before it disappears.
-    
+
     Therefore, once communities entered shutdowns, and people’s mobility was severely restricted, the effect on nitrogen dioxide concentrations was the equivalent of flipping a switch. That is not, however, the case with all air pollutants.
   </Chapter>
   <Chapter
@@ -158,7 +157,7 @@ taxonomy:
     ## Seeing Air Pollution from Space
 
     NASA has used the [Ozone Monitoring Instrument (OMI)](https://aura.gsfc.nasa.gov/omi.html "Explore the OMI product") aboard the Aura satellite to observe global nitrogen dioxide levels since 2004. A joint endeavor between NASA, the Royal Netherlands Meteorological Institute (KNMI) and the Finnish Meteorological Institute (FMI), OMI's longer data record provides important context with which to compare any changes observed during the pandemic.
-    
+
     NASA scientists are also leveraging other space-based instruments from international partners to study changes in nitrogen dioxide during the pandemic. These include the [TROPOspheric Monitoring Instrument (TROPOMI)](http://www.tropomi.eu/ "Explore the TROPOMI product") aboard the European Commission’s Copernicus Sentinel-5P satellite. Launched in 2016, TROPOMI provides higher resolution observations than OMI.
   </Chapter>
   <Chapter
@@ -170,10 +169,10 @@ taxonomy:
   >
     ## Reinforcing Measurements: Nighttime Lights
 
-    Changes in nighttime lights during the pandemic can also be tied to changes in nitrogen dioxide levels if the data are properly processed and interpreted. This is because nitrogen dioxide is primarily emitted from burning fossil fuels, and highways light up on nighttime satellite imagery when vehicles are present. 
-    
+    Changes in nighttime lights during the pandemic can also be tied to changes in nitrogen dioxide levels if the data are properly processed and interpreted. This is because nitrogen dioxide is primarily emitted from burning fossil fuels, and highways light up on nighttime satellite imagery when vehicles are present.
+
     Here we see the illuminated web of highways connecting the Los Angeles metropolitan region.
-  
+
     Researchers are using night light observations to track variations in energy use, migration, and transportation in response to social distancing and shutdown measures during the pandemic.
   </Chapter>
   <Chapter
@@ -203,12 +202,12 @@ taxonomy:
       dateTime='2019-04-01'
       compareDateTime='2020-04-01'
     />
-    <Caption 
-      attrAuthor='NASA' 
+    <Caption
+      attrAuthor='NASA'
       attrUrl='https://nasa.gov/'
     >
       Levels in 10¹⁵ molecules cm⁻². Darker colors indicate higher nitrogen dioxide (NO₂) levels associated and more activity. Lighter colors indicate lower levels of NO₂ and less activity.
-    </Caption> 
+    </Caption>
   </Figure>
 </Block>
 
@@ -222,12 +221,12 @@ taxonomy:
       dateTime='2019-06-01'
       compareDateTime='2020-06-01'
     />
-    <Caption 
-      attrAuthor='NASA' 
+    <Caption
+      attrAuthor='NASA'
       attrUrl='https://nasa.gov/'
     >
       Levels in 10¹⁵ molecules cm⁻². Darker colors indicate higher nitrogen dioxide (NO₂) levels associated and more activity. Lighter colors indicate lower levels of NO₂ and less activity.
-    </Caption> 
+    </Caption>
   </Figure>
   <Prose>
     They are comparing the on-the-ground sensor information from NASA's [Pandora Project](https://pandora.gsfc.nasa.gov/ "Explore the Pandora Project") with satellite information from TROPOMI. So far, they have found that nitrogen dioxide hotspots in Atlanta shifted from the airport, shown here, to the city center from April-June 2020.
@@ -247,12 +246,12 @@ taxonomy:
       dateTime='2019-09-01'
       compareDateTime='2020-09-01'
     />
-    <Caption 
-      attrAuthor='NASA' 
+    <Caption
+      attrAuthor='NASA'
       attrUrl='https://nasa.gov/'
     >
       Levels in 10¹⁵ molecules cm⁻². Darker colors indicate higher nitrogen dioxide (NO₂) levels associated and more activity. Lighter colors indicate lower levels of NO₂ and less activity.
-    </Caption> 
+    </Caption>
   </Figure>
 </Block>
 
@@ -266,22 +265,22 @@ taxonomy:
       dateTime='2020-02-01'
       compareDateTime='2022-02-01'
     />
-    <Caption 
-      attrAuthor='NASA' 
+    <Caption
+      attrAuthor='NASA'
       attrUrl='https://nasa.gov/'
     >
       Levels in 10¹⁵ molecules cm⁻². Darker colors indicate higher nitrogen dioxide (NO₂) levels associated and more activity. Lighter colors indicate lower levels of NO₂ and less activity.
-    </Caption> 
+    </Caption>
   </Figure>
   <Prose>
     ## Seeing Rebounds in NO2
-  
+
     After the initial shock of COVID-related shutdowns in the spring, communities worldwide began to reopen and gradually increase mobility. Cars returned to the road, and travel restrictions slowly eased. These resumptions corresponded with relative increases in nitrogen dioxide levels and other air pollutants, as air quality levels began to return to pre-pandemic levels.
-    
+
     This demonstrates how quickly atmospheric nitrogen dioxide responds to reductions in emissions. They will persist as long as emissions persist and decline rapidly if emissions are reduced.
-    
+
     NASA scientists will continue to monitor nitrogen dioxide levels and long-term trends around the world. NASA is expected to launch its [Tropospheric Emissions: Monitoring of Pollution (TEMPO)](http://tempo.si.edu/overview.html "Explore the TEMPO instrument") instrument in 2022, which will provide hourly, high-resolution measurements of nitrogen dioxide, ozone, and other air pollutants across North America, improving future air quality forecasts.
-    
+
     <Link href='/stories/climate-and-covid'>Explore How COVID-19 Is Affecting Earth's Climate</Link>
   </Prose>
 </Block>

app/lib/index.ts

@@ -3,7 +3,7 @@
 'use client';
 
 import {
-  CatalogView,
+  CatalogContent,
   PageHero,
   useFiltersWithQS,
   ReactQueryProvider,
@@ -33,6 +33,7 @@ import {
   DatasetData,
   StoryData,
   VedaData,
+  LegacyGlobalStyles,
 } from '@teamimpact/veda-ui';
 
 /**
@@ -48,7 +49,7 @@ export {
   VedaUIProvider,
 
   // Components
-  CatalogView,
+  CatalogContent,
   PageHero,
   PageHeader,
   PageFooter,
@@ -75,6 +76,7 @@ export {
   timelineDatasetsAtom,
   useTimelineDatasetAtom,
   externalDatasetsAtom,
+  LegacyGlobalStyles,
 };
 
 export type {

app/store/providers/theme.tsx

@@ -35,6 +35,7 @@ const VEDA_OVERRIDE_THEME = {
     base: {
       leadSize: '1.25rem',
       extrabold: '800',
+      line: 'inherit',
       // Increments to the type.base.size for each media breakpoint.
       sizeIncrement: {
         small: '0rem',