[PB-3511]:Chore/Add modal

package.json

@@ -10,7 +10,7 @@
     "@internxt/inxt-js": "=1.2.21",
     "@internxt/lib": "^1.2.0",
     "@internxt/sdk": "=1.9.9",
-    "@internxt/ui": "^0.0.16",
+    "@internxt/ui": "^0.0.23",
     "@phosphor-icons/react": "^2.1.7",
     "@popperjs/core": "^2.11.6",
     "@reduxjs/toolkit": "^1.6.0",

src/app/core/components/Sidenav/PendingInvitationsDialog.tsx

@@ -4,8 +4,7 @@ import errorService from 'app/core/services/error.service';
 import localStorageService from 'app/core/services/local-storage.service';
 import workspacesService from 'app/core/services/workspace.service';
 import { useTranslationContext } from 'app/i18n/provider/TranslationProvider';
-import { Button } from '@internxt/ui';
-import Modal from 'app/shared/components/Modal';
+import { Button, Modal } from '@internxt/ui';
 import { useAppDispatch } from 'app/store/hooks';
 import { workspaceThunks } from 'app/store/slices/workspaces/workspacesStore';
 import dayjs from 'dayjs';

src/app/drive/components/ClearTrashDialog/ClearTrashDialog.tsx

@@ -1,7 +1,6 @@
 import errorService from 'app/core/services/error.service';
 import { useTranslationContext } from 'app/i18n/provider/TranslationProvider';
-import { Button } from '@internxt/ui';
-import Modal from 'app/shared/components/Modal';
+import { Button, Modal } from '@internxt/ui';
 import { RootState } from 'app/store';
 import { useAppDispatch, useAppSelector } from 'app/store/hooks';
 import { planThunks } from 'app/store/slices/plan';

src/app/drive/components/CreateFolderDialog/CreateFolderDialog.tsx

@@ -5,9 +5,8 @@ import { RootState } from 'app/store';
 import { uiActions } from 'app/store/slices/ui';
 import storageThunks from 'app/store/slices/storage/storage.thunks';
 import storageSelectors from 'app/store/slices/storage/storage.selectors';
-import { Button } from '@internxt/ui';
+import { Button, Modal } from '@internxt/ui';
 import Input from 'app/shared/components/Input';
-import Modal from 'app/shared/components/Modal';
 import { useTranslationContext } from 'app/i18n/provider/TranslationProvider';
 import errorService from '../../../core/services/error.service';
 import { storageActions } from 'app/store/slices/storage';

src/app/drive/components/DeleteItemsDialog/DeleteItemsDialog.tsx

@@ -7,8 +7,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/hooks';
 import { RootState } from 'app/store';
 import { DriveItemData } from '../../types';
 import deleteItems from '../../../../use_cases/trash/delete-items';
-import { Button } from '@internxt/ui';
-import Modal from 'app/shared/components/Modal';
+import { Button, Modal } from '@internxt/ui';
 import { useTranslationContext } from 'app/i18n/provider/TranslationProvider';
 import { planThunks } from 'app/store/slices/plan';
 

src/app/drive/components/DriveExplorer/DriveExplorer.tsx

@@ -639,7 +639,7 @@ const DriveExplorer = (props: DriveExplorerProps): JSX.Element => {
       )}
       <BannerWrapper />
 
