Skip to content

Commit f99324b

Browse files
thesocialdevthesocialdev
authored
Merge pull request #1676 from AletheiaFact/1510-migrate-buttons
Migration HideContentButton and About
2 parents 08126ec + 435db3a commit f99324b

File tree

2 files changed

+94
-100
lines changed

2 files changed

+94
-100
lines changed

‎src/components/About/About.tsx‎

Lines changed: 87 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -1,159 +1,153 @@
11
/* eslint-disable jsx-a11y/anchor-has-content */
2-
import { Row, Typography, Button } from "antd";
3-
import colors from "../../styles/colors";
4-
import { Trans, useTranslation } from "next-i18next";
2+
import React from "react";
3+
import { Box, Typography, Button } from "@mui/material";
4+
import { useTranslation, Trans } from "next-i18next";
5+
import DescriptionIcon from "@mui/icons-material/Description";
56
import AletheiaAlert from "../AletheiaAlert";
6-
import { FilePdfOutlined } from "@ant-design/icons";
77
import AletheiaVideo from "../AletheiaVideo";
8+
import colors from "../../styles/colors";
89

910
const About = () => {
1011
const { t } = useTranslation();
1112
const paragraphStyle = {
12-
margin: "10px 0px",
13+
margin: "10px 0",
1314
width: "100%",
1415
};
16+
1517
return (
16-
<Row
17-
style={{
18+
<Box
19+
sx={{
1820
color: colors.primary,
19-
justifyContent: "center",
21+
display: "flex",
22+
flexDirection: "column",
23+
alignItems: "center",
2024
width: "100%",
2125
fontSize: "1rem",
2226
letterSpacing: "1px",
2327
fontWeight: 600,
2428
padding: "20px",
2529
}}
2630
>
27-
<div
28-
style={{
29-
padding: "20px 0",
30-
width: "100%",
31-
}}
32-
>
31+
<Box sx={{ padding: "20px 0", width: "100%" }}>
3332
<AletheiaVideo />
34-
</div>
35-
<AletheiaAlert
36-
type="info"
37-
message={
38-
<>
39-
{t("about:alertInfo")}{" "}
40-
<a
41-
style={{ whiteSpace: "pre-wrap" }}
42-
href="https://github.com/AletheiaFact/aletheia"
43-
target="_blank"
44-
rel="noreferrer"
45-
>
46-
https://github.com/AletheiaFact/aletheia
47-
</a>
48-
</>
49-
}
50-
action={
51-
<Button
52-
type="primary"
53-
size="small"
54-
shape="round"
55-
icon={<FilePdfOutlined />}
56-
href="https://docs.google.com/viewer?url=https://raw.githubusercontent.com/AletheiaFact/miscellaneous/290b19847f0da521963f74e7947d7863bf5d5624/documents/org_legal_register.pdf"
33+
</Box>
34+
<AletheiaAlert
35+
type="info"
36+
message={
37+
<>
38+
{t("about:alertInfo")}{" "}
39+
<a
40+
style={{ whiteSpace: "pre-wrap" }}
41+
href="https://github.com/AletheiaFact/aletheia"
5742
target="_blank"
5843
rel="noreferrer"
59-
style={{
60-
position: "absolute",
61-
bottom: "15px",
62-
right: "15px",
63-
}}
6444
>
65-
{t("about:labelButton")}
66-
</Button>
67-
}
68-
/>
69-
<Row style={{ width: "100%", textAlign: "center" }}>
70-
<Typography.Title style={{ width: "100%" }}>
71-
{t("about:title")}
72-
</Typography.Title>
73-
</Row>
74-
<Row style={paragraphStyle}>{t("about:intro")}</Row>
75-
<Row style={{ width: "100%", textAlign: "center" }}>
76-
<Typography.Title style={{ width: "100%" }} level={3}>
77-
{t("about:visionTitle")}
78-
</Typography.Title>
79-
</Row>
80-
<Row style={paragraphStyle}>{t("about:visionContent")}</Row>
81-
<Row style={{ width: "100%", textAlign: "center" }}>
82-
<Typography.Title style={{ width: "100%" }} level={3}>
83-
{t("about:missionTitle")}
84-
</Typography.Title>
85-
</Row>
86-
<Row style={paragraphStyle}>{t("about:missionContent")}</Row>
87-
<Row style={{ width: "100%", textAlign: "center" }}>
88-
<Typography.Title style={{ width: "100%" }} level={3}>
89-
{t("about:valuesTitle")}
90-
</Typography.Title>
91-
</Row>
92-
<Row style={paragraphStyle}>
45+
https://github.com/AletheiaFact/aletheia
46+
</a>
47+
</>
48+
}
49+
action={
50+
<Button
51+
variant="contained"
52+
size="small"
53+
startIcon={<DescriptionIcon />}
54+
href="https://docs.google.com/viewer?url=https://raw.githubusercontent.com/AletheiaFact/miscellaneous/290b19847f0da521963f74e7947d7863bf5d5624/documents/org_legal_register.pdf"
55+
target="_blank"
56+
rel="noreferrer"
57+
sx={{
58+
position: "absolute",
59+
bottom: "15px",
60+
right: "15px",
61+
}}
62+
>
63+
{t("about:labelButton")}
64+
</Button>
65+
}
66+
/>
67+
<Box sx={{ textAlign: "center", width: "100%" }}>
68+
<Typography variant="h3">{t("about:title")}</Typography>
69+
</Box>
70+
<Box sx={paragraphStyle}>
71+
<p>{t("about:intro")}</p>
72+
</Box>
73+
<Box sx={{ textAlign: "center", width: "100%" }}>
74+
<Typography variant="h3">{t("about:visionTitle")}</Typography>
75+
</Box>
76+
<Box sx={paragraphStyle}>
77+
<p>{t("about:visionContent")}</p>
78+
</Box>
79+
<Box sx={{ textAlign: "center", width: "100%" }}>
80+
<Typography variant="h3">{t("about:missionTitle")}</Typography>
81+
</Box>
82+
<Box sx={paragraphStyle}>
83+
<p>{t("about:missionContent")}</p>
84+
</Box>
85+
<Box sx={{ textAlign: "center", width: "100%" }}>
86+
<Typography variant="h3">{t("about:valuesTitle")}</Typography>
87+
</Box>
88+
<Box sx={paragraphStyle}>
9389
<ul>
9490
<li key={1}>{t("about:valueAccessibility")}</li>
9591
<li key={2}>{t("about:valueCredibility")}</li>
9692
<li key={3}>{t("about:valueAutonomy")}</li>
9793
</ul>
98-
</Row>
99-
<Row style={{ width: "100%", textAlign: "center" }}>
100-
<Typography.Title style={{ width: "100%" }} level={3}>
101-
{t("about:fullTextTitle")}
102-
</Typography.Title>
103-
</Row>
104-
<Row style={paragraphStyle}>
94+
</Box>
95+
<Box sx={{ textAlign: "center", width: "100%" }}>
96+
<Typography variant="h3">{t("about:fullTextTitle")}</Typography>
97+
</Box>
98+
<Box sx={paragraphStyle}>
10599
<p>
106100
<Trans
107-
i18nKey={"about:firstParagraph"}
101+
i18nKey="about:firstParagraph"
108102
components={[
109103
<a
110104
style={{ whiteSpace: "pre-wrap" }}
111105
href="https://github.com/AletheiaFact/aletheia"
112106
target="_blank"
113107
rel="noreferrer"
114-
></a>,
108+
/>,
115109
<a
116110
style={{ whiteSpace: "pre-wrap" }}
117111
href="https://builders.mozilla.community/programs.html#open-lab"
118112
target="_blank"
119113
rel="noreferrer"
120-
></a>,
114+
/>,
121115
]}
122116
/>
123117
</p>
124-
</Row>
125-
<Row style={paragraphStyle}>
118+
</Box>
119+
<Box sx={paragraphStyle}>
126120
<p>
127121
<Trans
128-
i18nKey={"about:secondParagraph"}
122+
i18nKey="about:secondParagraph"
129123
components={[
130124
<a
131125
style={{ whiteSpace: "pre-wrap" }}
132126
href="https://wikipedia.org"
133127
target="_blank"
134128
rel="noreferrer"
135-
></a>,
129+
/>,
136130
<a
137131
style={{ whiteSpace: "pre-wrap" }}
138132
href="https://demagog.cz/"
139133
target="_blank"
140134
rel="noreferrer"
141-
></a>,
135+
/>,
142136
]}
143137
/>
144138
</p>
145-
</Row>
146-
<Row style={paragraphStyle}>
139+
</Box>
140+
<Box sx={paragraphStyle}>
147141
<p>
148-
<Trans i18nKey={"about:thirdParagraph"} />
142+
<Trans i18nKey="about:thirdParagraph" />
149143
</p>
150-
</Row>
151-
<Row style={paragraphStyle}>
144+
</Box>
145+
<Box sx={paragraphStyle}>
152146
<p>
153-
<Trans i18nKey={"about:forthParagraph"} />
147+
<Trans i18nKey="about:forthParagraph" />
154148
</p>
155-
</Row>
156-
</Row>
149+
</Box>
150+
</Box>
157151
);
158152
};
159153

‎src/components/HideContentButton.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from "react";
2-
import { Button } from "@mui/material";
3-
import { VisibilityOff, Visibility } from "@mui/icons-material";
2+
import { IconButton } from "@mui/material";
3+
import { Visibility, VisibilityOff } from "@mui/icons-material";
44
import colors from "../styles/colors";
55
import { NameSpaceEnum } from "../types/Namespace";
66
import { useAtom } from "jotai";
@@ -22,13 +22,13 @@ const HideContentButton = ({ hide, handleHide, handleUnhide, style = {} }) => {
2222
return (
2323
<div style={{ ...style }}>
2424
{hide ? (
25-
<Button onClick={handleHide} style={buttonStyle}>
25+
<IconButton onClick={handleHide} style={buttonStyle}>
2626
<Visibility fontSize="small"/>
27-
</Button>
27+
</IconButton>
2828
) : (
29-
<Button onClick={handleUnhide} style={buttonStyle}>
30-
<VisibilityOff fontSize="small"/>
31-
</Button>
29+
<IconButton onClick={handleUnhide} style={buttonStyle}>
30+
<VisibilityOff fontSize="small" />
31+
</IconButton>
3232
)}
3333
</div>
3434
);

0 commit comments

Comments
 (0)