From 4f0ecdbb6eb960ceb4a54317778de3bc1321982b Mon Sep 17 00:00:00 2001 From: NFish Date: Tue, 7 Jan 2025 14:23:19 +0800 Subject: [PATCH] fix: use repeat-linear-gradient for GridMask to improve darkmode support --- web/app/components/base/grid-mask/index.tsx | 81 +++---------------- web/app/components/billing/pricing/index.tsx | 4 +- .../components/billing/pricing/plan-item.tsx | 2 +- .../billing/pricing/self-hosted-plan-item.tsx | 2 +- web/tailwind.config.js | 1 + web/themes/manual-dark.css | 1 + web/themes/manual-light.css | 1 + 7 files changed, 16 insertions(+), 76 deletions(-) diff --git a/web/app/components/base/grid-mask/index.tsx b/web/app/components/base/grid-mask/index.tsx index 876eb7f1de..429b652056 100644 --- a/web/app/components/base/grid-mask/index.tsx +++ b/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 = ({ canvasClassName, gradientClassName, }) => { - const canvasRef = useRef(null) - const ctxRef = useRef(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 ( -
- -
+
+
+
{children}
) diff --git a/web/app/components/billing/pricing/index.tsx b/web/app/components/billing/pricing/index.tsx index d3159911aa..df65b7be0c 100644 --- a/web/app/components/billing/pricing/index.tsx +++ b/web/app/components/billing/pricing/index.tsx @@ -62,8 +62,8 @@ const Pricing: FC = ({ itemWidth={170} className='inline-flex' options={[ - { value: 'cloud', text:
{t('billing.plansCommon.cloud')}
}, - { value: 'self', text:
{t('billing.plansCommon.self')}
}]} + { value: 'cloud', text:
{t('billing.plansCommon.cloud')}
}, + { value: 'self', text:
{t('billing.plansCommon.self')}
}]} onChange={v => setCurrentPlan(v)} /> {currentPlan === 'cloud' && , 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: , diff --git a/web/app/components/billing/pricing/self-hosted-plan-item.tsx b/web/app/components/billing/pricing/self-hosted-plan-item.tsx index 906ae1a059..ae225838c6 100644 --- a/web/app/components/billing/pricing/self-hosted-plan-item.tsx +++ b/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', }, diff --git a/web/tailwind.config.js b/web/tailwind.config.js index ddb60368b7..0ca4378c14 100644 --- a/web/tailwind.config.js +++ b/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', diff --git a/web/themes/manual-dark.css b/web/themes/manual-dark.css index 13c4bf4274..92eddbe768 100644 --- a/web/themes/manual-dark.css +++ b/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%); } \ No newline at end of file diff --git a/web/themes/manual-light.css b/web/themes/manual-light.css index e58abda6c2..915f41d1b8 100644 --- a/web/themes/manual-light.css +++ b/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%); } \ No newline at end of file