Merge pull request #1680 from AletheiaFact/Change-all-icons-antd

Change all antd icons

Author: thesocialdev

src/components/AffixButton/AffixButton.tsx

@@ -1,9 +1,11 @@
-import {
-    FileAddFilled,
-    PlusCircleFilled,
-    PlusOutlined,
-    UserAddOutlined,
-} from "@ant-design/icons";
+import { 
+    NoteAdd, 
+    AddCircle, 
+    AddOutlined, 
+    PersonAddAlt1Outlined,
+    Source,
+    Report
+} from "@mui/icons-material";
 import { useAtom } from "jotai";
 import Cookies from "js-cookie";
 import { Trans, useTranslation } from "next-i18next";
@@ -18,8 +20,6 @@ import Fab from "./Fab";
 import { NameSpaceEnum } from "../../types/Namespace";
 import { currentNameSpace } from "../../atoms/namespace";
 import { useAppSelector } from "../../store/store";
-import SourceIcon from "@mui/icons-material/Source";
-import ReportIcon from "@mui/icons-material/Report";
 
 interface AffixButtonProps {
     personalitySlug?: string;
@@ -44,7 +44,7 @@ const AffixButton = ({ personalitySlug }: AffixButtonProps) => {
     const { t } = useTranslation();
     const actions = [
         {
-            icon: <UserAddOutlined />,
+            icon: <PersonAddAlt1Outlined />,
             tooltip: t("affix:affixButtonCreatePersonality"),
             href:
                 nameSpace !== NameSpaceEnum.Main
@@ -61,7 +61,7 @@ const AffixButton = ({ personalitySlug }: AffixButtonProps) => {
     userRole !== "regular" &&
         actions.push(
             {
-                icon: <FileAddFilled />,
+                icon: <NoteAdd />,
                 tooltip: t("affix:affixButtonCreateClaim"),
                 href:
                     nameSpace !== NameSpaceEnum.Main
@@ -70,7 +70,7 @@ const AffixButton = ({ personalitySlug }: AffixButtonProps) => {
                 dataCy: "testFloatButtonAddClaim",
             },
             {
-                icon: <SourceIcon />,
+                icon: <Source />,
                 tooltip: t("affix:affixButtonCreateVerifiedSources"),
                 href:
                     nameSpace !== NameSpaceEnum.Main
@@ -79,7 +79,7 @@ const AffixButton = ({ personalitySlug }: AffixButtonProps) => {
                 dataCy: "testFloatButtonAddSources",
             },
             {
-                icon: <ReportIcon />,
+                icon: <Report />,
                 tooltip: t("affix:affixButtonCreateVerificationRequest"),
                 href:
                     nameSpace !== NameSpaceEnum.Main
@@ -157,10 +157,8 @@ const AffixButton = ({ personalitySlug }: AffixButtonProps) => {
                         onClick={handleClick}
                         data-cy={"testFloatButton"}
                         icon={
-                            <PlusOutlined
-                                style={{
-                                    fontSize: "27px",
-                                }}
+                            <AddOutlined
+                                fontSize="large"
                             />
                         }
                     />
@@ -196,7 +194,7 @@ const AffixButton = ({ personalitySlug }: AffixButtonProps) => {
                 >
                     <Trans
                         i18nKey={"tutorial:modalContent"}
-                        components={[<PlusCircleFilled key={"icon"} />]}
+                        components={[<AddCircle style={{marginBottom:"-5px",fontSize:"18px"}} key={"icon"} />]}
                     />
                 </p>
 

src/components/AffixButton/AffixCTAButton.tsx

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from "react";
-
-import { CloseOutlined, QuestionCircleOutlined } from "@ant-design/icons";
+import { CloseOutlined, HelpOutlineOutlined } from "@mui/icons-material";
 import Fab from "../AffixButton/Fab";
 import { AletheiaModal } from "../Modal/AletheiaModal.style";
 import Banner from "../SentenceReport/Banner";
@@ -9,11 +8,11 @@ import Cookies from "js-cookie";
 import CtaAnimation from "../CtaAnimation";
 import { Tooltip } from "antd";
 import colors from "../../styles/colors";
-import { t } from "i18next";
 import { trackUmamiEvent } from "../../lib/umami";
 import { useAppSelector } from "../../store/store";
 
 const CloseIcon = () => {
+    const { t } = useTranslation();
     return (
         <Tooltip
             title={t("affix:AffixCloseTooltip")}
@@ -22,13 +21,7 @@ const CloseIcon = () => {
             color={colors.white}
             overlayInnerStyle={{ color: colors.black }}
         >
-            <CloseOutlined
-                style={{
-                    marginTop: 20,
-                    paddingBottom: 20,
-                    height: 20,
-                }}
-            />
+            <CloseOutlined style={{margin:"10px", color:colors.white}} />
         </Tooltip>
     );
 };
@@ -85,10 +78,8 @@ const AffixCTAButton = ({ copilotDrawerWidth }) => {
                             onClick={handleCTAClick}
                             data-cy={"testCTAFloatButton"}
                             icon={
-                                <QuestionCircleOutlined
-                                    style={{
-                                        fontSize: "24px",
-                                    }}
+                                <HelpOutlineOutlined
+                                    fontSize="medium"
                                 />
                             }
                         />

src/components/BackButton.tsx

@@ -1,6 +1,6 @@
 import { useTranslation } from "next-i18next";
 import React, { CSSProperties } from "react";
-import { ArrowLeftOutlined } from "@ant-design/icons";
+import  { ArrowBackOutlined }  from "@mui/icons-material";
 import { useRouter } from "next/router";
 import colors from "../styles/colors";
 
@@ -13,6 +13,8 @@ function BackButton({ style, callback }: { style?: CSSProperties; callback?: ()
         return (
             <a
                 style={{
+                    display:"flex",
+                    alignContent:"center",
                     fontWeight: "bold",
                     color: colors.secondary,
                     ...style
@@ -28,7 +30,7 @@ function BackButton({ style, callback }: { style?: CSSProperties; callback?: ()
                     }
                 }}
             >
-                <ArrowLeftOutlined /> {t("common:back_button")}
+                <ArrowBackOutlined fontSize="small"/> {t("common:back_button")}
             </a>
         );
     } else {

src/components/Claim/CreateClaim/ClaimSelectType.tsx

@@ -1,8 +1,8 @@
-import {
-    FileOutlined,
-    PictureOutlined,
-    VideoCameraOutlined,
-} from "@ant-design/icons";
+import { 
+    InsertDriveFileOutlined,  
+    PhotoSizeSelectActualOutlined, 
+    VideocamOutlined 
+} from "@mui/icons-material";
 import { Grid } from "@mui/material";
 import { useAtom } from "jotai";
 import { useTranslation } from "next-i18next";
@@ -16,12 +16,13 @@ import AletheiaButton from "../../Button";
 const ClaimSelectType = () => {
     const [, send] = useAtom(createClaimMachineAtom);
     const { t } = useTranslation();
+    const Sizeicon = { fontSize:"22px", margin:"0 5 5 0"};
 
     const icons = {
-        [ContentModelEnum.Image]: <PictureOutlined />,
-        [ContentModelEnum.Speech]: <FileOutlined />,
-        [ContentModelEnum.Debate]: <VideoCameraOutlined />,
-        [ContentModelEnum.Unattributed]: <FileOutlined />,
+        [ContentModelEnum.Image]: <PhotoSizeSelectActualOutlined style={Sizeicon}/>,
+        [ContentModelEnum.Speech]: <InsertDriveFileOutlined style={Sizeicon}/>,
+        [ContentModelEnum.Debate]: <VideocamOutlined style={Sizeicon}/>,
+        [ContentModelEnum.Unattributed]: <InsertDriveFileOutlined style={Sizeicon}/>,
     };
 
     const handleClickStart = (event) => {
@@ -64,7 +65,7 @@ const ClaimSelectType = () => {
                 {Object.keys(ContentModelEnum).map((key) => (
                     <AletheiaButton
                         onClick={() => handleClickStart(key)}
-                        style={{ textTransform: "uppercase" }}
+                        style={{ gap:"10px",textTransform: "uppercase" }}
                         data-cy={`testSelectType${key}`}
                         key={key}
                     >

src/components/Claim/SentencePopover.tsx

@@ -1,4 +1,4 @@
-import { InfoCircleOutlined, SecurityScanOutlined } from "@ant-design/icons";
+import { InfoOutlined, SecurityOutlined  } from "@mui/icons-material";
 import { Popover } from "antd";
 import React from "react";
 import colors from "../../styles/colors";
@@ -18,14 +18,14 @@ const SentencePopover = () => {
                 gap: 4,
             }}
         >
-            <SecurityScanOutlined style={{ fontSize: 20 }} />
+            <SecurityOutlined fontSize="small" />
             {t("reviewTask:sentenceInfo")}
         </span>
     );
 
     return (
         <Popover placement="top" content={content} trigger="hover">
-            <InfoCircleOutlined style={{ color: colors.neutralSecondary }} />
+            <InfoOutlined style={{fontSize:"18px", color: colors.neutralSecondary }} />
         </Popover>
     );
 };

src/components/ClaimReview/ClaimReviewDrawer.tsx

@@ -1,7 +1,4 @@
-import {
-    ArrowLeftOutlined,
-    ExclamationCircleOutlined,
-} from "@ant-design/icons";
+import { ArrowBackOutlined, ErrorOutlineOutlined } from "@mui/icons-material";
 import { Grid } from "@mui/material"
 import { useTranslation } from "next-i18next";
 import React, { useEffect, useState } from "react";
@@ -73,7 +70,7 @@ const ClaimReviewDrawer = () => {
                         >
                             <Grid item style={{ display: "flex", gap: 32 }}>
                                 <AletheiaButton
-                                    icon={<ArrowLeftOutlined />}
+                                    icon={<ArrowBackOutlined style={{marginRight:"10px"}} fontSize="small"/>}
                                     onClick={() =>
                                         dispatch(actions.closeReviewDrawer())
                                     }
@@ -111,9 +108,10 @@ const ClaimReviewDrawer = () => {
                                         justifyContent: "center",
                                         gap: 8,
                                         alignItems: "center",
+                                        marginTop:"10px"
                                     }}
                                 >
-                                    <ExclamationCircleOutlined
+                                    <ErrorOutlineOutlined
                                         style={{
                                             fontSize: 16,
                                             color: colors.secondary,

src/components/Collaborative/Components/LinkToolBar/Dialog/InsertSourceForm.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import AletheiaInput from "../../../../AletheiaInput";
 import AletheiaButton from "../../../../Button";
-import { DeleteOutlined, PlusOutlined } from "@ant-design/icons";
+import { DeleteOutlined, AddOutlined } from "@mui/icons-material";
 import colors from "../../../../../styles/colors";
 
 const InsertSourceForm = ({
@@ -44,7 +44,7 @@ const InsertSourceForm = ({
                     }}
                     data-cy="testClaimReviewSourcesButton"
                 >
-                    <PlusOutlined />
+                    <AddOutlined fontSize="small"/>
                 </AletheiaButton>
                 {activeLink && (
                     <AletheiaButton
@@ -59,7 +59,7 @@ const InsertSourceForm = ({
                             boxShadow: "0px 2px 2px rgba(0, 0, 0, 0.4)",
                         }}
                     >
-                        <DeleteOutlined />
+                        <DeleteOutlined fontSize="small"/>
                     </AletheiaButton>
                 )}
             </div>

src/components/Collaborative/Components/LinkToolBar/Dialog/SourceDialogHeader.tsx

@@ -1,4 +1,4 @@
-import { CloseOutlined } from "@ant-design/icons";
+import { CloseOutlined } from "@mui/icons-material";
 import { useTranslation } from "next-i18next";
 import React from "react";
 

src/components/Collaborative/Components/Source/EditorSourceListItem.tsx

@@ -1,6 +1,6 @@
 import { Col, Spin } from "antd";
 import React, { useEffect, useMemo, useState } from "react";
-import { LoadingOutlined } from "@ant-design/icons";
+import { CircularProgress } from "@mui/material";
 import MoreVertIcon from "@mui/icons-material/MoreVert";
 import EditorSourcePopover from "./EditorSourcePopover";
 import colors from "../../../../styles/colors";
@@ -52,7 +52,7 @@ const EditorSourceListItem = ({ node, sup, source }: EditorSouceListProps) => {
         <Spin
             spinning={isLoading}
             indicator={
-                <LoadingOutlined
+                <CircularProgress
                     style={{
                         color:
                             nameSpace === NameSpaceEnum.Main

src/components/Collaborative/Form/QuestionCard.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useContext } from "react";
 import { Grid } from "@mui/material";
 import Button from "../../Button";
 import { useCommands } from "@remirror/react";
-import { DeleteOutlined } from "@ant-design/icons";
+import { DeleteOutlined } from "@mui/icons-material";
 import { useTranslation } from "next-i18next";
 import { ReviewTaskMachineContext } from "../../../machines/reviewTask/ReviewTaskMachineProvider";
 import { reviewingSelector } from "../../../machines/reviewTask/selectors";
@@ -41,7 +41,7 @@ const QuestionCard = ({ forwardRef, node, initialPosition }) => {
                         disabled={editable}
                         data-cy="testClaimReviewquestionsRemove1"
                     >
-                        <DeleteOutlined />
+                        <DeleteOutlined fontSize="small"/>
                     </Button>
                 </Grid>
             }