Merge branch 'master' of https://github.com/tannerlinsley/react-query…

…-devtools
tannerlinsley · Aug 20, 2020 · 721b7e6 · 721b7e6
2 parents 87ccbb8 + 34f0a77
commit 721b7e6
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/src/index.js b/src/index.js
@@ -33,6 +33,8 @@ const theme = {
   foreground: 'white',
   gray: '#3f4e60',
   grayAlt: '#222e3e',
+  inputBackgroundColor: '#fff',
+  inputTextColor: '#000',
   success: '#00ab52',
   danger: '#ff0085',
   active: '#006bff',

diff --git a/src/styledComponents.js b/src/styledComponents.js
@@ -67,16 +67,19 @@ export const Code = styled('code', {
   fontSize: '.9em',
 })
 
-export const Input = styled('input', {
+export const Input = styled('input', (props, theme) => ({
+  backgroundColor: theme.inputBackgroundColor,
   border: 0,
   borderRadius: '.2em',
+  color: theme.inputTextColor,
   fontSize: '.9em',
+  lineHeight: `1.3`,
   padding: '.3em .4em',
-})
+}))
 
 export const Select = styled(
   'select',
-  {
+  (props, theme) => ({
     display: `inline-block`,
     fontSize: `.9em`,
     fontFamily: `sans-serif`,
@@ -88,12 +91,13 @@ export const Select = styled(
     borderRadius: `.2em`,
     appearance: `none`,
     WebkitAppearance: 'none',
-    backgroundColor: `#fff`,
+    backgroundColor: theme.inputBackgroundColor,
     backgroundImage: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23444444'><polygon points='0,25 100,25 50,75'/></svg>")`,
     backgroundRepeat: `no-repeat`,
     backgroundPosition: `right .55em center`,
     backgroundSize: `.65em auto, 100%`,
-  },
+    color: theme.inputTextColor,
+  }),
   {
     '(max-width: 500px)': {
       display: 'none',