Migrate various components on the page

Author: LuizFNJ

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,4 +1,4 @@
-import { Button, Col, Row } from "antd";
+import { Grid, IconButton } from "@mui/material";
 import { Toolbar } from "@mui/material";
 import React, { useContext } from "react";
 import ManageAccountsIcon from "@mui/icons-material/ManageAccounts";
@@ -23,23 +23,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>
     );
 };