Merge pull request #1708 from AletheiaFact/Change-all-popover-and-tooltip

Change all popover and tooltip

Author: thesocialdev

src/components/AffixButton/AffixCTAButton.tsx

@@ -6,23 +6,24 @@ import Banner from "../SentenceReport/Banner";
 import { useTranslation } from "next-i18next";
 import Cookies from "js-cookie";
 import CtaAnimation from "../CtaAnimation";
-import { Tooltip } from "antd";
+import InfoTooltip from "../Claim/InfoTooltip";
 import colors from "../../styles/colors";
 import { trackUmamiEvent } from "../../lib/umami";
 import { useAppSelector } from "../../store/store";
 
 const CloseIcon = () => {
     const { t } = useTranslation();
     return (
-        <Tooltip
-            title={t("affix:AffixCloseTooltip")}
-            placement="topRight"
-            defaultOpen
-            color={colors.white}
-            overlayInnerStyle={{ color: colors.black }}
-        >
-            <CloseOutlined style={{margin:"10px", color:colors.white}} />
-        </Tooltip>
+        <InfoTooltip
+            children={
+                <CloseOutlined style={{ margin: "10px", color: colors.white }} />
+            }
+            content={
+                <span style={{ color: colors.black, fontSize: 15 }}>
+                    {t("affix:AffixCloseTooltip")}
+                </span>
+            }
+        />
     );
 };
 

src/components/AffixButton/Fab.tsx

@@ -1,4 +1,5 @@
-import { Button, ButtonProps, Tooltip } from "antd";
+import { ButtonProps, IconButton } from "@mui/material";
+import InfoTooltip from "../Claim/InfoTooltip";
 import React, { useLayoutEffect, useState } from "react";
 import colors from "../../styles/colors";
 import { NameSpaceEnum } from "../../types/Namespace";
@@ -18,28 +19,35 @@ const Fab = ({ tooltipText, style, icon, size, ...rest }: FabProps) => {
     useLayoutEffect(() => {
         setNameSpaceProp(nameSpace);
     }, [nameSpace]);
+
+    const TooltipBanner = (
+        <IconButton
+            style={{
+                background: colors.white,
+                color:
+                    nameSpaceProp === NameSpaceEnum.Main
+                        ? colors.primary
+                        : colors.secondary,
+                boxShadow: `0px 8px 24px ${colors.shadow}`,
+                display: "grid",
+                placeContent: "center",
+                width: size,
+                height: size,
+                ...style,
+            }}
+            {...rest}
+        >
+            {icon}
+        </IconButton>
+    );
+
     return (
-        <Tooltip placement="left" title={tooltipText}>
-            <Button
-                style={{
-                    background: colors.white,
-                    color:
-                        nameSpaceProp === NameSpaceEnum.Main
-                            ? colors.primary
-                            : colors.secondary,
-                    boxShadow: `0px 8px 24px ${colors.shadow}`,
-                    display: "grid",
-                    placeContent: "center",
-                    width: size,
-                    height: size,
-                    ...style,
-                }}
-                shape="circle"
-                type="link"
-                icon={icon}
-                {...rest}
-            />
-        </Tooltip>
+        <InfoTooltip
+            useCustomStyle={false}
+            placement="left"
+            children={TooltipBanner}
+            content={tooltipText}
+        />
     );
 };
 

src/components/AletheiaAvatar.tsx

@@ -1,4 +1,4 @@
-import { Avatar } from "antd";
+import { Avatar } from "@mui/material";
 import React from "react";
 import colors from "../styles/colors";
 
@@ -25,7 +25,7 @@ const AletheiaAvatar = ({ size, src, alt }: AletheiaAvatarProps) => {
                 aspectRatio: "1",
             }}
         >
-            <Avatar size={size} src={src} alt={alt} />
+            <Avatar sx={{width: size, height: size}} src={src} alt={alt} />
         </div>
     );
 };

src/components/Claim/ClaimSentence.tsx

@@ -4,7 +4,9 @@ import styled from "styled-components";
 import colors from "../../styles/colors";
 import actions from "../../store/actions";
 import { useDispatch } from "react-redux";
