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:
parent
bb0d219508
commit
72c739ca0f
1 changed files with 5 additions and 3 deletions
|
@ -309,6 +309,7 @@ function GetTheseItemsButton({ outfitState }) {
|
|||
href={isDisabled ? undefined : targetUrl}
|
||||
target={isDisabled ? undefined : "_blank"}
|
||||
colorScheme="purple"
|
||||
size="sm"
|
||||
rightIcon={<ExternalLinkIcon />}
|
||||
isDisabled={isDisabled}
|
||||
>
|
||||
|
@ -450,13 +451,14 @@ function OutfitHeading({ outfitState, outfitSaving, dispatchToOutfit }) {
|
|||
</Box>
|
||||
</Box>
|
||||
<Box width="4" flex="1 0 auto" />
|
||||
<Box flex="0 0 auto">
|
||||
<GetTheseItemsButton outfitState={outfitState} />
|
||||
</Box>
|
||||
<Box flex="0 0 auto">
|
||||
<OutfitSavingIndicator outfitSaving={outfitSaving} />
|
||||
</Box>
|
||||
<Box width="2" />
|
||||
<Box flex="0 0 auto">
|
||||
<GetTheseItemsButton outfitState={outfitState} />
|
||||
</Box>
|
||||
<Box width="2" />
|
||||
<Menu placement="bottom-end">
|
||||
<MenuButton
|
||||
as={IconButton}
|
||||
|
|
Loading…
Reference in a new issue