-      <div className="z-0 flex h-full w-full max-w-full grow">
+      <div className="flex h-full w-full max-w-full grow">
         {!isTrash && isOpen && (
           <ContextMenu
             item={'item'}
@@ -735,7 +735,7 @@ const DriveExplorer = (props: DriveExplorerProps): JSX.Element => {
             />
           )}
 
-          <div className="z-0 flex h-full grow flex-col justify-between overflow-y-hidden">
+          <div className="flex h-full grow flex-col justify-between overflow-y-hidden">
             <WarningMessageWrapper />
 
             <div className="flex grow flex-col justify-between overflow-hidden">

src/app/drive/components/EditItemNameDialog/EditItemNameDialog.tsx

@@ -1,8 +1,7 @@
-import { Button } from '@internxt/ui';
+import { Button, Modal } from '@internxt/ui';
 import { DriveFolderMetadataPayload } from 'app/drive/types/index';
 import { useTranslationContext } from 'app/i18n/provider/TranslationProvider';
 import Input from 'app/shared/components/Input';
-import Modal from 'app/shared/components/Modal';
 import { useAppDispatch } from 'app/store/hooks';
 import storageThunks from 'app/store/slices/storage/storage.thunks';
 import { FC, useEffect, useState } from 'react';

src/app/drive/components/ItemDetailsDialog/ItemDetailsDialog.tsx

@@ -3,11 +3,10 @@ import { useEffect, useState } from 'react';
 import { RootState } from '../../../store';
 import { useAppDispatch, useAppSelector } from '../../../store/hooks';
 import { uiActions } from '../../../store/slices/ui';
-import Modal from '../../../shared/components/Modal';
 import { X } from '@phosphor-icons/react';
 import { useTranslationContext } from '../../../i18n/provider/TranslationProvider';
 import iconService from '../../../drive/services/icon.service';
-import { Button } from '@internxt/ui';
+import { Button, Modal } from '@internxt/ui';
 import { bytesToString } from '../../../drive/services/size.service';
 import localStorageService, { STORAGE_KEYS } from '../../../core/services/local-storage.service';
 import { DriveItemData, DriveItemDetails, ItemDetailsProps } from '../../../drive/types';

src/app/drive/components/MoveItemsDialog/MoveItemsDialog.tsx

@@ -6,8 +6,7 @@ import databaseService, { DatabaseCollection } from 'app/database/services/datab
 import newStorageService from 'app/drive/services/new-storage.service';
 import { useTranslationContext } from 'app/i18n/provider/TranslationProvider';
 import BreadcrumbsMoveItemsDialogView from 'app/shared/components/Breadcrumbs/Containers/BreadcrumbsMoveItemsDialogView';
-import { Button, Loader } from '@internxt/ui';
-import Modal from 'app/shared/components/Modal';
+import { Button, Loader, Modal } from '@internxt/ui';
 import { RootState, store } from 'app/store';
 import { useAppDispatch, useAppSelector } from 'app/store/hooks';
 import { setItemsToMove, storageActions } from 'app/store/slices/storage';

src/app/drive/components/NameCollisionDialog/index.tsx

@@ -1,8 +1,7 @@
 import { FC, useEffect, useMemo, useState } from 'react';
 import { RadioGroup } from '@headlessui/react';
 
-import { Button } from '@internxt/ui';
-import Modal from 'app/shared/components/Modal';
+import { Button, Modal } from '@internxt/ui';
 import { DriveItemData } from '../../types';
 import { useTranslationContext } from '../../../i18n/provider/TranslationProvider';
 import { IRoot } from '../../../store/slices/storage/types';

src/app/drive/components/ShareDialog/ShareDialog.tsx

@@ -17,8 +17,7 @@ import { useTranslationContext } from 'app/i18n/provider/TranslationProvider';
 import { SharePasswordDisableDialog } from 'app/share/components/SharePasswordDisableDialog/SharePasswordDisableDialog';
 import { SharePasswordInputDialog } from 'app/share/components/SharePasswordInputDialog/SharePasswordInputDialog';
 import { MAX_SHARED_NAME_LENGTH } from 'app/share/views/SharedLinksView/SharedView';
-import { Avatar, Button, Loader } from '@internxt/ui';
-import Modal from 'app/shared/components/Modal';
+import { Avatar, Button, Loader, Modal } from '@internxt/ui';
 import { DELAY_SHOW_MS } from 'app/shared/components/Tooltip/Tooltip';
 import BaseCheckbox from 'app/shared/components/forms/BaseCheckbox/BaseCheckbox';
 import { RootState } from 'app/store';

src/app/drive/components/ShareUserNotRegistered/ShareUserNotRegistered.tsx

@@ -1,5 +1,4 @@
-import { Button } from '@internxt/ui';
-import Modal from 'app/shared/components/Modal';
+import { Button, Modal } from '@internxt/ui';
 import { useTranslationContext } from 'app/i18n/provider/TranslationProvider';
 
 interface ShareUserNotRegisteredProps {

src/app/drive/components/ShareWithTeamDialog/ShareWithTeamDialog.tsx

@@ -13,9 +13,8 @@ import { shareItemWithTeamV2 } from 'app/drive/components/DriveExplorer/utils';
 import workspacesService from 'app/core/services/workspace.service';
 import errorService from 'app/core/services/error.service';
 
-import Modal from 'app/shared/components/Modal';
 import { X } from '@phosphor-icons/react';
-import { Button, Loader } from '@internxt/ui';
+import { Button, Loader, Modal } from '@internxt/ui';
 
 interface ShareWithTeamDialogProps {
   item: DriveItemData;

src/app/drive/components/ShowInvitationsDialog/ShowInvitationsDialog.tsx

@@ -3,8 +3,7 @@ import { CheckCircle, X } from '@phosphor-icons/react';
 import errorService from 'app/core/services/error.service';
 import iconService from 'app/drive/services/icon.service';
 import { useTranslationContext } from 'app/i18n/provider/TranslationProvider';
-import { Button } from '@internxt/ui';
-import Modal from 'app/shared/components/Modal';
+import { Button, Modal } from '@internxt/ui';
 import { RootState } from 'app/store';
 import { useAppSelector } from 'app/store/hooks';
 import dayjs from 'dayjs';

src/app/drive/components/StopSharingAndMoveToTrashDialogWrapper/components/StopSharingAndMoveToTrashDialog/index.tsx

@@ -1,6 +1,5 @@
 import { useTranslationContext } from '../../../../../i18n/provider/TranslationProvider';
-import { Button, Loader } from '@internxt/ui';
-import Modal from '../../../../../shared/components/Modal';
+import { Button, Loader, Modal } from '@internxt/ui';
 
 const StopSharingAndMoveToTrashDialog = ({
   showStopSharingConfirmation,

src/app/drive/components/StopSharingItemDialog/StopSharingItemDialog.tsx

@@ -1,6 +1,5 @@
 import { useTranslationContext } from '../../../i18n/provider/TranslationProvider';
-import { Button, Loader } from '@internxt/ui';
-import Modal from '../../../shared/components/Modal';
+import { Button, Loader, Modal } from '@internxt/ui';
 
 const StopSharingItemDialog = ({
   showStopSharingConfirmation,

src/app/newSettings/PreferencesDialog.tsx

@@ -5,7 +5,6 @@ import { useSelector } from 'react-redux';
 
 import navigationService from 'app/core/services/navigation.service';
 import { useTranslationContext } from 'app/i18n/provider/TranslationProvider';
-import Modal from 'app/shared/components/Modal';
 import { useAppDispatch, useAppSelector } from 'app/store/hooks';
 import { uiActions } from 'app/store/slices/ui';
 import AccountSection from './Sections/Account/Account/AccountSection';
@@ -21,6 +20,7 @@ import { PreferencesDialogProps, Section, SelectSectionProps } from './types/typ
 import TeamsSection from './Sections/Workspace/Teams/TeamsSection';
 import { AccessLogsSection } from './Sections/Workspace/Logs/AccessLogsSection';
 import workspacesSelectors from 'app/store/slices/workspaces/workspaces.selectors';
+import { Modal } from '@internxt/ui';
 
 const findSectionItemsBySectionAndSubsection = ({ section, subsection }: SelectSectionProps) => {
   return sectionItems.find((item) => item.section === section && item.subsection === subsection);

src/app/newSettings/Sections/Account/Account/components/AccountDetailsModal.tsx

@@ -1,9 +1,8 @@
 import { useEffect, useState } from 'react';
 import { useTranslationContext } from '../../../../../i18n/provider/TranslationProvider';
 
-import { Button } from '@internxt/ui';
+import { Button, Modal } from '@internxt/ui';
 import Input from '../../../../../shared/components/Input';
-import Modal from '../../../../../shared/components/Modal';
 
 const AccountDetailsModal = ({
   isOpen,

src/app/newSettings/Sections/Account/Account/components/ChangeEmailModal.tsx

@@ -1,8 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useTranslationContext } from '../../../../../i18n/provider/TranslationProvider';
-import { Button } from '@internxt/ui';
+import { Button, Modal } from '@internxt/ui';
 import Input from '../../../../../shared/components/Input';
-import Modal from '../../../../../shared/components/Modal';
 
 interface ChangeEmailModalProps {
   isOpen: boolean;

src/app/newSettings/Sections/Account/Account/components/UploadAvatarModal.tsx

@@ -2,8 +2,7 @@ import { Image } from '@phosphor-icons/react';
 import { Suspense, useEffect, useRef, useState } from 'react';
 import AvatarEditor from 'react-avatar-editor';
 import { useTranslationContext } from '../../../../../i18n/provider/TranslationProvider';
-import { Button, Loader } from '@internxt/ui';
-import Modal from '../../../../../shared/components/Modal';
+import { Button, Loader, Modal } from '@internxt/ui';
 
 interface UploadAvatarModalProps {
   isOpen: boolean;

src/app/newSettings/Sections/Account/Account/containers/DeleteAccountContainer.tsx

@@ -5,8 +5,7 @@ import authService from '../../../../../auth/services/auth.service';
 import errorService from '../../../../../core/services/error.service';
 import Section from '../../../../../newSettings/Sections/General/components/Section';
 import notificationsService, { ToastType } from '../../../../../notifications/services/notifications.service';
-import { Button } from '@internxt/ui';
-import Modal from '../../../../../shared/components/Modal';
+import { Button, Modal } from '@internxt/ui';
 import { RootState } from '../../../../../store';
 import { PlanState } from '../../../../../store/slices/plan';
 

src/app/newSettings/Sections/Account/Plans/components/ChangePlanDialog.tsx

@@ -4,8 +4,7 @@ import { useSelector } from 'react-redux';
 import { bytesToString } from '../../../../../drive/services/size.service';
 import { useTranslationContext } from '../../../../../i18n/provider/TranslationProvider';
 import moneyService from '../../../../../payment/services/currency.service';
-import { Button } from '@internxt/ui';
-import Modal from '../../../../../shared/components/Modal';
+import { Button, Modal } from '@internxt/ui';
 import { RootState } from '../../../../../store';
 import { PlanState } from '../../../../../store/slices/plan';
 

src/app/newSettings/Sections/Account/Security/components/ChangePasswordModal.tsx

@@ -5,9 +5,8 @@ import { useEffect, useState } from 'react';
 import { changePassword } from 'app/auth/services/auth.service';
 import notificationsService, { ToastType } from 'app/notifications/services/notifications.service';
 
-import { Button } from '@internxt/ui';
+import { Button, Modal } from '@internxt/ui';
 import Input from 'app/shared/components/Input';
-import Modal from 'app/shared/components/Modal';
 import ValidPassword from 'app/shared/components/ValidPassword';
 
 const ChangePasswordModal = ({

src/app/newSettings/Sections/Account/Security/components/TwoFactorAuthenticationDisableModal.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useState } from 'react';
 import { deactivate2FA, userHas2FAStored } from 'app/auth/services/auth.service';
-import { Button } from '@internxt/ui';
-import Modal from 'app/shared/components/Modal';
+import { Button, Modal } from '@internxt/ui';
 import notificationsService, { ToastType } from 'app/notifications/services/notifications.service';
 import Input from 'app/shared/components/Input';
 import { useTranslationContext } from 'app/i18n/provider/TranslationProvider';

src/app/newSettings/Sections/Account/Security/components/TwoFactorAuthenticationEnableModal.tsx

@@ -1,8 +1,7 @@
 import { Warning } from '@phosphor-icons/react';
 import { useEffect, useState } from 'react';
 import authService, { generateNew2FA } from 'app/auth/services/auth.service';
-import { Button, Loader } from '@internxt/ui';
-import Modal from 'app/shared/components/Modal';
+import { Button, Loader, Modal } from '@internxt/ui';
 import appStoreIcon from 'app/../assets/icons/app-store.svg';
 import playStoreIcon from 'app/../assets/icons/play-store.svg';
 import useEffectAsync from 'app/core/hooks/useEffectAsync';

src/app/newSettings/Sections/Workspace/Billing/CancelSubscriptionModal.tsx

@@ -6,8 +6,7 @@ import { FreeStoragePlan } from '../../../../drive/types';
 import { useTranslationContext } from '../../../../i18n/provider/TranslationProvider';
 import notificationsService, { ToastType } from '../../../../notifications/services/notifications.service';
 import paymentService from '../../../../payment/services/payment.service';
-import { Button } from '@internxt/ui';
-import Modal from '../../../../shared/components/Modal';
+import { Button, Modal } from '@internxt/ui';
 import { useAppDispatch } from '../../../../store/hooks';
 import { planThunks } from '../../../../store/slices/plan';
 

src/app/newSettings/Sections/Workspace/Billing/components/EditBillingDetailsModal.tsx

@@ -2,8 +2,7 @@ import { t } from 'i18next';
 import { useState } from 'react';
 
 import { CustomerBillingInfo } from '@internxt/sdk/dist/drive/payments/types';
-import { Button } from '@internxt/ui';
-import Modal from 'app/shared/components/Modal';
+import { Button, Modal } from '@internxt/ui';
 
 import { PhoneInput } from 'react-international-phone';
 import 'react-international-phone/style.css';

src/app/newSettings/Sections/Workspace/Billing/components/EditPaymentMethodModal.tsx

@@ -6,10 +6,9 @@ import { Elements } from '@stripe/react-stripe-js';
 import paymentService from 'app/payment/services/payment.service';
 import useEffectAsync from 'app/core/hooks/useEffectAsync';
 
-import Modal from 'app/shared/components/Modal';
 import EditPaymentMethodForm from './EditPaymentMethodForm';
 import { UserType } from '@internxt/sdk/dist/drive/payments/types';
-import { Loader } from '@internxt/ui';
+import { Loader, Modal } from '@internxt/ui';
 
 interface EditPaymentMethodModalProps {
   isEditPaymentMethodModalOpen: boolean;

src/app/newSettings/Sections/Workspace/Billing/components/UpdateMembers/ConfirmUpdatedMembersModal.tsx

@@ -1,9 +1,8 @@
-import { Button } from '@internxt/ui';
+import { Button, Modal } from '@internxt/ui';
 import { StoragePlan } from '@internxt/sdk/dist/drive/payments/types';
 import { ArrowRight } from '@phosphor-icons/react';
 import { bytesToString } from 'app/drive/services/size.service';
 import { Translate } from 'app/i18n/types';
-import Modal from 'app/shared/components/Modal';
 
 interface ConfirmUpdateMembersModalProps {
   isOpen: boolean;

src/app/newSettings/Sections/Workspace/Billing/components/UpdateMembers/SelectNewMembersModal.tsx

@@ -1,7 +1,6 @@
-import { Button, RangeSlider } from '@internxt/ui';
+import { Button, RangeSlider, Modal } from '@internxt/ui';
 import { X } from '@phosphor-icons/react';
 import { Translate } from '../../../../../../i18n/types';
-import Modal from '../../../../../../shared/components/Modal';
 import { StoragePlan } from '@internxt/sdk/dist/drive/payments/types';
 
 interface SeatsProps {

src/app/newSettings/Sections/Workspace/Members/InviteDialog.tsx

@@ -4,10 +4,9 @@ import { UserPlus, X } from '@phosphor-icons/react';
 import { useForm } from 'react-hook-form';
 import { IFormValues } from '../../../../core/types';
 import { useTranslationContext } from '../../../../i18n/provider/TranslationProvider';
-import { Button } from '@internxt/ui';
+import { Button, Modal } from '@internxt/ui';
 import Card from '../../../../shared/components/Card';
 import Input from '../../../../shared/components/Input';
-import Modal from '../../../../shared/components/Modal';
 import BaseCheckbox from '../../../../shared/components/forms/BaseCheckbox/BaseCheckbox';
 import TextArea from '../../Account/Account/components/TextArea';
 import UserCard from './components/UserCard';

src/app/newSettings/Sections/Workspace/Members/components/ActionModal.tsx

@@ -1,5 +1,4 @@
-import { Button } from '@internxt/ui';
-import Modal from '../../../../../shared/components/Modal';
+import { Button, Modal } from '@internxt/ui';
 
 // TODO: MOVE TO COMPONENTS LIBRARY
 const ActionModal = ({

src/app/newSettings/Sections/Workspace/Members/components/ModifyStorageModal.tsx

@@ -1,8 +1,7 @@
 import { useState } from 'react';
 import { X } from '@phosphor-icons/react';
-import { Button, RangeSlider } from '@internxt/ui';
+import { Button, RangeSlider, Modal } from '@internxt/ui';
 import { useTranslationContext } from '../../../../../i18n/provider/TranslationProvider';
-import Modal from '../../../../../shared/components/Modal';
 import UserCard from './UserCard';
 import { MemberRole } from '../../../../../newSettings/types/types';
 import { bytesToString } from '../../../../../drive/services/size.service';

src/app/newSettings/Sections/Workspace/Overview/OverviewSection.tsx

@@ -10,9 +10,8 @@ import workspacesService from '../../../../core/services/workspace.service';
 import { UsageDetailsProps } from '../../../../drive/services/usage.service';
 import Section from '../../../../newSettings/components/Section';
 import notificationsService, { ToastType } from '../../../../notifications/services/notifications.service';
-import { Button, Dropdown, Loader } from '@internxt/ui';
+import { Button, Dropdown, Loader, Modal } from '@internxt/ui';
 import Card from '../../../../shared/components/Card';
-import Modal from '../../../../shared/components/Modal';
 import { RootState } from '../../../../store';
 import { useAppDispatch, useAppSelector } from '../../../../store/hooks';
 import { PlanState } from '../../../../store/slices/plan';

src/app/newSettings/Sections/Workspace/Overview/components/UploadAvatarModal.tsx

@@ -2,8 +2,7 @@ import { Image } from '@phosphor-icons/react';
 import { Suspense, useEffect, useRef, useState } from 'react';
 import AvatarEditor from 'react-avatar-editor';
 import { useTranslationContext } from '../../../../../i18n/provider/TranslationProvider';
-import { Button, Loader } from '@internxt/ui';
-import Modal from '../../../../../shared/components/Modal';
+import { Button, Loader, Modal } from '@internxt/ui';
 
 interface UploadAvatarModalProps {
   isOpen: boolean;

src/app/newSettings/Sections/Workspace/Teams/components/AddMemberDialog.tsx

@@ -2,9 +2,8 @@ import { WorkspaceUser } from '@internxt/sdk/dist/workspaces/types';
 import { useTranslationContext } from 'app/i18n/provider/TranslationProvider';
 
 import BaseCheckbox from 'app/shared/components/forms/BaseCheckbox/BaseCheckbox';
-import Modal from 'app/shared/components/Modal';
 import Input from 'app/shared/components/Input';
-import { Button, Avatar, Loader } from '@internxt/ui';
+import { Button, Avatar, Loader, Modal } from '@internxt/ui';
 
 interface AddMemberDialogProps {
   isOpen: boolean;

src/app/newSettings/Sections/Workspace/Teams/components/ChangeManagerDialog.tsx

@@ -1,8 +1,7 @@
 import { TeamMember } from '@internxt/sdk/dist/workspaces/types';
 import { useTranslationContext } from 'app/i18n/provider/TranslationProvider';
 
-import Modal from 'app/shared/components/Modal';
-import { Button, Avatar } from '@internxt/ui';
+import { Button, Avatar, Modal } from '@internxt/ui';
 import RoleBadge from 'app/newSettings/Sections/Workspace/Members/components/RoleBadge';
 
 import { ArrowRight } from '@phosphor-icons/react';

src/app/newSettings/Sections/Workspace/Teams/components/CreateTeamDialog.tsx

@@ -1,6 +1,5 @@
-import Modal from 'app/shared/components/Modal';
 import Input from 'app/shared/components/Input';
-import { Button } from '@internxt/ui';
+import { Button, Modal } from '@internxt/ui';
 import { useTranslationContext } from 'app/i18n/provider/TranslationProvider';
 
 interface CreateTeamDialogProps {

src/app/newSettings/Sections/Workspace/Teams/components/DeleteTeamDialog.tsx

@@ -1,6 +1,5 @@
 import { WorkspaceTeam } from '@internxt/sdk/dist/workspaces/types';
-import Modal from 'app/shared/components/Modal';
-import { Button } from '@internxt/ui';
+import { Button, Modal } from '@internxt/ui';
 import { useTranslationContext } from 'app/i18n/provider/TranslationProvider';
 
 interface DeleteTeamDialogProps {