github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-04-23 03:00:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): workflow library modal styling

Browse Source
This commit is contained in:
psychedelicious
2025-03-05 20:24:07 +10:00
parent e1f7359171
commit c44c28ec4c
2 changed files with 12 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLibrary/WorkflowLibraryModal.tsx
View File

@@ -1,4 +1,5 @@
import {
Divider,
Flex,
Modal,
ModalBody,
@@ -16,16 +17,20 @@ import { WorkflowList } from './WorkflowList';
export const WorkflowLibraryModal = () => {
const workflowLibraryModal = useWorkflowLibraryModal();
return (
<Modal isOpen={workflowLibraryModal.isOpen} onClose={workflowLibraryModal.close} size="5xl">
<Modal isOpen={workflowLibraryModal.isOpen} onClose={workflowLibraryModal.close} isCentered>
<ModalOverlay />
<ModalContent>
<ModalContent
w="calc(100% - var(--invoke-sizes-40))"
maxW="calc(100% - var(--invoke-sizes-40))"
h="calc(100% - var(--invoke-sizes-40))"
maxH="calc(100% - var(--invoke-sizes-40))"
>
<ModalHeader>Workflow Library</ModalHeader>
<ModalCloseButton />
<ModalBody pb={6}>
<Flex gap={4}>
<Flex flexDir="column" gap={4}>
<WorkflowLibrarySideNav />
</Flex>
<Flex gap={4} h="100%">
<WorkflowLibrarySideNav />
<Divider orientation="vertical" />
<Flex flexDir="column" flex={1} gap={6}>
<WorkflowLibraryTopNav />
<WorkflowList />

2
invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowLibrary/WorkflowLibrarySideNav.tsx
View File

@@ -38,7 +38,7 @@ export const WorkflowLibrarySideNav = () => {
}, [categoryOptions, categories]);
return (
<Flex flexDir="column" gap={2} borderRight="1px solid" borderColor="base.400" h="full" pr={4}>
<Flex flexDir="column" gap={2} h="full">
<Button
variant="ghost"
fontWeight="bold"