From 77ad3c959bbd08d3123ea459d045f066f98706e9 Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Sat, 15 Jul 2023 18:50:06 +1000
Subject: [PATCH] feat(ui): tweak slider styles

---
 .../web/src/common/components/IAISlider.tsx     | 17 ++---------------
 .../frontend/web/src/theme/components/slider.ts |  2 +-
 2 files changed, 3 insertions(+), 16 deletions(-)

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 && (
-        <FormLabel {...sliderFormLabelProps} mb={-1}>
-          {label}
-        </FormLabel>
-      )}
+      {label && <FormLabel {...sliderFormLabelProps}>{label}</FormLabel>}
 
       <HStack w="100%" gap={2} alignItems="center">
         <Slider
@@ -233,7 +224,6 @@ const IAISlider = (props: IAIFullSliderProps) => {
                 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,