diff --git a/invokeai/frontend/web/src/common/components/IAISlider.tsx b/invokeai/frontend/web/src/common/components/IAISlider.tsx index d99fbfa149..00492b28d6 100644 --- a/invokeai/frontend/web/src/common/components/IAISlider.tsx +++ b/invokeai/frontend/web/src/common/components/IAISlider.tsx @@ -43,11 +43,6 @@ import { useTranslation } from 'react-i18next'; import { BiReset } from 'react-icons/bi'; import IAIIconButton, { IAIIconButtonProps } from './IAIIconButton'; -const SLIDER_MARK_STYLES: ChakraProps['sx'] = { - mt: 1.5, - fontSize: '2xs', -}; - export type IAIFullSliderProps = { label?: string; value: number; @@ -206,11 +201,7 @@ const IAISlider = (props: IAIFullSliderProps) => { isDisabled={isDisabled} {...sliderFormControlProps} > - {label && ( - - {label} - - )} + {label && {label}} { sx={{ insetInlineStart: '0 !important', insetInlineEnd: 'unset !important', - ...SLIDER_MARK_STYLES, }} {...sliderMarkProps} > @@ -244,7 +234,6 @@ const IAISlider = (props: IAIFullSliderProps) => { sx={{ insetInlineStart: 'unset !important', insetInlineEnd: '0 !important', - ...SLIDER_MARK_STYLES, }} {...sliderMarkProps} > @@ -263,7 +252,6 @@ const IAISlider = (props: IAIFullSliderProps) => { sx={{ insetInlineStart: '0 !important', insetInlineEnd: 'unset !important', - ...SLIDER_MARK_STYLES, }} {...sliderMarkProps} > @@ -278,7 +266,6 @@ const IAISlider = (props: IAIFullSliderProps) => { sx={{ insetInlineStart: 'unset !important', insetInlineEnd: '0 !important', - ...SLIDER_MARK_STYLES, }} {...sliderMarkProps} > @@ -291,7 +278,7 @@ const IAISlider = (props: IAIFullSliderProps) => { key={m} value={m} sx={{ - ...SLIDER_MARK_STYLES, + transform: 'translateX(-50%)', }} {...sliderMarkProps} > diff --git a/invokeai/frontend/web/src/theme/components/slider.ts b/invokeai/frontend/web/src/theme/components/slider.ts index 397dea786a..98a2556b9e 100644 --- a/invokeai/frontend/web/src/theme/components/slider.ts +++ b/invokeai/frontend/web/src/theme/components/slider.ts @@ -30,7 +30,7 @@ const invokeAIThumb = defineStyle((props) => { const invokeAIMark = defineStyle((props) => { return { - fontSize: 'xs', + fontSize: '2xs', fontWeight: '500', color: mode('base.700', 'base.400')(props), mt: 2,