feat: Fix thumb colors and usePoolAlert Link

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

@@ -1,4 +1,3 @@
-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'
@@ -22,28 +21,21 @@ export const PoolAlertMessage = ({ children }: { children: React.ReactNode }) =>
 )
 
 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'} />}
+  <Link
+    sx={{
+      color: 'currentColor',
+      '&:hover': { textDecoration: 'none' },
+    }}
     href={href}
     target="_blank"
     rel="noreferrer noopener"
   >
-    {children}
-  </Button>
+    {children} <ArrowTopRightIcon fontSize={'small'} />
+  </Link>
 )
 
 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' } }}
-  >
+  <RouterLink href={href} sx={{ color: 'currentColor', '&:hover': { textDecoration: 'none' } }}>
     {children}
-  </Button>
+  </RouterLink>
 )

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/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],
-}