Skip to content

Commit

Permalink
Merge pull request #996 from CodeForAfrica/fix/climatemapped_spacing
Browse files Browse the repository at this point in the history 
@/Climatemapped Africa styling issues improvement.
  • Loading branch information
@koechkevin
koechkevin authored Nov 13, 2024
2 parents 5324742 + 66e4386 commit 0f5386a
Show file tree
Hide file tree
Showing 13 changed files with 202 additions and 160 deletions.
29 changes: 11 additions & 18 deletions apps/climatemappedafrica/src/components/AboutTeam/AboutTeam.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { Box, Grid, Typography, useMediaQuery } from "@mui/material";
import { Box, Typography, useMediaQuery } from "@mui/material";
import { useTheme } from "@mui/material/styles";
import { chunk, uniqueId } from "lodash";
import PropTypes from "prop-types";
import React, { useRef } from "react";

Expand All @@ -16,10 +15,12 @@ import useStyles from "./useStyles";

const responsive = {
desktop: {
items: 1,
items: 4,
partialVisibilityGutter: 30,
},
tablet: {
items: 1,
items: 2,
partialVisibilityGutter: 30,
},
};

Expand All @@ -33,8 +34,6 @@ function AboutTeam({ title, members: membersProp, ...props }) {
if (!membersProp?.length) {
return null;
}
const chunkSize = isMdUp ? 4 : 2;
const members = chunk(membersProp, chunkSize);
const scrollToTeam = () => {
if (ref.current && !isMdUp) {
ref.current.scrollIntoView({ behavior: "smooth" });
Expand Down Expand Up @@ -69,18 +68,12 @@ function AboutTeam({ title, members: membersProp, ...props }) {
responsive={responsive}
classes={{ dotList: classes.dotList }}
>
{members.map((membersChunks) => (
<Grid
container
justifyContent="space-between"
key={uniqueId("team-chunk-")}
>
{membersChunks.map((member) => (
<Grid item key={member.title}>
<Card {...member} mediaProps={{ square: true }} />
</Grid>
))}
</Grid>
{membersProp.map((member) => (
<Card
key={member.title}
{...member}
mediaProps={{ square: true }}
/>
))}
</Carousel>
</Section>
Expand Down
3 changes: 2 additions & 1 deletion apps/climatemappedafrica/src/components/DropdownSearch/DownloadSearch.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ function DropdownSearch({
icon: IconProp = SearchIcon,
placeholder,
variant,
sx,
...props
}) {
const router = useRouter();
Expand Down Expand Up @@ -96,7 +97,7 @@ function DropdownSearch({
);

return (
<Box id="location-search">
<Box id="location-search" sx={sx}>
{label && (
<Typography
variant="body1"
Expand Down
8 changes: 6 additions & 2 deletions apps/climatemappedafrica/src/components/Footer/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,11 +117,15 @@ function Footer(props) {
{...connect}
LinkProps={{
component: Link,
sx: { color: "text.secondary" },
sx: {
color: "text.secondary",
alignItems: { xs: "center", lg: "flex-end" },
},
}}
alignItems={{ xs: "center", lg: "flex-end" }}
TitleProps={{
variant: "footerCap",
sx: { color: "text.secondary" },
sx: { color: "text.secondary", mr: 0 },
}}
sx={{ gap: 2 }}
direction="column"
Expand Down
4 changes: 2 additions & 2 deletions apps/climatemappedafrica/src/components/Footer/useStyles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,9 +47,9 @@ const useStyles = makeStyles(({ breakpoints, palette, typography }) => ({
copyrightText: {
color: palette.text.secondary,
order: 5,
padding: `0 ${typography.pxToRem(5)}`,
padding: `0 ${typography.pxToRem(5)} 0 0`,
[breakpoints.up("lg")]: {
padding: `0 ${typography.pxToRem(10)}`,
padding: `0 ${typography.pxToRem(10)} 0 0`,
},
},
}));
Expand Down
81 changes: 30 additions & 51 deletions apps/climatemappedafrica/src/components/Hero/Hero.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,7 @@ import { RichTypography } from "@commons-ui/legacy";
import { Box, Grid, useMediaQuery } from "@mui/material";
import dynamic from "next/dynamic";
import PropTypes from "prop-types";
import React, { useState } from "react";

import Legend from "./Legend";
import React from "react";

import heroBg from "@/climatemappedafrica/assets/images/bg-map-white.jpg";
import DropdownSearch from "@/climatemappedafrica/components/DropdownSearch";
Expand All @@ -26,14 +24,12 @@ function Hero({
level,
explorePageSlug,
averageTemperature,
legend,
zoom: zoomProp,
...props
}) {
const isUpLg = useMediaQuery((theme) => theme.breakpoints.up("lg"));
const [hoverGeo, setHoverGeo] = useState(null);
const continentLevelZoom = isUpLg ? 3 : 2.1; // We have to reduce the zoom level for continent so that all countries(Including islands) are visible within the designs
const countryLevelZoom = isUpLg ? 6 : 5.25;
const zoom = level === "continent" ? continentLevelZoom : countryLevelZoom;
const { desktop, mobile } = zoomProp;
const zoom = isUpLg ? desktop : mobile;
return (
<Box
sx={{
Expand All @@ -58,7 +54,14 @@ function Hero({
}}
>
<Grid container>
<Grid item xs={12} md={6}>
<Grid
display="flex"
flexDirection="column"
justifyContent="space-between"
item
xs={12}
md={6}
>
<RichHeader
subtitle={subtitle}
TitleProps={{
Expand All @@ -82,25 +85,24 @@ function Hero({
>
{title}
</RichHeader>
<DropdownSearch
label={searchLabel}
locations={featuredLocations}
placeholder={searchPlaceholder}
{...props}
/>
<RichTypography
variant="caption"
sx={{
fontSize: { xs: "11px" },
color: "#707070",
marginTop: {
sm: "20px",
xs: "40px",
},
}}
>
{comment}
</RichTypography>
<Box>
<DropdownSearch
label={searchLabel}
locations={featuredLocations}
placeholder={searchPlaceholder}
sx={{ mb: 1 }}
{...props}
/>
<RichTypography
variant="caption"
sx={{
fontSize: { xs: "11px" },
color: "#707070",
}}
>
{comment}
</RichTypography>
</Box>
</Grid>
{/* Since map is dynamic-ally loaded, no need for implementation="css" */}

Expand All @@ -112,34 +114,11 @@ function Hero({
tileLayer={{
url: "https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png",
}}
onLayerMouseOver={setHoverGeo}
featuredLocations={featuredLocations}
explorePageSlug={explorePageSlug}
{...props}
/>
) : null}
<Box
display="flex"
justifyContent="space-between"
alignItems="center"
gap={2}
sx={{ height: 80, width: "100%" }}
>
<Legend title={averageTemperature} data={legend} />
<RichTypography
variant="h6"
sx={{
lineHeight: 23 / 18,
lineSpacing: "0.9px",
fontWeight: "normal",
textTransform: "capitalize",
display: "flex",
justifyContent: "flex-end",
}}
>
{hoverGeo}
</RichTypography>
</Box>
</Grid>
</Grid>
</Section>
Expand Down
102 changes: 36 additions & 66 deletions apps/climatemappedafrica/src/components/Hero/Hero.snap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ exports[`<Hero /> renders unchanged 1`] = `
class="MuiGrid-root MuiGrid-container css-11lq3yg-MuiGrid-root"
>
<div
class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-6 css-18w5b2b-MuiGrid-root"
class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-6 css-16r8gvm-MuiGrid-root"
>
<header
class="MuiBox-root css-0"
Expand All @@ -50,82 +50,52 @@ exports[`<Hero /> renders unchanged 1`] = `
</header>
<div
class="MuiBox-root css-0"
id="location-search"
>
<p
class="MuiTypography-root MuiTypography-body1 css-1u0kiq2-MuiTypography-root"
>
Search for a location
</p>
<div
class="MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-adornedEnd css-1f7prdq-MuiInputBase-root"
class="MuiBox-root css-19idom"
id="location-search"
>
<input
aria-label="search"
class="MuiInputBase-input MuiInputBase-inputAdornedEnd css-yz9k0d-MuiInputBase-input"
placeholder="Search for a location"
type="text"
value=""
/>
<button
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorPrimary MuiIconButton-sizeSmall css-oru44q-MuiButtonBase-root-MuiIconButton-root"
root="[object Object]"
tabindex="0"
type="button"
<p
class="MuiTypography-root MuiTypography-body1 css-1u0kiq2-MuiTypography-root"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1ny0eu4-MuiSvgIcon-root"
focusable="false"
viewBox="0 0 48 48"
/>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
</div>
<div
class="MuiBox-root css-79elbk"
/>
</div>
</div>
<div
class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-6 css-g8r332-MuiGrid-root"
>
<div
class="MuiBox-root css-ljsg2c"
>
<div
class="MuiBox-root css-0"
>
Search for a location
</p>
<div
class="MuiBox-root css-70qvj9"
class="MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-adornedEnd css-1f7prdq-MuiInputBase-root"
>
<div
class="MuiBox-root css-1wok3bd"
/>
<div
class="MuiBox-root css-1fg12k3"
/>
<div
class="MuiBox-root css-55biq3"
/>
<div
class="MuiBox-root css-9qafv7"
/>
<div
class="MuiBox-root css-5srxm6"
/>
<div
class="MuiBox-root css-1kw6r8l"
/>
<div
class="MuiBox-root css-oi5eih"
<input
aria-label="search"
class="MuiInputBase-input MuiInputBase-inputAdornedEnd css-yz9k0d-MuiInputBase-input"
placeholder="Search for a location"
type="text"
value=""
/>
<button
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-colorPrimary MuiIconButton-sizeSmall css-oru44q-MuiButtonBase-root-MuiIconButton-root"
root="[object Object]"
tabindex="0"
type="button"
>
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1ny0eu4-MuiSvgIcon-root"
focusable="false"
viewBox="0 0 48 48"
/>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
</div>
<div
class="MuiBox-root css-79elbk"
/>
</div>
</div>
</div>
<div
class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-6 css-g8r332-MuiGrid-root"
/>
</div>
</div>
</div>
Expand Down
4 changes: 4 additions & 0 deletions apps/climatemappedafrica/src/components/Hero/Hero.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,10 @@ const defaultProps = {
{ min: 25, max: 28, color: "#F96264" },
{ min: 28, max: 31, color: "#F80701" },
],
zoom: {
desktop: 3,
mobile: 2,
},
};

describe("<Hero />", () => {
Expand Down
Loading

0 comments on commit 0f5386a

Please sign in to comment.