feat: Fix thumb colors and usePoolAlert Link

apps/main/src/dex/components/pool-alert-messages.tsx

@@ -1,8 +1,4 @@
-import Button from '@mui/material/Button'
-import Link from '@mui/material/Link'
 import Stack from '@mui/material/Stack'
-import { ArrowTopRightIcon } from '@ui-kit/shared/icons/ArrowTopRightIcon'
-import { RouterLink } from '@ui-kit/shared/ui/RouterLink'
 import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
 
 const { Spacing } = SizesAndSpaces
@@ -20,30 +16,3 @@ export const PoolAlertMessage = ({ children }: { children: React.ReactNode }) =>
     {children}
   </Stack>
 )
-
-export const ExternalLink = ({ href, children }: { href: string; children: React.ReactNode }) => (
-  <Button
-    color="ghost"
-    size="extraSmall"
-    component={Link}
-    sx={{ color: 'currentColor', textUnderlineOffset: '2px', '&:hover': { textDecoration: 'underline' } }}
-    endIcon={<ArrowTopRightIcon fontSize={'small'} />}
-    href={href}
-    target="_blank"
-    rel="noreferrer noopener"
-  >
-    {children}
-  </Button>
-)
-
-export const InternalLink = ({ href, children }: { href: string; children: React.ReactNode }) => (
-  <Button
-    color="ghost"
-    size="extraSmall"
-    component={RouterLink}
-    href={href}
-    sx={{ color: 'currentColor', textUnderlineOffset: '2px', '&:hover': { textDecoration: 'underline' } }}
-  >
-    {children}
-  </Button>
-)

apps/main/src/dex/hooks/usePoolAlert.tsx

@@ -4,7 +4,8 @@ import { PoolAlert, PoolData, PoolDataCache, type UrlParams } from '@/dex/types/
 import { useParams } from '@ui-kit/hooks/router'
 import { t, Trans } from '@ui-kit/lib/i18n'
 import { getInternalUrl } from '@ui-kit/shared/routes'
