Add a new DataprocWidget base class that injects MUI themes. (#56)

Author: ptwng

src/controls/MuiWrappedInput.tsx

@@ -38,8 +38,5 @@ export const Input = styled(InputInternal)<InputProps>({
   marginTop: '10px',
   '& .MuiInputBase-input': {
     padding: '9.5px 14px'
-  },
-  '& .MuiOutlinedInput-notchedOutline': {
-    borderColor: 'rgb(0,0,0)'
   }
 });

src/controls/MuiWrappedSelect.tsx

@@ -41,8 +41,5 @@ export const Select = styled(SelectInternal)<SelectProps>({
   marginTop: '10px',
   '& .MuiInputBase-input': {
     padding: '9.5px 14px'
-  },
-  '& .MuiOutlinedInput-notchedOutline': {
-    borderStyle: 'none'
   }
 });

src/index.ts

@@ -21,7 +21,7 @@ import {
   JupyterLab,
   ILabShell
 } from '@jupyterlab/application';
-import { MainAreaWidget } from '@jupyterlab/apputils';
+import { MainAreaWidget, IThemeManager } from '@jupyterlab/apputils';
 import { ILauncher } from '@jupyterlab/launcher';
 import { LabIcon } from '@jupyterlab/ui-components';
 import { IMainMenu } from '@jupyterlab/mainmenu';
@@ -47,13 +47,14 @@ import { RuntimeTemplate } from './runtime/runtimeTemplate';
 const extension: JupyterFrontEndPlugin<void> = {
   id: 'dataproc_jupyter_plugin:plugin',
   autoStart: true,
-  optional: [ILauncher, IMainMenu, ILabShell, INotebookTracker],
+  optional: [ILauncher, IMainMenu, ILabShell, INotebookTracker, IThemeManager],
   activate: async (
     app: JupyterFrontEnd,
     launcher: ILauncher,
     mainMenu: IMainMenu,
     labShell: ILabShell,
-    notebookTracker: INotebookTracker
+    notebookTracker: INotebookTracker,
+    themeManager: IThemeManager
   ) => {
     const { commands } = app;
     const iconAddRuntime = new LabIcon({
@@ -168,7 +169,7 @@ const extension: JupyterFrontEndPlugin<void> = {
       // @ts-ignore jupyter lab icon command issue
       icon: args => (args['isPalette'] ? null : iconAddRuntime),
       execute: () => {
-        const content = new RuntimeTemplate(app as JupyterLab);
+        const content = new RuntimeTemplate(app as JupyterLab, themeManager);
         const widget = new MainAreaWidget<RuntimeTemplate>({ content });
         widget.title.label = 'Runtime template';
         widget.title.icon = iconServerless;
@@ -210,7 +211,7 @@ const extension: JupyterFrontEndPlugin<void> = {
     commands.addCommand(createAuthLoginComponentCommand, {
       label: 'Cloud Dataproc Settings',
       execute: () => {
-        const content = new AuthLogin();
+        const content = new AuthLogin(themeManager);
         const widget = new MainAreaWidget<AuthLogin>({ content });
         widget.title.label = 'Config Setup';
         widget.title.icon = iconCluster;

src/login/authLogin.tsx

@@ -15,7 +15,6 @@
  * limitations under the License.
  */
 
-import { ReactWidget } from '@jupyterlab/apputils';
 import React, { useEffect, useState } from 'react';
 import { LabIcon } from '@jupyterlab/ui-components';
 import signinGoogleIcon from '../../style/icons/signin_google_icon.svg';
@@ -24,6 +23,7 @@ import ConfigSelection from './configSelection';
 import { LOGIN_STATE, STATUS_SUCCESS } from '../utils/const';
 import { checkConfig } from '../utils/utils';
 import { ClipLoader } from 'react-spinners';
+import { DataprocWidget } from '../controls/DataprocWidget';
 
 // Create the LabIcon instance outside of the component
 const IconsigninGoogle = new LabIcon({
@@ -111,12 +111,8 @@ const AuthLoginComponent = (): React.JSX.Element => {
   );
 };
 
-export class AuthLogin extends ReactWidget {
-  constructor() {
-    super();
-  }
-
-  render(): React.JSX.Element {
+export class AuthLogin extends DataprocWidget {
+  renderInternal(): React.JSX.Element {
     return <AuthLoginComponent />;
   }
 }

src/runtime/runtimeTemplate.tsx

@@ -15,11 +15,12 @@
  * limitations under the License.
  */
 
-import { ReactWidget } from '@jupyterlab/apputils';
 import React, { useEffect, useState } from 'react';
 import CreateRuntime from './createRunTime';
 import { JupyterLab } from '@jupyterlab/application';
 import { SessionTemplate } from '../utils/listRuntimeTemplateInterface';
+import { DataprocWidget } from '../controls/DataprocWidget';
+import { IThemeManager } from '@jupyterlab/apputils';
 
 const RuntimeTemplateComponent = ({
   app
@@ -45,15 +46,15 @@ const RuntimeTemplateComponent = ({
   );
 };
 
-export class RuntimeTemplate extends ReactWidget {
+export class RuntimeTemplate extends DataprocWidget {
   app: JupyterLab;
 
-  constructor(app: JupyterLab) {
-    super();
+  constructor(app: JupyterLab, themeManager: IThemeManager) {
+    super(themeManager);
     this.app = app;
   }
 
-  render(): React.JSX.Element {
+  renderInternal(): React.JSX.Element {
     return <RuntimeTemplateComponent app={this.app} />;
   }
 }

style/authLogin.css

@@ -24,7 +24,7 @@
   font-weight: 400;
   font-size: 18px;
   line-height: 22px;
-  color: #000000;
+  color: var(--jp-ui-font-color0);
   padding-left: 10px;
   padding-bottom: 5px;
 }
@@ -57,18 +57,18 @@
   line-height: 13px;
   display: flex;
   align-items: center;
-  color: #000000;
+  color: var(--jp-ui-font-color0);
   position: absolute;
-  background-color: #fff;
+  background-color: var(--jp-layout-color0);
   bottom: 32px;
   padding-left: 2px;
   left: 7px;
 }
 
 .project-select {
   box-sizing: border-box;
-  background: #ffffff !important;
-  border: 1px solid rgba(0, 0, 0, 0.38) !important;
+  background: var(--jp-layout-color0) !important;
+  border: 1px solid var(--jp-ui-font-color2) !important;
   display: block !important;
   height: 36px;
   width: 100%;
@@ -88,9 +88,9 @@
   line-height: 13px;
   display: flex;
   align-items: center;
-  color: #000000;
+  color: var(--jp-ui-font-color0);
   position: absolute;
-  background-color: #fff;
+  background-color: var(--jp-layout-color0);
   padding-right: 4px;
   bottom: 34px;
   padding-left: 2px;
@@ -99,8 +99,8 @@
 
 .region-select {
   box-sizing: border-box;
-  background: #ffffff !important;
-  border: 1px solid rgba(0, 0, 0, 0.38) !important;
+  background: var(--jp-layout-color0) !important;
+  border: 1px solid var(--jp-ui-font-color2) !important;
   display: block !important;
   height: 40px;
   width: 100%;
@@ -126,8 +126,8 @@
 .save-button {
   height: 32px;
   background: #3367d6;
-  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.12), 0px 2px 2px rgba(0, 0, 0, 0.2),
-    0px 1px 1px rgba(0, 0, 0, 0.14);
+  box-shadow: 0px 1px 5px var(--jp-layout-color4),
+    0px 2px 2px rgba(0, 0, 0, 0.2), 0px 1px 1px var(--jp-layout-color4);
   border-radius: 4px;
   flex: none;
   width: 65px;
@@ -138,13 +138,13 @@
   align-items: center;
   text-align: center;
   text-transform: uppercase;
-  color: #ffffff;
+  color: var(--jp-layout-color0);
   border: none;
   cursor: pointer;
 }
 .save-button:disabled {
   background: lightgrey;
-  color: black;
+  color: var(--jp-ui-font-color0);
 }
 .save-loader {
   margin-top: 5px;
@@ -153,7 +153,7 @@
   box-sizing: border-box;
   width: 344px;
   height: fit-content;
-  background: #ffffff;
+  background: var(--jp-layout-color0);
   border: 1px solid #b0b0b0;
   border-radius: 27px;
   margin-left: 21%;
@@ -207,7 +207,7 @@
   font-weight: 500;
   font-size: 12px;
   line-height: 17px;
-  color: #000000;
+  color: var(--jp-ui-font-color0);
   padding-left: 30px;
   padding-top: 20px;
   justify-content: center;
@@ -249,13 +249,13 @@
 }
 .ui.dropdown .menu .selected.item,
 .ui.dropdown.selected {
-  background: rgb(230, 236, 250) !important;
-  color: rgb(28, 58, 169) !important;
+  background: var(--jp-layout-color0) !important;
+  color: var(--jp-brand-color0) !important;
 }
 .runtime-title-section {
   display: flex;
   justify-content: space-between;
-  color: #000;
+  color: var(--jp-ui-font-color0);
   font-size: 20px;
   font-style: normal;
   font-weight: 500;

style/base.css

@@ -15,7 +15,7 @@
 }
 
 /*Changing Icon for category with image pyspark*/
-.f1hgkb35 svg[data-icon="launcher:pyspark-logo-icon"] {
+.f1hgkb35 svg[data-icon='launcher:pyspark-logo-icon'] {
   content-visibility: hidden;
   display: block;
   height: 32px;
@@ -25,7 +25,7 @@
 }
 
 /*Changing Icon for category with image cluster*/
-.f1hgkb35 svg[data-icon="launcher:clusters-icon"] {
+.f1hgkb35 svg[data-icon='launcher:clusters-icon'] {
   content-visibility: hidden;
   display: block;
   height: 32px;
@@ -35,7 +35,7 @@
 }
 
 /*Changing Icon for category with image python*/
-.f1hgkb35 svg[data-icon="launcher:python-logo-icon"] {
+.f1hgkb35 svg[data-icon='launcher:python-logo-icon'] {
   content-visibility: hidden;
   display: block;
   height: 32px;
@@ -45,7 +45,7 @@
 }
 
 /*Changing Icon for category with image sparkR*/
-.f1hgkb35 svg[data-icon="launcher:sparkr-logo-icon"] {
+.f1hgkb35 svg[data-icon='launcher:sparkr-logo-icon'] {
   content-visibility: hidden;
   display: block;
   height: 32px;
@@ -55,7 +55,7 @@
 }
 
 /*Changing Icon for category with image scala*/
-.f1hgkb35 svg[data-icon="launcher:scala-logo-icon"] {
+.f1hgkb35 svg[data-icon='launcher:scala-logo-icon'] {
   content-visibility: hidden;
   display: block;
   height: 32px;
@@ -70,15 +70,14 @@ h2 {
   margin: 15px 0px !important;
 }
 
-.ui.dropdown:not(.button)>.default.text {
-  color: rgba(0, 0, 0, 0.66) !important;
+.ui.dropdown:not(.button) > .default.text {
+  color: var(--jp-ui-font-color2) !important;
 }
 
 /* Highlight select dropdown field when focus */
 .ui.selection.active.dropdown:focus {
-  border: 3px solid #3367D6 !important;
+  border: 3px solid #3367d6 !important;
 }
 .ui.selection.dropdown {
-  min-width:5em !important;
+  min-width: 5em !important;
 }
-

style/batches.css

@@ -1,6 +1,6 @@
 .batch-header-part {
   display: flex;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+  border-bottom: 1px solid var(--jp-layout-color4);
 }
 
 .create-batch-overlay {
@@ -18,7 +18,7 @@
   line-height: 18px;
   width: 65%;
   padding-left: 30px;
-  color: #000000;
+  color: var(--jp-ui-font-color0);
   overflow-wrap: anywhere;
 }
 
@@ -29,7 +29,7 @@
   line-height: 18px;
   width: 65%;
   padding-left: 45px;
-  color: #000000;
+  color: var(--jp-ui-font-color0);
   overflow-wrap: anywhere;
 }
 
@@ -47,7 +47,7 @@
   font-size: 13px;
   line-height: 18px;
   width: 65%;
-  color: #000000;
+  color: var(--jp-ui-font-color0);
 }
 .batch-details-label-level-one {
   font-style: normal;
@@ -56,7 +56,7 @@
   line-height: 18px;
   width: 65%;
   padding-left: 15px;
-  color: #000000;
+  color: var(--jp-ui-font-color0);
   overflow-wrap: anywhere;
 }
 .details-value {
@@ -65,19 +65,17 @@
   font-size: 13px;
   line-height: 20px;
   width: 35%;
-  color: rgba(0, 0, 0, 0.66);
+  color: var(--jp-ui-font-color2);
 }
 .batch-details-row-label {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+  border-bottom: 1px solid var(--jp-layout-color4);
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
   min-height: 18px;
   margin-bottom: 6px;
 }
-.scroll-comp-batch{
- 
-    overflow-y: auto;
-    max-height: 85vh;
-  
-}
+.scroll-comp-batch {
+  overflow-y: auto;
+  max-height: 85vh;
+}