Skip to content

Commit 6ecd582

Browse files
koechkevinkoechkevin
authored
Merge pull request #1185 from CodeForAfrica/fix/trustlab_homepage
Trustlab: Update Mobile Navbar
2 parents c75eaaf + b9dea50 commit 6ecd582

File tree

12 files changed

+215
-65
lines changed

12 files changed

+215
-65
lines changed

‎apps/trustlab/src/components/Footer/Footer.js‎

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,12 @@ const Footer = React.forwardRef(function Footer(props, ref) {
5959
fontSize: "16px",
6060
lineHeight: "24px",
6161
fontWeight: 600,
62+
textAlign: "center",
63+
width: "100%",
64+
[theme.breakpoints.up("md")]: {
65+
cursor: "pointer",
66+
width: "unset",
67+
},
6268
},
6369
"& #mc_embed_signup input[type=submit]:hover": {
6470
cursor: "pointer",
@@ -71,23 +77,15 @@ const Footer = React.forwardRef(function Footer(props, ref) {
7177
backgroundColor: palette.common.black,
7278
color: palette.text.secondary,
7379
px: 0,
74-
py: { xs: 10, md: 13.75, lg: 12.5 },
80+
py: 8,
7581
})}
7682
component="footer"
7783
ref={ref}
7884
>
7985
<Section sx={{ px: { xs: 2.5, sm: 0 } }}>
8086
{/* Increase number of columns to getter columns size */}
8187
<Grid container columns={24} justifyContent="space-between">
82-
<Grid
83-
item
84-
xs={24}
85-
md={15}
86-
lg={16}
87-
sx={{
88-
order: { xs: 1, md: 0 },
89-
}}
90-
>
88+
<Grid item xs={24} md={15} lg={16}>
9189
<Grid container justifyContent="space-between">
9290
<Grid
9391
item
@@ -100,11 +98,7 @@ const Footer = React.forwardRef(function Footer(props, ref) {
10098
}}
10199
>
102100
<Grid item>
103-
<FooterDescription
104-
description={description}
105-
logo={null}
106-
sx={{ mt: { xs: 10, md: 0 } }}
107-
/>
101+
<FooterDescription description={description} logo={null} />
108102
</Grid>
109103
<Grid item>
110104
<StayInTouch
@@ -115,9 +109,15 @@ const Footer = React.forwardRef(function Footer(props, ref) {
115109
textTransform: "uppercase",
116110
fontSize: "10px",
117111
fontWeight: 700,
112+
mb: 0,
113+
mr: 4,
118114
},
119115
}}
120-
sx={{ mt: "52px" }}
116+
sx={{
117+
mt: "52px",
118+
justifyContent: { xs: "center", md: "flex-start" },
119+
}}
120+
direction="row"
121121
/>
122122
</Grid>
123123
</Grid>
@@ -138,6 +138,8 @@ const Footer = React.forwardRef(function Footer(props, ref) {
138138
lineHeight: "28px",
139139
letterSpacing: "-2%",
140140
fontFamily: "Barlow",
141+
textAlign: { xs: "center", md: "left" },
142+
mt: { xs: 8, md: 0 },
141143
}}
142144
{...newsletter}
143145
/>

‎apps/trustlab/src/components/Footer/Footer.snap.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
exports[`<Footer /> renders unchanged 1`] = `
44
<div>
55
<footer
6-
class="MuiBox-root css-g6071f"
6+
class="MuiBox-root css-s4zq4f"
77
>
88
<div
99
class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-1myirmg-MuiContainer-root"
@@ -12,7 +12,7 @@ exports[`<Footer /> renders unchanged 1`] = `
1212
class="MuiGrid-root MuiGrid-container css-1xzqqmo-MuiGrid-root"
1313
>
1414
<div
15-
class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-24 MuiGrid-grid-md-15 MuiGrid-grid-lg-16 css-182fz6w-MuiGrid-root"
15+
class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-24 MuiGrid-grid-md-15 MuiGrid-grid-lg-16 css-xsdxuo-MuiGrid-root"
1616
>
1717
<div
1818
class="MuiGrid-root MuiGrid-container css-1xzqqmo-MuiGrid-root"