-import SentencePopover from "./SentencePopover";
+import InfoTooltip from "./InfoTooltip";
+import { InfoOutlined, SecurityOutlined } from "@mui/icons-material";
+import { useTranslation } from "react-i18next";
 
 const Sentence = styled.a`
     color: ${colors.primary};
@@ -25,6 +27,7 @@ const ClaimSentence = ({
     handleSentenceClick,
 }) => {
     let style = {};
+    const { t } = useTranslation();
     if (properties.classification && showHighlights) {
         style = {
             ...style,
@@ -37,6 +40,24 @@ const ClaimSentence = ({
         handleSentenceClick();
         dispatch(actions.openReviewDrawer());
     };
+
+    const tooltipContent = (
+        <span
+            style={{
+                color: colors.primary,
+                lineHeight: "20px",
+                fontSize: 14,
+                display: "flex",
+                alignItems: "center",
+                gap: 4,
+                padding: 5
+            }}
+        >
+            <SecurityOutlined fontSize="small" />
+            {t("reviewTask:sentenceInfo")}
+        </span>
+    );
+
     return (
         <>
             <Sentence
@@ -59,7 +80,10 @@ const ClaimSentence = ({
                         padding: "0 4px 0 1px",
                     }}
                 >
-                    <SentencePopover />
+                    <InfoTooltip
+                        children={<InfoOutlined style={{ fontSize: "18px", color: colors.neutralSecondary }} />}
+                        content={tooltipContent}
+                    />
                 </sup>
             )}
         </>

src/components/Claim/ClaimView.tsx

@@ -79,7 +79,7 @@ const ClaimView = ({ personality, claim, href, hideDescriptions }) => {
                                 personality={personality}
                                 header={true}
                                 mobile={true}
-                                titleLevel={2}
+                                titleLevel="h2"
                             />
                         )}
                         <section>

src/components/Claim/InfoTooltip.tsx

@@ -0,0 +1,56 @@
+import { styled, Tooltip, tooltipClasses, TooltipProps } from "@mui/material";
+import React from "react";
+import colors from "../../styles/colors";
+
+type InfoTooltipProps = {
+    placement?: TooltipProps["placement"];
+    content: React.ReactNode;
+    children: React.ReactElement;
+    useCustomStyle?: boolean;
+};
+
+const DefaultTooltip = ({ className, ...props }: TooltipProps) => {
+    return (
+        <Tooltip {...props} arrow
+            title={
+                <span style={{ fontSize: 15 }}>
+                    {props.title}
+                </span>
+            }
+        >
+            {props.children}
+        </Tooltip>
+    );
+};
+
+const InfoTooltip: React.FC<InfoTooltipProps> = ({
+    placement = "top",
+    content,
+    children,
+    useCustomStyle = true,
+}) => {
+
+    const CustomTooltip = styled(({ className, ...props }: TooltipProps) => (
+        <Tooltip {...props} arrow classes={{ popper: className }} />
+    ))(() => ({
+        [`& .${tooltipClasses.arrow}`]: {
+            color: colors.white,
+        },
+        [`& .${tooltipClasses.tooltip}`]: {
+            backgroundColor: colors.white,
+            maxWidth: "100%",
+            boxShadow: `0px 0px 15px ${colors.shadow}`,
+        },
+    }));
+
+
+    const TooltipComponent = useCustomStyle ? CustomTooltip : DefaultTooltip;
+
+    return (
+        <TooltipComponent placement={placement} title={content}>
+            {children}
+        </TooltipComponent>
+    );
+};
+
+export default InfoTooltip;

src/components/Claim/Popover.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import { IconButton, Popover, PopoverOrigin } from "@mui/material";
+
+interface PopoverClickProps {
+    children: React.ReactNode;
+    content: React.ReactNode;
+    anchorOrigin?: PopoverOrigin;
+    transformOrigin?: PopoverOrigin;
+}
+
+const PopoverClick: React.FC<PopoverClickProps> = ({
+    children,
+    content,
+    anchorOrigin = { vertical: "bottom", horizontal: "center" },
+    transformOrigin = { vertical: "top", horizontal: "center" },
+}) => {
+    const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null);
+    const open = Boolean(anchorEl);
+    const id = open ? "simple-popover" : undefined;
+
+    const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+        setAnchorEl(event.currentTarget);
+    };
+
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+
+    return (
+        <>
+            <IconButton
+                aria-describedby={id}
+                onClick={handleClick}
+            >
+                {children}
+            </IconButton>
+            <Popover
+                id={id}
+                open={open}
+                anchorEl={anchorEl}
+                onClose={handleClose}
+                anchorOrigin={anchorOrigin}
+                transformOrigin={transformOrigin}
+            >
+                {content}
+            </Popover>
+        </>
+    );
+};
+
+export default PopoverClick;

src/components/Claim/SentencePopover.tsx

@@ -2,7 +2,7 @@ import React, { useContext } from "react";
 import MoreVertIcon from "@mui/icons-material/MoreVert";
 import CheckIcon from "@mui/icons-material/Check";
 import CommentPopoverContent from "./CommentPopoverContent";
-import { Popover } from "antd";
+import PopoverClick from "../../Claim/Popover";
 import Button, { ButtonType } from "../../Button";
 import ReviewTaskApi from "../../../api/reviewTaskApi";
 import CommentApi from "../../../api/comment";
@@ -45,11 +45,11 @@ const CommentCardActions = ({ content, setIsResolved }) => {
                     comments.map((comment) =>
                         comment._id === content.targetId
                             ? {
-                                  ...comment,
-                                  replies: comment.replies.filter(
-                                      (reply) => reply._id !== content._id
-                                  ),
-                              }
+                                ...comment,
+                                replies: comment.replies.filter(
+                                    (reply) => reply._id !== content._id
+                                ),
+                            }
                             : comment
                     )
                 );
@@ -82,18 +82,16 @@ const CommentCardActions = ({ content, setIsResolved }) => {
             {role !== Roles.Regular &&
                 role !== Roles.FactChecker &&
                 isReviewing && (
-                    <Popover
-                        trigger="click"
-                        placement="bottom"
-                        overlayInnerStyle={{ padding: 0 }}
+                    <PopoverClick
+                        children={
+                            <MoreVertIcon style={{ cursor: "pointer" }} />
+                        }
                         content={
                             <CommentPopoverContent
                                 handleDeleteClick={handleDeleteClick}
                             />
                         }
-                    >
-                        <MoreVertIcon style={{ cursor: "pointer" }} />
-                    </Popover>
+                    />
                 )}
         </div>
     );

src/components/Collaborative/Comment/CommentCardActions.tsx

@@ -15,7 +15,7 @@ const CommentPopoverContent = ({ handleDeleteClick }) => {
                     border: "none",
                     display: "flex",
                     justifyContent: "start",
-                    padding: 0,
+                    margin: "5px 0px",
                 }}
                 onClick={handleDeleteClick}
             >