Remove Old Commons-ui section

apps/climatemappedafrica/package.json

@@ -35,7 +35,6 @@
   "dependencies": {
     "@apollo/client": "catalog:",
     "@commons-ui/core": "workspace:*",
-    "@commons-ui/legacy": "catalog:",
     "@commons-ui/next": "workspace:*",
     "@commons-ui/payload": "workspace:*",
     "@emotion/react": "catalog:",

apps/climatemappedafrica/src/components/AboutTeam/AboutTeam.snap.js

@@ -6,7 +6,7 @@ exports[`<AboutTeam /> renders unchanged 1`] = `
     class="MuiBox-root css-1termwk"
   >
     <div
-      class="makeStyles-root-5 makeStyles-root-3 makeStyles-root-1 makeStyles-fixed-2 MuiBox-root css-0"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1vn3dh6-MuiContainer-root"
     >
       <h4
         class="MuiTypography-root MuiTypography-h4 css-1cvoujm-MuiTypography-root"

apps/climatemappedafrica/src/components/DataIndicators/IndicatorPanel.js

@@ -1,4 +1,4 @@
-import { RichTypography } from "@commons-ui/legacy";
+import { RichTypography } from "@commons-ui/next";
 import { RichText } from "@commons-ui/payload";
 import { ButtonBase, Slide } from "@mui/material";
 import PropTypes from "prop-types";

apps/climatemappedafrica/src/components/DataVisualisationGuide/index.js

@@ -1,4 +1,4 @@
-import { RichTypography } from "@commons-ui/legacy";
+import { RichTypography } from "@commons-ui/next";
 import { useMediaQuery, Box, Grid } from "@mui/material";
 import PropTypes from "prop-types";
 import React from "react";

apps/climatemappedafrica/src/components/Footer/index.js

@@ -1,11 +1,9 @@
-import { QuickLinks, Copyright } from "@commons-ui/legacy";
+import { Copyright, QuickLinks } from "@commons-ui/core";
 import { Link, StayInTouch } from "@commons-ui/next";
 import { RichText } from "@commons-ui/payload";
-import { Box, Grid } from "@mui/material";
+import { Box, Grid, useTheme } from "@mui/material";
 import React from "react";
 
-import useStyles from "./useStyles";
-
 import NextImageButton from "@/climatemappedafrica/components/NextImageButton";
 import Section from "@/climatemappedafrica/components/Section";
 
@@ -18,21 +16,25 @@ function Footer(props) {
     links,
     variant,
   } = props;
-  const classes = useStyles(props);
+  const theme = useTheme();
 
   return (
     <Box
-      sx={(theme) => ({
+      sx={({ palette, typography }) => ({
         display: {
           xs: "block",
           lg: variant !== "explore" ? "block" : "none",
         },
-        background: theme.palette.grey.dark,
+        background: palette.grey.dark,
         height: "auto",
-        padding: `${theme.typography.pxToRem(80)} 0`,
-        [theme.breakpoints.up("md")]: {
-          paddingTop: `${theme.typography.pxToRem(58)}`,
-          paddingBottom: `${theme.typography.pxToRem(82)}`,
+        padding: `${typography.pxToRem(80)} 0`,
+        paddingTop: {
+          xs: "unset",
+          md: `${typography.pxToRem(58)}`,
+        },
+        paddingBottom: {
+          xs: "unset",
+          md: `${typography.pxToRem(82)}`,
         },
       })}
     >
@@ -47,27 +49,27 @@ function Footer(props) {
                   width: 220,
                 }}
                 priority
-                sx={(theme) => ({
-                  margin: "0 auto",
-                  padding: 0,
-                  [theme.breakpoints.up("lg")]: {
-                    margin: 0,
+                sx={{
+                  margin: {
+                    xs: "0 auto",
+                    lg: 0,
                   },
-                })}
+                  padding: 0,
+                }}
               />
             )}
           </Grid>
           <Grid item xs={12} lg={6}>
             {description && (
               <RichText
                 variant="body1"
-                sx={(theme) => ({
-                  color: theme.palette.text.secondary,
-                  padding: `${theme.typography.pxToRem(32)} 0`,
-                  fontSize: theme.typography.subtitle1.fontSize,
-                  textAlign: "center",
-                  [theme.breakpoints.up("lg")]: {
-                    textAlign: "left",
+                sx={({ palette, typography }) => ({
+                  color: palette.text.secondary,
+                  padding: `${typography.pxToRem(32)} 0`,
+                  fontSize: typography.subtitle1.fontSize,
+                  textAlign: {
+                    xs: "center",
+                    lg: "left",
                   },
                   "& > p": {
                     mt: 2,
@@ -90,32 +92,86 @@ function Footer(props) {
             )}
             <Copyright
               copyright={`© ${new Date().getFullYear()} ${title}`}
-              classes={{
-                root: classes.copyright,
-                text: classes.copyrightText,
+              CopyrightProps={{
+                sx: {
+                  color: theme.palette.text.secondary,
+                  order: 5,
+                  padding: {
+                    xs: `0 ${theme.typography.pxToRem(5)} 0 0`,
+                    lg: `0 ${theme.typography.pxToRem(10)} 0 0`,
+                  },
+                },
               }}
+              sx={({ typography }) => ({
+                margin: 0,
+                display: "flex",
+                flexWrap: "wrap",
+                flexDirection: "row",
+                justifyContent: {
+                  xs: "center",
+                  lg: "flex-start",
+                },
+                "& > a": {
+                  marginTop: typography.pxToRem(3),
+                },
+              })}
             />
           </Grid>
           <Grid item xs={12} lg={4}>
             <Grid
               container
-              sx={(theme) => ({
+              sx={({ typography }) => ({
                 margin: "0 auto",
                 flexDirection: "row",
                 justifyContent: "center",
-                marginTop: theme.typography.pxToRem(44.19),
+                marginTop: typography.pxToRem(44.19),
               })}
             >
               <Grid item xs={12} lg={6}>
                 {links && (
                   <QuickLinks
                     linkComponent={Link}
                     {...links}
-                    classes={{
-                      root: classes.quickLinkRoot,
-                      list: classes.quickList,
-                      link: classes.quickLink,
-                      title: classes.quickLinksTitle,
+                    sx={{
+                      textAlign: {
+                        xs: "center",
+                        lg: "inherit",
+                      },
+                      padding: {
+                        xs: `${theme.typography.pxToRem(32)} 0 `,
+                        lg: 0,
+                      },
+                    }}
+                    TitleProps={{
+                      variant: "caption",
+                      sx: {
+                        color: theme.palette.text.secondary,
+                        fontSize: theme.typography.subtitle2.fontSize,
+                        fontWeight: "bold",
+                      },
+                    }}
+                    LinksProps={{
+                      variant: "caption",
+                      sx: {
+                        listStyle: "none",
+                        color: theme.palette.text.secondary,
+                        padding: 0,
+                        letterspacing: theme.typography.pxToRem(0.7),
+                        "& > li": {
+                          marginTop: theme.typography.pxToRem(16),
+                        },
+                      },
+                    }}
+                    LinkProps={{
+                      variant: "caption",
+                      sx: {
+                        fontSize: theme.typography.subtitle1.fontSize,
+                        color: theme.palette.text.secondary,
+                        fontWeight: "normal",
+                        "&:hover": {
+                          color: theme.palette.primary.light,
+                        },
+                      },
                     }}
                   />
                 )}

apps/climatemappedafrica/src/components/HURUmap/Chart/index.js

@@ -1,4 +1,4 @@
-import { RichTypography } from "@commons-ui/legacy";
+import { RichTypography } from "@commons-ui/next";
 import { ChartTooltip, IndicatorTitle, Download, Share } from "@hurumap/core";
 import { Source } from "@hurumap/next";
 import { Box, useMediaQuery, useTheme } from "@mui/material";
@@ -93,7 +93,7 @@
 
           setView(newView.view);
         } catch (error) {
           console.error("Error rendering chart", error);
         }
       }
     }
@@ -112,7 +112,7 @@
       const viewProp = new vega.View(vega.parse(cSpec), { renderer: "none" });
       setDownloadView(viewProp);
     } catch (error) {
       console.error("Error creating view", error);
     }
   }, [cSpec]);
 

apps/climatemappedafrica/src/components/HURUmap/Tutorial/index.stories.js

@@ -1,4 +1,4 @@
-import { RichTypography } from "@commons-ui/legacy";
+import { RichTypography } from "@commons-ui/next";
 import React from "react";
 
 import Tutorial from "@/climatemappedafrica/components/HURUmap/Tutorial";

apps/climatemappedafrica/src/components/Header/Header.js

@@ -1,4 +1,4 @@
-import { RichTypography } from "@commons-ui/legacy";
+import { RichTypography } from "@commons-ui/next";
 import { Box } from "@mui/material";
 import PropTypes from "prop-types";
 import React from "react";

apps/climatemappedafrica/src/components/Header/Header.snap.js

@@ -7,12 +7,12 @@ exports[`<Header /> renders unchanged 1`] = `
     title="Title with <span class="highlight">Highlight</span>"
   >
     <div
-      class="MuiTypography-root makeStyles-root-1 MuiTypography-overline css-1wyl8ke-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-overline css-189owcq-MuiTypography-root"
     >
       Overline
     </div>
     <div
-      class="MuiTypography-root makeStyles-root-1 MuiTypography-subtitle1 css-1gs80bf-MuiTypography-root"
+      class="MuiTypography-root MuiTypography-subtitle1 css-554hv2-MuiTypography-root"
     >
       A short paragraph to describe what the header is all about.
     </div>

apps/climatemappedafrica/src/components/Hero/Hero.js

@@ -1,4 +1,4 @@
-import { RichTypography } from "@commons-ui/legacy";
+import { RichTypography } from "@commons-ui/next";
 import { Box, Grid, useMediaQuery } from "@mui/material";
 import dynamic from "next/dynamic";
 import PropTypes from "prop-types";

apps/climatemappedafrica/src/components/Hero/Hero.snap.js

@@ -17,7 +17,7 @@ exports[`<Hero /> renders unchanged 1`] = `
       />
     </div>
     <div
-      class="makeStyles-root-5 makeStyles-root-3 makeStyles-root-1 makeStyles-fixed-2 MuiBox-root css-1gf8bce"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-q6gmsn-MuiContainer-root"
     >
       <div
         class="MuiGrid-root MuiGrid-container css-ljvmaf-MuiGrid-root"

apps/climatemappedafrica/src/components/Hero/Legend.js

@@ -1,4 +1,4 @@
-import { RichTypography } from "@commons-ui/legacy";
+import { RichTypography } from "@commons-ui/next";
 import { Box } from "@mui/material";
 import PropTypes from "prop-types";
 import React, { useState, forwardRef } from "react";

apps/climatemappedafrica/src/components/Hero/Map.js

@@ -1,4 +1,4 @@
-import { RichTypography } from "@commons-ui/legacy";
+import { RichTypography } from "@commons-ui/next";
 import { Box, useTheme } from "@mui/material";
 import { useRouter } from "next/router";
 import PropTypes from "prop-types";