Change deprecated visible property to open

src/components/AffixButton/AffixButton.tsx

@@ -131,7 +131,7 @@ const AffixButton = ({ personalitySlug }: AffixButtonProps) => {
             </div>
             <AletheiaModal
                 className="ant-modal-content"
-                visible={isModalVisible}
+                open={isModalVisible}
                 footer={false}
                 onCancel={handleHideModal}
                 centered

src/components/ClaimReview/ClaimReviewDrawer.tsx

@@ -49,7 +49,7 @@ const ClaimReviewDrawer = () => {
 
     return (
         <LargeDrawer
-            visible={!reviewDrawerCollapsed}
+            open={!reviewDrawerCollapsed}
             onClose={() => dispatch(actions.closeReviewDrawer())}
         >
             {claim && data_hash && !isLoading ? (

src/components/ClaimReview/form/DynamicReviewTaskForm.tsx

@@ -258,7 +258,7 @@ const DynamicReviewTaskForm = ({ data_hash, personality, claim }) => {
             </Row>
 
             <WarningModal
-                visible={gobackWarningModal}
+                open={gobackWarningModal}
                 title={t("warningModal:title", {
                     warning: t("warningModal:gobackWarning"),
                 })}

src/components/Form/ClaimReviewSelect.tsx

@@ -45,7 +45,7 @@ export const SelectInput = styled(Select)`
 
 const ClaimReviewSelect = ({ type, onChange, defaultValue, placeholder }) => {
     const { vw } = useAppSelector((state) => state);
-    const [visible, setVisible] = useState(false);
+    const [open, setOpen] = useState(false);
     const [value, setValue] = useState(defaultValue);
 
     const onChangeSelect = (e) => {
@@ -57,17 +57,17 @@ const ClaimReviewSelect = ({ type, onChange, defaultValue, placeholder }) => {
     }, [value, onChange]);
 
     const handleCloseModal = () => {
-        setVisible(false);
+        setOpen(false);
     };
 
     const handleOnClick = () => {
         if (vw?.sm) {
-            setVisible(true);
+            setOpen(true);
         }
     };
 
     const handleChangeOk = () => {
-        setVisible(false);
+        setOpen(false);
     };
 
     return (
@@ -112,7 +112,7 @@ const ClaimReviewSelect = ({ type, onChange, defaultValue, placeholder }) => {
                 </Option>
             </SelectInput>
             <ClassificationModal
-                visible={visible}
+                open={open}
                 value={value}
                 setValue={setValue}
                 handleOk={handleChangeOk}

src/components/Form/ClassificationModal.tsx

@@ -6,7 +6,7 @@ import ClassificationText from "../ClassificationText";
 import { AletheiaModal, ModalCancelButton } from "../Modal/AletheiaModal.style";
 
 const ClassificationModal = ({
-    visible,
+    open,
     value,
     setValue,
     handleOk,
@@ -19,7 +19,7 @@ const ClassificationModal = ({
 
     return (
         <AletheiaModal
-            visible={visible}
+            open={open}
             footer={false}
             onCancel={handleCancel}
             setValue={setValue}

src/components/ImageUpload.tsx

@@ -113,7 +113,7 @@ const ImageUpload = ({
                 </Text>
             )}
             <AletheiaModal
-                visible={previewOpen}
+                open={previewOpen}
                 title={previewTitle}
                 footer={null}
                 onCancel={handleCancel}

src/components/LargeDrawer.tsx

@@ -5,14 +5,14 @@ import colors from "../styles/colors";
 
 const LargeDrawer = ({
     children,
-    visible,
+    open,
     onClose,
     backgroundColor = colors.lightGray,
 }) => {
     const { vw } = useAppSelector((state) => state);
     return (
         <Drawer
-            visible={visible}
+            open={open}
             onClose={onClose}
             width={vw?.sm ? "100%" : "60%"}
             height={vw?.sm ? "85%" : "100%"}

src/components/List/SortByButton.tsx

@@ -7,7 +7,7 @@ import colors from "../../styles/colors";
 
 const SortByButton = ({ refreshListItems }) => {
     const { t } = useTranslation();
-    const [visible, setVisible] = useState(false);
+    const [open, setOpen] = useState(false);
     const [value, setValue] = useState("asc");
 
     return (
@@ -22,7 +22,7 @@ const SortByButton = ({ refreshListItems }) => {
                         }}
                     />
                 }
-                onClick={() => setVisible(!visible)}
+                onClick={() => setOpen(!open)}
                 style={{
                     borderWidth: "2px",
                     borderColor: colors.blackSecondary,
@@ -46,14 +46,14 @@ const SortByButton = ({ refreshListItems }) => {
             </Button>
 
             <OrderModal
-                visible={visible}
+                open={open}
                 value={value}
                 setValue={setValue}
                 handleOk={() => {
                     refreshListItems(value);
-                    setVisible(!visible);
+                    setOpen(!open);
                 }}
-                handleCancel={() => setVisible(false)}
+                handleCancel={() => setOpen(false)}
             />
         </>
     );

src/components/Modal/OrderModal.tsx

@@ -5,13 +5,13 @@ import AletheiaButton, { ButtonType } from "../Button";
 import OrderRadio from "../Radio/OrderRadio";
 import { AletheiaModal, ModalCancelButton } from "./AletheiaModal.style";
 
-const OrderModal = ({ visible, value, setValue, handleOk, handleCancel }) => {
+const OrderModal = ({ open, value, setValue, handleOk, handleCancel }) => {
     const { t } = useTranslation();
 
     return (
         <AletheiaModal
             className="ant-modal-content"
-            visible={visible}
+            open={open}
             footer={false}
             onCancel={handleCancel}
             title={t("orderModal:title")}

src/components/Modal/WarningModal.tsx

@@ -7,7 +7,7 @@ import { AletheiaModal, ModalCancelButton } from "./AletheiaModal.style";
 import colors from "../../styles/colors";
 
 const WarningModal = ({
-    visible,
+    open,
     title,
     width,
     handleOk,
@@ -20,7 +20,7 @@ const WarningModal = ({
     return (
         <AletheiaModal
             className="ant-modal-content"
-            visible={visible}
+            open={open}
             footer={footer}
             onCancel={handleCancel}
             width={width}

src/components/Sidebar.tsx

@@ -22,7 +22,7 @@ const Sidebar = () => {
 
     return (
         <Drawer
-            visible={!menuCollapsed}
+            open={!menuCollapsed}
             onClose={() => dispatch(actions.closeSideMenu())}
             width="17rem"
             placement="left"

src/components/adminArea/Drawer/UserEditDrawer.tsx

@@ -9,16 +9,16 @@ import DrawerHeader from "./DrawerHeader";
 import UserEditForm from "./UserEditForm";
 
 const UserEditDrawer = () => {
-    const [visible, setVisible] = useAtom(isEditDrawerOpen);
+    const [open, setOpen] = useAtom(isEditDrawerOpen);
     const [currentUser] = useAtom(userBeingEdited);
     const [isLoading, setIsLoading] = useState(false);
 
     const onCloseDrawer = () => {
-        setVisible(false);
+        setOpen(false);
     };
 
     return (
-        <LargeDrawer visible={visible} onClose={onCloseDrawer}>
+        <LargeDrawer open={open} onClose={onCloseDrawer}>
             <Grid
                 container
                 justifyContent="center"

src/components/badges/BadgesFormDrawer.tsx

@@ -61,7 +61,7 @@ const BadgesFormDrawer = () => {
     });
 
     const { t } = useTranslation();
-    const [visible, setVisible] = useAtom(isEditDrawerOpen);
+    const [open, setOpen] = useAtom(isEditDrawerOpen);
     const addBadge = useSetAtom(addBadgeToList);
     const finishEditing = useSetAtom(finishEditingItem);
     const cancelEditing = useSetAtom(cancelEditingItem);
@@ -142,7 +142,7 @@ const BadgesFormDrawer = () => {
                             .then((createdBadge) => {
                                 addBadge(createdBadge);
                                 resetForm();
-                                setVisible(false);
+                                setOpen(false);
                             })
                             .catch((err) => {
                                 setIsLoading(false);
@@ -165,7 +165,7 @@ const BadgesFormDrawer = () => {
 
     return (
         <LargeDrawer
-            visible={visible}
+            visible={open}
             onClose={onCloseDrawer}
             backgroundColor={colors.lightGraySecondary}
         >