1
0
Fork 0

fix(gui): emphasize the generate buttons, align fill color picker

This commit is contained in:
Sean Sube 2023-01-21 14:44:05 -06:00
parent 77d68bf6ac
commit 64663f5eec
5 changed files with 22 additions and 12 deletions

View File

@ -65,7 +65,7 @@ export function Img2Img() {
<UpscaleControl />
<Button
disabled={doesExist(source) === false}
variant='outlined'
variant='contained'
onClick={() => upload.mutate()}
>Generate</Button>
</Stack>

View File

@ -1,5 +1,5 @@
import { doesExist, mustExist } from '@apextoaster/js-utils';
import { Box, Button, Stack } from '@mui/material';
import { Box, Button, FormControlLabel, Stack } from '@mui/material';
import * as React from 'react';
import { useMutation, useQuery, useQueryClient } from 'react-query';
import { useStore } from 'zustand';
@ -151,19 +151,29 @@ export function Inpaint() {
}}
/>
<Stack direction='row' spacing={2}>
<input name='fill-color' type='color' defaultValue={fillColor} onBlur={(event) => {
<FormControlLabel
label='Fill Color'
sx={{ mx: 1 }}
control={
<input
defaultValue={fillColor}
name='fill-color'
type='color'
onBlur={(event) => {
setInpaint({
fillColor: event.target.value,
});
}} />
<label htmlFor='fill-color'>Fill Color</label>
}}
/>
}
/>
</Stack>
</Stack>
<OutpaintControl />
<UpscaleControl />
<Button
disabled={doesExist(source) === false || doesExist(mask) === false}
variant='outlined'
variant='contained'
onClick={() => upload.mutate()}
>Generate</Button>
</Stack>

View File

@ -38,7 +38,7 @@ export function Settings() {
<TextField variant='outlined' label='API Server' value={root} onChange={(event) => {
setRoot(event.target.value);
}} />
<Button startIcon={<Refresh />} onClick={() => {
<Button variant='contained' startIcon={<Refresh />} onClick={() => {
const query = new URLSearchParams(window.location.search);
query.set('api', root);
window.location.search = query.toString();

View File

@ -66,7 +66,7 @@ export function Txt2Img() {
</Stack>
<UpscaleControl />
<Button
variant='outlined'
variant='contained'
onClick={() => generate.mutate()}
>Generate</Button>
</Stack>

View File

@ -46,7 +46,7 @@ export function Upscale() {
<UpscaleControl />
<Button
disabled={doesExist(params.source) === false}
variant='outlined'
variant='contained'
onClick={() => upload.mutate()}
>Generate</Button>
</Stack>