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={
+
+ }
+ />
);
}
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 }) => {
,
]}
/>
-
+
))}
);