fix: update bill page background image

web/app/components/base/grid-mask/index.tsx

@@ -1,4 +1,5 @@
 import type { FC } from 'react'
+import Style from './style.module.css'
 import classNames from '@/utils/classnames'
 
 type GridMaskProps = {
@@ -15,12 +16,7 @@ const GridMask: FC<GridMaskProps> = ({
 }) => {
   return (
     <div className={classNames('relative bg-saas-background', wrapperClassName)}>
-      <div className={classNames('absolute inset-0 w-full h-full z-0', canvasClassName)}
+      <div className={classNames('absolute inset-0 w-full h-full z-0', canvasClassName, Style.gridBg)} />
-        style={{
-          background: `
-          repeating-linear-gradient(0deg, transparent, transparent 23px, var(--color-divider-subtle) 24px,transparent 24px, transparent 47px, var(--color-divider-subtle) 48px),
-          repeating-linear-gradient(90deg, transparent, transparent 23px, var(--color-divider-subtle) 24px,transparent 24px,transparent 47px, var(--color-divider-subtle) 48px)`,
-        }} />
       <div className={classNames('absolute w-full h-full z-[1] bg-grid-mask-background rounded-lg', gradientClassName)} />
       <div className='relative z-[2]'>{children}</div>
     </div>

web/app/components/base/grid-mask/style.module.css

@@ -0,0 +1,5 @@
+.gridBg{
+  background-image: url(./Grid.svg);
+  background-repeat: repeat;
+  background-position: 0 0;
+}

web/app/components/billing/pricing/index.tsx

@@ -40,12 +40,12 @@ const Pricing: FC<Props> = ({
     >
       <div className='w-full h-full relative overflow-auto rounded-2xl border border-effects-highlight bg-saas-background'>
         <div
-          className='absolute top-3 right-3 flex items-center justify-center w-9 h-9 bg-components-button-tertiary-bg hover:bg-components-button-tertiary-bg-hover rounded-[10px] cursor-pointer z-[1001]'
+          className='fixed top-7 right-7 flex items-center justify-center w-9 h-9 bg-components-button-tertiary-bg hover:bg-components-button-tertiary-bg-hover rounded-[10px] cursor-pointer z-[1001]'
           onClick={onCancel}
         >
           <RiCloseLine className='size-5 text-components-button-tertiary-text' />
         </div>
-        <GridMask wrapperClassName='w-full h-full' canvasClassName='h-full'>
+        <GridMask wrapperClassName='w-full min-h-full' canvasClassName='min-h-full'>
           <div className='pt-12 px-8 pb-7 flex flex-col items-center'>
             <div className='mb-2 title-5xl-bold text-text-primary'>
               {t('billing.plansCommon.title')}