({
- dotList: ({ membersCount }) => ({
- display: membersCount > 2 ? "flex" : "none",
- "& button": {
- borderColor: "#000",
- background: palette.background.paper,
- },
- "& .react-multi-carousel-dot--active button": {
- borderColor: "#000",
- },
- [breakpoints.up("md")]: {
- display: membersCount > 4 ? "flex" : "none",
- },
- }),
-}));
-
-export default useStyles;
diff --git a/apps/climatemappedafrica/src/components/Carousel/Carousel.js b/apps/climatemappedafrica/src/components/Carousel/Carousel.js
index a1f63ea04..7d925760c 100644
--- a/apps/climatemappedafrica/src/components/Carousel/Carousel.js
+++ b/apps/climatemappedafrica/src/components/Carousel/Carousel.js
@@ -1,11 +1,9 @@
+import { Box } from "@mui/material";
import { deepmerge } from "@mui/utils";
-import clsx from "clsx";
import PropTypes from "prop-types";
import React from "react";
import RMCarousel from "react-multi-carousel";
-import useStyles from "./useStyles";
-
import "react-multi-carousel/lib/styles.css";
const DEFAULT_RESPONSIVE = {
@@ -27,25 +25,46 @@ const DEFAULT_RESPONSIVE = {
};
const Carousel = React.forwardRef(function Carousel(props, ref) {
- const { children, className, responsive, ...other } = props;
- const classes = useStyles(other);
+ const { children, className, responsive, DotListProps, ...other } = props;
return (
- ({
+ ".dotlist": {
+ display: "flex",
+ justifyContent: "center",
+ listStyle: "none",
+ paddingTop: theme.typography.pxToRem(40),
+ position: "relative",
+ "& button": {
+ borderColor: theme.palette.divider,
+ height: theme.typography.pxToRem(16),
+ marginRight: theme.typography.pxToRem(12),
+ width: theme.typography.pxToRem(16),
+ },
+ "& .react-multi-carousel-dot--active button": {
+ borderColor: "#A0A0A0",
+ background: "#000",
+ },
+ ...DotListProps,
+ },
+ })}
>
- {children}
-
+
+ {children}
+
+
);
});
diff --git a/apps/climatemappedafrica/src/components/Carousel/useStyles.js b/apps/climatemappedafrica/src/components/Carousel/useStyles.js
deleted file mode 100644
index 1a22978d4..000000000
--- a/apps/climatemappedafrica/src/components/Carousel/useStyles.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import makeStyles from "@mui/styles/makeStyles";
-
-const useStyles = makeStyles(({ palette, typography }) => ({
- root: {},
- dotList: {
- margin: `0 ${typography.pxToRem(30)}`,
- paddingTop: `${typography.pxToRem(40)}`,
- position: "unset",
- "& button": {
- borderColor: palette.divider,
- height: typography.pxToRem(16),
- marginRight: typography.pxToRem(12),
- width: typography.pxToRem(16),
- },
- "& .react-multi-carousel-dot--active button": {
- borderColor: "#A0A0A0",
- background: "#000",
- },
- },
-}));
-
-export default useStyles;
From 4185795e8d7055c77323fda88486284fe180954d Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Thu, 5 Dec 2024 12:01:21 +0300
Subject: [PATCH 02/15] Remove useSTyles from ExplorePage
---
.../src/components/ExplorePage/index.js | 49 +++++++++++++++++--
.../src/components/ExplorePage/useStyles.js | 46 -----------------
2 files changed, 44 insertions(+), 51 deletions(-)
delete mode 100644 apps/climatemappedafrica/src/components/ExplorePage/useStyles.js
diff --git a/apps/climatemappedafrica/src/components/ExplorePage/index.js b/apps/climatemappedafrica/src/components/ExplorePage/index.js
index e6f5d658e..3449e5482 100644
--- a/apps/climatemappedafrica/src/components/ExplorePage/index.js
+++ b/apps/climatemappedafrica/src/components/ExplorePage/index.js
@@ -1,13 +1,12 @@
import { Location } from "@hurumap/core";
import { Map } from "@hurumap/next";
-import { useTheme } from "@mui/material";
+import { Box, useTheme } from "@mui/material";
import { useRouter } from "next/router";
import PropTypes from "prop-types";
import React, { useEffect, useState } from "react";
import useExplore from "./useExplore";
import useProfileGeography from "./useProfileGeography";
-import useStyles from "./useStyles";
import Panel from "@/climatemappedafrica/components/HURUmap/Panel";
@@ -45,7 +44,6 @@ function ExplorePage({
rootGeographyHasData,
} = rootGeography;
const theme = useTheme();
- const classes = useStyles(props);
// NOTE: This setState and the corresponding useEffect are "hacks" since at
// this point, useReducer hasn't been called yet so we can't use
// dispatch directly but we need handleClickTag for initializer.
@@ -160,7 +158,48 @@ function ExplorePage({
}
return (
<>
-
+ ({
+ display: {
+ xs: "none",
+ lg: "flex",
+ },
+ height: "calc(100vh - 88px)",
+ position: "fixed",
+ left: 0,
+ right: 0,
+ "& .tooltipPop": {
+ background: palette.background.default,
+ boxShadow: "0px 3px 6px #00000029",
+ height: typography.pxToRem(36),
+ width: typography.pxToRem(88),
+ "& .level": {
+ background: palette.primary.main,
+ borderRadius: typography.pxToRem(4),
+ color: palette.text.secondary,
+ display: "flex",
+ fontSize: typography.pxToRem(7),
+ fontWeight: "bold",
+ height: typography.pxToRem(17),
+ justifyContent: "center",
+ lineHeight: 10 / 7,
+ margin: "0 auto",
+ marginTop: typography.pxToRem(-15),
+ paddingTop: typography.pxToRem(2),
+ textTransform: "uppercase",
+ width: typography.pxToRem(62),
+ },
+ "& .name": {
+ textAlign: "center",
+ fontSize: typography.pxToRem(9),
+ fontWeight: "bold",
+ lineHeight: 13 / 9,
+ marginTop: typography.pxToRem(5),
+ textTransform: "capitalize",
+ },
+ },
+ })}
+ >
-
+
({
- root: {
- display: "none",
- [breakpoints.up("lg")]: {
- display: "flex",
- height: "calc(100vh - 88px)",
- position: "fixed",
- left: 0,
- right: 0,
- "& .tooltipPop": {
- background: palette.background.default,
- boxShadow: "0px 3px 6px #00000029",
- height: typography.pxToRem(36),
- width: typography.pxToRem(88),
- "& .level": {
- background: palette.primary.main,
- borderRadius: typography.pxToRem(4),
- color: palette.text.secondary,
- display: "flex",
- fontSize: typography.pxToRem(7),
- fontWeight: "bold",
- height: typography.pxToRem(17),
- justifyContent: "center",
- lineHeight: 10 / 7,
- margin: "0 auto",
- marginTop: typography.pxToRem(-15),
- paddingTop: typography.pxToRem(2),
- textTransform: "uppercase",
- width: typography.pxToRem(62),
- },
- "& .name": {
- textAlign: "center",
- fontSize: typography.pxToRem(9),
- fontWeight: "bold",
- lineHeight: 13 / 9,
- marginTop: typography.pxToRem(5),
- textTransform: "capitalize",
- },
- },
- },
- },
-}));
-
-export default useStyles;
From cdf5681ae667b1dc28fed0785c0f7b3acec88189 Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Thu, 5 Dec 2024 12:09:56 +0300
Subject: [PATCH 03/15] Remove useStyles from Loading
---
.../src/components/Loading/index.js | 20 ++++++++-----------
1 file changed, 8 insertions(+), 12 deletions(-)
diff --git a/apps/climatemappedafrica/src/components/Loading/index.js b/apps/climatemappedafrica/src/components/Loading/index.js
index 39165e130..3ed1d7100 100644
--- a/apps/climatemappedafrica/src/components/Loading/index.js
+++ b/apps/climatemappedafrica/src/components/Loading/index.js
@@ -1,20 +1,16 @@
import { Box, CircularProgress } from "@mui/material";
-import makeStyles from "@mui/styles/makeStyles";
import React from "react";
-const useStyles = makeStyles(({ typography }) => ({
- root: {},
- box: {
- justifyContent: "center",
- height: typography.pxToRem(50),
- },
-}));
-
function Loading() {
- const classes = useStyles();
return (
-
-
+ ({
+ display: "flex",
+ justifyContent: "center",
+ height: typography.pxToRem(50),
+ })}
+ >
+
);
}
From 90a4e87b266f3085fbd0852323e50569ef25c015 Mon Sep 17 00:00:00 2001
From: Kipruto <43873157+kelvinkipruto@users.noreply.github.com>
Date: Thu, 5 Dec 2024 12:17:59 +0300
Subject: [PATCH 04/15] Improve menu
---
.../src/components/Menu/index.js | 25 +++++++++++--------
1 file changed, 14 insertions(+), 11 deletions(-)
diff --git a/apps/climatemappedafrica/src/components/Menu/index.js b/apps/climatemappedafrica/src/components/Menu/index.js
index ad39cdc0a..54782f87b 100644
--- a/apps/climatemappedafrica/src/components/Menu/index.js
+++ b/apps/climatemappedafrica/src/components/Menu/index.js
@@ -19,15 +19,6 @@ const useStyles = makeStyles(({ typography, breakpoints, palette }) => ({
border: "1px solid",
},
},
- label: {
- fontWeight: 600,
- letterSpacing: "1.6px",
- fontSize: typography.pxToRem(20),
- [breakpoints.up("lg")]: {
- fontSize: typography.pxToRem(16),
- },
- textTransform: "uppercase",
- },
text: {
"&::after": {
content: '""',
@@ -82,7 +73,11 @@ function Menu({ children, explorePagePath, links, socialLinks, ...props }) {
alignItems={{ lg: "center" }}
direction={{ xs: "column", lg: "row" }}
justifyContent={{ lg: "flex-end" }}
- className={classes.root}
+ sx={{
+ padding: {
+ lg: 0,
+ },
+ }}
>
{links.map((item, index) => (
({
+ fontWeight: 600,
+ letterSpacing: "1.6px",
+ fontSize: {
+ xs: typography.pxToRem(20),
+ lg: typography.pxToRem(16),
+ },
+ textTransform: "uppercase",
+ })}
>
{item.label}