OpenNeo/impress
OpenNeo/impress
1
0
Fork 1
Code Pull requests Activity

Redesign "Get these items!" button to use a cart icon instead

Browse source 
This helps it fit in the kinda crunchy horizontal space a lot better!
This commit is contained in:
Emi Matchu 2024-05-31 17:38:25 -07:00
parent d3d0cda81f
commit 63abfa51f7
1 changed files with 24 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
app/javascript/wardrobe-2020/WardrobePage/ItemsPanel.js
View file

@ -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"
/> />