From 3a5e0b30bb8a5e550dc99e9ea2da8b7f15d4cb4a Mon Sep 17 00:00:00 2001
From: Hetu Nandu <hetunandu@gmail.com>
Date: Tue, 23 Feb 2021 15:37:13 +0530
Subject: [PATCH] Force light theme on the whole editor except the header
 (#3143)

---
 .../src/pages/Editor/APIEditor/Form.tsx       |  8 +-
 .../src/pages/Editor/APIEditor/index.tsx      | 96 +++++++++----------
 app/client/src/pages/Editor/index.tsx         | 37 ++++---
 3 files changed, 72 insertions(+), 69 deletions(-)

diff --git a/app/client/src/pages/Editor/APIEditor/Form.tsx b/app/client/src/pages/Editor/APIEditor/Form.tsx
index a93cf35ce2..687dacb4c6 100644
--- a/app/client/src/pages/Editor/APIEditor/Form.tsx
+++ b/app/client/src/pages/Editor/APIEditor/Form.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { connect, useSelector } from "react-redux";
-import { reduxForm, InjectedFormProps, formValueSelector } from "redux-form";
+import { formValueSelector, InjectedFormProps, reduxForm } from "redux-form";
 import {
   HTTP_METHOD_OPTIONS,
   HTTP_METHODS,
@@ -11,8 +11,8 @@ import FormRow from "components/editorComponents/FormRow";
 import { PaginationField } from "api/ActionAPI";
 import { API_EDITOR_FORM_NAME } from "constants/forms";
 import Pagination from "./Pagination";
-import { PaginationType, Action } from "entities/Action";
-import { HelpMap, HelpBaseURL } from "constants/HelpConstants";
+import { Action, PaginationType } from "entities/Action";
+import { HelpBaseURL, HelpMap } from "constants/HelpConstants";
 import KeyValueFieldArray from "components/editorComponents/form/fields/KeyValueFieldArray";
 import PostBodyData from "./PostBodyData";
 import ApiResponseView from "components/editorComponents/ApiResponseView";
@@ -255,8 +255,6 @@ const ApiEditorForm: React.FC<Props> = (props: Props) => {
     e.stopPropagation();
     history.replace(BUILDER_PAGE_URL(applicationId, pageId));
   };
-
-  // Enforcing the light theme
   const theme = EditorTheme.LIGHT;
 
   return (
diff --git a/app/client/src/pages/Editor/APIEditor/index.tsx b/app/client/src/pages/Editor/APIEditor/index.tsx
index a69225578e..d3cf8c57ed 100644
--- a/app/client/src/pages/Editor/APIEditor/index.tsx
+++ b/app/client/src/pages/Editor/APIEditor/index.tsx
@@ -25,7 +25,7 @@ import { Plugin } from "api/PluginApi";
 import { Action, PaginationType, RapidApiAction } from "entities/Action";
 import { getApiName } from "selectors/formSelectors";
 import Spinner from "components/editorComponents/Spinner";
-import styled, { ThemeProvider } from "styled-components";
+import styled from "styled-components";
 import CenteredWrapper from "components/designSystems/appsmith/CenteredWrapper";
 import { changeApi } from "actions/apiPaneActions";
 import PerformanceTracker, {
@@ -178,55 +178,53 @@ class ApiEditor extends React.Component<Props> {
       />
     );
     return (
-      <ThemeProvider theme={this.props.lightTheme}>
-        <div
-          style={{
-            position: "relative",
-            height: "100%",
-          }}
-        >
-          {apiId ? (
-            <>
-              {formUiComponent === "ApiEditorForm" && (
-                <ApiEditorForm
-                  pluginId={pluginId}
-                  paginationType={paginationType}
-                  isRunning={isRunning}
-                  isDeleting={isDeleting}
-                  onDeleteClick={this.handleDeleteClick}
-                  onRunClick={this.handleRunClick}
-                  appName={
-                    this.props.currentApplication
-                      ? this.props.currentApplication.name
-                      : ""
-                  }
-                  apiName={this.props.apiName}
-                />
-              )}
+      <div
+        style={{
+          position: "relative",
+          height: "100%",
+        }}
+      >
+        {apiId ? (
+          <>
+            {formUiComponent === "ApiEditorForm" && (
+              <ApiEditorForm
+                pluginId={pluginId}
+                paginationType={paginationType}
+                isRunning={isRunning}
+                isDeleting={isDeleting}
+                onDeleteClick={this.handleDeleteClick}
+                onRunClick={this.handleRunClick}
+                appName={
+                  this.props.currentApplication
+                    ? this.props.currentApplication.name
+                    : ""
+                }
+                apiName={this.props.apiName}
+              />
+            )}
 
-              {formUiComponent === "RapidApiEditorForm" && (
-                <RapidApiEditorForm
-                  apiName={this.props.apiName}
-                  apiId={this.props.match.params.apiId}
-                  paginationType={paginationType}
-                  isRunning={isRunning}
-                  isDeleting={isDeleting}
-                  onDeleteClick={this.handleDeleteClick}
-                  onRunClick={this.handleRunClick}
-                  appName={
-                    this.props.currentApplication
-                      ? this.props.currentApplication.name
-                      : ""
-                  }
-                  location={this.props.location}
-                />
-              )}
-            </>
-          ) : (
-            apiHomeScreen
-          )}
-        </div>
-      </ThemeProvider>
+            {formUiComponent === "RapidApiEditorForm" && (
+              <RapidApiEditorForm
+                apiName={this.props.apiName}
+                apiId={this.props.match.params.apiId}
+                paginationType={paginationType}
+                isRunning={isRunning}
+                isDeleting={isDeleting}
+                onDeleteClick={this.handleDeleteClick}
+                onRunClick={this.handleRunClick}
+                appName={
+                  this.props.currentApplication
+                    ? this.props.currentApplication.name
+                    : ""
+                }
+                location={this.props.location}
+              />
+            )}
+          </>
+        ) : (
+          apiHomeScreen
+        )}
+      </div>
     );
   }
 }
diff --git a/app/client/src/pages/Editor/index.tsx b/app/client/src/pages/Editor/index.tsx
index b7eef9f369..f120c3a49f 100644
--- a/app/client/src/pages/Editor/index.tsx
+++ b/app/client/src/pages/Editor/index.tsx
@@ -38,6 +38,9 @@ import { isMac } from "utils/helpers";
 import { getSelectedWidget } from "selectors/ui";
 import { MAIN_CONTAINER_WIDGET_ID } from "constants/WidgetConstants";
 import Welcome from "./Welcome";
+import { getThemeDetails, ThemeMode } from "selectors/themeSelectors";
+import { ThemeProvider } from "styled-components";
+import { Theme } from "constants/DefaultTheme";
 
 type EditorProps = {
   currentApplicationId?: string;
@@ -55,6 +58,7 @@ type EditorProps = {
   cutSelectedWidget: () => void;
   user?: User;
   selectedWidget?: string;
+  lightTheme: Theme;
 };
 
 type Props = EditorProps & RouteComponentProps<BuilderRouteParams>;
@@ -200,21 +204,23 @@ class Editor extends Component<Props> {
       );
     }
     return (
-      <DndProvider
-        backend={TouchBackend}
-        options={{
-          enableMouseEvents: true,
-        }}
-      >
-        <div>
-          <Helmet>
-            <meta charSet="utf-8" />
-            <title>Editor | Appsmith</title>
-          </Helmet>
-          <MainContainer />
-        </div>
-        <ConfirmRunModal />
-      </DndProvider>
+      <ThemeProvider theme={this.props.lightTheme}>
+        <DndProvider
+          backend={TouchBackend}
+          options={{
+            enableMouseEvents: true,
+          }}
+        >
+          <div>
+            <Helmet>
+              <meta charSet="utf-8" />
+              <title>Editor | Appsmith</title>
+            </Helmet>
+            <MainContainer />
+          </div>
+          <ConfirmRunModal />
+        </DndProvider>
+      </ThemeProvider>
     );
   }
 }
@@ -229,6 +235,7 @@ const mapStateToProps = (state: AppState) => ({
   user: getCurrentUser(state),
   selectedWidget: getSelectedWidget(state),
   creatingOnboardingDatabase: state.ui.onBoarding.showOnboardingLoader,
+  lightTheme: getThemeDetails(state, ThemeMode.LIGHT),
 });
 
 const mapDispatchToProps = (dispatch: any) => {