Improve layout for "Get these items!" and "Save" buttons in editor

Make them the same size, add spacing between them, and also put the
"Get these items!" on the right, because the list is right-aligned and
the Save button has dynamic width (the save vs saving vs saved states),
so this makes things a lot more consistent and stable!
This commit is contained in:
Emi Matchu 2024-05-28 17:32:18 -07:00
parent bb0d219508
commit 72c739ca0f

View file

@ -309,6 +309,7 @@ function GetTheseItemsButton({ outfitState }) {
href={isDisabled ? undefined : targetUrl} href={isDisabled ? undefined : targetUrl}
target={isDisabled ? undefined : "_blank"} target={isDisabled ? undefined : "_blank"}
colorScheme="purple" colorScheme="purple"
size="sm"
rightIcon={<ExternalLinkIcon />} rightIcon={<ExternalLinkIcon />}
isDisabled={isDisabled} isDisabled={isDisabled}
> >
@ -450,13 +451,14 @@ function OutfitHeading({ outfitState, outfitSaving, dispatchToOutfit }) {
</Box> </Box>
</Box> </Box>
<Box width="4" flex="1 0 auto" /> <Box width="4" flex="1 0 auto" />
<Box flex="0 0 auto">
<GetTheseItemsButton outfitState={outfitState} />
</Box>
<Box flex="0 0 auto"> <Box flex="0 0 auto">
<OutfitSavingIndicator outfitSaving={outfitSaving} /> <OutfitSavingIndicator outfitSaving={outfitSaving} />
</Box> </Box>
<Box width="2" /> <Box width="2" />
<Box flex="0 0 auto">
<GetTheseItemsButton outfitState={outfitState} />
</Box>
<Box width="2" />
<Menu placement="bottom-end"> <Menu placement="bottom-end">
<MenuButton <MenuButton
as={IconButton} as={IconButton}