Style fixes to accommodate localization in Model Manager

This commit is contained in:
blessedcoolant 2022-12-27 06:55:10 +13:00
parent f691353570
commit aa213285bb
4 changed files with 15 additions and 9 deletions

View File

@ -97,7 +97,7 @@ export default function AddModel() {
<Modal <Modal
isOpen={isOpen} isOpen={isOpen}
onClose={addModelModalClose} onClose={addModelModalClose}
size="xl" size="3xl"
closeOnOverlayClick={false} closeOnOverlayClick={false}
> >
<ModalOverlay /> <ModalOverlay />
@ -138,7 +138,7 @@ export default function AddModel() {
name="name" name="name"
type="text" type="text"
validate={baseValidation} validate={baseValidation}
width="lg" width="2xl"
/> />
{!!errors.name && touched.name ? ( {!!errors.name && touched.name ? (
<FormErrorMessage>{errors.name}</FormErrorMessage> <FormErrorMessage>{errors.name}</FormErrorMessage>
@ -164,7 +164,7 @@ export default function AddModel() {
id="description" id="description"
name="description" name="description"
type="text" type="text"
width="lg" width="2xl"
/> />
{!!errors.description && touched.description ? ( {!!errors.description && touched.description ? (
<FormErrorMessage> <FormErrorMessage>
@ -192,7 +192,7 @@ export default function AddModel() {
id="config" id="config"
name="config" name="config"
type="text" type="text"
width="lg" width="2xl"
/> />
{!!errors.config && touched.config ? ( {!!errors.config && touched.config ? (
<FormErrorMessage>{errors.config}</FormErrorMessage> <FormErrorMessage>{errors.config}</FormErrorMessage>
@ -218,7 +218,7 @@ export default function AddModel() {
id="weights" id="weights"
name="weights" name="weights"
type="text" type="text"
width="lg" width="2xl"
/> />
{!!errors.weights && touched.weights ? ( {!!errors.weights && touched.weights ? (
<FormErrorMessage> <FormErrorMessage>
@ -243,7 +243,7 @@ export default function AddModel() {
id="vae" id="vae"
name="vae" name="vae"
type="text" type="text"
width="lg" width="2xl"
/> />
{!!errors.vae && touched.vae ? ( {!!errors.vae && touched.vae ? (
<FormErrorMessage>{errors.vae}</FormErrorMessage> <FormErrorMessage>{errors.vae}</FormErrorMessage>
@ -278,6 +278,7 @@ export default function AddModel() {
min={MIN_MODEL_SIZE} min={MIN_MODEL_SIZE}
max={MAX_MODEL_SIZE} max={MAX_MODEL_SIZE}
step={64} step={64}
width="90%"
value={form.values.width} value={form.values.width}
onChange={(value) => onChange={(value) =>
form.setFieldValue( form.setFieldValue(
@ -322,6 +323,7 @@ export default function AddModel() {
name="height" name="height"
min={MIN_MODEL_SIZE} min={MIN_MODEL_SIZE}
max={MAX_MODEL_SIZE} max={MAX_MODEL_SIZE}
width="90%"
step={64} step={64}
value={form.values.height} value={form.values.height}
onChange={(value) => onChange={(value) =>

View File

@ -73,7 +73,7 @@ const ModelList = () => {
}; };
return ( return (
<Flex flexDirection={'column'} rowGap="2rem" width="45%" minWidth="45%"> <Flex flexDirection={'column'} rowGap="2rem" width="50%" minWidth="50%">
<Flex justifyContent={'space-between'}> <Flex justifyContent={'space-between'}>
<Text fontSize={'1.4rem'} fontWeight="bold"> <Text fontSize={'1.4rem'} fontWeight="bold">
{t('modelmanager:availableModels')} {t('modelmanager:availableModels')}

View File

@ -44,7 +44,11 @@ export default function ModelManagerModal({
<ModalContent className=" modal"> <ModalContent className=" modal">
<ModalCloseButton className="modal-close-btn" /> <ModalCloseButton className="modal-close-btn" />
<ModalHeader>{t('modelmanager:modelManager')}</ModalHeader> <ModalHeader>{t('modelmanager:modelManager')}</ModalHeader>
<Flex padding={'0 2rem 2rem 2rem'} width="100%" columnGap={'2rem'}> <Flex
padding={'0 1.5rem 1.5rem 1.5rem'}
width="100%"
columnGap={'2rem'}
>
<ModelList /> <ModelList />
<ModelEdit /> <ModelEdit />
</Flex> </Flex>

View File

@ -228,7 +228,7 @@ export default function SearchModels() {
style={{ style={{
fontWeight: 'bold', fontWeight: 'bold',
fontSize: '0.8rem', fontSize: '0.8rem',
backgroundColor: 'var(--background-color-secondary)', backgroundColor: 'var(--accent-color)',
padding: '0.2rem 1rem', padding: '0.2rem 1rem',
width: 'max-content', width: 'max-content',
borderRadius: '0.2rem', borderRadius: '0.2rem',