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

fix(ui): Bad styling on form elements

Browse Source
This commit is contained in:
blessedcoolant 2023-03-12 15:48:09 +13:00 committed by psychedelicious
parent 2bff28e305
commit dd2d96a50f
4 changed files with 84 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
invokeai/frontend/web/src/features/canvas/components/IAIForms/IAIFormErrorMessage.tsx Normal file
View File

@ -0,0 +1,15 @@
import { FormErrorMessage, FormErrorMessageProps } from '@chakra-ui/react';
import { ReactNode } from 'react';
type IAIFormErrorMessageProps = FormErrorMessageProps & {
children: ReactNode | string;
};
export default function IAIFormErrorMessage(props: IAIFormErrorMessageProps) {
const { children, ...rest } = props;
return (
<FormErrorMessage color="error.400" {...rest}>
{children}
</FormErrorMessage>
);
}

15
invokeai/frontend/web/src/features/canvas/components/IAIForms/IAIFormHelperText.tsx Normal file
View File

@ -0,0 +1,15 @@
import { FormHelperText, FormHelperTextProps } from '@chakra-ui/react';
import { ReactNode } from 'react';
type IAIFormHelperTextProps = FormHelperTextProps & {
children: ReactNode | string;
};
export default function IAIFormHelperText(props: IAIFormHelperTextProps) {
const { children, ...rest } = props;
return (
<FormHelperText margin={0} color="base.400" {...rest}>
{children}
</FormHelperText>
);
}

48
invokeai/frontend/web/src/features/system/components/ModelManager/CheckpointModelEdit.tsx
View File

