feat(ui): model header styling

This commit is contained in:
psychedelicious 2024-03-07 16:28:17 +11:00
parent a3a42d25d3
commit c008704bc8
2 changed files with 10 additions and 11 deletions

View File

@ -100,9 +100,9 @@ const ModelImageUpload = ({ model_key, model_image }: Props) => {
src={image} src={image}
objectFit="cover" objectFit="cover"
objectPosition="50% 50%" objectPosition="50% 50%"
height="100px" height={108}
width="100px" width={108}
minWidth="100px" minWidth={108}
borderRadius="base" borderRadius="base"
/> />
<IconButton <IconButton
@ -125,8 +125,8 @@ const ModelImageUpload = ({ model_key, model_image }: Props) => {
<Tooltip label={t('modelManager.uploadImage')}> <Tooltip label={t('modelManager.uploadImage')}>
<Flex <Flex
as={Button} as={Button}
w={100} w={108}
h={100} h={108}
opacity={0.3} opacity={0.3}
borderRadius="base" borderRadius="base"
alignItems="center" alignItems="center"

View File

@ -1,4 +1,4 @@
import { Flex, Heading, Text } from '@invoke-ai/ui-library'; import { Flex, Heading, Spacer, Text } from '@invoke-ai/ui-library';
import { skipToken } from '@reduxjs/toolkit/query'; import { skipToken } from '@reduxjs/toolkit/query';
import { useAppSelector } from 'app/store/storeHooks'; import { useAppSelector } from 'app/store/storeHooks';
import { ModelConvertButton } from 'features/modelManagerV2/subpanels/ModelPanel/ModelConvertButton'; import { ModelConvertButton } from 'features/modelManagerV2/subpanels/ModelPanel/ModelConvertButton';
@ -29,14 +29,13 @@ export const Model = () => {
<Flex alignItems="flex-start" gap={4}> <Flex alignItems="flex-start" gap={4}>
<ModelImageUpload model_key={selectedModelKey} model_image={data.cover_image} /> <ModelImageUpload model_key={selectedModelKey} model_image={data.cover_image} />
<Flex flexDir="column" gap={1} flexGrow={1}> <Flex flexDir="column" gap={1} flexGrow={1}>
<Flex gap={2} position="relative"> <Flex gap={2}>
<Heading as="h2" fontSize="lg" w="full"> <Heading as="h2" fontSize="lg" w="full">
{data.name} {data.name}
</Heading> </Heading>
<Flex position="absolute" gap={2} right={0} top={0}> <Spacer />
<ModelEditButton /> <ModelEditButton />
<ModelConvertButton modelKey={selectedModelKey} /> <ModelConvertButton modelKey={selectedModelKey} />
</Flex>
</Flex> </Flex>
{data.source && ( {data.source && (
<Text variant="subtext"> <Text variant="subtext">