Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): tweak slider styles

Browse Source
This commit is contained in:
psychedelicious 2023-07-15 18:50:06 +10:00
parent 952a7a8674
commit 77ad3c959b
2 changed files with 3 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
invokeai/frontend/web/src/common/components/IAISlider.tsx
View File

@ -43,11 +43,6 @@ import { useTranslation } from 'react-i18next';
import { BiReset } from 'react-icons/bi'; import { BiReset } from 'react-icons/bi';
import IAIIconButton, { IAIIconButtonProps } from './IAIIconButton'; import IAIIconButton, { IAIIconButtonProps } from './IAIIconButton';
const SLIDER_MARK_STYLES: ChakraProps['sx'] = {
mt: 1.5,
fontSize: '2xs',
};
export type IAIFullSliderProps = { export type IAIFullSliderProps = {
label?: string; label?: string;
value: number; value: number;
@ -206,11 +201,7 @@ const IAISlider = (props: IAIFullSliderProps) => {
isDisabled={isDisabled} isDisabled={isDisabled}
{...sliderFormControlProps} {...sliderFormControlProps}
> >
{label && ( {label && <FormLabel {...sliderFormLabelProps}>{label}</FormLabel>}
<FormLabel {...sliderFormLabelProps} mb={-1}>
{label}
</FormLabel>
)}
<HStack w="100%" gap={2} alignItems="center"> <HStack w="100%" gap={2} alignItems="center">
<Slider <Slider
@ -233,7 +224,6 @@ const IAISlider = (props: IAIFullSliderProps) => {
sx={{ sx={{
insetInlineStart: '0 !important', insetInlineStart: '0 !important',
insetInlineEnd: 'unset !important', insetInlineEnd: 'unset !important',
...SLIDER_MARK_STYLES,
}} }}
{...sliderMarkProps} {...sliderMarkProps}
> >
@ -244,7 +234,6 @@ const IAISlider = (props: IAIFullSliderProps) => {
sx={{ sx={{
insetInlineStart: 'unset !important', insetInlineStart: 'unset !important',
insetInlineEnd: '0 !important', insetInlineEnd: '0 !important',
...SLIDER_MARK_STYLES,
}} }}
{...sliderMarkProps} {...sliderMarkProps}
> >
@ -263,7 +252,6 @@ const IAISlider = (props: IAIFullSliderProps) => {
sx={{ sx={{
insetInlineStart: '0 !important', insetInlineStart: '0 !important',
insetInlineEnd: 'unset !important', insetInlineEnd: 'unset !important',
...SLIDER_MARK_STYLES,
}} }}
{...sliderMarkProps} {...sliderMarkProps}
> >
@ -278,7 +266,6 @@ const IAISlider = (props: IAIFullSliderProps) => {
sx={{ sx={{
insetInlineStart: 'unset !important', insetInlineStart: 'unset !important',
insetInlineEnd: '0 !important', insetInlineEnd: '0 !important',
...SLIDER_MARK_STYLES,
}} }}
{...sliderMarkProps} {...sliderMarkProps}
> >
@ -291,7 +278,7 @@ const IAISlider = (props: IAIFullSliderProps) => {
key={m} key={m}
value={m} value={m}
sx={{ sx={{
...SLIDER_MARK_STYLES, transform: 'translateX(-50%)',
}} }}
{...sliderMarkProps} {...sliderMarkProps}
> >

2
invokeai/frontend/web/src/theme/components/slider.ts
View File

@ -30,7 +30,7 @@ const invokeAIThumb = defineStyle((props) => {
const invokeAIMark = defineStyle((props) => { const invokeAIMark = defineStyle((props) => {
return { return {
fontSize: 'xs', fontSize: '2xs',
fontWeight: '500', fontWeight: '500',
color: mode('base.700', 'base.400')(props), color: mode('base.700', 'base.400')(props),
mt: 2, mt: 2,