Styling adjustments (#56)

* dark mode updates, font sizing, font coloring, button sizing set to better blend with the jupyterlab styling * Added a MutationObserver for theme detection of the data table * theme name should be default
NERSC · Sep 24, 2021 · ea20d18 · ea20d18
1 parent 06f6170
commit ea20d18
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 45 deletions.
diff --git a/src/components/JobSubmitForm.tsx b/src/components/JobSubmitForm.tsx
@@ -18,7 +18,6 @@ namespace types {
     submitJob: (input: string, inputType: string) => void;
     addAlert: (message: string, variant: string) => void;
     disabled?: boolean;
-    theme: string;
     active: boolean;
   };
 

diff --git a/src/components/SlurmManager.tsx b/src/components/SlurmManager.tsx
@@ -38,27 +38,6 @@ namespace types {
   };
 }
 
-function getCurrentTheme() {
-  const root = document.getElementsByTagName('body')[0];
-  const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
-
-  if (root.hasAttribute('data-jp-theme-light')) {
-    const light = root.getAttribute('data-jp-theme-light');
-
-    if (light === 'true') {
-      return 'default';
-    } else {
-      return 'dark';
-    }
-  } else {
-    if (mediaQuery.matches === true) {
-      return 'dark';
-    } else {
-      return 'default';
-    }
-  }
-}
-
 export default class SlurmManager extends React.Component<
   types.Props,
   types.State
@@ -306,7 +285,6 @@ export default class SlurmManager extends React.Component<
               autoReload={this.state.autoReload}
               itemsPerPage={this.props.settings.itemsPerPage}
               itemsPerPageOptions={this.props.settings.itemsPerPageOptions}
-              theme={getCurrentTheme()}
             />
           </Tab>
           <Tab title="Submit Jobs" eventKey="jobSubmit">
@@ -315,7 +293,6 @@ export default class SlurmManager extends React.Component<
               submitJob={this.submitJob.bind(this)}
               disabled={this.state.jobSubmitDisabled}
               addAlert={this.addAlert}
-              theme={getCurrentTheme()}
               active={this.state.activeTab === 'jobSubmit'}
             />
           </Tab>

diff --git a/src/components/SqueueDataTable.tsx b/src/components/SqueueDataTable.tsx
@@ -36,7 +36,6 @@ namespace types {
     reloadQueue: boolean;
     autoReload: boolean;
     reloadRate: number;
-    theme: string;
     processJobAction: (
       action: JobAction,
       rows: Record<string, unknown>[]
@@ -58,6 +57,8 @@ namespace types {
     reloadLimit: number;
     userOnly: boolean;
     loading: boolean;
+    theme: string;
+    observer: MutationObserver;
   };
 }
 
@@ -83,6 +84,20 @@ export default class SqueueDataTable extends Component<
       ? props.defaultColumns
       : props.availableColumns;
 
+    const body = document.getElementsByTagName('body')[0];
+    const observer = new MutationObserver(mutationRecords => {
+      if (mutationRecords[0].oldValue === 'true') {
+        this.setState({ theme: 'dark' });
+      } else {
+        this.setState({ theme: 'default' });
+      }
+    });
+    observer.observe(body, {
+      attributes: true,
+      attributeFilter: ['data-jp-theme-light'],
+      attributeOldValue: true
+    });
+
     this.state = {
       rows: [],
       displayRows: [],
@@ -99,7 +114,9 @@ export default class SqueueDataTable extends Component<
       reloadRate: reloadRate,
       reloadLimit: 5000,
       userOnly: props.userOnly,
-      loading: false
+      loading: false,
+      theme: 'default',
+      observer: observer
     };
   }
 
@@ -274,13 +291,11 @@ export default class SqueueDataTable extends Component<
     });
   }
 
-  async componentWillMount(): Promise<void> {
+  async componentDidMount(): Promise<void> {
     await this.getData().then(async () => {
       await this.reload();
     });
-  }
 
-  async componentDidMount(): Promise<void> {
     // if (this.state.autoReload) {
     //   useEffect(() => {
     //     const interval = setInterval(async () => {
@@ -322,6 +337,10 @@ export default class SqueueDataTable extends Component<
     }
   }
 
+  componentWillUnmount(): void {
+    this.state.observer.disconnect();
+  }
+
   async handleFilter(filter: string): Promise<void> {
     this.setState({ filterQuery: filter }, this.updateDisplayRows);
   }
@@ -343,7 +362,7 @@ export default class SqueueDataTable extends Component<
       <>
         <Row className={'mt-4 justify-content-start jp-SlurmWidget-row'}>
           <ButtonToolbar>
-            <ButtonGroup className={'ml-3 mr-2'}>
+            <ButtonGroup size="sm" className={'ml-3 mr-2'}>
               <Button
                 className="jp-SlurmWidget-table-button"
                 variant="outline-secondary"
@@ -438,7 +457,10 @@ export default class SqueueDataTable extends Component<
         <Row className={'justify-content-start jp-SlurmWidget-row'}>
           <ButtonToolbar>
             <Col lg>
-              <InputGroup className="jp-SlurmWidget-table-filter-input-group">
+              <InputGroup
+                size="sm"
+                className="jp-SlurmWidget-table-filter-input-group"
+              >
                 <InputGroup.Prepend>
                   <InputGroup.Text className="jp-SlurmWidget-table-filter-label">
                     <BsFilter />
