Skip to content
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

Change all typography antd for muy #1683

Open
wants to merge 2 commits into
base: stage
Choose a base branch
from
Open

Change all typography antd for muy #1683

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d7a5f75
Change all typography antd for muy
LuizFNJ Dec 22, 2024
dff2f70
Create useeffect to replace offsetButton affix native function
LuizFNJ Dec 22, 2024
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
9 changes: 4 additions & 5 deletions src/components/AletheiaTitle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<Title
level={props.level}
<Typography
variant={props.variant}
style={{
fontSize: 14,
color: colors.white,
Expand All @@ -15,7 +14,7 @@ const AletheiaTitle = (props) => {
}}
>
{props.children}
</Title>
</Typography>
)
}

Expand Down
97 changes: 41 additions & 56 deletions src/components/Claim/ClaimCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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";
Expand All @@ -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,
Expand Down Expand Up @@ -87,51 +77,45 @@ const ClaimCard = ({

return (
<CardBase style={{ padding: "16px 12px" }}>
<Row style={{ width: "100%" }}>
<CommentStyled
author={
<ClaimCardHeader
personality={personality}
date={claim?.date}
claimType={claim?.contentModel}
/>
}
content={
<ClaimSummary
style={{
padding: "12px 16px",
width: "100%",
}}
>
{collapsed ? (
<ClaimSummaryContent
claimTitle={claim?.title}
claimContent={claimContent}
contentModel={claim?.contentModel}
href={href}
/>
) : (
<ClaimSpeechBody
handleSentenceClick={
dispatchPersonalityAndClaim
}
paragraphs={paragraphs}
showHighlights={true}
/>
)}
</ClaimSummary>
}
<Grid container style={{ width: "100%" }}>
<ClaimCardHeader
personality={personality}
date={claim?.date}
claimType={claim?.contentModel}
/>
</Row>
<Row
<ClaimSummary
style={{
padding: "12px 16px",
width: "100%",
}}
>
{collapsed ? (
<ClaimSummaryContent
claimTitle={claim?.title}
claimContent={claimContent}
contentModel={claim?.contentModel}
href={href}
/>
) : (
<ClaimSpeechBody
handleSentenceClick={
dispatchPersonalityAndClaim
}
paragraphs={paragraphs}
showHighlights={true}
/>
)}
</ClaimSummary>
</Grid>
<Grid container
style={{
justifyContent:"space-between",
padding: "4px 15px 0 0",
width: "100%",
}}
justify="space-between"
>
<Col
span={16}
<Grid item
xs={8}
style={{
display: "flex",
flexWrap: "wrap",
Expand All @@ -152,7 +136,8 @@ const ClaimCard = ({
})}
</p>
)}{" "}
<Paragraph
<Typography
variant="body1"
style={{
fontSize: "10px",
lineHeight: "18px",
Expand All @@ -178,9 +163,9 @@ const ClaimCard = ({
({review?.count})
</span>
)}
</Paragraph>
</Col>
<Col>
</Typography>
</Grid>
<Grid item>
{!isInsideDebate && (
<Button
type={ButtonType.blue}
Expand All @@ -201,8 +186,8 @@ const ClaimCard = ({
</span>
</Button>
)}
</Col>
</Row>
</Grid>
</Grid>
</CardBase>
);
};
Expand Down
38 changes: 20 additions & 18 deletions src/components/Claim/ClaimCardHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -23,16 +21,17 @@ const ClaimCardHeader = ({

const speechTypeTranslation = speechTypeMapping[claimType];
return (
<Col
span={24}
<Grid item
xs={12}
style={{
color: colors.blackSecondary,
width: "100%",
}}
>
{personality && (
<>
<Paragraph
<Typography
variant="body1"
style={{
fontSize: "14px",
lineHeight: "20px",
Expand All @@ -42,10 +41,11 @@ const ClaimCardHeader = ({
}}
>
{personality.name}
</Paragraph>
</Typography>

<Row>
<Paragraph
<Grid container>
<Typography
variant="body1"
style={{
fontSize: 10,
fontWeight: 400,
Expand All @@ -54,13 +54,14 @@ const ClaimCardHeader = ({
}}
>
{personality.description}
</Paragraph>
</Row>
</Typography>
</Grid>
</>
)}
<Row>
<Grid container>
{!isImage ? (
<Paragraph
<Typography
variant="body1"
style={{
fontSize: 10,
fontWeight: 400,
Expand All @@ -76,9 +77,10 @@ const ClaimCardHeader = ({
<span style={{ fontWeight: 700 }}>
{speechTypeTranslation}
</span>
</Paragraph>
</Typography>
) : (
<Paragraph
<Typography
variant="body1"
style={{
fontSize: 10,
fontWeight: 400,
Expand All @@ -90,10 +92,10 @@ const ClaimCardHeader = ({
{t("claim:cardHeader3")}
&nbsp;
<LocalizedDate date={date || new Date()} />
</Paragraph>
</Typography>
)}
</Row>
</Col>
</Grid>
</Grid>
);
};

Expand Down
36 changes: 18 additions & 18 deletions src/components/Claim/ClaimInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -24,22 +11,35 @@ const ClaimInfo = ({
style = {},
}) => {
const { t } = useTranslation();
const textstyle = {
marginTop: 20,
color: colors.blackSecondary,
fontSize: 10,
lineHeight: "16px",
...style
}

return (
<>
{!isImage ? (
<ClaimInfoParagraph style={style}>
<Typography
variant="body1"
style={textstyle}
>
{t("claim:cardHeader1")}&nbsp;
<LocalizedDate date={date || new Date()} />
&nbsp;
{t("claim:cardHeader2")}&nbsp;
<strong>{t(speechTypeTranslation)}</strong>
</ClaimInfoParagraph>
</Typography>
) : (
<ClaimInfoParagraph style={style}>
<Typography
variant="body1"
style={textstyle}
>
{t("claim:cardHeader3")}&nbsp;
<LocalizedDate date={date || new Date()} />
</ClaimInfoParagraph>
</Typography>
)}
</>
);
Expand Down
Loading
Loading