diff --git a/src/components/common/gift/GiftTransferPreview.tsx b/src/components/common/gift/GiftTransferPreview.tsx index 71f9e7a3a..c4665717d 100644 --- a/src/components/common/gift/GiftTransferPreview.tsx +++ b/src/components/common/gift/GiftTransferPreview.tsx @@ -38,7 +38,6 @@ const GiftTransferPreview = ({ { setContainerSize({ @@ -138,13 +140,15 @@ const RadialPatternBackground = ({ ctx.drawImage(emojiImage, renderX - size / 2, renderY - size / 2, size, size); }); - ctx.fillStyle = adjustBrightness(backgroundColors[1] ?? backgroundColors[0], -0.075); + const patternColor = backgroundColors[1] ?? backgroundColors[0]; + const isDark = getColorLuma(hex2rgb(patternColor)) < DARK_LUMA_THRESHOLD; + ctx.fillStyle = adjustHsv(patternColor, 0.5, isDark ? 0.28 : -0.28); ctx.globalCompositeOperation = 'source-in'; ctx.fillRect(0, 0, width, height); const radialGradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, width / 2); - radialGradient.addColorStop(0.75, 'rgb(255 255 255 / 0)'); - radialGradient.addColorStop(1, 'rgb(255 255 255 / 0.75)'); + radialGradient.addColorStop(0, 'rgb(255 255 255 / 0.4)'); + radialGradient.addColorStop(1, 'rgb(255 255 255 / 0.9)'); // Scale around the gradient center ctx.translate(centerX, centerY); @@ -161,7 +165,7 @@ const RadialPatternBackground = ({ useEffect(() => { draw(); - }, [emojiImage, patternColor, patternPositions, yPosition, ovalFactor]); + }, [emojiImage, patternPositions, yPosition, ovalFactor]); useLayoutEffect(() => { const { width, height } = getContainerSize(); @@ -198,15 +202,3 @@ const RadialPatternBackground = ({ }; export default memo(RadialPatternBackground); - -function adjustBrightness(hex: string, delta: number) { - const factor = 1 + delta; - const [r, g, b, a] = hex2rgba(hex); - - return rgba2hex([ - Math.min(255, Math.round(r * factor)), - Math.min(255, Math.round(g * factor)), - Math.min(255, Math.round(b * factor)), - a ?? 255, - ]); -} diff --git a/src/components/middle/message/WebPageUniqueGift.tsx b/src/components/middle/message/WebPageUniqueGift.tsx index 190416d8d..d02c72df5 100644 --- a/src/components/middle/message/WebPageUniqueGift.tsx +++ b/src/components/middle/message/WebPageUniqueGift.tsx @@ -49,8 +49,10 @@ const WebPageUniqueGift = ({
diff --git a/src/components/middle/message/actions/StarGiftUnique.tsx b/src/components/middle/message/actions/StarGiftUnique.tsx index 6299bb033..3b809fd34 100644 --- a/src/components/middle/message/actions/StarGiftUnique.tsx +++ b/src/components/middle/message/actions/StarGiftUnique.tsx @@ -97,7 +97,6 @@ const StarGiftAction = ({ ); diff --git a/src/components/modals/gift/GiftResaleFilters.tsx b/src/components/modals/gift/GiftResaleFilters.tsx index 2fdd43c2c..9af1f31bf 100644 --- a/src/components/modals/gift/GiftResaleFilters.tsx +++ b/src/components/modals/gift/GiftResaleFilters.tsx @@ -512,7 +512,6 @@ const GiftResaleFilters: FC = ({
{backdrop.name} diff --git a/src/components/modals/gift/UniqueGiftHeader.tsx b/src/components/modals/gift/UniqueGiftHeader.tsx index 58e043974..ad144887a 100644 --- a/src/components/modals/gift/UniqueGiftHeader.tsx +++ b/src/components/modals/gift/UniqueGiftHeader.tsx @@ -66,13 +66,11 @@ const UniqueGiftHeader = ({ const radialPatternBackdrop = useMemo(() => { const backdropColors = [backdropAttribute.centerColor, backdropAttribute.edgeColor]; - const patternColor = backdropAttribute.patternColor; return ( ); diff --git a/src/components/modals/gift/status/GiftStatusInfoModal.tsx b/src/components/modals/gift/status/GiftStatusInfoModal.tsx index 8f79b6e13..6f076a92e 100644 --- a/src/components/modals/gift/status/GiftStatusInfoModal.tsx +++ b/src/components/modals/gift/status/GiftStatusInfoModal.tsx @@ -67,13 +67,11 @@ const GiftStatusInfoModal = ({ if (!emojiStatus || !isOpen) return undefined; const backdropColors = [emojiStatus.centerColor, emojiStatus.edgeColor]; - const patternColor = emojiStatus.patternColor; return ( ); diff --git a/src/components/modals/gift/withdraw/GiftWithdrawModal.tsx b/src/components/modals/gift/withdraw/GiftWithdrawModal.tsx index 378f56061..17442dbf0 100644 --- a/src/components/modals/gift/withdraw/GiftWithdrawModal.tsx +++ b/src/components/modals/gift/withdraw/GiftWithdrawModal.tsx @@ -98,7 +98,6 @@ const GiftWithdrawModal = ({ modal, hasPassword, passwordHint }: OwnProps & Stat 0.1 && s < 0.9) s = clamp(s + satDelta, 0, 1); + v = clamp(v + valDelta, 0, 1); + + return rgba2hex(hsva2rgba([h, s, v, a])); +}