@ -11,8 +11,6 @@ import { systemSelector } from 'features/system/store/systemSelectors';
import { import {
Flex, Flex,
FormControl, FormControl,
FormErrorMessage,
FormHelperText,
FormLabel, FormLabel,
HStack, HStack,
Text, Text,
@ -28,6 +26,8 @@ import type { RootState } from 'app/store';
import type { FieldInputProps, FormikProps } from 'formik'; import type { FieldInputProps, FormikProps } from 'formik';
import { isEqual, pickBy } from 'lodash'; import { isEqual, pickBy } from 'lodash';
import ModelConvert from './ModelConvert'; import ModelConvert from './ModelConvert';
import IAIFormHelperText from 'features/canvas/components/IAIForms/IAIFormHelperText';
import IAIFormErrorMessage from 'features/canvas/components/IAIForms/IAIFormErrorMessage';
const selector = createSelector( const selector = createSelector(
[systemSelector], [systemSelector],
@ -139,11 +139,13 @@ export default function CheckpointModelEdit() {
width="full" width="full"
/> />
{!!errors.description && touched.description ? ( {!!errors.description && touched.description ? (
<FormErrorMessage>{errors.description}</FormErrorMessage> <IAIFormErrorMessage>
{errors.description}
</IAIFormErrorMessage>
) : ( ) : (
<FormHelperText margin={0}> <IAIFormHelperText>
{t('modelManager.descriptionValidationMsg')} {t('modelManager.descriptionValidationMsg')}
</FormHelperText> </IAIFormHelperText>
)} )}
</VStack> </VStack>
</FormControl> </FormControl>
@ -165,11 +167,11 @@ export default function CheckpointModelEdit() {
width="full" width="full"
/> />
{!!errors.config && touched.config ? ( {!!errors.config && touched.config ? (
<FormErrorMessage>{errors.config}</FormErrorMessage> <IAIFormErrorMessage>{errors.config}</IAIFormErrorMessage>
) : ( ) : (
<FormHelperText margin={0}> <IAIFormHelperText>
{t('modelManager.configValidationMsg')} {t('modelManager.configValidationMsg')}
</FormHelperText> </IAIFormHelperText>
)} )}
</VStack> </VStack>
</FormControl> </FormControl>
@ -191,11 +193,13 @@ export default function CheckpointModelEdit() {
width="full" width="full"
/> />
{!!errors.weights && touched.weights ? ( {!!errors.weights && touched.weights ? (
<FormErrorMessage>{errors.weights}</FormErrorMessage> <IAIFormErrorMessage>
{errors.weights}
</IAIFormErrorMessage>
) : ( ) : (
<FormHelperText margin={0}> <IAIFormHelperText>
{t('modelManager.modelLocationValidationMsg')} {t('modelManager.modelLocationValidationMsg')}
</FormHelperText> </IAIFormHelperText>
)} )}
</VStack> </VStack>
</FormControl> </FormControl>
@ -214,11 +218,11 @@ export default function CheckpointModelEdit() {
width="full" width="full"
/> />
{!!errors.vae && touched.vae ? ( {!!errors.vae && touched.vae ? (
<FormErrorMessage>{errors.vae}</FormErrorMessage> <IAIFormErrorMessage>{errors.vae}</IAIFormErrorMessage>
) : ( ) : (
<FormHelperText margin={0}> <IAIFormHelperText>
{t('modelManager.vaeLocationValidationMsg')} {t('modelManager.vaeLocationValidationMsg')}
</FormHelperText> </IAIFormHelperText>
)} )}
</VStack> </VStack>
</FormControl> </FormControl>
@ -253,11 +257,13 @@ export default function CheckpointModelEdit() {
</Field> </Field>
{!!errors.width && touched.width ? ( {!!errors.width && touched.width ? (
<FormErrorMessage>{errors.width}</FormErrorMessage> <IAIFormErrorMessage>
{errors.width}
</IAIFormErrorMessage>
) : ( ) : (
<FormHelperText margin={0}> <IAIFormHelperText>
{t('modelManager.widthValidationMsg')} {t('modelManager.widthValidationMsg')}
</FormHelperText> </IAIFormHelperText>
)} )}
</VStack> </VStack>
</FormControl> </FormControl>
@ -291,11 +297,13 @@ export default function CheckpointModelEdit() {
</Field> </Field>
{!!errors.height && touched.height ? ( {!!errors.height && touched.height ? (
<FormErrorMessage>{errors.height}</FormErrorMessage> <IAIFormErrorMessage>
{errors.height}
</IAIFormErrorMessage>
) : ( ) : (
<FormHelperText margin={0}> <IAIFormHelperText>
{t('modelManager.heightValidationMsg')} {t('modelManager.heightValidationMsg')}
</FormHelperText> </IAIFormHelperText>
)} )}
</VStack> </VStack>
</FormControl> </FormControl>

50
invokeai/frontend/web/src/features/system/components/ModelManager/DiffusersModelEdit.tsx
View File

@ -7,15 +7,7 @@ import { useEffect, useState } from 'react';
import { useAppDispatch, useAppSelector } from 'app/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/storeHooks';
import { systemSelector } from 'features/system/store/systemSelectors'; import { systemSelector } from 'features/system/store/systemSelectors';
import { import { Flex, FormControl, FormLabel, Text, VStack } from '@chakra-ui/react';
Flex,
FormControl,
FormErrorMessage,
FormHelperText,
FormLabel,
Text,
VStack,
} from '@chakra-ui/react';
import { addNewModel } from 'app/socketio/actions'; import { addNewModel } from 'app/socketio/actions';
import { Field, Formik } from 'formik'; import { Field, Formik } from 'formik';
@ -24,6 +16,8 @@ import { useTranslation } from 'react-i18next';
import type { InvokeDiffusersModelConfigProps } from 'app/invokeai'; import type { InvokeDiffusersModelConfigProps } from 'app/invokeai';
import type { RootState } from 'app/store'; import type { RootState } from 'app/store';
import { isEqual, pickBy } from 'lodash'; import { isEqual, pickBy } from 'lodash';
import IAIFormHelperText from 'features/canvas/components/IAIForms/IAIFormHelperText';
import IAIFormErrorMessage from 'features/canvas/components/IAIForms/IAIFormErrorMessage';
const selector = createSelector( const selector = createSelector(
[systemSelector], [systemSelector],
@ -141,11 +135,13 @@ export default function DiffusersModelEdit() {
width="full" width="full"
/> />
{!!errors.description && touched.description ? ( {!!errors.description && touched.description ? (
<FormErrorMessage>{errors.description}</FormErrorMessage> <IAIFormErrorMessage>
{errors.description}
</IAIFormErrorMessage>
) : ( ) : (
<FormHelperText margin={0}> <IAIFormHelperText>
{t('modelManager.descriptionValidationMsg')} {t('modelManager.descriptionValidationMsg')}
</FormHelperText> </IAIFormHelperText>
)} )}
</VStack> </VStack>
</FormControl> </FormControl>
@ -167,11 +163,11 @@ export default function DiffusersModelEdit() {
width="full" width="full"
/> />
{!!errors.path && touched.path ? ( {!!errors.path && touched.path ? (
<FormErrorMessage>{errors.path}</FormErrorMessage> <IAIFormErrorMessage>{errors.path}</IAIFormErrorMessage>
) : ( ) : (
<FormHelperText margin={0}> <IAIFormHelperText>
{t('modelManager.modelLocationValidationMsg')} {t('modelManager.modelLocationValidationMsg')}
</FormHelperText> </IAIFormHelperText>
)} )}
</VStack> </VStack>
</FormControl> </FormControl>
@ -190,11 +186,13 @@ export default function DiffusersModelEdit() {
width="full" width="full"
/> />
{!!errors.repo_id && touched.repo_id ? ( {!!errors.repo_id && touched.repo_id ? (
<FormErrorMessage>{errors.repo_id}</FormErrorMessage> <IAIFormErrorMessage>
{errors.repo_id}
</IAIFormErrorMessage>
) : ( ) : (
<FormHelperText margin={0}> <IAIFormHelperText>
{t('modelManager.repoIDValidationMsg')} {t('modelManager.repoIDValidationMsg')}
</FormHelperText> </IAIFormHelperText>
)} )}
</VStack> </VStack>
</FormControl> </FormControl>
@ -215,11 +213,13 @@ export default function DiffusersModelEdit() {
width="full" width="full"
/> />
{!!errors.vae?.path && touched.vae?.path ? ( {!!errors.vae?.path && touched.vae?.path ? (
<FormErrorMessage>{errors.vae?.path}</FormErrorMessage> <IAIFormErrorMessage>
{errors.vae?.path}
</IAIFormErrorMessage>
) : ( ) : (
<FormHelperText margin={0}> <IAIFormHelperText>
{t('modelManager.vaeLocationValidationMsg')} {t('modelManager.vaeLocationValidationMsg')}
</FormHelperText> </IAIFormHelperText>
)} )}
</VStack> </VStack>
</FormControl> </FormControl>
@ -240,11 +240,13 @@ export default function DiffusersModelEdit() {
width="full" width="full"
/> />
{!!errors.vae?.repo_id && touched.vae?.repo_id ? ( {!!errors.vae?.repo_id && touched.vae?.repo_id ? (
<FormErrorMessage>{errors.vae?.repo_id}</FormErrorMessage> <IAIFormErrorMessage>
{errors.vae?.repo_id}
</IAIFormErrorMessage>
) : ( ) : (
<FormHelperText margin={0}> <IAIFormHelperText>
{t('modelManager.vaeRepoIDValidationMsg')} {t('modelManager.vaeRepoIDValidationMsg')}
</FormHelperText> </IAIFormHelperText>
)} )}
</VStack> </VStack>
</FormControl> </FormControl>