dice/impress
1
0
Fork 0
forked from OpenNeo/impress
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

30
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
label="Get these items!"
placement="top"
background="purple.500"
color="white"
>
<IconButton
aria-label="Get these items!"
as={isDisabled ? "button" : "a"} as={isDisabled ? "button" : "a"}
href={isDisabled ? undefined : targetUrl} href={isDisabled ? undefined : targetUrl}
target={isDisabled ? undefined : "_blank"} target={isDisabled ? undefined : "_blank"}
icon={<FaCartPlus />}
colorScheme="purple" colorScheme="purple"
size="sm" size="sm"
rightIcon={<ExternalLinkIcon />} isRound
isDisabled={isDisabled} isDisabled={isDisabled}
> />
Get these items! </Tooltip>
</Button>
); );
} }
@ -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> <Box width="3" flex="0 0 auto" />
<Box width="2" />
<Box flex="0 0 auto">
<GetTheseItemsButton outfitState={outfitState} /> <GetTheseItemsButton outfitState={outfitState} />
</Box> <Box width="2" flex="0 0 auto" />
<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"
/> />