‎apps/trustlab/src/components/MobileNavBar/MobileNavBar.js‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
import { NavBarNavList, Section } from "@commons-ui/core";
2+
import { Link, NextImageButton } from "@commons-ui/next";
3+
import { Drawer, Grid } from "@mui/material";
4+
import React, { useState } from "react";
5+
6+
// eslint-disable-next-line import/no-unresolved
7+
import XIcon from "@/trustlab/assets/icons/Type=x, Size=24, Color=currentColor.svg?url";
8+
// eslint-disable-next-line import/no-unresolved
9+
import MenuIcon from "@/trustlab/assets/menu-icon.svg?url";
10+
11+
const MobileNavBar = React.forwardRef(function MobileNavBar(props, ref) {
12+
const { logo, menus, socialLinks } = props;
13+
const [open, setOpen] = useState(false);
14+
const handleClick = () => setOpen((prev) => !prev);
15+
const handleClose = () => setOpen(false);
16+
17+
const Icon = open ? XIcon : MenuIcon;
18+
return (
19+
<Grid
20+
container
21+
justifyContent="space-between"
22+
alignItems="center"
23+
sx={{ display: { xs: "flex", md: "none" } }}
24+
ref={ref}
25+
>
26+
<Grid item>
27+
<NextImageButton
28+
{...logo}
29+
href="/"
30+
alt="Logo"
31+
width={136}
32+
height={61}
33+
priority
34+
/>
35+
</Grid>
36+
<Grid item>
37+
<NextImageButton
38+
src={Icon}
39+
alt="menu icon"
40+
onClick={handleClick}
41+
width={32}
42+
height={32}
43+
/>
44+
</Grid>
45+
<Drawer
46+
anchor="top"
47+
open={open}
48+
onClose={handleClose}
49+
hideBackdrop
50+
slotProps={{
51+
paper: {
52+
onClick: handleClick,
53+
square: true,
54+
sx: {
55+
overflowY: { xs: "scroll", sm: "visible" },
56+
top: 64,
57+
py: 2,
58+
},
59+
elevation: 0,
60+
},
61+
}}
62+
sx={(theme) => ({
63+
zIndex: theme.zIndex.appBar - 1,
64+
})}
65+
>
66+
<Section sx={{ px: { xs: 2.5, sm: 0 } }}>
67+
<NavBarNavList
68+
menus={menus}
69+
socialLinks={socialLinks}
70+
slotProps={{
71+
typography: {
72+
sx: {
73+
color: "common.black",
74+
variant: "h3",
75+
},
76+
onClick: handleClose,
77+
},
78+
item: {
79+
sx: {
80+
mb: { xs: 5 },
81+
},
82+
},
83+
}}
84+
Component={Link}
85+
/>
86+
</Section>
87+
</Drawer>
88+
</Grid>
89+
);
90+
});
91+
92+
export default MobileNavBar;

‎apps/trustlab/src/components/MobileNavBar/MobileNavbar.snap.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`<MobileNavBar /> renders unchanged 1`] = `
4+
<div>
5+
<div
6+
class="MuiGrid-root MuiGrid-container css-hs5ptp-MuiGrid-root"
7+
>
8+
<div
9+
class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
10+
/>
11+
<div
12+
class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
13+
>
14+
<button
15+
class="MuiButtonBase-root css-1rdqmag-MuiButtonBase-root"
16+
tabindex="0"
17+
type="button"
18+
>
19+
<img
20+
alt="menu icon"
21+
data-nimg="1"
22+
decoding="async"
23+
height="32"
24+
loading="lazy"
25+
src="/_next/image?url=%2Furl&w=64&q=75"
26+
srcset="/_next/image?url=%2Furl&w=32&q=75 1x, /_next/image?url=%2Furl&w=64&q=75 2x"
27+
style="color: transparent;"
28+
width="32"
29+
/>
30+
</button>
31+
</div>
32+
</div>
33+
</div>
34+
`;

‎apps/trustlab/src/components/MobileNavBar/MobileNavbar.test.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { createRender } from "@commons-ui/testing-library";
2+
import React from "react";
3+
4+
import MobileNavBar from "./MobileNavBar";
5+
6+
import theme from "@/trustlab/theme";
7+
8+
const render = createRender({ theme });
9+
10+
const defaultProps = {};
11+
12+
describe("<MobileNavBar />", () => {
13+
it("renders unchanged", () => {
14+
const { container } = render(<MobileNavBar {...defaultProps} />);
15+
expect(container).toMatchSnapshot();
16+
});
17+
});

