From d343716b1bd75eaf14e08ac4295042990c5b7382 Mon Sep 17 00:00:00 2001
From: LuizFNJ <luizfnj3103@gmail.com>
Date: Fri, 17 Jan 2025 21:34:57 +0100
Subject: [PATCH 1/2] Migrate verification request page for mui material

---
 .../CreateVerificationRequestView.tsx         |  10 +-
 .../VerificationRequestAlert.tsx              |   6 +-
 .../VerificationRequestCard.tsx               | 108 ++++++++++--------
 .../VerificationRequestDisplay.style.tsx      |   4 +-
 .../VerificationRequestDisplay.tsx            |   2 +-
 .../VerificationRequestMainContent.tsx        |   6 +-
 .../VerificationRequestRecommendations.tsx    |   6 +-
 .../VerificationRequestResultList.tsx         |   7 +-
 8 files changed, 79 insertions(+), 70 deletions(-)

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 (
-        <Row justify="center" style={{ background: colors.lightNeutral }}>
-            <Col span={18}>
+        <Grid container justifyContent="center" style={{ background: colors.lightNeutral }}>
+            <Grid item xs={9}>
                 <DynamicVerificationRequestForm />
-            </Col>
-        </Row>
+            </Grid>
+        </Grid>
     );
 };
 
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 (
-        <Col span={24}>
+        <Grid item xs={12}>
             <AletheiaAlert {...alertContent} />
-        </Col>
+        </Grid>
     );
 };
 
diff --git a/src/components/VerificationRequest/VerificationRequestCard.tsx b/src/components/VerificationRequest/VerificationRequestCard.tsx
index c4e689be3..e3e40243f 100644
--- a/src/components/VerificationRequest/VerificationRequestCard.tsx
+++ b/src/components/VerificationRequest/VerificationRequestCard.tsx
@@ -1,4 +1,4 @@
-import { Col, Tag, Typography } from "antd";
+import { Grid, Chip, Typography } from "@mui/material";
 import React from "react";
 import styled from "styled-components";
 import CardBase from "../CardBase";
