diff --git a/public/locales/en/verificationRequest.json b/public/locales/en/verificationRequest.json index e9b209c62..b2e9953f3 100644 --- a/public/locales/en/verificationRequest.json +++ b/public/locales/en/verificationRequest.json @@ -50,5 +50,6 @@ "topicsFilterOption": "Topics", "contentFilterOption": "Content", "filterByContentLabel": "Filter by Content", - "applyButtonLabel": "Apply" + "applyButtonLabel": "Apply", + "showText": "Show" } \ No newline at end of file diff --git a/public/locales/pt/verificationRequest.json b/public/locales/pt/verificationRequest.json index 43a860028..a5a120e80 100644 --- a/public/locales/pt/verificationRequest.json +++ b/public/locales/pt/verificationRequest.json @@ -50,5 +50,6 @@ "topicsFilterOption": "Tópicos", "contentFilterOption": "Conteudo", "filterByContentLabel": "Filtrar por Conteudo", - "applyButtonLabel": "Aplicar" + "applyButtonLabel": "Aplicar", + "showText": "Mostrar" } diff --git a/src/components/VerificationRequest/CreateVerificationRequest/CreateVerificationRequestView.tsx b/src/components/VerificationRequest/CreateVerificationRequest/CreateVerificationRequestView.tsx index f1c494808..83ff9a6e4 100644 --- a/src/components/VerificationRequest/CreateVerificationRequest/CreateVerificationRequestView.tsx +++ b/src/components/VerificationRequest/CreateVerificationRequest/CreateVerificationRequestView.tsx @@ -1,15 +1,15 @@ import React from "react"; -import { Col, Row } from "antd"; +import { Grid } from "@mui/material"; import colors from "../../../styles/colors"; import DynamicVerificationRequestForm from "./DynamicVerificationRequestForm"; const CreateVerificationRequestView = () => { return ( - - + + - - + + ); }; diff --git a/src/components/VerificationRequest/VerificationRequestAlert.tsx b/src/components/VerificationRequest/VerificationRequestAlert.tsx index 197231aef..4f5aa2a4d 100644 --- a/src/components/VerificationRequest/VerificationRequestAlert.tsx +++ b/src/components/VerificationRequest/VerificationRequestAlert.tsx @@ -1,5 +1,5 @@ import React, { useContext, useMemo } from "react"; -import { Col } from "antd"; +import { Grid } from "@mui/material"; import AletheiaButton from "../Button"; import { useTranslation } from "next-i18next"; import AletheiaAlert from "../AletheiaAlert"; @@ -88,9 +88,9 @@ const VerificationRequestAlert = ({ targetId, verificationRequestId }) => { } return ( - + - + ); }; diff --git a/src/components/VerificationRequest/VerificationRequestCard.tsx b/src/components/VerificationRequest/VerificationRequestCard.tsx index c4e689be3..b4e881801 100644 --- a/src/components/VerificationRequest/VerificationRequestCard.tsx +++ b/src/components/VerificationRequest/VerificationRequestCard.tsx @@ -1,12 +1,12 @@ -import { Col, Tag, Typography } from "antd"; -import React from "react"; +import { Grid, Chip, Typography, Button } from "@mui/material"; +import React, { useEffect, useRef, useState } from "react"; import styled from "styled-components"; import CardBase from "../CardBase"; import Link from "next/link"; import colors from "../../styles/colors"; import LocalizedDate from "../LocalizedDate"; -const CustomTag = styled(Tag)` +const CustomTag = styled(Chip)` border-radius: 4px; font-size: 10px; margin-bottom: 4px; @@ -66,6 +66,21 @@ const VerificationRequestCard = ({ t, style = {}, }) => { + const [visible, setVisible] = useState(false); + const [isOverflowing, setIsOverflowing] = useState(false); + const textRef = useRef(null); + + const handleToggle = () => { + setVisible(true); + }; + + useEffect(() => { + if (textRef.current) { + const isOverflow = textRef.current.scrollHeight > textRef.current.clientHeight; + setIsOverflowing(isOverflow); + } + }, [verificationRequest.content]); + const getTags = (verificationRequest) => { const tags = []; if (verificationRequest.publicationDate) { @@ -77,65 +92,77 @@ const VerificationRequestCard = ({ tags.push( - - {t( - "verificationRequest:verificationRequestTagPublicationDate" - )} - : - {" "} - {isValidDate ? ( - - ) : ( - verificationRequest.publicationDate - )} - + label={ +
+ + {t( + "verificationRequest:verificationRequestTagPublicationDate" + )} + : + {" "} + {isValidDate ? ( + + ) : ( + verificationRequest.publicationDate + )} +
+ } + /> ); } if (verificationRequest.date) { tags.push( - - {t("verificationRequest:verificationRequestTagDate")}: - {" "} - - + label={ +
+ + {t("verificationRequest:verificationRequestTagDate")}: + {" "} + +
+ } + /> ); } if (verificationRequest.heardFrom) { tags.push( - - {t( - "verificationRequest:verificationRequestTagHeardFrom" - )} - : - {" "} - {verificationRequest.heardFrom} - + label={ +
+ + {t( + "verificationRequest:verificationRequestTagHeardFrom" + )} + : + {" "} + {verificationRequest.heardFrom} +
+ } + /> ); } if (verificationRequest.source) { tags.push( - - {t("verificationRequest:verificationRequestTagSource")}: - - - {truncateUrl(verificationRequest.source.href)} - - + label={ +
+ + {t("verificationRequest:verificationRequestTagSource")}: + + + {truncateUrl(verificationRequest.source.href)} + +
+ } + /> ); } return tags; @@ -144,21 +171,36 @@ const VerificationRequestCard = ({ return ( - {verificationRequest.content} - + + {expandable && !visible && isOverflowing && ( + + )} {getTags(verificationRequest)} - {actions ? actions.map((action) => action) : <>} - + ); }; diff --git a/src/components/VerificationRequest/VerificationRequestDisplay.style.tsx b/src/components/VerificationRequest/VerificationRequestDisplay.style.tsx index 7c8411f2e..7d4d59885 100644 --- a/src/components/VerificationRequest/VerificationRequestDisplay.style.tsx +++ b/src/components/VerificationRequest/VerificationRequestDisplay.style.tsx @@ -1,8 +1,8 @@ import styled from "styled-components"; import { queries } from "../../styles/mediaQueries"; -import { Row } from "antd"; +import { Grid } from "@mui/material"; -const VerificationRequestDisplayStyle = styled(Row)` +const VerificationRequestDisplayStyle = styled(Grid)` display: flex; gap: 16px; diff --git a/src/components/VerificationRequest/VerificationRequestDisplay.tsx b/src/components/VerificationRequest/VerificationRequestDisplay.tsx index 5717d068c..c8eef1de4 100644 --- a/src/components/VerificationRequest/VerificationRequestDisplay.tsx +++ b/src/components/VerificationRequest/VerificationRequestDisplay.tsx @@ -28,7 +28,7 @@ const VerificationRequestDisplay = ({ content }) => { }; return ( - + - + {t("verificationRequest:verificationRequestTitle")} - + {!vw.xs && role !== Roles.Regular && diff --git a/src/components/VerificationRequest/VerificationRequestRecommendations.tsx b/src/components/VerificationRequest/VerificationRequestRecommendations.tsx index f6eac33b0..a804a41c1 100644 --- a/src/components/VerificationRequest/VerificationRequestRecommendations.tsx +++ b/src/components/VerificationRequest/VerificationRequestRecommendations.tsx @@ -1,5 +1,5 @@ import React, { useContext } from "react"; -import { Typography } from "antd"; +import { Typography } from "@mui/material"; import { useTranslation } from "next-i18next"; import { VerificationRequestContext } from "./VerificationRequestProvider"; import VerificationRequestResultList from "./VerificationRequestResultList"; @@ -12,9 +12,9 @@ const VerificationRequestRecommendations = () => { <> {recommendations?.length > 0 && (
- + {t("verificationRequest:recommendationTitle")} - +
)} diff --git a/src/components/VerificationRequest/VerificationRequestResultList.tsx b/src/components/VerificationRequest/VerificationRequestResultList.tsx index 56caf9abf..541c25dba 100644 --- a/src/components/VerificationRequest/VerificationRequestResultList.tsx +++ b/src/components/VerificationRequest/VerificationRequestResultList.tsx @@ -1,4 +1,4 @@ -import { Col } from "antd"; +import { Grid } from "@mui/material"; import React, { useContext, useState } from "react"; import VerificationRequestCard from "./VerificationRequestCard"; import AletheiaButton from "../Button"; @@ -27,7 +27,7 @@ const VerificationRequestResultList = ({ results }) => { {results?.length > 0 && results.map((verificationRequest) => ( - @@ -61,7 +61,7 @@ const VerificationRequestResultList = ({ results }) => { , ]} /> - + ))} );