‎apps/trustlab/src/components/MobileNavBar/index.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import MobileNavBar from "./MobileNavBar";
2+
3+
export default MobileNavBar;

‎apps/trustlab/src/components/NavBar/NavBar.js‎

Lines changed: 15 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import {
22
NavBar as NavigationBar,
33
Section,
44
DesktopNavBar,
5-
MobileNavBar,
65
} from "@commons-ui/core";
76
import { Link, NextImageButton } from "@commons-ui/next";
87
import React from "react";
@@ -11,10 +10,17 @@ import CloseIcon from "@/trustlab/assets/icons/Type=x, Size=24, Color=CurrentCol
1110
// eslint-disable-next-line import/no-unresolved
1211
import menuIcon from "@/trustlab/assets/menu-icon.svg?url";
1312
import { neutral } from "@/trustlab/colors";
13+
import MobileNavBar from "@/trustlab/components/MobileNavBar";
1414

1515
function NavBar({ logo, menus, socialLinks }) {
1616
return (
17-
<NavigationBar sx={{ py: { xs: "10px", md: "15.5" } }}>
17+
<NavigationBar
18+
sx={(theme) => ({
19+
boxShadow: "none",
20+
height: 64,
21+
borderBottom: `1px solid ${theme.palette.yellow.main}`,
22+
})}
23+
>
1824
<Section sx={{ px: { xs: 2.5, sm: 0 } }}>
1925
<MobileNavBar
2026
logo={logo}
@@ -24,22 +30,6 @@ function NavBar({ logo, menus, socialLinks }) {
2430
CloseIcon={CloseIcon}
2531
NextImageButton={NextImageButton}
2632
Link={Link}
27-
NavListItemProps={{
28-
sx: {
29-
color: "common.black",
30-
variant: "h3",
31-
},
32-
}}
33-
DialogProps={{
34-
sx: {
35-
"& .MuiDialogContent-root": {
36-
backgroundColor: "common.white",
37-
},
38-
},
39-
}}
40-
sx={{
41-
display: { xs: "flex", md: "none" },
42-
}}
4333
/>
4434
<DesktopNavBar
4535
logo={logo}
@@ -48,9 +38,13 @@ function NavBar({ logo, menus, socialLinks }) {
4838
NextImageButton={NextImageButton}
4939
Link={Link}
5040
NavListItemProps={{
51-
sx: {
52-
color: neutral[400],
53-
variant: "h1",
41+
slotProps: {
42+
typography: {
43+
sx: {
44+
color: neutral[400],
45+
variant: "h1",
46+
},
47+
},
5448
},
5549
}}
5650
sx={{

‎apps/trustlab/src/components/NavBar/NavBar.snap.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
exports[`<NavBar /> renders unchanged 1`] = `
44
<div>
55
<header
6-
class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorInherit MuiAppBar-positionSticky css-hbfoq5-MuiPaper-root-MuiAppBar-root-CuiNavBar-root"
6+
class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorInherit MuiAppBar-positionSticky css-1vjjsho-MuiPaper-root-MuiAppBar-root-CuiNavBar-root"
77
style="--Paper-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12);"
88
>
99
<div

‎apps/trustlab/src/theme/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ const palette = {
2828
warning: { main: "#FEFF05" },
2929
success: { main: "#34D399" },
3030
text: { primary: "#000000", secondary: "#FFFFFF" },
31+
yellow: { main: "#FEFF05" },
3132
background: {
3233
default: neutral[100],
3334
},

‎packages/commons-ui-core/src/DesktopNavBar/DesktopNavBar.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@ const DesktopNavBar = React.forwardRef(function DesktopNavBar(props, ref) {
2929
alt="Logo"
3030
width={136}
3131
height={61}
32-
priority
3332
/>
3433
</Grid>
3534
<Grid item>
@@ -39,7 +38,7 @@ const DesktopNavBar = React.forwardRef(function DesktopNavBar(props, ref) {
3938
socialLinks={socialLinks}
4039
direction="row"
4140
Component={Link}
42-
NavListItemProps={NavListItemProps}
41+
{...NavListItemProps}
4342
/>
4443
</Box>
4544
</Grid>

0 commit comments

Comments
 (0)