[PB-6385] Fix reactDom is depricated error

react/features/base/meet/general/components/ErrorMessage.tsx

@@ -1,4 +1,4 @@
-import { WarningCircle } from "@phosphor-icons/react";
+import { WarningCircleIcon } from "@phosphor-icons/react";
 import React from "react";
 
 interface ErrorMessageProps {
@@ -8,7 +8,7 @@ interface ErrorMessageProps {
 export const ErrorMessage: React.FC<ErrorMessageProps> = ({ message }) => (
     <div className="flex flex-row items-start pt-1">
         <div className="flex h-5 flex-row items-center">
-            <WarningCircle weight="fill" className="mr-1 h-4 text-red" />
+            <WarningCircleIcon weight="fill" className="mr-1 h-4 text-red" />
         </div>
         <span className="font-base w-full text-sm text-red">{message}</span>
     </div>

react/features/base/meet/general/components/MediaControls.tsx

@@ -1,5 +1,11 @@
 import { CircleButton } from "@internxt/ui";
-import { ExclamationMark, Microphone, MicrophoneSlash, VideoCamera, VideoCameraSlash } from "@phosphor-icons/react";
+import { 
+    ExclamationMarkIcon, 
+    MicrophoneIcon, 
+    MicrophoneSlashIcon, 
+    VideoCameraIcon, 
+    VideoCameraSlashIcon 
+} from "@phosphor-icons/react";
 import React, { useState } from "react";
 
 import MeetAudioSettingsPopUp from "../containers/MeetAudioSettingsPopup";
@@ -16,7 +22,7 @@ interface MediaControlsProps {
     onAudioOptionsClick: () => void;
 }
 const indicatorProps = {
-    icon: <ExclamationMark size={12} color="white" weight="bold" />,
+    icon: <ExclamationMarkIcon size={12} color="white" weight="bold" />,
     className: "bg-orange",
 };
 const MediaControls: React.FC<MediaControlsProps> = ({
@@ -54,9 +60,9 @@ const MediaControls: React.FC<MediaControlsProps> = ({
                 }}
             >
                 {hasVideoPermissions && !isVideoMuted ? (
-                    <VideoCamera size={22} color="black" weight="fill" />
+                    <VideoCameraIcon size={22} color="black" weight="fill" />
                 ) : (
-                    <VideoCameraSlash size={22} color="white" weight="fill" />
+                    <VideoCameraSlashIcon size={22} color="white" weight="fill" />
                 )}
             </CircleButton>
             <CircleButton
@@ -77,9 +83,9 @@ const MediaControls: React.FC<MediaControlsProps> = ({
                 }}
             >
                 {isAudioMuted || !hasAudioPermissions ? (
-                    <MicrophoneSlash size={20} color="white" weight="fill" />
+                    <MicrophoneSlashIcon size={20} color="white" weight="fill" />
                 ) : (
-                    <Microphone size={22} color="black" weight="fill" />
+                    <MicrophoneIcon size={22} color="black" weight="fill" />
                 )}
             </CircleButton>
         </div>

react/features/base/meet/general/components/PermissionModal.tsx

@@ -1,7 +1,7 @@
 import { TransparentModal } from "@internxt/ui";
-import { Microphone, VideoCamera } from "@phosphor-icons/react";
+import { MicrophoneIcon, VideoCameraIcon } from "@phosphor-icons/react";
 import React from "react";
-import ReactDOM from "react-dom";
+import { createPortal } from "react-dom";
 
 export interface PermissionModalProps {
     translate: (key: string) => string;
@@ -30,10 +30,10 @@ const PermissionModal = ({
                 <div className="bg-orange/50 rounded-[20px] p-5 mb-4">
                     <div className="flex justify-center gap-2 mb-4">
                         <div className="w-12 h-12 bg-white/25 rounded-full flex items-center justify-center">
-                            <VideoCamera className="text-white" size={24} weight="fill" />
+                            <VideoCameraIcon className="text-white" size={24} weight="fill" />
                         </div>
                         <div className="w-12 h-12 bg-white/25 rounded-full flex items-center justify-center">
-                            <Microphone className="text-white" size={24} weight="fill" />
+                            <MicrophoneIcon className="text-white" size={24} weight="fill" />
                         </div>
                     </div>
                     <p
@@ -53,7 +53,7 @@ const PermissionModal = ({
         </TransparentModal>
     );
 
-    return ReactDOM.createPortal(modalContent, bodyElement);
+    return createPortal(modalContent, bodyElement);
 };
 
 export default PermissionModal;

react/features/base/meet/views/Conference/components/Header.tsx

@@ -1,5 +1,5 @@
 import { Header as IntxHeader } from "@internxt/ui";
-import { SquaresFour, UserFocus } from "@phosphor-icons/react";
+import { SquaresFourIcon, UserFocusIcon } from "@phosphor-icons/react";
 import React from "react";
 import ConferenceTimer from "./ConferenceTimer";
 
@@ -47,10 +47,10 @@ const RightContent = React.memo(({ mode, translate, onSetModeClicked }: RightCon
             className="flex flex-row justify-center items-center space-x-2 p-[10px] bg-black/50 border border-white/10 rounded-2xl"
         >
            {mode === "gallery" ? <>
-            <SquaresFour size={20} /> <span>{translate("meet.meeting.button.gallery")}</span>
+            <SquaresFourIcon size={20} /> <span>{translate("meet.meeting.button.gallery")}</span>
            </>
            : <>
-           <UserFocus size={20} /> <span>{translate("meet.meeting.button.speaker")}</span>
+           <UserFocusIcon size={20} /> <span>{translate("meet.meeting.button.speaker")}</span>
            </>}
         </button>
     );

react/features/base/meet/views/Conference/components/InviteUserModal.tsx

@@ -1,5 +1,5 @@
 import { Button, TransparentModal } from "@internxt/ui";
-import { Check, Link, X } from "@phosphor-icons/react";
+import { CheckIcon, LinkIcon, XIcon } from "@phosphor-icons/react";
 import React, { useState } from "react";
 import { getDecodedURI } from "../../../../util/uri";
 import { MAX_SIZE_PARTICIPANTS } from "../../../constants";
@@ -37,7 +37,7 @@ const InviteUserModal = ({ isOpen, onClose, translate, participantsCount, invite
                     className="absolute right-5 top-4 hover:bg-gray-700 rounded-lg transition-colors text-gray-400 hover:text-white"
                     aria-label="Close dialog"
                 >
-                    <X className="w-5 h-5" />
+                    <XIcon className="w-5 h-5" />
                 </button>
                 <div className="flex flex-col items-center justify-center">
                     <span className="text-xl font-semibold text-white "> {translate("meet.invite.invitePeople")}</span>
@@ -54,7 +54,7 @@ const InviteUserModal = ({ isOpen, onClose, translate, participantsCount, invite
 
                 <div className="space-y-4 pt-3">
                     <div className="relative w-full">
-                        <Link className="absolute left-3 top-1/2 transform -translate-y-1/2" size={20} color="gray" />
+                        <LinkIcon className="absolute left-3 top-1/2 transform -translate-y-1/2" size={20} color="gray" />
                         <input
                             type="text"
                             value={inviteLink}
@@ -71,7 +71,7 @@ const InviteUserModal = ({ isOpen, onClose, translate, participantsCount, invite
                     >
                         {copied ? (
                             <div className="flex items-center justify-center">
-                                <Check size={18} className="mr-1" />
+                                <CheckIcon size={18} className="mr-1" />
                                 {translate("meet.invite.copied")}
                             </div>
                         ) : (

react/features/base/meet/views/Conference/containers/VideoGalleryWrapper.tsx

@@ -1,4 +1,4 @@
-import { CaretDown, CaretUp, CheckCircle, MonitorArrowUp } from "@phosphor-icons/react";
+import { CaretDownIcon, CaretUpIcon, CheckCircleIcon, MonitorArrowUpIcon } from "@phosphor-icons/react";
 import React, { useRef, useState } from "react";
 import { WithTranslation } from "react-i18next";
 import { connect, useSelector } from "react-redux";
@@ -93,9 +93,9 @@ const GalleryVideoWrapper = ({ videoMode, t, dispatch }: GalleryVideoWrapperProp
                 <div className="absolute top-4 left-1/2 -translate-x-1/2 z-[200]">
                     <div className="flex items-center gap-2 px-4 py-2 bg-[#EAF9EE] border border-[#F9F9FC] text-white rounded-lg shadow-lg">
                         {isLocalSharing ? (
-                            <MonitorArrowUp size={20} weight="fill" color="#32C356" />
+                            <MonitorArrowUpIcon size={20} weight="fill" color="#32C356" />
                         ) : (
-                            <CheckCircle size={20} weight="fill" color="#32C356" />
+                            <CheckCircleIcon size={20} weight="fill" color="#32C356" />
                         )}
                         <span className="text-base text-[#1C1C1C] font-normal">
                             {isLocalSharing
@@ -139,7 +139,7 @@ const GalleryVideoWrapper = ({ videoMode, t, dispatch }: GalleryVideoWrapperProp
                                         : "opacity-30 cursor-not-allowed"
                                 }`}
                             >
-                                <CaretUp size={24} color="white" weight="bold" />
+                                <CaretUpIcon size={24} color="white" weight="bold" />
                             </button>
                         )}
 
@@ -171,7 +171,7 @@ const GalleryVideoWrapper = ({ videoMode, t, dispatch }: GalleryVideoWrapperProp
                                         : "opacity-30 cursor-not-allowed"
                                 }`}
                             >
-                                <CaretDown size={24} color="white" weight="bold" />
+                                <CaretDownIcon size={24} color="white" weight="bold" />
                             </button>
                         )}
                     </div>

react/features/base/meet/views/Home/components/auth/PasswordInput.tsx

@@ -1,4 +1,4 @@
-import { Eye, EyeSlash } from "@phosphor-icons/react";
+import { EyeIcon, EyeSlashIcon } from "@phosphor-icons/react";
 import React, { useState } from "react";
 import { FieldError, Path, UseFormRegister, ValidationRule } from "react-hook-form";
 import { IFormValues } from "../../types";
@@ -85,7 +85,7 @@ const PasswordInput = ({
                     tabIndex={0}
                     className="absolute right-4 top-1/2 flex -translate-y-1/2 cursor-pointer items-center justify-center text-gray-100"
                 >
-                    {showPassword ? <Eye className="h-6 w-6" /> : <EyeSlash className="h-6 w-6" />}
+                    {showPassword ? <EyeIcon className="h-6 w-6" /> : <EyeSlashIcon className="h-6 w-6" />}
                 </button>
             </div>
             {error && <p className="text-sm text-red">{error.message}</p>}

react/features/base/meet/views/Home/containers/AuthModal.tsx

@@ -1,5 +1,5 @@
 import { Modal } from "@internxt/ui";
-import { X } from "@phosphor-icons/react";
+import { XIcon } from "@phosphor-icons/react";
 import React, { useEffect, useState } from "react";
 import { LoginCredentials } from "../../../services/types/command.types";
 import { WebAuthButton } from "../components/auth/WebAuthButton";
@@ -103,7 +103,7 @@ const ModalHeader: React.FC<{
             {isLoginView ? translate("meet.auth.modal.title") : translate("meet.auth.modal.signup.createAccountTitle")}
         </h2>
         <button onClick={onClose} className="text-gray-100 hover:text-gray-700">
-            <X size={24} />
+            <XIcon size={24} />
         </button>
     </div>
 );

react/features/base/meet/views/Home/containers/ScheduleModal.tsx

@@ -1,5 +1,5 @@
 import { Button, Input, Modal } from "@internxt/ui";
-import { Copy, X } from "@phosphor-icons/react";
+import { CopyIcon, XIcon } from "@phosphor-icons/react";
 import React, { useState } from "react";
 
 interface ScheduleMeetingModalProps {
@@ -32,7 +32,7 @@ const ScheduleMeetingModal: React.FC<ScheduleMeetingModalProps> = ({
     return (
         <Modal isOpen={isOpen} onClose={onClose} className="p-0 w-[384px]" width="w-[384px]">
             <button onClick={onClose} className="absolute right-5 top-5 text-gray-100 hover:text-gray-700">
-                <X size={24} />
+                <XIcon size={24} />
             </button>
             <div className="p-5">
                 <h1 className="text-2xl font-medium text-gray-100 mb-2">{translate("meet.modals.schedule.title")}</h1>
@@ -57,7 +57,7 @@ const ScheduleMeetingModal: React.FC<ScheduleMeetingModalProps> = ({
                         onClick={handleCopy}
                         className="absolute right-1.5 top-1 h-8 w-8 rounded-full items-center justify-center flex hover:bg-[#0066FF1A] active:bg-[#0066FF40] transition-colors duration-200"
                     >
-                        <Copy size={20} className="text-primary" color="#0066FF" />
+                        <CopyIcon size={20} className="text-primary" color="#0066FF" />
                     </button>
                     {copied && (
                         <div className="absolute -top-10 right-0 bg-black/70 text-white px-3 py-1 rounded-md text-sm font-medium shadow-lg animate-fade-in">

react/features/base/meet/views/Settings/CustomDeviceSelector.tsx

@@ -1,4 +1,4 @@
-import { CaretDown, Check } from "@phosphor-icons/react";
+import { CaretDownIcon, CheckIcon } from "@phosphor-icons/react";
 import React, { useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -96,7 +96,7 @@ const DeviceSelector = ({ devices, hasPermission, id, isDisabled, label, onSelec
                     aria-expanded={isOpen}
                 >
                     <span className="block truncate">{triggerText}</span>
-                    <CaretDown
+                    <CaretDownIcon
                         className={`h-6 w-6 text-gray-400 transition-transform duration-200 flex-shrink-0 ml-2 ${
                             isOpen ? "rotate-180" : ""
                         }`}
@@ -131,7 +131,7 @@ const DeviceSelector = ({ devices, hasPermission, id, isDisabled, label, onSelec
                                     >
                                         <div className="flex items-center">
                                             <div className="w-4 h-4 mr-3 flex-shrink-0 flex items-center justify-center">
-                                                {item.value === selectedDeviceId && <Check className="h-4 w-4" />}
+                                                {item.value === selectedDeviceId && <CheckIcon className="h-4 w-4" />}
                                             </div>
                                             <span className="block truncate font-medium">{item.label}</span>
                                         </div>

react/features/base/meet/views/Settings/SettingsDialog.tsx

@@ -1,4 +1,4 @@
-import { Icon, X } from "@phosphor-icons/react";
+import { Icon, XIcon } from "@phosphor-icons/react";
 import React, { ComponentType, useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 
@@ -177,7 +177,7 @@ const SettingsDialog: React.FC<SettingsDialogProps> = ({
                             className="absolute right-5 top-4 hover:bg-gray-700 rounded-lg transition-colors text-gray-400 hover:text-white"
                             aria-label="Close dialog"
                         >
-                            <X className="w-5 h-5" />
+                            <XIcon className="w-5 h-5" />
                         </button>
                     </div>
                     {/* Tab content */}

react/features/base/meet/views/Settings/SettingsDialogWrapper.tsx

@@ -1,4 +1,4 @@
-import { ArrowSquareOut } from "@phosphor-icons/react";
+import { ArrowSquareOutIcon } from "@phosphor-icons/react";
 import React, { useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -38,7 +38,7 @@ const SettingsDialogWrapper: React.FC<IProps> = ({ generalTabs, defaultTab, disp
             id: "manage-account",
             label: t("settings.account.manage"),
             onClick: () => window.open(EXTERNAL_ACCOUNT_URL, "_blank", "noopener,noreferrer"),
-            Icon: ArrowSquareOut,
+            Icon: ArrowSquareOutIcon,
         },
     ];
 

react/features/settings/components/web/audio/AudioSettingsContent.tsx

@@ -16,7 +16,7 @@ import { isNoiseSuppressionEnabled } from "../../../../noise-suppression/functio
 import { isPrejoinPageVisible } from "../../../../prejoin/functions";
 import { createLocalAudioTracks } from "../../../functions.web";
 
-import { Microphone, SpeakerSimpleHigh } from "@phosphor-icons/react";
+import { MicrophoneIcon, SpeakerSimpleHighIcon } from "@phosphor-icons/react";
 import MicrophoneEntry from "./MicrophoneEntry";
 import SpeakerEntry from "./SpeakerEntry";
 
@@ -305,7 +305,7 @@ const AudioSettingsContent = ({
                     <ContextMenuItem
                         accessibilityLabel={t("settings.speakers")}
                         className={classes.header}
-                        icon={() => <SpeakerSimpleHigh size={20} color="black" weight="fill" />}
+                        icon={() => <SpeakerSimpleHighIcon size={20} color="black" weight="fill" />}
                         id={speakerHeaderId}
                         text={t("settings.speakers")}
                     />
@@ -321,7 +321,7 @@ const AudioSettingsContent = ({
                 <ContextMenuItem
                     accessibilityLabel={t("settings.microphones")}
                     className={classes.header}
-                    icon={() => <Microphone size={20} color="black" weight="fill" />}
+                    icon={() => <MicrophoneIcon size={20} color="black" weight="fill" />}
                     id={microphoneHeaderId}
                     text={t("settings.microphones")}
                 />

react/features/settings/components/web/video/VideoSettingsContent.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { makeStyles } from "tss-react/mui";
 
-import { VideoCamera } from "@phosphor-icons/react";
+import { VideoCameraIcon } from "@phosphor-icons/react";
 import { IReduxState, IStore } from "../../../../app/types";
 import { IconImage } from "../../../../base/icons/svg";
 import { Video } from "../../../../base/media/components/index.web";
@@ -362,7 +362,7 @@ const VideoSettingsContent = ({
                 {selectedTrack && _renderPreviewEntry(selectedTrack)}
                 <div style={{ pointerEvents: "none" }}>
                     <ContextMenuItem
-                        icon={() => <VideoCamera size={20} color="black" weight="fill"  />}
+                        icon={() => <VideoCameraIcon size={20} color="black" weight="fill"  />}
                         text={t("meet.settings.video.videoInput")}
                         accessibilityLabel={t("meet.settings.video.videoInput")}
                     />