Overhaul pose picker button to have text now, for all users

This one isn't reserved just for Support users! I think this button
stands out a lot more with the text, and I want people to be able to
discover it!
This commit is contained in:
Emi Matchu 2024-01-30 05:34:20 -08:00
parent 4025dcd968
commit 33bcabab83
2 changed files with 29 additions and 21 deletions

View file

@ -215,12 +215,6 @@ function OutfitControls({
* We try to center the species/color picker, but the left spacer will * We try to center the species/color picker, but the left spacer will
* shrink more than the pose picker container if we run out of space! * shrink more than the pose picker container if we run out of space!
*/} */}
<Flex
flex="1 1 0"
paddingRight="3"
align="center"
justify="flex-end"
/>
<Box flex="0 0 auto"> <Box flex="0 0 auto">
<DarkMode> <DarkMode>
<SpeciesColorPicker <SpeciesColorPicker
@ -234,7 +228,7 @@ function OutfitControls({
/> />
</DarkMode> </DarkMode>
</Box> </Box>
<Flex flex="1 1 0" align="center" pl="2"> <Flex flex="0 0 auto" align="center" pl="2">
<PosePicker <PosePicker
speciesId={outfitState.speciesId} speciesId={outfitState.speciesId}
colorId={outfitState.colorId} colorId={outfitState.colorId}

View file

@ -23,6 +23,7 @@ import {
useToast, useToast,
useToken, useToken,
} from "@chakra-ui/react"; } from "@chakra-ui/react";
import { ChevronDownIcon } from "@chakra-ui/icons";
import { loadable } from "../util"; import { loadable } from "../util";
import { petAppearanceFragment } from "../components/useOutfitAppearance"; import { petAppearanceFragment } from "../components/useOutfitAppearance";
@ -144,10 +145,6 @@ function PosePicker({
dispatchToOutfit, dispatchToOutfit,
]); ]);
if (loading) {
return null;
}
// This is a low-stakes enough control, where enough pairs don't have data // This is a low-stakes enough control, where enough pairs don't have data
// anyway, that I think I want to just not draw attention to failures. // anyway, that I think I want to just not draw attention to failures.
if (error) { if (error) {
@ -175,7 +172,12 @@ function PosePicker({
{({ isOpen }) => ( {({ isOpen }) => (
<> <>
<PopoverTrigger> <PopoverTrigger>
<PosePickerButton pose={pose} isOpen={isOpen} {...props} /> <PosePickerButton
pose={pose}
isOpen={isOpen}
loading={loading}
{...props}
/>
</PopoverTrigger> </PopoverTrigger>
<Portal> <Portal>
<PopoverContent> <PopoverContent>
@ -248,7 +250,7 @@ function PosePicker({
); );
} }
function PosePickerButton({ pose, isOpen, ...props }, ref) { function PosePickerButton({ pose, isOpen, loading, ...props }, ref) {
const theme = useTheme(); const theme = useTheme();
return ( return (
@ -265,16 +267,28 @@ function PosePickerButton({ pose, isOpen, ...props }, ref) {
outline="initial" outline="initial"
fontSize="sm" fontSize="sm"
fontWeight="normal" fontWeight="normal"
minWidth="12ch"
disabled={loading}
className={cx( className={cx(
css` css`
border: 1px solid transparent !important; border: 1px solid transparent !important;
transition: border-color 0.2s !important; color: ${theme.colors.gray["300"]};
padding-inline: 0.75em; cursor: ${loading ? "wait" : "pointer"} !important;
transition:
color 0.2s,
border-color 0.2s !important;
padding-left: 0.75em;
padding-right: 0.5em;
&:focus,
&:hover, &:hover,
&.is-open { &.is-open {
border-color: ${theme.colors.gray["50"]} !important; border-color: ${theme.colors.gray["50"]} !important;
color: ${theme.colors.gray["50"]};
}
&:focus {
border-color: ${theme.colors.gray["50"]} !important;
box-shadow: ${theme.shadows.outline};
} }
&.is-open { &.is-open {
@ -286,11 +300,11 @@ function PosePickerButton({ pose, isOpen, ...props }, ref) {
{...props} {...props}
ref={ref} ref={ref}
> >
<EmojiImage src={getIcon(pose)} alt="" /> <EmojiImage src={getIcon(pose)} alt="Style" />
<SupportOnly>
<Box width=".5em" /> <Box width=".5em" />
{getLabel(pose)} {getLabel(pose)}
</SupportOnly> <Box width=".5em" />
<ChevronDownIcon />
</Button> </Button>
)} )}
</ClassNames> </ClassNames>