From e7c3808d02ee79f0f0ee91a70eca963aca939e0d Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Tue, 1 Feb 2022 15:32:49 +0300
Subject: [PATCH] Use React.Context for controlling input theme in Dialogs

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 src/renderer/components/dialog/dialog.tsx | 21 ++++++++++++---------
 src/renderer/components/input/input.tsx   |  7 ++++++-
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/renderer/components/dialog/dialog.tsx b/src/renderer/components/dialog/dialog.tsx
index f339ec973e..0bb3f76b75 100644
--- a/src/renderer/components/dialog/dialog.tsx
+++ b/src/renderer/components/dialog/dialog.tsx
@@ -12,6 +12,7 @@ import { reaction } from "mobx";
 import { Animate } from "../animate";
 import { cssNames, noop, stopPropagation } from "../../utils";
 import { navigation } from "../../navigation";
+import { InputThemeContext } from "../input";
 
 // todo: refactor + handle animation-end in props.onClose()?
 
@@ -139,16 +140,18 @@ export class Dialog extends React.PureComponent<DialogProps, DialogState> {
 
     className = cssNames("Dialog flex center", className, { modal, pinned });
     let dialog = (
-      <div
-        className={className}
-        onClick={stopPropagation}
-        ref={this.ref}
-        data-testid={testId}
-      >
-        <div className="box" ref={e => this.contentElem = e}>
-          {this.props.children}
+      <InputThemeContext.Provider value="light">
+        <div
+          className={className}
+          onClick={stopPropagation}
+          ref={this.ref}
+          data-testid={testId}
+        >
+          <div className="box" ref={e => this.contentElem = e}>
+            {this.props.children}
+          </div>
         </div>
-      </div>
+      </InputThemeContext.Provider>
     );
 
     if (animated) {
diff --git a/src/renderer/components/input/input.tsx b/src/renderer/components/input/input.tsx
index 6b9c19521b..21a1370354 100644
--- a/src/renderer/components/input/input.tsx
+++ b/src/renderer/components/input/input.tsx
@@ -70,6 +70,8 @@ interface State {
   submitted: boolean;
 }
 
+export const InputThemeContext = React.createContext("dark");
+
 const defaultProps: Partial<InputProps> = {
   rows: 1,
   maxRows: 10000,
@@ -347,9 +349,10 @@ export class Input extends React.Component<InputProps, State> {
       ...inputProps
     } = this.props;
     const { dirty, valid, validating, errors } = this.state;
+    const theme = this.context;
 
     const className = cssNames(styles.Input, this.props.className, {
-      [styles.lightTheme]: lightTheme,
+      [styles.lightTheme]: lightTheme || theme == "light",
       [styles.disabled]: disabled,
       [styles.invalid]: !valid,
       [styles.dirty]: dirty,
@@ -413,3 +416,5 @@ export class Input extends React.Component<InputProps, State> {
     );
   }
 }
+
+Input.contextType = InputThemeContext;
\ No newline at end of file