From 13bde8b32924c171f6e4ea498aea547fe552fd23 Mon Sep 17 00:00:00 2001 From: LuizFNJ Date: Sun, 22 Dec 2024 03:51:04 +0100 Subject: [PATCH 1/4] Change all typography antd for muy --- src/components/AletheiaTitle.tsx | 9 +- src/components/Claim/ClaimCard.tsx | 97 ++++++++----------- src/components/Claim/ClaimCardHeader.tsx | 38 ++++---- src/components/Claim/ClaimInfo.tsx | 36 +++---- src/components/Claim/ClaimView.tsx | 35 +++---- src/components/ClaimReview/ReviewContent.tsx | 25 ++--- .../CodeOfConduct/CodeOfConduct.tsx | 94 +++++++++--------- src/components/Debate/DebateGrid.tsx | 30 +++--- src/components/Label.tsx | 7 +- src/components/Metrics/ReviewStats.tsx | 4 +- .../Personality/MorePersonalities.tsx | 22 ++--- .../Personality/PersonalityView.tsx | 22 ++--- src/components/SectionTitle.tsx | 15 ++- src/components/SocialMediaShare.tsx | 15 ++- src/components/Subtitle.tsx | 12 +-- 15 files changed, 224 insertions(+), 237 deletions(-) diff --git a/src/components/AletheiaTitle.tsx b/src/components/AletheiaTitle.tsx index 9dbcc4d40..041c9ab52 100644 --- a/src/components/AletheiaTitle.tsx +++ b/src/components/AletheiaTitle.tsx @@ -1,11 +1,10 @@ import colors from "../styles/colors" -import { Typography } from "antd"; +import Typography from "@mui/material/Typography" -const { Title } = Typography const AletheiaTitle = (props) => { return ( - { }} > {props.children} - + ) } diff --git a/src/components/Claim/ClaimCard.tsx b/src/components/Claim/ClaimCard.tsx index e8aaf6c76..40644ed01 100644 --- a/src/components/Claim/ClaimCard.tsx +++ b/src/components/Claim/ClaimCard.tsx @@ -1,4 +1,4 @@ -import { Col, Comment, Row, Typography } from "antd"; +import { Grid, Typography } from "@mui/material" import React, { useEffect, useState } from "react"; import { useTranslation } from "next-i18next"; import ReviewColors from "../../constants/reviewColors"; @@ -7,7 +7,6 @@ import ClaimSummary from "./ClaimSummary"; import Button, { ButtonType } from "../Button"; import ClaimCardHeader from "./ClaimCardHeader"; import colors from "../../styles/colors"; -import styled from "styled-components"; import ClaimSummaryContent from "./ClaimSummaryContent"; import ClaimSpeechBody from "./ClaimSpeechBody"; import actions from "../../store/actions"; @@ -18,15 +17,6 @@ import { useAtom } from "jotai"; import { currentNameSpace } from "../../atoms/namespace"; import { NameSpaceEnum } from "../../types/Namespace"; -const { Paragraph } = Typography; - -const CommentStyled = styled(Comment)` - width: 100%; - .ant-comment-inner { - padding: 0; - } -`; - const ClaimCard = ({ personality, claim, @@ -87,51 +77,45 @@ const ClaimCard = ({ return ( - - - } - content={ - - {collapsed ? ( - - ) : ( - - )} - - } + + - - + {collapsed ? ( + + ) : ( + + )} + + + - )}{" "} - )} - - - + + + {!isInsideDebate && ( )} - - + + ); }; diff --git a/src/components/Claim/ClaimCardHeader.tsx b/src/components/Claim/ClaimCardHeader.tsx index d4aee555d..7a05b00c5 100644 --- a/src/components/Claim/ClaimCardHeader.tsx +++ b/src/components/Claim/ClaimCardHeader.tsx @@ -1,12 +1,10 @@ -import { Col, Row, Typography } from "antd"; +import { Grid, Typography } from "@mui/material" import { useTranslation } from "next-i18next"; import React from "react"; import colors from "../../styles/colors"; import { ContentModelEnum } from "../../types/enums"; import LocalizedDate from "../LocalizedDate"; -const { Paragraph } = Typography; - const ClaimCardHeader = ({ personality, date, @@ -23,8 +21,8 @@ const ClaimCardHeader = ({ const speechTypeTranslation = speechTypeMapping[claimType]; return ( - {personality && ( <> - {personality.name} - + - - + {personality.description} - - + + )} - + {!isImage ? ( - {speechTypeTranslation} - + ) : ( - - + )} - - + + ); }; diff --git a/src/components/Claim/ClaimInfo.tsx b/src/components/Claim/ClaimInfo.tsx index 208577fc4..d3f72a93e 100644 --- a/src/components/Claim/ClaimInfo.tsx +++ b/src/components/Claim/ClaimInfo.tsx @@ -1,21 +1,8 @@ import React from "react"; - -import { Typography } from "antd"; +import Typography from "@mui/material/Typography"; import { useTranslation } from "next-i18next"; import LocalizedDate from "../LocalizedDate"; import colors from "../../styles/colors"; -import styled from "styled-components"; - -const { Paragraph } = Typography; - -const ClaimInfoParagraph = styled(Paragraph)` - font-size: 10px; - font-weight: 400; - line-height: 15px; - margin-bottom: 0; - margin-top: 20px; - color: ${colors.blackSecondary}; -`; const ClaimInfo = ({ isImage, @@ -24,22 +11,35 @@ const ClaimInfo = ({ style = {}, }) => { const { t } = useTranslation(); + const textstyle = { + marginTop: 20, + color: colors.blackSecondary, + fontSize: 10, + lineHeight: "16px", + ...style + } return ( <> {!isImage ? ( - + {t("claim:cardHeader1")}    {t("claim:cardHeader2")}  {t(speechTypeTranslation)} - + ) : ( - + {t("claim:cardHeader3")}  - + )} ); diff --git a/src/components/Claim/ClaimView.tsx b/src/components/Claim/ClaimView.tsx index c5ee93ecd..29ecff779 100644 --- a/src/components/Claim/ClaimView.tsx +++ b/src/components/Claim/ClaimView.tsx @@ -1,4 +1,5 @@ -import { Affix, Col, Row, Typography } from "antd"; +import { Affix } from "antd"; +import { Grid, Typography} from "@mui/material" import React, { useEffect, useState } from "react"; import { ContentModelEnum, Roles, TargetModel } from "../../types/enums"; @@ -17,8 +18,6 @@ import claimApi from "../../api/claim"; import { currentUserRole } from "../../atoms/currentUser"; import { useAtom } from "jotai"; -const { Title } = Typography; - const ClaimView = ({ personality, claim, href, hideDescriptions }) => { const dispatch = useDispatch(); const { t } = useTranslation(); @@ -55,8 +54,8 @@ const ClaimView = ({ personality, claim, href, hideDescriptions }) => { /> )} - - + +
{personality && ( { )}
- - - + <Typography + variant="h1" style={{ + fontFamily:"initial", + fontWeight: 700, margin: "20px 0", fontSize: 20, lineHeight: 1.4, }} > {title} - + { dispatchPersonalityAndClaim } /> - + { )} /> - + {sources.length > 0 && ( <> - + {t("claim:sourceSectionTitle")} - + {
{stats.total !== 0 && }
- - + + { return ( - {title} {isImage && } @@ -32,7 +33,7 @@ const ReviewContent = ({ {linkText} )} - + {ellipsis && contentPath && linkText && ( { const { t } = useTranslation(); return ( - - {t("codeOfConduct:title")} - - + <CodeOfConductStyle item> + <Typography style={{ fontSize:40,textAlign:"center", fontFamily: "initial", fontWeight:600}} variant="h4"> + {t("codeOfConduct:title")} + </Typography> + <Typography className="title-conduct" variant="h4"> {t("codeOfConduct:introductionSection")} - + {t("codeOfConduct:introductionSectionFirstParagraph")} - + <Typography className="title-conduct" variant="h4"> {t("codeOfConduct:principlesSection")} - + {t("codeOfConduct:principlesSectionFirstParagraph")} - + <Typography className="title-conduct" variant="h4"> {t("codeOfConduct:dutiesSection")} - + {t("codeOfConduct:dutiesSectionFirstParagraph")} - + <Typography className="title-conduct" variant="h4"> {t("codeOfConduct:methodologySection")} - + {t("codeOfConduct:methodologySectionFirstParagraph")} @@ -59,68 +65,68 @@ const CodeOfConduct = () => { {t("codeOfConduct:methodologySectionSecondParagraph")} - + <Typography className="title-conduct" variant="h4"> {t("codeOfConduct:expectedBehaviorSection")} - + {t("codeOfConduct:expectedBehaviorSectionFirstParagraph")} - + <Typography className="title-conduct" variant="h5"> {t("codeOfConduct:expectedBehaviorSubSection1")} - + {t("codeOfConduct:expectedBehaviorSubSection1FirstParagraph")} - + <Typography className="title-conduct" variant="h5"> {t("codeOfConduct:expectedBehaviorSubSection2")} - + {t("codeOfConduct:expectedBehaviorSubSection2FirstParagraph")} - + <Typography className="title-conduct" variant="h4"> {t("codeOfConduct:unacceptableBehaviorSection")} - + {t("codeOfConduct:unacceptableBehaviorSectionFirstParagraph")} - + <Typography className="title-conduct" variant="h5"> {t("codeOfConduct:unacceptableBehaviorSubSection1")} - + {t( "codeOfConduct:unacceptableBehaviorSubSection1FirstParagraph" )} - + <Typography className="title-conduct" variant="h5"> {t("codeOfConduct:unacceptableBehaviorSubSection2")} - + {t( "codeOfConduct:unacceptableBehaviorSubSection2FirstParagraph" )} - + <Typography className="title-conduct" variant="h5"> {t("codeOfConduct:unacceptableBehaviorSubSection3")} - + {t( "codeOfConduct:unacceptableBehaviorSubSection3FirstParagraph" )} - + <Typography className="title-conduct" variant="h4"> {t("codeOfConduct:responsibilitiesSection")} - - + </Typography> + <Typography className="title-conduct" variant="h5"> {t("codeOfConduct:responsibilitiesSectionSubSection1")} - + {t( "codeOfConduct:responsibilitiesSectionSubSection1FirstParagraph" )} - + <Typography className="title-conduct" variant="h5"> {t("codeOfConduct:responsibilitiesSectionSubSection2")} - + {t( "codeOfConduct:responsibilitiesSectionSubSection2FirstParagraph" @@ -131,7 +137,7 @@ const CodeOfConduct = () => { "codeOfConduct:responsibilitiesSectionSubSection2SecondParagraph" )} - + ); }; diff --git a/src/components/Debate/DebateGrid.tsx b/src/components/Debate/DebateGrid.tsx index fa5d0ae05..c30be8b45 100644 --- a/src/components/Debate/DebateGrid.tsx +++ b/src/components/Debate/DebateGrid.tsx @@ -1,4 +1,4 @@ -import { Col, Row, Typography } from "antd"; +import { Grid, Typography } from "@mui/material" import { useTranslation } from "next-i18next"; import React from "react"; @@ -11,8 +11,6 @@ import { NameSpaceEnum } from "../../types/Namespace"; import { useAtom } from "jotai"; import { currentNameSpace } from "../../atoms/namespace"; -const { Title } = Typography; - const DebateGrid = ({ debates }) => { const { t } = useTranslation(); const [nameSpace] = useAtom(currentNameSpace); @@ -43,9 +41,9 @@ const DebateGrid = ({ debates }) => { width: "100%", }} > - - + <Typography + variant="h3" style={{ fontSize: "22px", lineHeight: "32px", @@ -56,30 +54,30 @@ const DebateGrid = ({ debates }) => { > {debateClaim.title} ( {t("debates:liveLabel")}) - - - + + {debateClaim.personalities.map((p) => { return ( - + - + ); })} - - + - + - - + + ); diff --git a/src/components/Label.tsx b/src/components/Label.tsx index d32f40929..215b1b51e 100644 --- a/src/components/Label.tsx +++ b/src/components/Label.tsx @@ -1,15 +1,14 @@ import React from "react"; -import { Typography } from "antd"; import colors from "../styles/colors"; -const { Text } = Typography; +import Typography from "@mui/material/Typography" const Label = ({ children, required = false }) => { return ( {required && "* "} - + {children} - + ); }; diff --git a/src/components/Metrics/ReviewStats.tsx b/src/components/Metrics/ReviewStats.tsx index 454eac7e7..c216afe7d 100644 --- a/src/components/Metrics/ReviewStats.tsx +++ b/src/components/Metrics/ReviewStats.tsx @@ -37,7 +37,7 @@ const ReviewStats = (props) => { type={ButtonType.blue} onClick={() => setShowAllReviews(true)} > - + {t(`personality:seeAllMetricsOverviews`)} { type={ButtonType.blue} onClick={() => setShowAllReviews(false)} > - + {t(`personality:seeLessMetricsOverviews`)} { const [isLoggedIn] = useAtom(isUserLoggedIn); return ( - - + - + - {!isLoggedIn && ( <> @@ -41,14 +41,14 @@ const MorePersonalities = ({ personalities, href, title }) => { )} - + - + )} - - + + ); }; diff --git a/src/components/Personality/PersonalityView.tsx b/src/components/Personality/PersonalityView.tsx index 924be48fa..d9181d3c4 100644 --- a/src/components/Personality/PersonalityView.tsx +++ b/src/components/Personality/PersonalityView.tsx @@ -1,4 +1,4 @@ -import { Col, Row } from "antd"; +import Grid from "@mui/material/Grid" import { useTranslation } from "next-i18next"; import ClaimList from "../Claim/ClaimList"; @@ -25,20 +25,20 @@ const PersonalityView = ({ personality, href, personalities }) => { url: href, }} /> - - + + - - + + - - + + - - + + - - + + { return ( - {props.children} - + ); }; diff --git a/src/components/SocialMediaShare.tsx b/src/components/SocialMediaShare.tsx index 7f72f15c5..9112534ca 100644 --- a/src/components/SocialMediaShare.tsx +++ b/src/components/SocialMediaShare.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { Typography } from "antd"; +import Typography from "@mui/material/Typography" import { FacebookShareButton, FacebookIcon, @@ -19,8 +19,6 @@ import { isUserLoggedIn } from "../atoms/currentUser"; import { NameSpaceEnum } from "../types/Namespace"; import { currentNameSpace } from "../atoms/namespace"; -const { Title } = Typography; - const SocialMediaShare = ({ quote = null, href = "", claim = null }) => { const { t } = useTranslation(); const [isLoggedIn] = useAtom(isUserLoggedIn); @@ -53,20 +51,21 @@ const SocialMediaShare = ({ quote = null, href = "", claim = null }) => { marginTop: "20px", }} > - {t("share:title")} - +