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
* 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">
<DarkMode>
<SpeciesColorPicker
@ -234,7 +228,7 @@ function OutfitControls({
/>
</DarkMode>
</Box>
<Flex flex="1 1 0" align="center" pl="2">
<Flex flex="0 0 auto" align="center" pl="2">
<PosePicker
speciesId={outfitState.speciesId}
colorId={outfitState.colorId}

View file

@ -23,6 +23,7 @@ import {
useToast,
useToken,
} from "@chakra-ui/react";
import { ChevronDownIcon } from "@chakra-ui/icons";
import { loadable } from "../util";
import { petAppearanceFragment } from "../components/useOutfitAppearance";
@ -144,10 +145,6 @@ function PosePicker({
dispatchToOutfit,
]);
if (loading) {
return null;
}
// 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.
if (error) {
@ -175,7 +172,12 @@ function PosePicker({
{({ isOpen }) => (
<>
<PopoverTrigger>
<PosePickerButton pose={pose} isOpen={isOpen} {...props} />
<PosePickerButton
pose={pose}
isOpen={isOpen}
loading={loading}
{...props}
/>
</PopoverTrigger>
<Portal>
<PopoverContent>
@ -248,7 +250,7 @@ function PosePicker({
);
}
function PosePickerButton({ pose, isOpen, ...props }, ref) {
function PosePickerButton({ pose, isOpen, loading, ...props }, ref) {
const theme = useTheme();
return (
@ -265,16 +267,28 @@ function PosePickerButton({ pose, isOpen, ...props }, ref) {
outline="initial"
fontSize="sm"
fontWeight="normal"
minWidth="12ch"
disabled={loading}
className={cx(
css`
border: 1px solid transparent !important;
transition: border-color 0.2s !important;
padding-inline: 0.75em;
color: ${theme.colors.gray["300"]};
cursor: ${loading ? "wait" : "pointer"} !important;
transition:
color 0.2s,
border-color 0.2s !important;
padding-left: 0.75em;
padding-right: 0.5em;
&:focus,
&:hover,
&.is-open {
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 {
@ -286,11 +300,11 @@ function PosePickerButton({ pose, isOpen, ...props }, ref) {
{...props}
ref={ref}
>
<EmojiImage src={getIcon(pose)} alt="" />
<SupportOnly>
<EmojiImage src={getIcon(pose)} alt="Style" />
<Box width=".5em" />
{getLabel(pose)}
</SupportOnly>
<Box width=".5em" />
<ChevronDownIcon />
</Button>
)}
</ClassNames>