From 09846a4516f008206159beeda79b2a830f6bcbe1 Mon Sep 17 00:00:00 2001
From: Emi Matchu <emi@matchu.dev>
Date: Thu, 1 Feb 2024 05:26:26 -0800
Subject: [PATCH] Make pose picker button easier to see on light backgrounds

---
 app/javascript/wardrobe-2020/WardrobePage/PosePicker.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

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