Migrate verification request page to mui material

public/locales/en/verificationRequest.json

@@ -50,5 +50,6 @@
     "topicsFilterOption": "Topics",
     "contentFilterOption": "Content",
     "filterByContentLabel": "Filter by Content",
-    "applyButtonLabel": "Apply"
+    "applyButtonLabel": "Apply",
+    "showText": "Show"
 }

public/locales/pt/verificationRequest.json

@@ -50,5 +50,6 @@
     "topicsFilterOption": "Tópicos",
     "contentFilterOption": "Conteudo",
     "filterByContentLabel": "Filtrar por Conteudo",
-    "applyButtonLabel": "Aplicar"
+    "applyButtonLabel": "Aplicar",
+    "showText": "Mostrar"
 }

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>
     );
 };
 

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>
     );
 };
 

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(
                 <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 +171,36 @@ const VerificationRequestCard = ({
     return (
         <CardBase style={{ padding: 32, ...style }}>
             <ContentWrapper>
-                <Typography.Paragraph
+                <Typography
+                    ref={textRef}
+                    variant="body1"
                     style={{
-                        marginBottom: 0,
                         color: colors.black,
                         margin: 0,
                         lineHeight: 1.6,
+                        display: "-webkit-box",
+                        WebkitBoxOrient: "vertical",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        WebkitLineClamp: visible ? "none" : 3,
                     }}
-                    ellipsis={{ rows: 4, expandable }}
+
                 >
                     {verificationRequest.content}
-                </Typography.Paragraph>
+                </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>
 
-            <Col
+            <Grid item
                 style={{
                     marginTop: 16,
                     display: "flex",
@@ -170,7 +212,7 @@ const VerificationRequestCard = ({
                 }}
             >
                 {actions ? actions.map((action) => action) : <></>}
-            </Col>
+            </Grid>
         </CardBase>
     );
 };

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;
 

src/components/VerificationRequest/VerificationRequestDisplay.tsx

@@ -28,7 +28,7 @@ const VerificationRequestDisplay = ({ content }) => {
     };
 
     return (
-        <VerificationRequestDisplayStyle>
+        <VerificationRequestDisplayStyle container>
             <VerificationRequestAlert
                 targetId={content?.group?.targetId}
                 verificationRequestId={content._id}

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 &&

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>
             )}

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 }) => {
         <VerificationRequestResultListStyled>
             {results?.length > 0 &&
                 results.map((verificationRequest) => (
-                    <Col
+                    <Grid item
                         style={{ width: "300px" }}
                         key={verificationRequest._id}
                     >
@@ -61,7 +61,7 @@ const VerificationRequestResultList = ({ results }) => {
                                 </AletheiaButton>,
                             ]}
                         />
-                    </Col>
+                    </Grid>
                 ))}
         </VerificationRequestResultListStyled>
     );