Ensure Dialog closes & use updated Twitter/X icon

CodeForAfrica · Dec 4, 2023 · 9505486 · 9505486
1 parent 12dfc4e
commit 9505486
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 40 deletions.
diff --git a/apps/codeforafrica/src/components/ArticlePage/ArticlePage.js b/apps/codeforafrica/src/components/ArticlePage/ArticlePage.js
@@ -48,6 +48,7 @@ function ArticlePage({
             md: "912px",
           },
           px: { xs: 2.5, sm: 0 },
+          pt: { xs: 2.5, md: 7.5 },
         }}
       />
       <CMSContent

diff --git a/apps/codeforafrica/src/components/ArticlePage/ArticlePage.snap.js b/apps/codeforafrica/src/components/ArticlePage/ArticlePage.snap.js
@@ -21,7 +21,7 @@ exports[`<ArticlePage /> renders unchanged 1`] = `
       />
     </figure>
     <header
-      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-12qr4r4-MuiContainer-root"
+      class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-cnnhfl-MuiContainer-root"
     >
       <div
         class="MuiTypography-root MuiTypography-body2 css-1jq7s7e-MuiTypography-root"

diff --git a/apps/codeforafrica/src/components/MobileNavBar/MobileNavBar.js b/apps/codeforafrica/src/components/MobileNavBar/MobileNavBar.js
@@ -1,9 +1,16 @@
-import { Dialog, DialogContent, Grid, Slide } from "@mui/material";
+import {
+  Dialog,
+  DialogContent,
+  Grid,
+  IconButton,
+  Slide,
+  SvgIcon,
+} from "@mui/material";
 import { styled } from "@mui/material/styles";
 import PropTypes from "prop-types";
 import React from "react";
 
-import closebutton from "@/codeforafrica/assets/close-button.svg?url";
+import CloseIcon from "@/codeforafrica/assets/icons/Type=x, Size=24, Color=CurrentColor.svg";
 import menuIcon from "@/codeforafrica/assets/menu-icon.svg?url";
 import NavBarNavList from "@/codeforafrica/components/NavBarNavList";
 import NextImageButton from "@/codeforafrica/components/NextImageButton";
@@ -16,7 +23,7 @@ const DialogContainer = styled(Dialog)(({ theme: { palette, spacing } }) => ({
     background: "transparent",
   },
   "& .MuiDialogContent-root": {
-    padding: spacing(2),
+    padding: spacing(5),
     color: palette.text.secondary,
     background: palette.primary.main,
   },
@@ -74,26 +81,28 @@ const MobileNavBar = React.forwardRef(function MobileNavBar(props, ref) {
             id="mobile-navbar-dialog"
             sx={{
               m: 0,
-              p: 2,
+              p: 0,
               display: "flex",
               color: "inherit",
               justifyContent: "space-between",
               alignItems: "flex-start",
             }}
             onClose={handleClose}
           >
-            <NavBarNavList menus={menus} socialLinks={socialLinks} />
-            <NextImageButton
-              src={closebutton}
-              alt="Logo"
-              width={32}
-              height={32}
-              sx={{
-                display: "flex",
-                marginTop: "1rem",
-              }}
-              onClick={handleClose}
+            <NavBarNavList
+              menus={menus}
+              socialLinks={socialLinks}
+              NavListItemProps={{ onClick: handleClose }}
             />
+            <IconButton color="inherit" onClick={handleClose} sx={{ p: 0 }}>
+              <SvgIcon
+                component={CloseIcon}
+                sx={{
+                  fill: { xs: "none" },
+                  fontSize: 32,
+                }}
+              />
+            </IconButton>
           </DialogContent>
         </DialogContainer>
       </Grid>

diff --git a/apps/codeforafrica/src/components/NavBarNavList/NavBarNavList.js b/apps/codeforafrica/src/components/NavBarNavList/NavBarNavList.js
@@ -22,26 +22,35 @@ const platformToIconMap = {
 };
 
 const NavBarNavList = React.forwardRef(function NavBarNavList(props, ref) {
-  const { direction, menus, socialLinks, ...other } = props;
+  const { NavListItemProps, direction, menus, socialLinks, ...other } = props;
 
   if (!menus?.length) {
     return null;
   }
   return (
     <NavList direction={direction} {...other} ref={ref}>
       {menus.map((item) => (
-        <NavListItem key={item.label} sx={{ m: "20px" }}>
+        <NavListItem
+          key={item.label}
+          sx={{
+            mb: { xs: 2.5, md: 0 },
+            mr: { xs: 0, md: 2.5 },
+          }}
+        >
           <Link
-            href={item.href}
             color="inherit"
             underline="none"
-            variant="h4"
+            // in mobile h3 = h4 in desktop
+            variant="h3"
+            {...NavListItemProps}
+            href={item.href}
             sx={{
               typography: { md: "body3" },
               "&:hover, &:active, &:focus, &:focus-within": {
                 textDecoration: "none",
                 color: { xs: "inherit", md: "primary.main" },
               },
+              ...NavListItemProps?.sx,
             }}
           >
             {item.label}
@@ -54,13 +63,21 @@ const NavBarNavList = React.forwardRef(function NavBarNavList(props, ref) {
           return null;
         }
         return (
-          <NavListItem key={platform} sx={{ m: "20px", mr: 0 }}>
-            <Link href={url} sx={{ color: { xs: "inherit" } }}>
+          <NavListItem key={platform}>
+            <Link
+              href={url}
+              variant="h3"
+              sx={{
+                color: { xs: "inherit" },
+                typography: { md: "h5" },
+              }}
+            >
               <SvgIcon
                 component={Icon}
+                fontSize="inherit"
                 sx={{
-                  mt: direction === "column" ? 0 : 1,
                   fill: { xs: "none" },
+                  mt: direction === "column" ? 0 : 1,
                 }}
               />
             </Link>
@@ -72,6 +89,7 @@ const NavBarNavList = React.forwardRef(function NavBarNavList(props, ref) {
 });
 
 NavBarNavList.propTypes = {
+  NavListItemProps: PropTypes.shape({}),
   direction: PropTypes.string,
   menus: PropTypes.arrayOf(
     PropTypes.shape({
@@ -82,6 +100,7 @@ NavBarNavList.propTypes = {
 };
 
 NavBarNavList.defaultProps = {
+  NavListItemProps: undefined,
   direction: undefined,
   menus: undefined,
 };

diff --git a/apps/codeforafrica/src/components/NavBarNavList/NavBarNavList.snap.js b/apps/codeforafrica/src/components/NavBarNavList/NavBarNavList.snap.js
@@ -6,84 +6,84 @@ exports[`<NavBarNavList /> renders unchanged 1`] = `
     class="css-f15emd"
   >
     <li