-import { ExternalLink, InternalLink, PoolAlertMessage } from '../components/pool-alert-messages'
+import { InlineLink } from '@ui-kit/shared/ui/InlineLink'
+import { PoolAlertMessage } from '../components/pool-alert-messages'
 
 const usePoolAlert = (poolData?: PoolData | PoolDataCache) => {
   const params = useParams<UrlParams>()
@@ -69,7 +70,7 @@ const usePoolAlert = (poolData?: PoolData | PoolDataCache) => {
           subtitle: (
             <Trans>
               This pool has been deprecated. Please use the{' '}
-              <InternalLink href={prismaPoolHref}>PRISMA/yPRISMA</InternalLink> pool instead.
+              <InlineLink href={prismaPoolHref}>PRISMA/yPRISMA</InlineLink> pool instead.
             </Trans>
           ),
         },
@@ -91,16 +92,16 @@ const usePoolAlert = (poolData?: PoolData | PoolDataCache) => {
             <Trans>
               Please note that exchanges on synthetix synths are expected to be disabled and users can either withdraw
               liquidity from the underlying token, or redeem their synths to sUSD on{' '}
-              <ExternalLink href="https://staking.synthetix.io/wallet/balances/">synthetix.io</ExternalLink>
+              <InlineLink href="https://staking.synthetix.io/wallet/balances/">synthetix.io</InlineLink>
             </Trans>
           </p>
           <p>
             <Trans>
               Users are encouraged to exit the pools in order to avoid getting their holdings&lsquo; value diluted with
               the discountRate For more information please refer to{' '}
-              <ExternalLink href="https://gov.curve.finance/t/kill-gauges-on-all-non-susd-curve-pools-on-ethereum/10033/2">
+              <InlineLink href="https://gov.curve.finance/t/kill-gauges-on-all-non-susd-curve-pools-on-ethereum/10033/2">
                 gov.curve.finance
-              </ExternalLink>
+              </InlineLink>
             </Trans>
           </p>
           <p>
@@ -160,7 +161,7 @@ const usePoolAlert = (poolData?: PoolData | PoolDataCache) => {
         <PoolAlertMessage>
           <p>
             <Trans>
-              Deposit on <ExternalLink href="https://yieldbasis.com">yieldbasis.com</ExternalLink>
+              Deposit on <InlineLink href="https://yieldbasis.com">yieldbasis.com</InlineLink>
             </Trans>
           </p>
         </PoolAlertMessage>
@@ -193,7 +194,7 @@ const usePoolAlert = (poolData?: PoolData | PoolDataCache) => {
           <p>
             <Trans>
               Deposit and Swap with wBTC.e will return an error due to an Aave community decision to freeze this asset.{' '}
-              <ExternalLink href="https://app.aave.com/governance/v3/proposal/?proposalId=2">More details</ExternalLink>
+              <InlineLink href="https://app.aave.com/governance/v3/proposal/?proposalId=2">More details</InlineLink>
             </Trans>
           </p>
         </PoolAlertMessage>

packages/curve-ui-kit/src/shared/ui/Banner.tsx

@@ -19,7 +19,7 @@ const { MaxWidth, Spacing, IconSize } = SizesAndSpaces
 type BannerSeverity = 'info' | 'highlight' | 'warning' | 'alert'
 type BannerIcons = BannerSeverity | 'llama'
 
-// TODO: use Secondary color for subtitle instead of Primary
+// TODO: temporary fix: used secondary color for subtitle instead of primary
 const BannerSx: Record<BannerSeverity, { title: SxProps<Theme>; subtitle: SxProps<Theme>; wrapper: SxProps<Theme> }> = {
   info: {
     title: { color: (t) => t.design.Text.TextColors.FilledFeedback.Info.Primary },

packages/curve-ui-kit/src/shared/ui/InlineLink.tsx

@@ -0,0 +1,21 @@
+import Link from '@mui/material/Link'
+import { Link as TanstackLink } from '@tanstack/react-router'
+import { ArrowTopRightIcon } from '../icons/ArrowTopRightIcon'
+
+/**
+ * InlineLink component is a link that is displayed inline with text.
+ * Using either Tanstack Link for internal links or MUI Link for external links (with arrow icon).
+ */
+export const InlineLink = ({ href, children }: { href: string; children: React.ReactNode }) => {
+  const isExternal = href.startsWith('http')
+  return (
+    <Link
+      sx={{ color: 'currentColor', '&:hover': { textDecoration: 'none' } }}
+      href={href}
+      {...(isExternal && { target: '_blank', rel: 'noreferrer noopener', component: TanstackLink })}
+    >
+      {children}
+      {isExternal && <ArrowTopRightIcon fontSize="small" sx={{ verticalAlign: 'bottom' }} />}
+    </Link>
+  )
+}

packages/curve-ui-kit/src/themes/components/slider/mui-slider.ts

@@ -17,7 +17,6 @@ import {
   SLIDER_RAIL_GRADIENT_STOPS_VAR,
   getGradientStopsForBackground,
   DEFAULT_SLIDER_SIZE,
-  thumbColorsMap,
 } from './utils'
 /**
  * Generates styles for a pseudo-element that creates a border around the slider
@@ -105,7 +104,7 @@ export const defineMuiSlider = (design: DesignSystem): Components['MuiSlider'] =
         // Add 2px to the thumb width and height to compensate the border
         width: size.width,
         height: size.height,
-        background: `${thumbColorsMap[design.theme]} url(${sliderThumbImage}) center no-repeat`,
+        background: `${design.Layer.Highlight.Fill} url(${sliderThumbImage}) center no-repeat`,
         transition: `background ${TransitionFunction}, border ${TransitionFunction}`,
         border: `1px solid ${design.Color.Neutral[25]}`,
         borderRadius: 0,

packages/curve-ui-kit/src/themes/components/slider/utils.ts

@@ -1,7 +1,6 @@
 import { sortBy } from 'lodash'
 import { SliderProps } from '@mui/material/Slider'
 import { DesignSystem } from '@ui-kit/themes/design'
-import { Blues, Violets } from '@ui-kit/themes/design/0_primitives'
 import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
 import type {
   GradientStopsDefinition,
@@ -202,10 +201,3 @@ export const createGradientStopsString = (stops: GradientStopsDefinition) =>
 
 export const orientationToDirection = (orientation: SliderProps['orientation']): 'to right' | 'to top' =>
   getOrientationConfig(orientation).gradientDirection
-
-// TODO: temporary fix for the "Layers.Highlight.Fill" color difference between codebase and Design
-export const thumbColorsMap: Record<DesignSystem['theme'], string> = {
-  light: Blues[500],
-  dark: Blues[50],
-  chad: Violets[700],
-}