From a1ad111f7151609f2ce05d08a3981dbff7730709 Mon Sep 17 00:00:00 2001
From: Ramiz Wachtler <r.wachtler@netconomy.net>
Date: Tue, 22 Oct 2019 17:11:46 +0200
Subject: [PATCH] Fix wrong color for disabled input fields on iOS

- Added -webkit-text-fill-color to createDisabledTextStyles
---
 src/components/common/index.js | 48 ++++++++++++++++++----------------
 1 file changed, 26 insertions(+), 22 deletions(-)

diff --git a/src/components/common/index.js b/src/components/common/index.js
index ddddbab1..a239dee2 100644
--- a/src/components/common/index.js
+++ b/src/components/common/index.js
@@ -7,26 +7,29 @@ export const createDisabledTextStyles = () => css`
   color: ${({ theme }) => theme.textDisabled};
   text-shadow: 1px 1px ${({ theme }) => theme.textDisabledShadow};
   /* filter: grayscale(100%); */
+  -webkit-text-fill-color: ${({ theme }) => theme.inputTextDisabled};
 `;
 export const createBoxStyles = () => css`
-    box-sizing: border-box;
-    display: inline-block;
-    background-color: ${({ theme }) => theme.material};
-    color: ${({ theme }) => theme.text};
-  `;
+  box-sizing: border-box;
+  display: inline-block;
+  background-color: ${({ theme }) => theme.material};
+  color: ${({ theme }) => theme.text};
+`;
 // TODO for flat box styles add checkered background when disabled (not solid color)
 export const createFlatBoxStyles = () => css`
-    position: relative;
-    box-sizing: border-box;
-    display: inline-block;
-    color: ${({ theme }) => theme.text};
-    background: ${({ theme, isDisabled }) => (isDisabled ? theme.flatLight : theme.canvas)};
-    border: 2px solid ${({ theme }) => theme.canvas};
-    outline: 2px solid ${({ theme }) => theme.flatDark};
-    outline-offset: -4px;
-  `;
-export const createBorderStyles = (invert = false) => (invert
-  ? css`
+  position: relative;
+  box-sizing: border-box;
+  display: inline-block;
+  color: ${({ theme }) => theme.text};
+  background: ${({ theme, isDisabled }) =>
+    isDisabled ? theme.flatLight : theme.canvas};
+  border: 2px solid ${({ theme }) => theme.canvas};
+  outline: 2px solid ${({ theme }) => theme.flatDark};
+  outline-offset: -4px;
+`;
+export const createBorderStyles = (invert = false) =>
+  invert
+    ? css`
         border-style: solid;
         border-width: 2px;
         border-left-color: ${({ theme }) => theme.borderDarkest};
@@ -37,7 +40,7 @@ export const createBorderStyles = (invert = false) => (invert
             1px ${({ theme }) => theme.borderDark},
           inset -1px -1px 0 1px ${({ theme }) => theme.borderLight};
       `
-  : css`
+    : css`
         border-style: solid;
         border-width: 2px;
         border-left-color: ${({ theme }) => theme.borderLightest};
@@ -47,9 +50,10 @@ export const createBorderStyles = (invert = false) => (invert
         box-shadow: ${props => props.shadow && `${shadow}, `} inset 1px 1px 0px
             1px ${({ theme }) => theme.borderLight},
           inset -1px -1px 0 1px ${({ theme }) => theme.borderDark};
-      `);
-export const createWellBorderStyles = (invert = false) => (invert
-  ? css`
+      `;
+export const createWellBorderStyles = (invert = false) =>
+  invert
+    ? css`
         border-style: solid;
         border-width: 2px;
         border-left-color: ${({ theme }) => theme.borderDark};
@@ -57,11 +61,11 @@ export const createWellBorderStyles = (invert = false) => (invert
         border-right-color: ${({ theme }) => theme.borderLightest};
         border-bottom-color: ${({ theme }) => theme.borderLightest};
       `
-  : css`
+    : css`
         border-style: solid;
         border-width: 2px;
         border-left-color: ${({ theme }) => theme.borderLightest};
         border-top-color: ${({ theme }) => theme.borderLightest};
         border-right-color: ${({ theme }) => theme.borderDark};
         border-bottom-color: ${({ theme }) => theme.borderDark};
-      `);
+      `;