Fix styling on alert modals

This commit is contained in:
blessedcoolant 2022-11-21 12:25:09 +13:00
parent ef482b4d3e
commit cb7458db77
2 changed files with 17 additions and 5 deletions

View File

@ -25,7 +25,10 @@ import {
import { useAppDispatch, useAppSelector } from 'app/store'; import { useAppDispatch, useAppSelector } from 'app/store';
import { deleteImage } from 'app/socketio/actions'; import { deleteImage } from 'app/socketio/actions';
import { RootState } from 'app/store'; import { RootState } from 'app/store';
import { setShouldConfirmOnDelete, SystemState } from 'features/system/store/systemSlice'; import {
setShouldConfirmOnDelete,
SystemState,
} from 'features/system/store/systemSlice';
import * as InvokeAI from 'app/invokeai'; import * as InvokeAI from 'app/invokeai';
import { useHotkeys } from 'react-hotkeys-hook'; import { useHotkeys } from 'react-hotkeys-hook';
import _ from 'lodash'; import _ from 'lodash';
@ -105,7 +108,7 @@ const DeleteImageModal = forwardRef(
onClose={onClose} onClose={onClose}
> >
<AlertDialogOverlay> <AlertDialogOverlay>
<AlertDialogContent> <AlertDialogContent className="modal">
<AlertDialogHeader fontSize="lg" fontWeight="bold"> <AlertDialogHeader fontSize="lg" fontWeight="bold">
Delete image Delete image
</AlertDialogHeader> </AlertDialogHeader>
@ -127,7 +130,11 @@ const DeleteImageModal = forwardRef(
</Flex> </Flex>
</AlertDialogBody> </AlertDialogBody>
<AlertDialogFooter> <AlertDialogFooter>
<Button ref={cancelRef} onClick={onClose}> <Button
ref={cancelRef}
onClick={onClose}
className="modal-close-btn"
>
Cancel Cancel
</Button> </Button>
<Button colorScheme="red" onClick={handleDelete} ml={3}> <Button colorScheme="red" onClick={handleDelete} ml={3}>

View File

@ -6,6 +6,7 @@ import {
AlertDialogHeader, AlertDialogHeader,
AlertDialogOverlay, AlertDialogOverlay,
Button, Button,
Flex,
useDisclosure, useDisclosure,
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import { emptyTempFolder } from 'app/socketio/actions'; import { emptyTempFolder } from 'app/socketio/actions';
@ -42,7 +43,7 @@ const ClearTempFolderButtonModal = () => {
onClose={onClose} onClose={onClose}
> >
<AlertDialogOverlay> <AlertDialogOverlay>
<AlertDialogContent> <AlertDialogContent className="modal">
<AlertDialogHeader fontSize="lg" fontWeight="bold"> <AlertDialogHeader fontSize="lg" fontWeight="bold">
Clear Temp Image Folder Clear Temp Image Folder
</AlertDialogHeader> </AlertDialogHeader>
@ -58,7 +59,11 @@ const ClearTempFolderButtonModal = () => {
</AlertDialogBody> </AlertDialogBody>
<AlertDialogFooter> <AlertDialogFooter>
<Button ref={cancelRef} onClick={onClose}> <Button
ref={cancelRef}
onClick={onClose}
className="modal-close-btn"
>
Cancel Cancel
</Button> </Button>
<Button colorScheme="red" onClick={handleClear} ml={3}> <Button colorScheme="red" onClick={handleClear} ml={3}>