Skip to content

Migrate MUI system props to sx (fix MUI 9 build break) #267

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Puturbold merged 1 commit into from
Jun 5, 2026
Merged

Migrate MUI system props to sx (fix MUI 9 build break) #267

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions frontend/src/components/molecules/SidePanelPercentageModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,8 +64,8 @@ const SidePanelPercentageModal: React.FC<SidePanelPercentageModalProps> = ({
>
<Typography
variant="h6"
fontFamily="Poppins, sans-serif"
sx={{
fontFamily: "Poppins, sans-serif",
display: "flex",
alignItems: "center",
gap: 0.8,
Expand Down Expand Up @@ -104,8 +104,8 @@ const SidePanelPercentageModal: React.FC<SidePanelPercentageModalProps> = ({
>
<Typography
variant="h5"
fontFamily="Poppins, sans-serif"
sx={{
fontFamily: "Poppins, sans-serif",
fontWeight: "bold",
color,
textAlign: "center",
Expand All @@ -116,8 +116,8 @@ const SidePanelPercentageModal: React.FC<SidePanelPercentageModalProps> = ({
</Typography>
<Typography
variant="body2"
fontFamily="Poppins, sans-serif"
sx={{
fontFamily: "Poppins, sans-serif",
fontWeight: 900,
color,
textAlign: "center",
Expand Down
67 changes: 45 additions & 22 deletions frontend/src/components/molecules/Slide.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,19 @@ interface SlideProps {
}

const CalendarIcon = () => (
<svg width="25" height="40" viewBox="0 -14 31 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.4023 4.14111C12.1802 4.14111 12.8086 4.76953 12.8086 5.54736V6.95361H18.4336V5.54736C18.4336 4.76953 19.062 4.14111 19.8398 4.14111C20.6177 4.14111 21.2461 4.76953 21.2461 5.54736V6.95361H23.3555C24.52 6.95361 25.4648 7.89844 25.4648 9.06299V11.1724H5.77734V9.06299C5.77734 7.89844 6.72217 6.95361 7.88672 6.95361H9.99609V5.54736C9.99609 4.76953 10.6245 4.14111 11.4023 4.14111ZM5.77734 12.5786H25.4648V24.5317C25.4648 25.6963 24.52 26.6411 23.3555 26.6411H7.88672C6.72217 26.6411 5.77734 25.6963 5.77734 24.5317V12.5786ZM8.58984 16.0942V17.5005C8.58984 17.8872 8.90625 18.2036 9.29297 18.2036H10.6992C11.0859 18.2036 11.4023 17.8872 11.4023 17.5005V16.0942C11.4023 15.7075 11.0859 15.3911 10.6992 15.3911H9.29297C8.90625 15.3911 8.58984 15.7075 8.58984 16.0942ZM14.2148 16.0942V17.5005C14.2148 17.8872 14.5312 18.2036 14.918 18.2036H16.3242C16.7109 18.2036 17.0273 17.8872 17.0273 17.5005V16.0942C17.0273 15.7075 16.7109 15.3911 16.3242 15.3911H14.918C14.5312 15.3911 14.2148 15.7075 14.2148 16.0942ZM20.543 15.3911C20.1562 15.3911 19.8398 15.7075 19.8398 16.0942V17.5005C19.8398 17.8872 20.1562 18.2036 20.543 18.2036H21.9492C22.3359 18.2036 22.6523 17.8872 22.6523 17.5005V16.0942C22.6523 15.7075 22.3359 15.3911 21.9492 15.3911H20.543ZM8.58984 21.7192V23.1255C8.58984 23.5122 8.90625 23.8286 9.29297 23.8286H10.6992C11.0859 23.8286 11.4023 23.5122 11.4023 23.1255V21.7192C11.4023 21.3325 11.0859 21.0161 10.6992 21.0161H9.29297C8.90625 21.0161 8.58984 21.3325 8.58984 21.7192ZM14.918 21.0161C14.5312 21.0161 14.2148 21.3325 14.2148 21.7192V23.1255C14.2148 23.5122 14.5312 23.8286 14.918 23.8286H16.3242C16.7109 23.8286 17.0273 23.5122 17.0273 23.1255V21.7192C17.0273 21.3325 16.7109 21.0161 16.3242 21.0161H14.918ZM19.8398 21.7192V23.1255C19.8398 23.5122 20.1562 23.8286 20.543 23.8286H21.9492C22.3359 23.8286 22.6523 23.5122 22.6523 23.1255V21.7192C22.6523 21.3325 22.3359 21.0161 21.9492 21.0161H20.543C20.1562 21.0161 19.8398 21.3325 19.8398 21.7192Z" fill="black" />
<svg
width="25"
height="40"
viewBox="0 -14 31 31"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.4023 4.14111C12.1802 4.14111 12.8086 4.76953 12.8086 5.54736V6.95361H18.4336V5.54736C18.4336 4.76953 19.062 4.14111 19.8398 4.14111C20.6177 4.14111 21.2461 4.76953 21.2461 5.54736V6.95361H23.3555C24.52 6.95361 25.4648 7.89844 25.4648 9.06299V11.1724H5.77734V9.06299C5.77734 7.89844 6.72217 6.95361 7.88672 6.95361H9.99609V5.54736C9.99609 4.76953 10.6245 4.14111 11.4023 4.14111ZM5.77734 12.5786H25.4648V24.5317C25.4648 25.6963 24.52 26.6411 23.3555 26.6411H7.88672C6.72217 26.6411 5.77734 25.6963 5.77734 24.5317V12.5786ZM8.58984 16.0942V17.5005C8.58984 17.8872 8.90625 18.2036 9.29297 18.2036H10.6992C11.0859 18.2036 11.4023 17.8872 11.4023 17.5005V16.0942C11.4023 15.7075 11.0859 15.3911 10.6992 15.3911H9.29297C8.90625 15.3911 8.58984 15.7075 8.58984 16.0942ZM14.2148 16.0942V17.5005C14.2148 17.8872 14.5312 18.2036 14.918 18.2036H16.3242C16.7109 18.2036 17.0273 17.8872 17.0273 17.5005V16.0942C17.0273 15.7075 16.7109 15.3911 16.3242 15.3911H14.918C14.5312 15.3911 14.2148 15.7075 14.2148 16.0942ZM20.543 15.3911C20.1562 15.3911 19.8398 15.7075 19.8398 16.0942V17.5005C19.8398 17.8872 20.1562 18.2036 20.543 18.2036H21.9492C22.3359 18.2036 22.6523 17.8872 22.6523 17.5005V16.0942C22.6523 15.7075 22.3359 15.3911 21.9492 15.3911H20.543ZM8.58984 21.7192V23.1255C8.58984 23.5122 8.90625 23.8286 9.29297 23.8286H10.6992C11.0859 23.8286 11.4023 23.5122 11.4023 23.1255V21.7192C11.4023 21.3325 11.0859 21.0161 10.6992 21.0161H9.29297C8.90625 21.0161 8.58984 21.3325 8.58984 21.7192ZM14.918 21.0161C14.5312 21.0161 14.2148 21.3325 14.2148 21.7192V23.1255C14.2148 23.5122 14.5312 23.8286 14.918 23.8286H16.3242C16.7109 23.8286 17.0273 23.5122 17.0273 23.1255V21.7192C17.0273 21.3325 16.7109 21.0161 16.3242 21.0161H14.918ZM19.8398 21.7192V23.1255C19.8398 23.5122 20.1562 23.8286 20.543 23.8286H21.9492C22.3359 23.8286 22.6523 23.5122 22.6523 23.1255V21.7192C22.6523 21.3325 22.3359 21.0161 21.9492 21.0161H20.543C20.1562 21.0161 19.8398 21.3325 19.8398 21.7192Z"
fill="black"
/>
</svg>

)
);

const Slide: React.FC<SlideProps> = ({
name,
Expand All @@ -43,7 +51,7 @@ const Slide: React.FC<SlideProps> = ({
// Handles when releasing the slider
const handleSliderCommit = (
_: React.SyntheticEvent | Event,
newValue: number | number[]
newValue: number | number[],
) => {
if (typeof newValue === "number") {
setSliderVal(newValue); // Update local state
Expand All @@ -59,12 +67,22 @@ const Slide: React.FC<SlideProps> = ({
};

return (
<Box display="flex" flexDirection="column" alignItems="flex-start" mb={2} style={{ fontFamily: "Poppins, sans-serif" }}>
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
mb: 2,
}}
style={{ fontFamily: "Poppins, sans-serif" }}
>
<Box
display="flex"
width="100%"
justifyContent="space-between"
alignItems="center"
sx={{
display: "flex",
width: "100%",
justifyContent: "space-between",
alignItems: "center",
}}
>
<span
style={{
Expand All @@ -77,11 +95,9 @@ const Slide: React.FC<SlideProps> = ({
textDecoration: "none",
}}
>
<CalendarIcon />
{" "}
{name}
<CalendarIcon /> {name}
</span>
<Box ml={2} p={1} display="inline-block" width="auto">
<Box sx={{ ml: 2, p: 1, display: "inline-block", width: "auto" }}>
<span
style={{
fontFamily: "Poppins",
Expand Down Expand Up @@ -124,18 +140,25 @@ const Slide: React.FC<SlideProps> = ({
onChangeCommitted={handleSliderCommit} //Call once finished dragging slider
valueLabelDisplay="auto"
sx={{
'& .MuiSlider-thumb': {
color: '#065143',
"& .MuiSlider-thumb": {
color: "#065143",
},
'& .MuiSlider-track': {
color: '#065143',
"& .MuiSlider-track": {
color: "#065143",
},
"& .MuiSlider-rail": {
color: "#8F8F8F", // Lighter red for the rail
},
'& .MuiSlider-rail': {
color: '#8F8F8F', // Lighter red for the rail
}
}}
/>
<Box display="flex" width="100%" justifyContent="space-between" mt={2}>
<Box
sx={{
display: "flex",
width: "100%",
justifyContent: "space-between",
mt: 2,
}}
>
<span
style={{
fontFamily: "Poppins, sans-serif",
Expand Down
15 changes: 7 additions & 8 deletions frontend/src/components/organisms/Home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,8 @@ const Home: React.FC = () => {
<Box>
<Typography
variant="h4"
fontWeight="bold"
mb={2}
sx={{
mb: 2,
fontFamily: "Poppins, sans-serif",
fontSize: "24px",
fontWeight: "bold",
Expand Down Expand Up @@ -141,8 +140,8 @@ const Home: React.FC = () => {
/>
<Typography
variant="h6"
mb={2}
sx={{
mb: 2,
color: "#065143",
fontFamily: "Poppins, sans-serif",
fontSize: "24px",
Expand Down Expand Up @@ -183,8 +182,8 @@ const Home: React.FC = () => {
/>
<Typography
variant="h6"
mb={2}
sx={{
mb: 2,
color: "#065143",
fontFamily: "Poppins, sans-serif",
fontSize: "24px",
Expand Down Expand Up @@ -225,8 +224,8 @@ const Home: React.FC = () => {
/>
<Typography
variant="h6"
mb={2}
sx={{
mb: 2,
color: "#065143",
fontFamily: "Poppins, sans-serif",
fontSize: "24px",
Expand Down Expand Up @@ -260,8 +259,8 @@ const Home: React.FC = () => {
left={
<Box>
<Typography
mb={2}
sx={{
mb: 2,
fontFamily: "Poppins, sans-serif",
fontSize: "32px",
fontStyle: "normal",
Expand Down Expand Up @@ -337,8 +336,8 @@ const Home: React.FC = () => {
right={
<Box>
<Typography
mb={2}
sx={{
mb: 2,
color: "#FFF",
fontFamily: "Poppins, sans-serif",
fontSize: "32px",
Expand Down Expand Up @@ -386,8 +385,8 @@ const Home: React.FC = () => {
left={
<Box>
<Typography
mb={2}
sx={{
mb: 2,
fontFamily: "Poppins, sans-serif",
fontSize: "32px",
fontStyle: "normal",
Expand Down
64 changes: 37 additions & 27 deletions frontend/src/components/organisms/SidePanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,14 +90,14 @@ const SidePanel: React.FC<SidePanelProps> = ({ yearOptions }) => {
entityType: string,
entityID: number,
categoryType: LayerType | null,
selectedYear: number
selectedYear: number,
) => {
try {
const response = await fetch(
`${backendUrl}/cell/${entityType}/${entityID}/${categoryType}/${selectedYear}`
`${backendUrl}/cell/${entityType}/${entityID}/${categoryType}/${selectedYear}`,
);
console.log(
`${backendUrl}/cell/${entityType}/${entityID}/${categoryType}/${selectedYear}`
`${backendUrl}/cell/${entityType}/${entityID}/${categoryType}/${selectedYear}`,
);
const response_json = await response.json();
const percentages = [
Expand All @@ -116,7 +116,7 @@ const SidePanel: React.FC<SidePanelProps> = ({ yearOptions }) => {
const loadEntityLivestock = async (entityType: string, entityID: number) => {
try {
const response = await fetch(
`${backendUrl}/${entityType}/${entityID}/${selectedYear}/livestock`
`${backendUrl}/${entityType}/${entityID}/${selectedYear}/livestock`,
);
const response_json = await response.json();
const livestock_data = {
Expand Down Expand Up @@ -174,7 +174,7 @@ const SidePanel: React.FC<SidePanelProps> = ({ yearOptions }) => {
"province",
selectedProvince,
selectedLayerType,
selectedYear
selectedYear,
),
loadEntityLivestock("province", selectedProvince),
]);
Expand All @@ -194,7 +194,7 @@ const SidePanel: React.FC<SidePanelProps> = ({ yearOptions }) => {
"county",
selectedCounty,
selectedLayerType,
selectedYear
selectedYear,
),
loadEntityLivestock("county", selectedCounty),
]);
Expand Down Expand Up @@ -398,19 +398,21 @@ const SidePanel: React.FC<SidePanelProps> = ({ yearOptions }) => {
open={isPanelOpen ?? false}
onClose={handlePanelToggle}
variant="persistent"
PaperProps={{
sx: {
width: isMobile ? "100%" : "35vw",
height: isMobile ? "75vh" : "calc(100% - 70px)",
maxWidth: isMobile ? "100%" : "400px",
boxSizing: "border-box",
p: 2,
paddingTop: "10px",
display: "flex",
flexDirection: "column",
marginTop: isMobile ? 0 : "78px",
borderTopLeftRadius: isMobile ? "12px" : 0,
borderTopRightRadius: isMobile ? "12px" : 0,
slotProps={{
paper: {
sx: {
width: isMobile ? "100%" : "35vw",
height: isMobile ? "75vh" : "calc(100% - 70px)",
maxWidth: isMobile ? "100%" : "400px",
boxSizing: "border-box",
p: 2,
paddingTop: "10px",
display: "flex",
flexDirection: "column",
marginTop: isMobile ? 0 : "78px",
borderTopLeftRadius: isMobile ? "12px" : 0,
borderTopRightRadius: isMobile ? "12px" : 0,
},
},
}}
sx={{
Expand All @@ -434,8 +436,8 @@ const SidePanel: React.FC<SidePanelProps> = ({ yearOptions }) => {
<div>
<Typography
variant="h4"
fontFamily="Poppins, sans-serif"
sx={{
fontFamily: "Poppins, sans-serif",
fontWeight: 700,
color: "#111",
mt: 2,
Expand All @@ -448,7 +450,7 @@ const SidePanel: React.FC<SidePanelProps> = ({ yearOptions }) => {
<Typography
variant="body2"
color="#111"
fontFamily="Poppins, sans-serif"
sx={{ fontFamily: "Poppins, sans-serif" }}
>
{ts("instruction")}
</Typography>
Expand Down Expand Up @@ -493,8 +495,8 @@ const SidePanel: React.FC<SidePanelProps> = ({ yearOptions }) => {
</div>
<Typography
variant="h4"
fontFamily="Poppins, sans-serif"
sx={{
fontFamily: "Poppins, sans-serif",
fontWeight: 700,
color: "#111",
mt: 2,
Expand Down Expand Up @@ -575,8 +577,8 @@ const SidePanel: React.FC<SidePanelProps> = ({ yearOptions }) => {
</div>
<Typography
variant="h4"
fontFamily="Poppins, sans-serif"
sx={{
fontFamily: "Poppins, sans-serif",
fontWeight: 700,
color: "#111",
mt: 2,
Expand Down Expand Up @@ -667,21 +669,29 @@ const SidePanel: React.FC<SidePanelProps> = ({ yearOptions }) => {
mb: 3,
}}
>
<Typography variant="h6" fontWeight="bold">
<Typography variant="h6" sx={{ fontWeight: "bold" }}>
Map Guide
</Typography>
<IconButton onClick={() => setShowGuide(false)}>
<CloseIcon />
</IconButton>
</Box>
<Typography variant="subtitle1" fontWeight="bold" gutterBottom>
<Typography
variant="subtitle1"
gutterBottom
sx={{ fontWeight: "bold" }}
>
Summary
</Typography>
<Typography variant="body2" paragraph>
<Typography variant="body2" sx={{ mb: 2 }}>
hey there delilah, how is it like in new york city?
</Typography>

<Typography variant="subtitle1" fontWeight="bold" gutterBottom>
<Typography
variant="subtitle1"
gutterBottom
sx={{ fontWeight: "bold" }}
>
Usage
</Typography>
<Typography variant="body2">YO</Typography>
Expand Down
6 changes: 2 additions & 4 deletions frontend/src/pages/about.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,9 +44,8 @@ const About = () => {
<Box>
<Typography
variant="h4"
fontWeight="bold"
mb={2}
sx={{
mb: 2,
fontFamily: "Poppins, sans-serif",
fontSize: "24px",
fontWeight: "bold",
Expand Down Expand Up @@ -98,9 +97,8 @@ const About = () => {
>
<Typography
variant="h4"
fontWeight="bold"
mb={2}
sx={{
mb: 2,
fontFamily: "Poppins, sans-serif",
fontSize: "24px",
fontWeight: "bold",
Expand Down
Loading