From 322ae03f42e2cd50ef8448ebd4c53aecb269deab Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Thu, 15 Oct 2020 16:27:20 +1100
Subject: [PATCH] Fixed input disabled visual on safari

---
 src/components/Select.js | 21 ++++++++++-----------
 src/theme.js             |  2 +-
 2 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/components/Select.js b/src/components/Select.js
index 3eca369..413df18 100644
--- a/src/components/Select.js
+++ b/src/components/Select.js
@@ -6,10 +6,6 @@ import { useThemeUI } from "theme-ui";
 function Select({ creatable, ...props }) {
   const { theme } = useThemeUI();
 
-  function getColor(state) {
-    return state.isDisabled ? theme.colors.gray : theme.colors.text;
-  }
-
   const Component = creatable ? Creatable : ReactSelect;
 
   return (
@@ -18,32 +14,34 @@ function Select({ creatable, ...props }) {
         menu: (provided, state) => ({
           ...provided,
           backgroundColor: theme.colors.background,
-          color: getColor(state),
+          color: theme.colors.text,
           borderRadius: "4px",
           borderColor: theme.colors.gray,
           borderStyle: "solid",
           borderWidth: "1px",
           fontFamily: theme.fonts.body2,
+          opacity: state.isDisabled ? 0.5 : 1,
         }),
         control: (provided, state) => ({
           ...provided,
           backgroundColor: theme.colors.background,
-          color: getColor(state),
+          color: theme.colors.text,
           borderColor: theme.colors.text,
+          opacity: state.isDisabled ? 0.5 : 1,
         }),
-        singleValue: (provided, state) => ({
+        singleValue: (provided) => ({
           ...provided,
-          color: getColor(state),
+          color: theme.colors.text,
           fontFamily: theme.fonts.body2,
         }),
         option: (provided, state) => ({
           ...provided,
-          color: getColor(state),
+          color: theme.colors.text,
           opacity: state.isDisabled ? 0.5 : 1,
         }),
         dropdownIndicator: (provided, state) => ({
           ...provided,
-          color: getColor(state),
+          color: theme.colors.text,
           ":hover": {
             color: state.isDisabled
               ? theme.colors.disabled
@@ -52,7 +50,8 @@ function Select({ creatable, ...props }) {
         }),
         input: (provided, state) => ({
           ...provided,
-          color: getColor(state),
+          color: theme.colors.text,
+          opacity: state.isDisabled ? 0.5 : 1,
         }),
       }}
       theme={(t) => ({
diff --git a/src/theme.js b/src/theme.js
index 1baef2c..b616ff5 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -175,7 +175,7 @@ export default {
       },
       "&:disabled": {
         backgroundColor: "muted",
-        color: "gray",
+        opacity: 0.5,
         borderColor: "text",
       },
       fontFamily: "body2",