chore: features modal animation

packages/web/src/javascripts/Components/PremiumFeaturesModal/PremiumFeaturesModal.tsx

@@ -1,17 +1,16 @@
-import AlertDialog from '../AlertDialog/AlertDialog'
 import { FunctionComponent, useRef } from 'react'
 import { WebApplication } from '@/Application/WebApplication'
 import { PremiumFeatureModalType } from './PremiumFeatureModalType'
 import { FeatureName } from '@/Controllers/FeatureName'
 import { SuccessPrompt } from './Subviews/SuccessPrompt'
 import { UpgradePrompt } from './Subviews/UpgradePrompt'
+import Modal from '../Modal/Modal'
 
 type Props = {
   application: WebApplication
   featureName?: FeatureName | string
   hasSubscription: boolean
   onClose: () => void
-  showModal: boolean
   type: PremiumFeatureModalType
 }
 
@@ -20,17 +19,12 @@ const PremiumFeaturesModal: FunctionComponent<Props> = ({
   featureName,
   hasSubscription,
   onClose,
-  showModal,
   type = PremiumFeatureModalType.UpgradePrompt,
 }) => {
   const ctaButtonRef = useRef<HTMLButtonElement>(null)
 
-  if (!showModal) {
-    return null
-  }
-
   return (
-    <AlertDialog closeDialog={onClose} className="w-full max-w-[90vw] md:max-w-89">
+    <Modal close={onClose} title="Upgrade" className="px-6 py-5" customHeader={<></>}>
       <div tabIndex={-1} className="sn-component">
         <div tabIndex={0}>
           {type === PremiumFeatureModalType.UpgradePrompt && (
@@ -46,7 +40,7 @@ const PremiumFeaturesModal: FunctionComponent<Props> = ({
           {type === PremiumFeatureModalType.UpgradeSuccess && <SuccessPrompt ctaRef={ctaButtonRef} onClose={onClose} />}
         </div>
       </div>
-    </AlertDialog>
+    </Modal>
   )
 }
 

packages/web/src/javascripts/Hooks/usePremiumModal.tsx

@@ -2,6 +2,7 @@ import { WebApplication } from '@/Application/WebApplication'
 import { observer } from 'mobx-react-lite'
 import { FunctionComponent, createContext, useCallback, useContext, ReactNode } from 'react'
 import PremiumFeaturesModal from '@/Components/PremiumFeaturesModal/PremiumFeaturesModal'
+import ModalOverlay from '@/Components/Modal/ModalOverlay'
 
 type PremiumModalContextData = {
   activate: (featureName: string) => void
@@ -44,16 +45,19 @@ const PremiumModalProvider: FunctionComponent<Props> = observer(({ application,
 
   return (
     <>
-      {application.featuresController.premiumAlertType != undefined && (
+      <ModalOverlay
+        isOpen={application.featuresController.premiumAlertType != undefined}
+        close={close}
+        className="w-full max-w-[90vw] md:max-w-89"
+      >
         <PremiumFeaturesModal
           application={application}
           featureName={featureName}
           hasSubscription={hasSubscription}
           onClose={close}
-          showModal={application.featuresController.premiumAlertType != undefined}
-          type={application.featuresController.premiumAlertType}
+          type={application.featuresController.premiumAlertType!}
         />
-      )}
+      </ModalOverlay>
       <PremiumModalProvider_ value={{ activate }}>{children}</PremiumModalProvider_>
     </>
   )