Redesign "Get these items!" button to use a cart icon instead
This helps it fit in the kinda crunchy horizontal space a lot better!
This commit is contained in:
parent
d3d0cda81f
commit
63abfa51f7
1 changed files with 24 additions and 20 deletions
|
@ -31,10 +31,10 @@ import {
|
||||||
CheckIcon,
|
CheckIcon,
|
||||||
DeleteIcon,
|
DeleteIcon,
|
||||||
EditIcon,
|
EditIcon,
|
||||||
ExternalLinkIcon,
|
|
||||||
QuestionIcon,
|
QuestionIcon,
|
||||||
WarningTwoIcon,
|
WarningTwoIcon,
|
||||||
} from "@chakra-ui/icons";
|
} from "@chakra-ui/icons";
|
||||||
|
import { FaCartPlus } from "react-icons/fa6";
|
||||||
import { CSSTransition, TransitionGroup } from "react-transition-group";
|
import { CSSTransition, TransitionGroup } from "react-transition-group";
|
||||||
import { useSearchParams } from "react-router-dom";
|
import { useSearchParams } from "react-router-dom";
|
||||||
|
|
||||||
|
@ -304,17 +304,24 @@ function GetTheseItemsButton({ outfitState }) {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Button
|
<Tooltip
|
||||||
as={isDisabled ? "button" : "a"}
|
label="Get these items!"
|
||||||
href={isDisabled ? undefined : targetUrl}
|
placement="top"
|
||||||
target={isDisabled ? undefined : "_blank"}
|
background="purple.500"
|
||||||
colorScheme="purple"
|
color="white"
|
||||||
size="sm"
|
|
||||||
rightIcon={<ExternalLinkIcon />}
|
|
||||||
isDisabled={isDisabled}
|
|
||||||
>
|
>
|
||||||
Get these items!
|
<IconButton
|
||||||
</Button>
|
aria-label="Get these items!"
|
||||||
|
as={isDisabled ? "button" : "a"}
|
||||||
|
href={isDisabled ? undefined : targetUrl}
|
||||||
|
target={isDisabled ? undefined : "_blank"}
|
||||||
|
icon={<FaCartPlus />}
|
||||||
|
colorScheme="purple"
|
||||||
|
size="sm"
|
||||||
|
isRound
|
||||||
|
isDisabled={isDisabled}
|
||||||
|
/>
|
||||||
|
</Tooltip>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -451,21 +458,18 @@ 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">
|
<OutfitSavingIndicator outfitSaving={outfitSaving} />
|
||||||
<OutfitSavingIndicator outfitSaving={outfitSaving} />
|
<Box width="3" flex="0 0 auto" />
|
||||||
</Box>
|
<GetTheseItemsButton outfitState={outfitState} />
|
||||||
<Box width="2" />
|
<Box width="2" flex="0 0 auto" />
|
||||||
<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}
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
icon={<MdMoreVert />}
|
icon={<MdMoreVert />}
|
||||||
aria-label="Outfit menu"
|
aria-label="Outfit menu"
|
||||||
borderRadius="full"
|
isRound
|
||||||
|
size="sm"
|
||||||
fontSize="24px"
|
fontSize="24px"
|
||||||
opacity="0.8"
|
opacity="0.8"
|
||||||
/>
|
/>
|
||||||
|
|
Loading…
Reference in a new issue