@@ -505,7 +527,7 @@ export default class SqueueDataTable extends Component<
             noDataComponent={'No jobs currently queued.'}
             paginationPerPage={this.state.itemsPerPage}
             paginationRowsPerPageOptions={this.props.itemsPerPageOptions}
-            theme={this.props.theme}
+            theme={this.state.theme}
             noHeader={true}
             className={'jp-SlurmWidget-table'}
           />

diff --git a/style/base.css b/style/base.css
@@ -1,13 +1,15 @@
 .jp-SlurmWidget {
   /* make sure text looks Jupytery */
-  font-size: var(--jp-ui-font-size2);
+  font-size: var(--jp-ui-font-size1);
   font-family: var(--jp-ui-font-family);
   overflow-y: auto;
 }
 
 .jp-SlurmWidget-main {
   position: relative;
   width: 100%;
+  color: var(--jp-ui-font-color1);
+  background-color: var(--jp-layout-color0);
 }
 
 .jp-SlurmWidget-row {
@@ -61,12 +63,17 @@
   width: 100%;
 }
 
-.jp-SlurmWidget-table-button {
+.jp-SlurmWidget-table-button.btn {
   min-width: 10rem;
   font-family: inherit;
+  color: var(--jp-ui-font-color1);
+}
+
+.jp-SlurmWidget-table-button.btn.disabled, .jp-SlurmWidget-table-button.btn:disabled {
+  color: var(--jp-ui-font-color2);
 }
 
-label .btn .jp-SlurmWidget-user-only-checkbox {
+label.btn.jp-SlurmWidget-user-only-checkbox {
   min-width: 12rem;
   font-family: inherit;
   font-size: inherit;
@@ -79,15 +86,6 @@ label .btn .jp-SlurmWidget-user-only-checkbox {
   z-index: 5000;*/   /* this is to keep the content in front of the table margin at the top */
 /*}*/
 
-.jp-SlurmWidget-table-filter-label {
-  color: var(--secondary);
-  border-color: var(--secondary);
-}
-
-.jp-SlurmWidget-table-filter-input {
-  border-color: var(--secondary);
-}
-
 .jp-SlurmWidget-squeue-loader {
   color: #DF772E;
 }
@@ -98,7 +96,6 @@ label .btn .jp-SlurmWidget-user-only-checkbox {
   left: 50%;
   transform: translate(-50%, 0);
   z-index: 1;
-  /*background-color: var(--jp-border-color0);*/
 }
 
 .jp-SlurmWidget-JobNotifications {
@@ -112,3 +109,61 @@ label .btn .jp-SlurmWidget-user-only-checkbox {
 textarea.form-control {
   max-height: 55vh;
 }
+
+.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
+  color: var(--jp-ui-font-color1);
+  border-color: var(--light);
+  background-color: var(--jp-layout-color2);
+}
+
+/* Dark Mode specific styling */
+
+[data-jp-theme-light="false"] .jp-SlurmWidget-main a.nav-item {
+  color: var(--jp-ui-font-color2);
+}
+
+[data-jp-theme-light="false"] .jp-SlurmWidget-main .accordion .card {
+  color: var(--jp-ui-font-color1);
+  background-color: var(--jp-layout-color1);
+}
+
+[data-jp-theme-light="false"] .jp-SlurmWidget-main a.nav-item.active {
+  color: var(--jp-ui-font-color1);
+  background-color: var(--jp-layout-color2);
+}
+
+[data-jp-theme-light="false"] .jp-SlurmWidget-table-filter-label.input-group-text {
+  color: var(--jp-ui-font-color1);
+  border-color: var(--secondary);
+  background-color: var(--jp-layout-color1);
+}
+
+[data-jp-theme-light="false"] .jp-SlurmWidget-main .form-control, .jp-SlurmWidget-main .form-control::placeholder {
+  color: var(--jp-ui-font-color1);
+  border-color: var(--jp-input-border-color);
+  background-color: var(--jp-input-background);
+}
+
+[data-jp-theme-light="false"] .jp-SlurmWidget-table-filter-input.form-control, .jp-SlurmWidget-table-filter-input.form-control:focus {
+  color: var(--jp-ui-font-color1);
+  border-color: var(--secondary);
+  background-color: var(--jp-layout-color3);
+}
+
+[data-jp-theme-light="false"] .jp-SlurmWidget-main .form-control:focus, label.btn.jp-SlurmWidget-user-only-checkbox:not(.disabled), label.btn.jp-SlurmWidget-user-only-checkbox:not(:disabled) {
+  color: var(--jp-ui-font-color1);
+  border-color: var(--jp-input-active-border-color);
+  background-color: var(--jp-input-active-background);
+}
+
+[data-jp-theme-light="false"] label.btn.jp-SlurmWidget-user-only-checkbox {
+  color: var(--jp-ui-font-color1);
+  border-color: var(--jp-input-border-color);
+  background-color: var(--jp-input-background);
+}
+
+[data-jp-theme-light="false"] label.btn.jp-SlurmWidget-user-only-checkbox:not(:disabled):not(.disabled).active, label.btn.jp-SlurmWidget-user-only-checkbox:not(:disabled):not(.disabled):active {
+  color: var(--jp-ui-font-color1);
+  border-color: var(--jp-input-active-border-color);
+  background-color: var(--jp-input-active-background);
+}