Skip to content

Commit 08126ec

Browse files
thesocialdevthesocialdev
authored
Merge pull request #1691 from AletheiaFact/feature-1478/change-ANTD-for-muy-Layout-component
Migrate antd to mui Layout component
2 parents 0bb2e51 + 4a639ff commit 08126ec

File tree

4 files changed

+69
-89
lines changed

4 files changed

+69
-89
lines changed

‎src/components/ContentWrapper.tsx‎

Lines changed: 18 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,7 @@
1-
import { Layout, Row } from "antd";
1+
import { Box, Grid } from "@mui/material";
22
import { useRouter } from "next/router";
3-
import styled from "styled-components";
4-
5-
import colors from "../styles/colors";
6-
import { queries } from "../styles/mediaQueries";
73
import BackButton from "./BackButton";
84

9-
const { Content } = Layout;
10-
11-
const StyledContent = styled(Content)`
12-
padding: 0;
13-
14-
${({ layout }: { layout: string }) =>
15-
layout === "mobile" &&
16-
`
17-
padding: 0 30%;
18-
19-
@media ${queries.sm} {
20-
padding: 0 15px;
21-
}
22-
`}
23-
`;
24-
255
const ContentWrapper = ({ children }) => {
266
const router = useRouter();
277

@@ -45,21 +25,31 @@ const ContentWrapper = ({ children }) => {
4525
: "desktop";
4626

4727
return (
48-
<StyledContent layout={layout}>
28+
<Box
29+
sx={{
30+
padding: layout === "mobile" ? "0 30%" : "0",
31+
"@media (max-width: 600px)": {
32+
padding: layout === "mobile" ? "0 15px" : "0",
33+
},
34+
}}
35+
>
4936
{layout === "mobile" && (
50-
<Row
51-
style={{
37+
<Grid
38+
container
39+
item
40+
xs={12}
41+
sx={{
5242
padding: "10px 30px",
53-
background: colors.white,
43+
backgroundColor: "white",
5444
boxShadow: "0px 2px 3px rgba(0, 0, 0, 0.15)",
55-
margin: "0px",
45+
margin: 0,
5646
}}
5747
>
5848
<BackButton />
59-
</Row>
49+
</Grid>
6050
)}
6151
{children}
62-
</StyledContent>
52+
</Box>
6353
);
6454
};
6555

‎src/components/Footer/Footer.tsx‎

Lines changed: 35 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
/* eslint-disable @next/next/no-img-element */
2-
import { Col, Layout, Row } from "antd";
2+
import { Box, Grid, Typography } from "@mui/material";
33
import { useTranslation } from "next-i18next";
44
import React, { useLayoutEffect, useState } from "react";
5-
65
import { useAppSelector } from "../../store/store";
76
import colors from "../../styles/colors";
87
import AletheiaSocialMediaFooter from "./AletheiaSocialMediaFooter";
@@ -20,35 +19,33 @@ const Footer = () => {
2019

2120
useLayoutEffect(() => {
2221
setBackgroundColor(
23-
nameSpace === NameSpaceEnum.Main
24-
? colors.primary
25-
: colors.secondary
22+
nameSpace === NameSpaceEnum.Main ? colors.primary : colors.secondary
2623
);
2724
}, [nameSpace]);
2825

2926
return (
30-
<Layout.Footer
31-
style={{
27+
<Box
28+
component="footer"
29+
sx={{
3230
textAlign: "center",
3331
background: backgroundColor,
3432
color: colors.white,
3533
padding: "32px",
3634
}}
3735
>
38-
<Row gutter={24} justify="center">
39-
<Col lg={8} md={10} sm={24}>
36+
<Grid container spacing={3} justifyContent="center">
37+
<Grid item lg={4} md={5} sm={12}>
4038
<AletheiaSocialMediaFooter />
41-
42-
<Row
43-
style={{
44-
marginTop: "10px",
45-
width: "100%",
39+
<Box
40+
sx={{
41+
mt: 1,
4642
textAlign: "center",
43+
display: "flex",
4744
flexDirection: "column",
48-
marginBottom: vw?.sm ? "32px" : "0",
45+
mb: vw?.sm ? 4 : 0,
4946
}}
5047
>
51-
<Col style={{ marginBottom: "16px" }}>
48+
<Box sx={{ mb: 2 }}>
5249
<a
5350
rel="license noreferrer"
5451
href="https://creativecommons.org/licenses/by-sa/4.0/"
@@ -61,7 +58,7 @@ const Footer = () => {
6158
src="https://i.creativecommons.org/l/by-sa/4.0/88x31.png"
6259
/>
6360
</a>
64-
</Col>
61+
</Box>
6562

6663
{t("footer:creativeCommons")}
6764
<a
@@ -77,49 +74,41 @@ const Footer = () => {
7774
Creative Commons Attribution-ShareAlike 4.0
7875
International License
7976
</a>
80-
</Row>
81-
</Col>
82-
<Col
83-
lg={8}
84-
md={10}
85-
sm={24}
86-
style={{
77+
</Box>
78+
</Grid>
79+
<Grid
80+
item
81+
lg={4}
82+
md={5}
83+
sm={12}
84+
sx={{
8785
display: "flex",
88-
justifyContent: "space-between",
8986
flexDirection: "column",
87+
justifyContent: "space-between",
9088
}}
9189
>
9290
<FooterInfo />
93-
<Row>
94-
<h3
95-
style={{
96-
width: "100%",
91+
<Box sx={{ mt: vw?.sm ? 8 : 0 }}>
92+
<Typography
93+
variant="h6"
94+
sx={{
9795
fontSize: "23px",
9896
color: colors.white,
99-
marginBottom: 0,
100-
marginTop: vw?.sm ? "64px" : "0",
97+
mb: 0,
10198
textAlign: "center",
10299
}}
103100
>
104101
{t("footer:copyright", {
105102
date: new Date().getFullYear(),
106103
})}
107-
</h3>
108-
</Row>
109-
</Col>
110-
<Col
111-
lg={8}
112-
md={10}
113-
sm={24}
114-
style={{
115-
display: "flex",
116-
flexDirection: "column",
117-
}}
118-
>
104+
</Typography>
105+
</Box>
106+
</Grid>
107+
<Grid item lg={4} md={5} sm={12}>
119108
<AletheiaInfo />
120-
</Col>
121-
</Row>
122-
</Layout.Footer>
109+
</Grid>
110+
</Grid>
111+
</Box>
123112
);
124113
};
125114

‎src/components/Header/Header.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useLayoutEffect, useState } from "react";
2-
import { Layout } from "antd";
2+
import { AppBar } from "@mui/material";
33
import HeaderContent from "./HeaderContent";
44
import colors from "../../styles/colors";
55
import { useAtom } from "jotai";
@@ -13,14 +13,12 @@ const AletheiaHeader = () => {
1313
);
1414
useLayoutEffect(() => {
1515
setHeaderBackgroundColor(
16-
nameSpace === NameSpaceEnum.Main
17-
? colors.primary
18-
: colors.secondary
16+
nameSpace === NameSpaceEnum.Main ? colors.primary : colors.secondary
1917
);
2018
}, [nameSpace]);
2119

2220
return (
23-
<Layout.Header
21+
<AppBar
2422
style={{
2523
position: "sticky",
2624
top: 0,
@@ -34,7 +32,7 @@ const AletheiaHeader = () => {
3432
}}
3533
>
3634
<HeaderContent />
37-
</Layout.Header>
35+
</AppBar>
3836
);
3937
};
4038

‎src/components/MainApp.tsx‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Layout } from "antd";
1+
import { Box } from "@mui/material";
22
import React from "react";
33

44
import { useMediaQueryBreakpoints } from "../hooks/useMediaQueryBreakpoints";
@@ -31,9 +31,14 @@ const MainApp = ({ children }) => {
3131
// Setup to provide breakpoints object on redux
3232
useMediaQueryBreakpoints();
3333

34+
const renderCTAButton = () =>
35+
localConfig.home.affixCTA ? (
36+
<AffixCTAButton copilotDrawerWidth={copilotDrawerWidth} />
37+
) : null;
38+
3439
return (
35-
<Layout
36-
style={{
40+
<Box
41+
sx={{
3742
minHeight: "100vh",
3843
width:
3944
copilotDrawerCollapsed || vw?.md
@@ -42,18 +47,16 @@ const MainApp = ({ children }) => {
4247
}}
4348
>
4449
<Sidebar />
45-
<Layout style={{ background: colors.white }}>
50+
<Box sx={{ background: colors.white }}>
4651
<Header />
4752
<DonationBanner />
48-
{localConfig.home.affixCTA ? (
49-
<AffixCTAButton copilotDrawerWidth={copilotDrawerWidth} />
50-
) : null}
53+
{renderCTAButton()}
5154
<ContentWrapper>{children}</ContentWrapper>
5255
<Footer />
5356
{enableOverlay && <OverlaySearchResults />}
54-
</Layout>
57+
</Box>
5558
<ClaimReviewDrawer />
56-
</Layout>
59+
</Box>
5760
);
5861
};
5962

0 commit comments

Comments
 (0)