fix: use repeat-linear-gradient for GridMask to improve darkmode support

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

@@ -1,5 +1,5 @@
 import type { FC } from 'react'
-import { useCallback, useEffect, useRef } from 'react'
+import classNames from '@/utils/classnames'
 
 type GridMaskProps = {
   children: React.ReactNode
@@ -13,78 +13,15 @@ const GridMask: FC<GridMaskProps> = ({
   canvasClassName,
   gradientClassName,
 }) => {
-  const canvasRef = useRef<HTMLCanvasElement | null>(null)
-  const ctxRef = useRef<CanvasRenderingContext2D | null>(null)
-  const initCanvas = () => {
-    const dpr = window.devicePixelRatio || 1
-
-    if (canvasRef.current) {
-      const { width: cssWidth, height: cssHeight } = canvasRef.current?.getBoundingClientRect()
-
-      canvasRef.current.width = dpr * cssWidth
-      canvasRef.current.height = dpr * cssHeight
-
-      const ctx = canvasRef.current.getContext('2d')
-      if (ctx) {
-        ctx.scale(dpr, dpr)
-        ctx.strokeStyle = '#D1E0FF'
-        ctxRef.current = ctx
-      }
-    }
-  }
-
-  const drawRecord = useCallback(() => {
-    const canvas = canvasRef.current!
-    const ctx = ctxRef.current!
-    const rowNumber = parseInt(`${canvas.width / 24}`)
-    const colNumber = parseInt(`${canvas.height / 24}`)
-
-    ctx.clearRect(0, 0, canvas.width, canvas.height)
-    ctx.beginPath()
-    for (let i = 0; i < rowNumber; i++) {
-      for (let j = 0; j < colNumber; j++) {
-        const x = i * 24
-        const y = j * 24
-        if (j === 0) {
-          ctx.moveTo(x, y + 2)
-          ctx.arc(x + 2, y + 2, 2, Math.PI, Math.PI * 1.5)
-          ctx.lineTo(x + 22, y)
-          ctx.arc(x + 22, y + 2, 2, Math.PI * 1.5, Math.PI * 2)
-          ctx.lineTo(x + 24, y + 22)
-          ctx.arc(x + 22, y + 22, 2, 0, Math.PI * 0.5)
-          ctx.lineTo(x + 2, y + 24)
-          ctx.arc(x + 2, y + 22, 2, Math.PI * 0.5, Math.PI)
-        }
-        else {
-          ctx.moveTo(x + 2, y)
-          ctx.arc(x + 2, y + 2, 2, Math.PI * 1.5, Math.PI, true)
-          ctx.lineTo(x, y + 22)
-          ctx.arc(x + 2, y + 22, 2, Math.PI, Math.PI * 0.5, true)
-          ctx.lineTo(x + 22, y + 24)
-          ctx.arc(x + 22, y + 22, 2, Math.PI * 0.5, 0, true)
-          ctx.lineTo(x + 24, y + 2)
-          ctx.arc(x + 22, y + 2, 2, 0, Math.PI * 1.5, true)
-        }
-      }
-    }
-    ctx.stroke()
-    ctx.closePath()
-  }, [])
-
-  const handleStartDraw = () => {
-    if (canvasRef.current && ctxRef.current)
-      drawRecord()
-  }
-
-  useEffect(() => {
-    initCanvas()
-    handleStartDraw()
-  }, [])
-
   return (
-    <div className={`relative bg-white ${wrapperClassName}`}>
-      <canvas ref={canvasRef} className={`absolute inset-0 w-full h-full ${canvasClassName}`} />
-      <div className={`absolute w-full h-full z-[1] bg-gradient-to-b from-white/80 to-white rounded-lg ${gradientClassName}`} />
+    <div className={classNames('relative bg-saas-background', wrapperClassName)}>
+      <div className={classNames('absolute inset-0 w-full h-full z-0', canvasClassName)}
+        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/billing/pricing/index.tsx

@@ -62,8 +62,8 @@ const Pricing: FC<Props> = ({
                 itemWidth={170}
                 className='inline-flex'
                 options={[
-                  { value: 'cloud', text: <div className='inline-flex items-center system-md-semibold-uppercase'><RiCloudFill className='size-4 mr-2' />{t('billing.plansCommon.cloud')}</div> },
-                  { value: 'self', text: <div className='inline-flex items-center system-md-semibold-uppercase'><RiTerminalBoxFill className='size-4 mr-2' />{t('billing.plansCommon.self')}</div> }]}
+                  { value: 'cloud', text: <div className='inline-flex items-center system-md-semibold-uppercase text-text-secondary'><RiCloudFill className='size-4 mr-2' />{t('billing.plansCommon.cloud')}</div> },
+                  { value: 'self', text: <div className='inline-flex items-center system-md-semibold-uppercase text-text-secondary'><RiTerminalBoxFill className='size-4 mr-2' />{t('billing.plansCommon.self')}</div> }]}
                 onChange={v => setCurrentPlan(v)} />
 
               {currentPlan === 'cloud' && <SelectPlanRange

web/app/components/billing/pricing/plan-item.tsx

@@ -53,7 +53,7 @@ const style = {
   [Plan.professional]: {
     icon: <Keyframe className='text-util-colors-blue-brand-blue-brand-600 size-7' />,
     description: 'text-util-colors-blue-brand-blue-brand-600',
-    btnStyle: 'bg-components-button-primary-bg hover:bg-components-button-primary-bg-hover border border-component-button-primary-border text-components-button-primary-text',
+    btnStyle: 'bg-components-button-primary-bg hover:bg-components-button-primary-bg-hover border border-components-button-primary-border text-components-button-primary-text',
   },
   [Plan.team]: {
     icon: <Group2 className='text-util-colors-indigo-indigo-600 size-7' />,

web/app/components/billing/pricing/self-hosted-plan-item.tsx

@@ -70,7 +70,7 @@ const style = {
     priceTip: 'text-text-primary-on-surface',
     description: 'text-text-primary-on-surface',
     bg: 'border-effects-highlight bg-[#155AEF] text-text-primary-on-surface',
-    btnStyle: 'bg-components-button-secondary-bg hover:bg-components-button-secondary-bg-hover border-[0.5px] border-components-button-secondary-border text-[#155AEF] shadow-xs',
+    btnStyle: 'bg-white bg-opacity-96 hover:opacity-85 border-[0.5px] border-components-button-secondary-border text-[#155AEF] shadow-xs',
     values: 'text-text-primary-on-surface',
     tooltipIconColor: 'text-text-primary-on-surface',
   },

web/tailwind.config.js

@@ -111,6 +111,7 @@ const config = {
         'premium-yearly-tip-text-background': 'var(--color-premium-yearly-tip-text-background)',
         'price-premium-text-background': 'var(--color-premium-text-background)',
         'price-enterprise-background': 'var(--color-price-enterprise-background)',
+        'grid-mask-background': 'var(--color-grid-mask-background)',
       },
       lineClamp: {
         '20': '20',

web/themes/manual-dark.css

@@ -26,4 +26,5 @@ html[data-theme="dark"] {
         --color-premium-badge-background: linear-gradient(95deg, rgba(103, 111, 131, 0.90) 0%, rgba(73, 84, 100, 0.90) 105.58%), var(--util-colors-gray-gray-200, #18222F);
         --color-premium-text-background: linear-gradient(92deg, rgba(249, 250, 251, 0.95) 0%, rgba(233, 235, 240, 0.95) 97.78%);
         --color-price-enterprise-background: linear-gradient(180deg, rgba(185, 211, 234, 0.00) 0%, rgba(180, 209, 234, 0.92) 100%);
+        --color-grid-mask-background: linear-gradient(0deg, rgba(0, 0, 0, 0.00) 0%, rgba(24, 24, 25, 0.1) 62.25%, rgba(24, 24, 25, 0.10) 100%);
 }

web/themes/manual-light.css

@@ -26,4 +26,5 @@ html[data-theme="light"] {
         --color-premium-badge-background: linear-gradient(95deg, rgba(152, 162, 178, 0.90) 0%, rgba(103, 111, 131, 0.90) 105.58%);
         --color-premium-text-background: linear-gradient(92deg, rgba(252, 252, 253, 0.95) 0%, rgba(242, 244, 247, 0.95) 97.78%);
         --color-price-enterprise-background: linear-gradient(180deg, rgba(185, 211, 234, 0.00) 0%, rgba(180, 209, 234, 0.92) 100%);
+        --color-grid-mask-background: linear-gradient(0deg, #FFF 0%, rgba(217, 217, 217, 0.10) 62.25%, rgba(217, 217, 217, 0.10) 100%);
 }