@@ -6,7 +6,7 @@ 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;
@@ -62,7 +62,6 @@ const truncateUrl = (url) => {
 const VerificationRequestCard = ({
     verificationRequest,
     actions = [],
-    expandable = true,
     t,
     style = {},
 }) => {
@@ -77,65 +76,77 @@ const VerificationRequestCard = ({
 
             tags.push(
                 <CustomTag
-                    color={colors.secondary}
+                    style={{ backgroundColor: colors.secondary, color: colors.white }}
                     key={`${verificationRequest._id}|publicationDate`}
-                >
-                    <strong>
-                        {t(
-                            "verificationRequest:verificationRequestTagPublicationDate"
-                        )}
-                        :
-                    </strong>{" "}
-                    {isValidDate ? (
-                        <LocalizedDate date={publicationDate} />
-                    ) : (
-                        verificationRequest.publicationDate
-                    )}
-                </CustomTag>
+                    label={
+                        <div>
+                            <strong>
+                                {t(
+                                    "verificationRequest:verificationRequestTagPublicationDate"
+                                )}
+                                :
+                            </strong>{" "}
+                            {isValidDate ? (
+                                <LocalizedDate date={publicationDate} />
+                            ) : (
+                                verificationRequest.publicationDate
+                            )}
+                        </div>
+                    }
+                />
             );
         }
         if (verificationRequest.date) {
             tags.push(
                 <CustomTag
-                    color={colors.neutralSecondary}
+                    style={{ backgroundColor: colors.neutralSecondary, color: colors.white }}
                     key={`${verificationRequest._id}|date`}
-                >
-                    <strong>
-                        {t("verificationRequest:verificationRequestTagDate")}:
-                    </strong>{" "}
-                    <LocalizedDate date={verificationRequest.date} />
-                </CustomTag>
+                    label={
+                        <div>
+                            <strong>
+                                {t("verificationRequest:verificationRequestTagDate")}:
+                            </strong>{" "}
+                            <LocalizedDate date={verificationRequest.date} />
+                        </div>
+                    }
+                />
             );
         }
         if (verificationRequest.heardFrom) {
             tags.push(
                 <CustomTag
-                    color={colors.tertiary}
+                    style={{ backgroundColor: colors.tertiary, color: colors.white }}
                     key={`${verificationRequest._id}|heardFrom`}
-                >
-                    <strong>
-                        {t(
-                            "verificationRequest:verificationRequestTagHeardFrom"
-                        )}
-                        :
-                    </strong>{" "}
-                    {verificationRequest.heardFrom}
-                </CustomTag>
+                    label={
+                        <div>
+                            <strong>
+                                {t(
+                                    "verificationRequest:verificationRequestTagHeardFrom"
+                                )}
+                                :
+                            </strong>{" "}
+                            {verificationRequest.heardFrom}
+                        </div>
+                    }
+                />
             );
         }
         if (verificationRequest.source) {
             tags.push(
                 <CustomTag
-                    color={colors.lightPrimary}
+                    style={{ backgroundColor: colors.lightPrimary, color: colors.white }}
                     key={`${verificationRequest._id}|source`}
-                >
-                    <strong>
-                        {t("verificationRequest:verificationRequestTagSource")}:
-                    </strong>
-                    <Link href={verificationRequest.source.href} passHref>
-                        <a>{truncateUrl(verificationRequest.source.href)}</a>
-                    </Link>
-                </CustomTag>
+                    label={
+                        <div>
+                            <strong>
+                                {t("verificationRequest:verificationRequestTagSource")}:
+                            </strong>
+                            <Link href={verificationRequest.source.href} passHref>
+                                <a>{truncateUrl(verificationRequest.source.href)}</a>
+                            </Link>
+                        </div>
+                    }
+                />
             );
         }
         return tags;
@@ -144,21 +155,20 @@ const VerificationRequestCard = ({
     return (
         <CardBase style={{ padding: 32, ...style }}>
             <ContentWrapper>
-                <Typography.Paragraph
+                <Typography
+                    variant="body1"
                     style={{
-                        marginBottom: 0,
                         color: colors.black,
                         margin: 0,
                         lineHeight: 1.6,
                     }}
-                    ellipsis={{ rows: 4, expandable }}
                 >
                     {verificationRequest.content}
-                </Typography.Paragraph>
+                </Typography>
                 <TagContainer>{getTags(verificationRequest)}</TagContainer>
             </ContentWrapper>
 
-            <Col
+            <Grid item
                 style={{
                     marginTop: 16,
                     display: "flex",
@@ -170,7 +180,7 @@ const VerificationRequestCard = ({
                 }}
             >
                 {actions ? actions.map((action) => action) : <></>}
-            </Col>
+            </Grid>
         </CardBase>
     );
 };
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 (
-        <VerificationRequestDisplayStyle>
+        <VerificationRequestDisplayStyle container>
             <VerificationRequestAlert
                 targetId={content?.group?.targetId}
                 verificationRequestId={content._id}
diff --git a/src/components/VerificationRequest/VerificationRequestMainContent.tsx b/src/components/VerificationRequest/VerificationRequestMainContent.tsx
index f85191da4..13967e728 100644
--- a/src/components/VerificationRequest/VerificationRequestMainContent.tsx
+++ b/src/components/VerificationRequest/VerificationRequestMainContent.tsx
@@ -1,4 +1,4 @@
-import { Typography } from "antd";
+import { Typography } from "@mui/material";
 import React from "react";
 import { useTranslation } from "next-i18next";
 import VerificationRequestCard from "./VerificationRequestCard";
@@ -19,9 +19,9 @@ const VerificationRequestMainContent = ({
 
     return (
         <main style={{ display: "flex", flexDirection: "column", gap: 16 }}>
-            <Typography.Title level={3}>
+            <Typography style={{ fontFamily: "serif", fontWeight: 600, fontSize: 26, lineHeight: 1.35 }} variant="h3">
                 {t("verificationRequest:verificationRequestTitle")}
-            </Typography.Title>
+            </Typography>
             <VerificationRequestCard verificationRequest={content} t={t} />
             {!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 && (
                 <section style={{ width: "100%" }}>
-                    <Typography.Title level={4}>
+                    <Typography style={{ fontFamily: "serif", fontWeight: 600, fontSize: 26, lineHeight: 1.35 }} variant="h4">
                         {t("verificationRequest:recommendationTitle")}
-                    </Typography.Title>
+                    </Typography>
                     <VerificationRequestResultList results={recommendations} />
                 </section>
             )}
diff --git a/src/components/VerificationRequest/VerificationRequestResultList.tsx b/src/components/VerificationRequest/VerificationRequestResultList.tsx
index 56caf9abf..4fe938f53 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,13 +27,12 @@ const VerificationRequestResultList = ({ results }) => {
         <VerificationRequestResultListStyled>
             {results?.length > 0 &&
                 results.map((verificationRequest) => (
-                    <Col
+                    <Grid item
                         style={{ width: "300px" }}
                         key={verificationRequest._id}
                     >
                         <VerificationRequestCard
                             verificationRequest={verificationRequest}
-                            expandable={false}
                             t={t}
                             style={{ minHeight: "100%" }}
                             actions={[
@@ -61,7 +60,7 @@ const VerificationRequestResultList = ({ results }) => {
                                 </AletheiaButton>,
                             ]}
                         />
-                    </Col>
+                    </Grid>
                 ))}
         </VerificationRequestResultListStyled>
     );

From 17b522dfcee40bb7fa539b145285306398da309b Mon Sep 17 00:00:00 2001
From: LuizFNJ <luizfnj3103@gmail.com>
Date: Sat, 18 Jan 2025 16:08:58 +0100
Subject: [PATCH 2/2] Functionality to manually expand text

---
 public/locales/en/verificationRequest.json    |  3 +-
 public/locales/pt/verificationRequest.json    |  3 +-
 .../VerificationRequestCard.tsx               | 36 +++++++++++++++++--
 .../VerificationRequestResultList.tsx         |  1 +
 4 files changed, 39 insertions(+), 4 deletions(-)

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/VerificationRequestCard.tsx b/src/components/VerificationRequest/VerificationRequestCard.tsx
index e3e40243f..b4e881801 100644
--- a/src/components/VerificationRequest/VerificationRequestCard.tsx
+++ b/src/components/VerificationRequest/VerificationRequestCard.tsx
@@ -1,5 +1,5 @@
-import { Grid, Chip, Typography } from "@mui/material";
-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";
@@ -62,9 +62,25 @@ const truncateUrl = (url) => {
 const VerificationRequestCard = ({
     verificationRequest,
     actions = [],
+    expandable = true,
     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) {
@@ -156,15 +172,31 @@ const VerificationRequestCard = ({
         <CardBase style={{ padding: 32, ...style }}>
             <ContentWrapper>
                 <Typography
+                    ref={textRef}
                     variant="body1"
                     style={{
                         color: colors.black,
                         margin: 0,
                         lineHeight: 1.6,
+                        display: "-webkit-box",
+                        WebkitBoxOrient: "vertical",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        WebkitLineClamp: visible ? "none" : 3,
                     }}
+
                 >
                     {verificationRequest.content}
                 </Typography>
+                {expandable && !visible && isOverflowing && (
+                    <Button
+                        variant="text"
+                        style={{ marginLeft: "auto", color: colors.lightPrimary, textDecoration: 'underline', padding: 0 }}
+                        onClick={handleToggle}
+                    >
+                        {t("verificationRequest:showText")}
+                    </Button>
+                )}
                 <TagContainer>{getTags(verificationRequest)}</TagContainer>
             </ContentWrapper>
 
diff --git a/src/components/VerificationRequest/VerificationRequestResultList.tsx b/src/components/VerificationRequest/VerificationRequestResultList.tsx
index 4fe938f53..541c25dba 100644
--- a/src/components/VerificationRequest/VerificationRequestResultList.tsx
+++ b/src/components/VerificationRequest/VerificationRequestResultList.tsx
@@ -33,6 +33,7 @@ const VerificationRequestResultList = ({ results }) => {
                     >
                         <VerificationRequestCard
                             verificationRequest={verificationRequest}
+                            expandable={false}
                             t={t}
                             style={{ minHeight: "100%" }}
                             actions={[