dice/impress
1
0
Fork 0
forked from OpenNeo/impress
Code Pull requests Activity

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

Browse source 
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
1 changed files with 5 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
app/javascript/wardrobe-2020/WardrobePage/ItemsPanel.js
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}