refactor: simpilify trigger events limit modal css and props

web/app/components/billing/trigger-events-limit-modal/index.module.css

@@ -19,7 +19,6 @@
   background:
     linear-gradient(180deg, var(--color-components-avatar-bg-mask-stop-0, rgba(255, 255, 255, 0.12)) 0%, var(--color-components-avatar-bg-mask-stop-100, rgba(255, 255, 255, 0.08)) 100%),
     var(--color-util-colors-blue-brand-blue-brand-500, #296dff);
-  box-shadow: 0 10px 20px color-mix(in srgb, var(--color-util-colors-blue-brand-blue-brand-500, #296dff) 35%, transparent);
 }
 
 .highlight {

web/app/components/billing/trigger-events-limit-modal/index.tsx

@@ -7,22 +7,20 @@ import Button from '@/app/components/base/button'
 import { TriggerAll } from '@/app/components/base/icons/src/vender/workflow'
 import UsageInfo from '@/app/components/billing/usage-info'
 import UpgradeBtn from '@/app/components/billing/upgrade-btn'
-import type { Plan } from '@/app/components/billing/type'
 import styles from './index.module.css'
 
 type Props = {
   show: boolean
-  onDismiss: () => void
+  onClose: () => void
   onUpgrade: () => void
   usage: number
   total: number
   resetInDays?: number
-  planType: Plan
 }
 
 const TriggerEventsLimitModal: FC<Props> = ({
   show,
-  onDismiss,
+  onClose,
   onUpgrade,
   usage,
   total,
@@ -33,30 +31,30 @@ const TriggerEventsLimitModal: FC<Props> = ({
   return (
     <Modal
       isShow={show}
-      onClose={onDismiss}
+      onClose={onClose}
       closable={false}
       clickOutsideNotClose
-      className={`${styles.surface} flex h-[360px] w-[580px] flex-col overflow-hidden rounded-2xl !p-0 shadow-xl`}
+      className={`${styles.surface} w-[580px] rounded-2xl !p-0`}
     >
-      <div className='relative flex w-full flex-1 items-stretch justify-center'>
+      <div className='relative'>
         <div
           aria-hidden
           className={`${styles.heroOverlay} pointer-events-none absolute inset-0`}
         />
-        <div className='relative z-10 flex w-full flex-col items-start gap-4 px-8 pt-8'>
-          <div className={`${styles.icon} flex h-12 w-12 items-center justify-center rounded-[12px]`}>
-            <TriggerAll className='h-5 w-5 text-text-primary-on-surface' />
+        <div className='px-8 pt-8'>
+          <div className={`${styles.icon} flex size-12 items-center justify-center rounded-xl shadow-lg backdrop-blur-[5px]`}>
+            <TriggerAll className='size-6 text-text-primary-on-surface' />
           </div>
-          <div className='flex flex-col items-start gap-2'>
-            <div className={`${styles.highlight} title-lg-semi-bold`}>
+          <div className='mt-6 space-y-2'>
+            <div className={`${styles.highlight} title-3xl-semi-bold`}>
               {t('billing.triggerLimitModal.title')}
             </div>
-            <div className='body-md-regular text-text-secondary'>
+            <div className='system-md-regular text-text-tertiary'>
               {t('billing.triggerLimitModal.description')}
             </div>
           </div>
           <UsageInfo
-            className='mb-5 w-full rounded-[12px] bg-components-panel-on-panel-item-bg'
+            className='mt-4 w-full rounded-[12px] bg-components-panel-on-panel-item-bg'
             Icon={TriggerAll}
             name={t('billing.triggerLimitModal.usageTitle')}
             usage={usage}
@@ -67,18 +65,16 @@ const TriggerEventsLimitModal: FC<Props> = ({
         </div>
       </div>
 
-      <div className='flex h-[76px] w-full items-center justify-end gap-2 px-8 pb-8 pt-5'>
+      <div className='mb-8 mt-10 flex justify-end space-x-2 px-8'>
         <Button
-          className='h-8 w-[77px] min-w-[72px] !rounded-lg !border-[0.5px] px-3 py-2'
-          onClick={onDismiss}
+          onClick={onClose}
         >
           {t('billing.triggerLimitModal.dismiss')}
         </Button>
         <UpgradeBtn
           isShort
           onClick={onUpgrade}
-          className='flex w-[93px] items-center justify-center !rounded-lg !px-2'
-          style={{ height: 32 }}
+          className='!h-8 !rounded-lg'
           labelKey='billing.triggerLimitModal.upgrade'
           loc='trigger-events-limit-modal'
         />

web/context/hooks/use-trigger-events-limit-modal.ts

@@ -9,7 +9,6 @@ export type TriggerEventsLimitModalPayload = {
   usage: number
   total: number
   resetInDays?: number
-  planType: Plan
   storageKey?: string
   persistDismiss?: boolean
 }
@@ -98,7 +97,6 @@ export const useTriggerEventsLimitModal = ({
       payload: {
         usage: usage.triggerEvents,
         total: total.triggerEvents,
-        planType: type,
         resetInDays: triggerResetInDays,
         storageKey,
         persistDismiss,

web/context/modal-context.test.tsx

@@ -31,7 +31,7 @@ const triggerEventsLimitModalMock = jest.fn((props: any) => {
   latestTriggerEventsModalProps = props
   return (
     <div data-testid="trigger-limit-modal">
-      <button type="button" onClick={props.onDismiss}>dismiss</button>
+      <button type="button" onClick={props.onClose}>dismiss</button>
       <button type="button" onClick={props.onUpgrade}>upgrade</button>
     </div>
   )
@@ -115,11 +115,10 @@ describe('ModalContextProvider trigger events limit modal', () => {
       usage: 3000,
       total: 3000,
       resetInDays: 5,
-      planType: Plan.professional,
     })
 
     act(() => {
-      latestTriggerEventsModalProps.onDismiss()
+      latestTriggerEventsModalProps.onClose()
     })
 
     await waitFor(() => expect(screen.queryByTestId('trigger-limit-modal')).not.toBeInTheDocument())
@@ -149,7 +148,7 @@ describe('ModalContextProvider trigger events limit modal', () => {
     await waitFor(() => expect(screen.getByTestId('trigger-limit-modal')).toBeInTheDocument())
 
     act(() => {
-      latestTriggerEventsModalProps.onDismiss()
+      latestTriggerEventsModalProps.onClose()
     })
 
     await waitFor(() => expect(screen.queryByTestId('trigger-limit-modal')).not.toBeInTheDocument())
@@ -177,7 +176,7 @@ describe('ModalContextProvider trigger events limit modal', () => {
     await waitFor(() => expect(screen.getByTestId('trigger-limit-modal')).toBeInTheDocument())
 
     act(() => {
-      latestTriggerEventsModalProps.onDismiss()
+      latestTriggerEventsModalProps.onClose()
     })
 
     await waitFor(() => expect(screen.queryByTestId('trigger-limit-modal')).not.toBeInTheDocument())

web/context/modal-context.tsx

@@ -485,9 +485,8 @@ export const ModalContextProvider = ({
               show
               usage={showTriggerEventsLimitModal.payload.usage}
               total={showTriggerEventsLimitModal.payload.total}
-              planType={showTriggerEventsLimitModal.payload.planType}
               resetInDays={showTriggerEventsLimitModal.payload.resetInDays}
-              onDismiss={() => {
+              onClose={() => {
                 persistTriggerEventsLimitModalDismiss()
                 setShowTriggerEventsLimitModal(null)
               }}