From e7b1e1e53b266616eff60f0ac0cce61b5e588ddd Mon Sep 17 00:00:00 2001 From: uiuxxx Date: Thu, 19 Sep 2024 22:13:58 +0100 Subject: [PATCH 1/4] Updated light and dark mode colors for sparkles --- .../tooltips/apr-tooltip/MainAprTooltip.tsx | 42 +++++++++++++++---- 1 file changed, 34 insertions(+), 8 deletions(-) diff --git a/lib/shared/components/tooltips/apr-tooltip/MainAprTooltip.tsx b/lib/shared/components/tooltips/apr-tooltip/MainAprTooltip.tsx index 3a641875c..d00c08992 100644 --- a/lib/shared/components/tooltips/apr-tooltip/MainAprTooltip.tsx +++ b/lib/shared/components/tooltips/apr-tooltip/MainAprTooltip.tsx @@ -7,7 +7,7 @@ import { PopoverContent, Text, TextProps, - useTheme, + useColorModeValue, } from '@chakra-ui/react' import BaseAprTooltip, { BaseAprTooltipProps } from './BaseAprTooltip' import { Info } from 'react-feather' @@ -42,24 +42,50 @@ export const SparklesIcon = ({ pool: Pool | PoolListItem | FeaturedPool id?: string }) => { - const theme = useTheme() const { corePoolId } = getProjectConfig() const hoverColor = isLBP(pool.type) ? 'inherit' : 'font.highlight' const hasRewardApr = pool.dynamicData.aprItems.filter(item => item.type !== GqlPoolAprItemType.SwapFee).length > 0 - let gradFromColor = theme.colors.sparkles.default.from - let gradToColor = theme.colors.sparkles.default.to + const defaultGradFrom = useColorModeValue( + '#91A1B6', // light from + '#A0AEC0' // dark from + ) + const defaultGradTo = useColorModeValue( + '#BCCCE1', // light to + '#E9EEF5' // dark to + ) + + const corePoolGradFrom = useColorModeValue( + '#BFA672', // light from + '#AE8C56' // dark from + ) + const corePoolGradTo = useColorModeValue( + '#D9C47F', // light to + '#F4EAD2' // dark to + ) + + const rewardsGradFrom = useColorModeValue( + '#F49A55', // light from + '#F48975' // dark from + ) + const rewardsGradTo = useColorModeValue( + '#FCD45B', // light to + '#EFB473' // dark to + ) + + let gradFromColor = defaultGradFrom + let gradToColor = defaultGradTo if (pool.id === corePoolId) { - gradFromColor = theme.colors.sparkles.corePool.from - gradToColor = theme.colors.sparkles.corePool.to + gradFromColor = corePoolGradFrom + gradToColor = corePoolGradTo } if (hasRewardApr) { - gradFromColor = theme.colors.sparkles.rewards.from - gradToColor = theme.colors.sparkles.rewards.to + gradFromColor = rewardsGradFrom + gradToColor = rewardsGradTo } return ( From a3161fe895a3edb922b9476f0825b34543cb7f66 Mon Sep 17 00:00:00 2001 From: uiuxxx Date: Thu, 19 Sep 2024 22:14:47 +0100 Subject: [PATCH 2/4] New single star icon to only be displayed when a pool only has swap fees. --- lib/shared/components/icons/StarIcon.tsx | 49 ++++++++++++++++++++++++ 1 file changed, 49 insertions(+) create mode 100644 lib/shared/components/icons/StarIcon.tsx diff --git a/lib/shared/components/icons/StarIcon.tsx b/lib/shared/components/icons/StarIcon.tsx new file mode 100644 index 000000000..89081b1c8 --- /dev/null +++ b/lib/shared/components/icons/StarIcon.tsx @@ -0,0 +1,49 @@ +import { useTheme } from '@chakra-ui/react' +import { SVGProps } from 'react' + +interface Props extends SVGProps { + gradFrom?: string + gradTo?: string + variant?: 'gradient' | 'solid' + id?: string +} + +function StarIcon({ + gradFrom = 'yellow', + gradTo = 'pink', + variant = 'gradient', + id, + ...rest +}: Props) { + const theme = useTheme() + const gradientId = `stars-gradient-${gradFrom}-${gradTo}-${id}` + + const startColor = theme.colors[gradTo] ? theme.colors[gradTo]['500'] : gradTo + const stopColor = theme.colors[gradFrom] ? theme.colors[gradFrom]['500'] : gradFrom + return ( + + + + + + + + + + ) +} + +export default StarIcon From 0784cc328eb03d3d92255cd26f398dd7269f0de5 Mon Sep 17 00:00:00 2001 From: groninge Date: Fri, 20 Sep 2024 08:35:51 +0200 Subject: [PATCH 3/4] update star color logic --- .../tooltips/apr-tooltip/MainAprTooltip.tsx | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/lib/shared/components/tooltips/apr-tooltip/MainAprTooltip.tsx b/lib/shared/components/tooltips/apr-tooltip/MainAprTooltip.tsx index d00c08992..9fc6c41b1 100644 --- a/lib/shared/components/tooltips/apr-tooltip/MainAprTooltip.tsx +++ b/lib/shared/components/tooltips/apr-tooltip/MainAprTooltip.tsx @@ -18,6 +18,7 @@ import { FeaturedPool, Pool } from '@/lib/modules/pool/PoolProvider' import { isLBP } from '@/lib/modules/pool/pool.helpers' import { getProjectConfig } from '@/lib/config/getProjectConfig' import { GqlPoolAprItemType } from '@/lib/shared/services/api/generated/graphql' +import StarIcon from '../../icons/StarIcon' interface Props extends Omit< @@ -46,7 +47,13 @@ export const SparklesIcon = ({ const hoverColor = isLBP(pool.type) ? 'inherit' : 'font.highlight' const hasRewardApr = - pool.dynamicData.aprItems.filter(item => item.type !== GqlPoolAprItemType.SwapFee).length > 0 + pool.dynamicData.aprItems.filter(item => + [GqlPoolAprItemType.Staking, GqlPoolAprItemType.VebalEmissions].includes(item.type) + ).length > 0 + + const hasOnlySwapApr = + pool.dynamicData.aprItems.filter(item => item.type === GqlPoolAprItemType.SwapFee).length === + pool.dynamicData.aprItems.length const defaultGradFrom = useColorModeValue( '#91A1B6', // light from @@ -93,6 +100,14 @@ export const SparklesIcon = ({
{isLBP(pool.type) ? ( + ) : hasOnlySwapApr ? ( + ) : ( Date: Fri, 20 Sep 2024 10:36:36 +0100 Subject: [PATCH 4/4] sparkles color tweaks --- lib/shared/components/tooltips/apr-tooltip/MainAprTooltip.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/shared/components/tooltips/apr-tooltip/MainAprTooltip.tsx b/lib/shared/components/tooltips/apr-tooltip/MainAprTooltip.tsx index 9fc6c41b1..306f7dd5b 100644 --- a/lib/shared/components/tooltips/apr-tooltip/MainAprTooltip.tsx +++ b/lib/shared/components/tooltips/apr-tooltip/MainAprTooltip.tsx @@ -75,11 +75,11 @@ export const SparklesIcon = ({ const rewardsGradFrom = useColorModeValue( '#F49A55', // light from - '#F48975' // dark from + '#F49175' // dark from ) const rewardsGradTo = useColorModeValue( '#FCD45B', // light to - '#EFB473' // dark to + '#FFCC33' // dark to ) let gradFromColor = defaultGradFrom