-      class="css-1n7p56k"
+      class="css-lvozse"
     >
       <a
-        class="MuiTypography-root MuiTypography-h4 MuiLink-root MuiLink-underlineNone css-eeqtvc-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-1gzg4jk-MuiTypography-root-MuiLink-root"
         href="/our-work"
       >
         Our Work
       </a>
     </li>
     <li
-      class="css-1n7p56k"
+      class="css-lvozse"
     >
       <a
-        class="MuiTypography-root MuiTypography-h4 MuiLink-root MuiLink-underlineNone css-eeqtvc-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-1gzg4jk-MuiTypography-root-MuiLink-root"
         href="/about"
       >
         About
       </a>
     </li>
     <li
-      class="css-1n7p56k"
+      class="css-lvozse"
     >
       <a
-        class="MuiTypography-root MuiTypography-h4 MuiLink-root MuiLink-underlineNone css-eeqtvc-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-1gzg4jk-MuiTypography-root-MuiLink-root"
         href="/about"
       >
         Stories
       </a>
     </li>
     <li
-      class="css-1n7p56k"
+      class="css-lvozse"
     >
       <a
-        class="MuiTypography-root MuiTypography-h4 MuiLink-root MuiLink-underlineNone css-eeqtvc-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-1gzg4jk-MuiTypography-root-MuiLink-root"
         href="/opportunity"
       >
         Opportunity
       </a>
     </li>
     <li
-      class="css-1n7p56k"
+      class="css-lvozse"
     >
       <a
-        class="MuiTypography-root MuiTypography-h4 MuiLink-root MuiLink-underlineNone css-eeqtvc-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineNone css-1gzg4jk-MuiTypography-root-MuiLink-root"
         href="/contact"
       >
         Contact
       </a>
     </li>
     <li
-      class="css-14eadhm"
+      class="css-o9b79t"
     >
       <a
-        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-1pxleca-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineAlways css-14ndlm4-MuiTypography-root-MuiLink-root"
         href="https://www.facebook.com/CodeForAfrica"
         rel="noreferrer noopener"
         target="_blank"
       >
         <div
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-o1xeqk-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit css-1yelrcy-MuiSvgIcon-root"
           focusable="false"
           viewbox="0 0 24 24"
         />
       </a>
     </li>
     <li
-      class="css-14eadhm"
+      class="css-o9b79t"
     >
       <a
-        class="MuiTypography-root MuiTypography-inherit MuiLink-root MuiLink-underlineAlways css-1pxleca-MuiTypography-root-MuiLink-root"
+        class="MuiTypography-root MuiTypography-h3 MuiLink-root MuiLink-underlineAlways css-14ndlm4-MuiTypography-root-MuiLink-root"
         href="https://twitter.com/Code4Africa"
         rel="noreferrer noopener"
         target="_blank"
       >
         <div
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-o1xeqk-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeInherit css-1yelrcy-MuiSvgIcon-root"
           focusable="false"
           viewbox="0 0 24 24"
         />

diff --git a/apps/codeforafrica/src/components/OpportunityCardList/OpportunityCardList.snap.js b/apps/codeforafrica/src/components/OpportunityCardList/OpportunityCardList.snap.js
@@ -30,7 +30,7 @@ exports[`<OpportunityCardList /> renders unchanged 1`] = `
             class="MuiBox-root css-k008qs"
           >
             <div
-              class="MuiTypography-root MuiTypography-body1 css-1gtn7ca-MuiTypography-root"
+              class="MuiTypography-root MuiTypography-body1 css-1es9scj-MuiTypography-root"
             >
               Data Journalism
             </div>