Make pose picker button easier to see on light backgrounds

This commit is contained in:
Emi Matchu 2024-02-01 05:26:26 -08:00
parent fc71f5b5a5
commit 09846a4516

View file

@ -293,7 +293,7 @@ function PosePickerButton({ pose, altStyle, isOpen, loading, ...props }, ref) {
{({ css, cx }) => ( {({ css, cx }) => (
<Button <Button
variant="unstyled" variant="unstyled"
boxShadow="md" textShadow={`${theme.colors.blackAlpha["700"]} 0 1px 2px`}
d="flex" d="flex"
alignItems="center" alignItems="center"
justifyContent="center" justifyContent="center"
@ -307,10 +307,11 @@ function PosePickerButton({ pose, altStyle, isOpen, loading, ...props }, ref) {
className={cx( className={cx(
css` css`
border: 1px solid transparent !important; border: 1px solid transparent !important;
color: ${theme.colors.gray["300"]}; color: ${theme.colors.gray["100"]};
cursor: ${loading ? "wait" : "pointer"} !important; cursor: ${loading ? "wait" : "pointer"} !important;
transition: transition:
color 0.2s, color 0.2s,
background: 0.2s,
border-color 0.2s !important; border-color 0.2s !important;
padding-left: 0.75em; padding-left: 0.75em;
padding-right: 0.5em; padding-right: 0.5em;
@ -319,6 +320,8 @@ function PosePickerButton({ pose, altStyle, isOpen, loading, ...props }, ref) {
&.is-open { &.is-open {
border-color: ${theme.colors.gray["50"]} !important; border-color: ${theme.colors.gray["50"]} !important;
color: ${theme.colors.gray["50"]}; color: ${theme.colors.gray["50"]};
background: ${theme.colors.blackAlpha["600"]};
text-shadow: transparent 0 1px 2px;
} }
&:focus { &:focus {