From bc78c03e29176afbb548a65aba57f9154011acf5 Mon Sep 17 00:00:00 2001
From: dominik-zeglen <flesz3@o2.pl>
Date: Thu, 5 Nov 2020 15:10:46 +0100
Subject: [PATCH] Improve dark mode

---
 .../RichTextEditor/RichTextEditor.tsx         | 19 +++++++++++++++++--
 src/storybook/Decorator.tsx                   |  2 +-
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/components/RichTextEditor/RichTextEditor.tsx b/src/components/RichTextEditor/RichTextEditor.tsx
index 62a616327..1a0d063f9 100644
--- a/src/components/RichTextEditor/RichTextEditor.tsx
+++ b/src/components/RichTextEditor/RichTextEditor.tsx
@@ -5,10 +5,8 @@ import Quote from "@editorjs/quote";
 import FormControl from "@material-ui/core/FormControl";
 import FormHelperText from "@material-ui/core/FormHelperText";
 import InputLabel from "@material-ui/core/InputLabel";
-import OutlinedInput from "@material-ui/core/OutlinedInput";
 import { makeStyles } from "@material-ui/core/styles";
 import { fade } from "@material-ui/core/styles/colorManipulator";
-import Typography from "@material-ui/core/Typography";
 import strikethroughIcon from "@saleor/icons/StrikethroughIcon";
 import classNames from "classnames";
 import createGenericInlineTool from "editorjs-inline-tool";
@@ -40,6 +38,9 @@ const useStyles = makeStyles(
         "& .cdx-quote__text": {
           minHeight: 24
         },
+        "& .ce-block--selected .ce-block__content": {
+          background: `${fade(theme.palette.primary.main, 0.4)} !important`
+        },
         "& .ce-block__content": {
           margin: 0,
           maxWidth: "unset"
@@ -50,16 +51,30 @@ const useStyles = makeStyles(
         "& .ce-conversion-tool--focused": {
           background: `${fade(theme.palette.primary.main, 0.1)} !important`
         },
+        "& .ce-conversion-tool__icon": {
+          background: "none"
+        },
+        "& .ce-conversion-toolbar": {
+          background: theme.palette.background.paper
+        },
         "& .ce-header": {
           marginBottom: 0,
           paddingBottom: theme.spacing(1)
         },
         "& .ce-inline-tool": {
           ...hover,
+          color: theme.palette.text.primary,
           height: 32,
           transition: theme.transitions.duration.short + "ms",
           width: 32
         },
+        "& .ce-inline-toolbar": {
+          "& input": {
+            background: "none"
+          },
+          background: theme.palette.background.paper,
+          color: theme.palette.text.primary
+        },
         "& .ce-inline-toolbar__dropdown": {
           ...hover,
           height: 32,
diff --git a/src/storybook/Decorator.tsx b/src/storybook/Decorator.tsx
index 66e548747..46b6ec656 100644
--- a/src/storybook/Decorator.tsx
+++ b/src/storybook/Decorator.tsx
@@ -17,7 +17,7 @@ export const Decorator = storyFn => (
     >
       <DateProvider value={+new Date("2018-08-07T14:30:44+00:00")}>
         <TimezoneProvider value="America/New_York">
-          <ThemeProvider isDefaultDark={false}>
+          <ThemeProvider isDefaultDark={true}>
             <MessageManagerProvider>
               <div
                 style={{