From c0cc82aae1851164f7dc80f8a0b51abf3e7cf358 Mon Sep 17 00:00:00 2001
From: Krzysztof Bialoglowicz <krzysztof@mirumee.com>
Date: Tue, 10 Sep 2019 17:57:52 +0200
Subject: [PATCH] Fix checkbox on dark mode

---
 src/components/Checkbox/Checkbox.tsx   | 4 ++--
 src/components/Theme/ThemeProvider.tsx | 6 ++++++
 src/theme.ts                           | 5 +++++
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/Checkbox/Checkbox.tsx b/src/components/Checkbox/Checkbox.tsx
index 0ca2cfb9a..baf4f2c21 100644
--- a/src/components/Checkbox/Checkbox.tsx
+++ b/src/components/Checkbox/Checkbox.tsx
@@ -31,7 +31,7 @@ const styles = (theme: Theme) =>
       "&$checked": {
         "&:before": {
           background: theme.palette.primary.main,
-          color: theme.palette.common.white,
+          color: theme.palette.background.paper,
           content: '"\\2713"',
           fontWeight: "bold",
           textAlign: "center"
@@ -61,7 +61,7 @@ const styles = (theme: Theme) =>
       },
 
       WebkitAppearance: "none",
-      border: `1px solid ${theme.palette.grey[500]}`,
+      border: `1px solid ${theme.palette.action.active}`,
       boxSizing: "border-box",
       cursor: "pointer",
       height: 14,
diff --git a/src/components/Theme/ThemeProvider.tsx b/src/components/Theme/ThemeProvider.tsx
index e2b867603..d1f30e2ce 100644
--- a/src/components/Theme/ThemeProvider.tsx
+++ b/src/components/Theme/ThemeProvider.tsx
@@ -12,6 +12,9 @@ const dark: IThemeColors = {
     default: "#1D1E1F",
     paper: "#2E2F31"
   },
+  checkbox: {
+    default: "#FFFFFF"
+  },
   error: "#C22D74",
   font: {
     button: "#202124",
@@ -42,6 +45,9 @@ const light: IThemeColors = {
     default: "#F1F6F6",
     paper: "#FFFFFF"
   },
+  checkbox: {
+    default: "#616161"
+  },
   error: "#C22D74",
   font: {
     button: "#FFFFFF",
diff --git a/src/theme.ts b/src/theme.ts
index b7e933d7d..fe2100ad5 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -16,6 +16,8 @@ export type IThemeColors = Record<
   string
 > & {
   background: Record<"default" | "paper", string>;
+} & {
+  checkbox: Record<"default" | "disabled", string>;
 } & {
   font: Record<"default" | "gray" | "button" | "textButton", string>;
 } & {
@@ -406,6 +408,9 @@ export default (colors: IThemeColors): Theme =>
         hint: colors.font.gray,
         primary: colors.font.default,
         secondary: colors.font.gray
+      },
+      action: {
+        active: colors.checkbox.default
       }
     },
     props: {