Migrate components used in the create report page to mui

src/components/AletheiaCaptcha.tsx

@@ -2,7 +2,8 @@ import { useTranslation } from "next-i18next";
 import React, { forwardRef, useImperativeHandle, useState } from "react";
 import ReCAPTCHA from "react-google-recaptcha";
 import { useAppSelector } from "../store/store";
-import Text from "antd/lib/typography/Text";
+import Typography from "@mui/material/Typography";
+import colors from "../styles/colors";
 const recaptchaRef = React.createRef<ReCAPTCHA>();
 
 interface CaptchaProps {
@@ -43,7 +44,7 @@ const AletheiaCaptcha = forwardRef(({ onChange }: CaptchaProps, ref) => {
                 onExpired={onExpiredCaptcha}
             />
             {showRequired && (
-                <Text type="danger">{t("common:requiredFieldError")}</Text>
+                <Typography variant="h1" style={{ color: colors.error, fontSize: 16 }} >{t("common:requiredFieldError")}</Typography>
             )}
         </div>
     );

src/components/ClaimReview/form/DynamicReviewTaskForm.tsx

@@ -12,8 +12,8 @@ import { VisualEditorContext } from "../../Collaborative/VisualEditorProvider";
 import DynamicForm from "../../Form/DynamicForm";
 import { ReviewTaskEvents } from "../../../machines/reviewTask/enums";
 import { ReviewTaskMachineContext } from "../../../machines/reviewTask/ReviewTaskMachineProvider";
-import { Grid } from "@mui/material"
-import Text from "antd/lib/typography/Text";
+import { Grid, Typography } from "@mui/material"
+import colors from "../../../styles/colors";
 import {
     isUserLoggedIn,
     currentUserId,
@@ -230,9 +230,9 @@ const DynamicReviewTaskForm = ({ data_hash, personality, target }) => {
                     />
                     <div style={{ paddingBottom: 20, marginLeft: 20 }}>
                         {reviewerError && (
-                            <Text type="danger" data-cy="testReviewerError">
+                            <Typography variant="body1" style={{ color: colors.error, fontSize: 16 }} data-cy="testReviewerError">
                                 {t("reviewTask:invalidReviewerMessage")}
-                            </Text>
+                            </Typography>
                         )}
                     </div>
                     {events?.length > 0 && showButtons && (

src/components/Collaborative/Components/Editor.style.tsx

@@ -37,8 +37,8 @@ const EditorStyle = styled.div`
 
     .toolbar-item:hover::after {
         content: "";
-        border: 1px solid ${colors.primary};
-        width: 4px;
+        background-color: ${colors.primary};
+        width: 3px;
         height: 40px;
     }
 

src/components/Collaborative/Components/Editor.tsx

@@ -1,11 +1,13 @@
 import React, { useCallback, useContext } from "react";
 
 import { useHelpers, useCommands } from "@remirror/react";
-import SummarizeIcon from "@mui/icons-material/Summarize";
-import QuestionMarkIcon from "@mui/icons-material/QuestionMark";
-import ReportProblemIcon from "@mui/icons-material/ReportProblem";
-import FactCheckIcon from "@mui/icons-material/FactCheck";
-import { Button } from "antd";
+import {
+    Summarize,
+    QuestionMark,
+    ReportProblem,
+    FactCheck
+} from "@mui/icons-material";
+import { IconButton } from "@mui/material";
 import EditorStyle from "./Editor.style";
 import useCardPresence from "../hooks/useCardPresence";
 import { ReviewTaskMachineContext } from "../../../machines/reviewTask/ReviewTaskMachineProvider";
@@ -59,7 +61,7 @@ const Editor = ({
             onClick: () => handleInsertNode(getContentHtml("data-summary-id")),
             disabled: editable || summaryDisabled,
             "data-cy": "testClaimReviewsummarizeAdd",
-            icon: <SummarizeIcon className="toolbar-item-icon" />,
+            icon: <Summarize className="toolbar-item-icon" />,
         },
     ];
 
@@ -70,21 +72,21 @@ const Editor = ({
                     handleInsertNode(getContentHtml("data-verification-id")),
                 disabled: editable || verificationDisabled,
                 "data-cy": "testClaimReviewverificationAdd",
-                icon: <FactCheckIcon className="toolbar-item-icon" />,
+                icon: <FactCheck className="toolbar-item-icon" />,
             },
             {
                 onClick: () =>
                     handleInsertNode(getContentHtml("data-report-id")),
                 disabled: editable || reportDisabled,
                 "data-cy": "testClaimReviewreportAdd",
-                icon: <ReportProblemIcon className="toolbar-item-icon" />,
+                icon: <ReportProblem className="toolbar-item-icon" />,
             },
             {
                 onClick: () =>
                     handleInsertNode(getContentHtml("data-question-id")),
                 disabled: editable,
                 "data-cy": "testClaimReviewquestionsAdd",
-                icon: <QuestionMarkIcon className="toolbar-item-icon" />,
+                icon: <QuestionMark className="toolbar-item-icon" />,
             }
         );
     }
@@ -98,14 +100,14 @@ const Editor = ({
             <div className="toolbar">
                 {actions ? (
                     actions.map(({ icon, ...props }) => (
-                        <Button
+                        <IconButton
                             key={props["data-cy"]}
                             className="toolbar-item"
                             style={{ outline: "none", border: "none" }}
                             {...props}
                         >
                             {icon}
-                        </Button>
+                        </IconButton>
                     ))
                 ) : (
                     <></>

src/components/Form/DynamicForm.tsx

@@ -1,9 +1,7 @@
-import { Grid } from "@mui/material";
-
+import { Grid, Typography } from "@mui/material"
 import { Controller } from "react-hook-form";
 import DynamicInput from "./DynamicInput";
 import React from "react";
-import Text from "antd/lib/typography/Text";
 import colors from "../../styles/colors";
 import { useTranslation } from "next-i18next";
 
@@ -73,9 +71,9 @@ const DynamicForm = ({
                                 )}
                             />
                             {errors[fieldName] && (
-                                <Text type="danger" style={{ marginLeft: 20 }}>
+                                <Typography variant="body1" style={{ marginLeft: 20, color: colors.error, fontSize: 16 }}>
                                     {t(errors[fieldName].message)}
-                                </Text>
+                                </Typography>
                             )}
                         </Grid>
                     </Grid>

src/components/Toolbar/ReviewTaskAdminToolBar.tsx

@@ -1,5 +1,4 @@
-import { Button, Col, Row } from "antd";
-import { Toolbar } from "@mui/material";
+import { Grid, IconButton, Toolbar } from "@mui/material";
 import React, { useContext } from "react";
 import ManageAccountsIcon from "@mui/icons-material/ManageAccounts";
 import AdminToolBarStyle from "./AdminToolBar.style";
@@ -23,23 +22,23 @@ const ReviewTaskAdminToolBar = () => {
     };
 
     return (
-        <Row justify="center" style={{ background: colors.lightNeutral }}>
-            <Col xs={22} lg={18}>
+        <Grid container justifyContent="center" style={{ background: colors.lightNeutral }}>
+            <Grid item xs={11} lg={9}>
                 <AdminToolBarStyle
                     namespace={nameSpace}
                     position="static"
                     style={{ boxShadow: "none", background: colors.lightNeutral }}
                 >
                     <Toolbar className="toolbar">
                         <div className="toolbar-item">
-                            <Button onClick={handleReassignUser}>
+                            <IconButton onClick={handleReassignUser}>
                                 <ManageAccountsIcon />
-                            </Button>
+                            </IconButton>
                         </div>
                     </Toolbar>
                 </AdminToolBarStyle>
-            </Col>
-        </Row>
+            </Grid>
+        </Grid>
     );
 };
 

src/components/topics/TagDisplay.style.tsx

@@ -1,7 +1,7 @@
-import { Col } from "antd";
+import { Grid } from "@mui/material";
 import styled from "styled-components";
 
-const TagDisplayStyled = styled(Col)`
+const TagDisplayStyled = styled(Grid)`
     margin: 16px 16px 12px 16px;
     margin-bottom: 12px;
     display: flex;

src/components/topics/TagDisplay.tsx

@@ -17,7 +17,7 @@ const TagDisplay = ({ handleClose, tags, setShowTopicsForm }: ITagDisplay) => {
     const [isLoggedIn] = useAtom(isUserLoggedIn);
 
     return (
-        <TagDisplayStyled>
+        <TagDisplayStyled item>
             <TagsList
                 tags={tags}
                 editable={isLoggedIn}

src/components/topics/TagsList.tsx

@@ -1,9 +1,9 @@
-import { Col, Tag } from "antd";
+import { Chip, Grid } from "@mui/material";
+import { CloseOutlined } from "@mui/icons-material";
 import { useTranslation } from "next-i18next";
 import React from "react";
 import colors from "../../styles/colors";
 import router from "next/router";
-
 interface TagsListProps {
     tags: any[];
     editable?: boolean;
@@ -23,29 +23,29 @@ const TagsList = ({ tags, editable = false, handleClose }: TagsListProps) => {
     };
 
     return (
-        <Col>
+        <Grid item padding={1}>
             {tags.length <= 0 && <span>{t("topics:noTopics")}</span>}
 
             {tags &&
                 tags.map((tag) => (
-                    <Tag
+                    <Chip
+                        label={(tag?.label || tag).toUpperCase()}
                         key={tag?.value || tag}
-                        color={colors.secondary}
-                        closable={editable}
-                        onClose={() => handleClose(tag?.value || tag)}
+                        onClick={() => handleTagClick(tag?.label || tag)}
+                        onDelete={editable ? () => handleClose(tag?.value || tag) : undefined}
+                        deleteIcon={<CloseOutlined style={{fontSize: 15, color: colors.white}}/>}
                         style={{
+                            backgroundColor: colors.secondary,
+                            color: colors.white,
                             borderRadius: 32,
                             padding: "4px 10px 2px",
                             marginTop: 4,
                             marginBottom: 4,
                             cursor: "pointer",
                         }}
-                        onClick={() => handleTagClick(tag?.label || tag)}
-                    >
-                        {(tag?.label || tag).toUpperCase()}
-                    </Tag>
+                    />
                 ))}
-        </Col>
+        </Grid>
     );
 };
 

src/components/topics/TopicForm.tsx

@@ -1,4 +1,4 @@
-import { Col } from "antd";
+import { Grid } from "@mui/material";
 import React, { useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import FormControl from "@mui/joy/FormControl";
@@ -94,7 +94,7 @@ const TopicForm = ({
 
     return (
         <form onSubmit={handleSubmit(handleOnSubmit)}>
-            <Col style={{ display: "flex" }}>
+            <Grid item style={{ display: "flex" }}>
                 <Controller
                     control={control}
                     name="topics"
@@ -103,7 +103,7 @@ const TopicForm = ({
                     }}
                     render={({ field: { onChange, value } }) => (
                         <CssVarsProvider>
-                            <FormControl sx={{ width: 655 }}>
+                            <FormControl sx={{ width: "100%" }}>
                                 <Autocomplete
                                     freeSolo
                                     multiple
@@ -148,7 +148,7 @@ const TopicForm = ({
                 >
                     {t("topics:addTopicsButton")}
                 </AletheiaButton>
-            </Col>
+            </Grid>
 
             <TopicInputErrorMessages errors={errors} />
         </form>