Style adjusting with JupyterHub 5

dev-requirements.txt

@@ -1,6 +1,6 @@
 git+https://github.com/jupyterhub/[email protected]
 git+https://github.com/jupyterhub/binderhub.git@main
-jupyterhub>=4,<5
+jupyterhub>=5,<6
 alembic>=1.13.0,<1.14
 pytest
 pytest-aiohttp

src/common/ButtonWithConfirm.tsx

@@ -43,7 +43,13 @@ function _ButtonWithConfirm(props: IButtonWithConfirm) {
         {props.buttonLabel}
       </Button>
 
-      <Dialog open={open} onClose={handleClose} fullWidth maxWidth={'sm'}>
+      <Dialog
+        className="tljh-form-dialog"
+        open={open}
+        onClose={handleClose}
+        fullWidth
+        maxWidth={'sm'}
+      >
         <DialogTitle>{props.dialogTitle}</DialogTitle>
         <DialogContent>
           {!loading && props.dialogBody}

src/common/style.css

@@ -1,3 +1,44 @@
 .MuiButton-root {
   text-transform: capitalize !important;
+  font-size: 1rem !important;
+}
+.MuiScopedCssBaseline-root {
+  background-color: var(--bs-body-bg) !important;
+}
+.MuiMenuItem-root {
+  font-size: 1rem !important;
+}
+/*DataGrid custom styling*/
+.tljh-container .MuiDataGrid-root,
+.tljh-form-dialog .MuiDataGrid-root {
+  font-size: 1rem !important;
+}
+.tljh-container .MuiSvgIcon-root,
+.tljh-form-dialog .MuiSvgIcon-root {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+.tljh-container .MuiTablePagination-displayedRows,
+.tljh-form-dialog .MuiTablePagination-displayedRows {
+  font-size: 1.1rem !important;
+}
+
+/* Dialog custom styling */
+.tljh-form-dialog .MuiDialogTitle-root {
+  font-size: 1.5rem !important;
+}
+.tljh-form-dialog .MuiInputLabel-root,
+.tljh-form-dialog .MuiInputBase-root {
+  font-size: 1rem !important;
+}
+.tljh-form-dialog .MuiMenuItem-root {
+  font-size: inherit !important;
+}
+.tljh-form-dialog .MuiDivider-wrapper .MuiTypography-root,
+.tljh-form-dialog .MuiDialogContentText-root,
+.tljh-form-dialog .MuiTypography-body1 {
+  font-size: 1.1rem !important;
+}
+.tljh-form-dialog .MuiFormHelperText-root {
+  font-size: inherit !important;
 }

src/environments/App.tsx

@@ -1,15 +1,15 @@
 import { Stack } from '@mui/material';
 import ScopedCssBaseline from '@mui/material/ScopedCssBaseline';
-import { ThemeProvider } from '@mui/material/styles';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
 
-import { customTheme } from '../common/theme';
 import { IEnvironmentData } from './types';
 import { EnvironmentList } from './EnvironmentList';
 import { IMachineProfile, NewEnvironmentDialog } from './NewEnvironmentDialog';
 import { AxiosContext } from '../common/AxiosContext';
-import { useMemo } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { AxiosClient } from '../common/axiosclient';
 import { useJupyterhub } from '../common/JupyterhubContext';
+import '../common/style.css';
 
 export interface IAppProps {
   images: IEnvironmentData[];
@@ -22,6 +22,44 @@ export interface IAppProps {
 export default function App(props: IAppProps) {
   const jhData = useJupyterhub();
 
+  const [themeMode, setThemeMode] = useState<'light' | 'dark'>(
+    (document.documentElement.getAttribute('data-bs-theme') as
+      | 'light'
+      | 'dark') || 'light'
+  );
+
+  useEffect(() => {
+    const observer = new MutationObserver(() => {
+      const newTheme = document.documentElement.getAttribute(
+        'data-bs-theme'
+      ) as 'light' | 'dark';
+      if (newTheme !== themeMode) {
+        setThemeMode(newTheme);
+      }
+    });
+
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['data-bs-theme']
+    });
+
+    return () => observer.disconnect();
+  }, [themeMode]);
+
+  // Create theme dynamically based on mode
+  const customTheme = useMemo(
+    () =>
+      createTheme({
+        palette: {
+          mode: themeMode,
+          primary: { main: '#1976D2' },
+          secondary: { main: '#FF4081' }
+        },
+        typography: { fontSize: 22 }
+      }),
+    [themeMode]
+  );
+
   const serviceClient = useMemo(() => {
     const baseUrl = jhData.servicePrefix;
     const xsrfToken = jhData.xsrfToken;

src/environments/EnvironmentList.tsx

@@ -29,7 +29,7 @@ const columns: GridColDef[] = [
   {
     field: 'ref',
     headerName: 'Reference',
-    maxWidth: 150,
+    width: 200,
     renderCell: params => {
       return (
         <a href={`${params.row.repo}/tree/${params.value}`}>{params.value}</a>
@@ -39,17 +39,17 @@ const columns: GridColDef[] = [
   {
     field: 'mem_limit',
     headerName: 'Mem. Limit (GB)',
-    width: 150
+    width: 200
   },
   {
     field: 'cpu_limit',
     headerName: 'CPU Limit',
-    width: 100
+    width: 150
   },
   {
     field: 'status',
     headerName: 'Status',
-    width: 100,
+    width: 150,
     hideSortIcons: true,
     renderCell: params => {
       return params.value === 'built' ? (

src/environments/LogDialog.tsx

@@ -121,6 +121,7 @@ function _EnvironmentLogButton(props: IEnvironmentLogButton) {
         fullWidth
         maxWidth={'lg'}
         keepMounted={true}
+        className="tljh-form-dialog"
       >
         <DialogTitle>Creating environment {props.name}</DialogTitle>
         <DialogContent>

src/environments/NewEnvironmentDialog.tsx

@@ -193,11 +193,13 @@ function _NewEnvironmentDialog(props: INewEnvironmentDialogProps) {
           Create new environment
         </Button>
       </Box>
+
       <Dialog
         open={open}
         onClose={handleClose}
         fullWidth
-        maxWidth={'sm'}
+        maxWidth={'md'}
+        className="tljh-form-dialog"
         PaperProps={{
           component: 'form',
           onSubmit: async (event: React.FormEvent<HTMLFormElement>) => {

src/servers/App.tsx

@@ -1,16 +1,16 @@
 import { Stack } from '@mui/material';
 import ScopedCssBaseline from '@mui/material/ScopedCssBaseline';
-import { ThemeProvider } from '@mui/material/styles';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import { useEffect, useMemo, useState } from 'react';
 
-import { customTheme } from '../common/theme';
 import { IServerData } from './types';
 import { AxiosContext } from '../common/AxiosContext';
-import { useMemo } from 'react';
 import { AxiosClient } from '../common/axiosclient';
 import { ServerList } from './ServersList';
 import { NewServerDialog } from './NewServerDialog';
 import { IEnvironmentData } from '../environments/types';
 import { useJupyterhub } from '../common/JupyterhubContext';
+import '../common/style.css';
 
 export interface IAppProps {
   images: IEnvironmentData[];
@@ -22,6 +22,44 @@ export interface IAppProps {
 export default function App(props: IAppProps) {
   const jhData = useJupyterhub();
 
+  const [themeMode, setThemeMode] = useState<'light' | 'dark'>(
+    (document.documentElement.getAttribute('data-bs-theme') as
+      | 'light'
+      | 'dark') || 'light'
+  );
+
+  useEffect(() => {
+    const observer = new MutationObserver(() => {
+      const newTheme = document.documentElement.getAttribute(
+        'data-bs-theme'
+      ) as 'light' | 'dark';
+      if (newTheme !== themeMode) {
+        setThemeMode(newTheme);
+      }
+    });
+
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['data-bs-theme']
+    });
+
+    return () => observer.disconnect();
+  }, [themeMode]);
+
+  // Create theme dynamically based on mode
+  const customTheme = useMemo(
+    () =>
+      createTheme({
+        palette: {
+          mode: themeMode,
+          primary: { main: '#1976D2' },
+          secondary: { main: '#FF4081' }
+        },
+        typography: { fontSize: 22 }
+      }),
+    [themeMode]
+  );
+
   const serviceClient = useMemo(() => {
     const baseUrl = jhData.servicePrefix;
     const xsrfToken = jhData.xsrfToken;

src/servers/NewServerDialog.tsx

@@ -105,7 +105,13 @@ function _NewServerDialog(props: INewServerDialogProps) {
           Create new Server
         </Button>
       </Box>
-      <Dialog open={open} onClose={handleClose} fullWidth maxWidth={'md'}>
+      <Dialog
+        className="tljh-form-dialog"
+        open={open}
+        onClose={handleClose}
+        fullWidth
+        maxWidth={'lg'}
+      >
         <DialogTitle>Server Options</DialogTitle>
 
         <DialogContent>

src/servers/ServersList.tsx

@@ -23,12 +23,12 @@ const columns: GridColDef[] = [
   {
     field: 'last_activity',
     headerName: 'Last activity',
-    width: 150
+    width: 250
   },
   {
     field: 'active',
     headerName: 'Status',
-    width: 100,
+    width: 125,
     hideSortIcons: true,
     renderCell: params => {
       return params.value ? (
@@ -45,7 +45,7 @@ const columns: GridColDef[] = [
   {
     field: 'status',
     headerName: '',
-    width: 125,
+    width: 175,
     filterable: false,
     sortable: false,
     hideable: false,
@@ -56,7 +56,7 @@ const columns: GridColDef[] = [
   {
     field: 'action',
     headerName: '',
-    width: 125,
+    width: 175,
     filterable: false,
     sortable: false,
     hideable: false,

tljh_repo2docker/templates/images.html

@@ -1,5 +1,5 @@
 {% extends "page.html" %} {% block main %}
-<div id="environments-root">
+<div id="environments-root" class="tljh-container">
   <script id="tljh-page-data" type="application/json">
     {"repo_providers": {{repo_providers | tojson}}, "use_binderhub": {{use_binderhub | tojson}}, "images": {{ images | tojson  }}, "default_mem_limit": "{{default_mem_limit}}", "default_cpu_limit":"{{default_cpu_limit}}", "machine_profiles": {{ machine_profiles | tojson  }}}
   </script>

tljh_repo2docker/templates/page.html

@@ -30,6 +30,11 @@
       }
     </script>
 
+    <script type="text/javascript" 
+      src="/hub/static/js/darkmode.js?v=2fd9a7d11ad78df9351fed40ab35eab52e1e6a3d516f188b652120e6faf57b8e387a30aae8f52a6fb51563d06d04545c7005da0b77a98c21b0bd28f6d1cdfa11" 
+      charset="utf-8">
+    </script>
+
     {% block meta %} {% endblock %}
   </head>
 
@@ -42,11 +47,10 @@
     </noscript>
 
     {% block nav_bar %}
-    <nav class="navbar navbar-default">
+    <nav class="navbar navbar-expand-sm bg-body-tertiary mb-4">
       <div class="container-fluid">
-        <div class="navbar-header">
           {% block logo %}
-          <span id="jupyterhub-logo" class="pull-left">
+          <span id="jupyterhub-logo" class="navbar-brand">
             <a href="{{logo_url or base_url}}"
               ><img
                 src="{{service_prefix}}logo"
@@ -56,41 +60,37 @@
             /></a>
           </span>
           {% endblock %} {% if user %}
-          <button
-            type="button"
-            class="navbar-toggle collapsed"
-            data-toggle="collapse"
-            data-target="#thenavbar"
-            aria-expanded="false"
-          >
-            <span class="sr-only">Toggle navigation</span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
+          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#thenavbar" aria-controls="thenavbar" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
           </button>
           {% endif %}
-        </div>
+
 
         <div class="collapse navbar-collapse" id="thenavbar">
           {% if user %}
-          <ul class="nav navbar-nav">
-            <li><a href="{{service_prefix}}servers">Servers</a></li>
+          <ul class="navbar-nav me-auto mb-0">
+            <li class="nav-item"><a class="nav-link" href="{{service_prefix}}servers">Servers</a></li>
             {% if user.admin %}
-            <li><a href="{{service_prefix}}environments">Environments</a></li>
+            <li class="nav-item"><a class="nav-link" href="{{service_prefix}}environments">Environments</a></li>
             {% endif %}
           </ul>
           {% endif %}
-          <ul class="nav navbar-nav navbar-right">
+          <ul class="nav navbar-nav me-2">
             {% block nav_bar_right_items %}
-            <li>
+            <li class="nav-item">
+              <button class="btn btn-sm" id="dark-theme-toggle" aria-label="Toggle dark mode" title="Toggle dark mode">
+                <i aria-hidden="true" class="fa fa-circle-half-stroke"></i>
+              </button>
+            </li>
+            <li class="nav-item">
               {% block login_widget %}
               <span id="login_widget">
                 {% if user %}
-                <p class="navbar-text">{{user.name}}</p>
+                <span class="me-1">{{user.name}}</span>
                 <a
                   id="logout"
                   role="button"
-                  class="navbar-btn btn-sm btn btn-default"
+                  class="btn btn-sm btn-outline-contrast"
                   href="{{logout_url}}"
                 >
                   <i aria-hidden="true" class="fa fa-sign-out"></i> Logout</a
@@ -99,7 +99,7 @@
                 <a
                   id="login"
                   role="button"
-                  class="btn-sm btn navbar-btn btn-default"
+                  class="btn btn-sm btn-outline-contrast"
                   href="{{login_url}}"
                   >Login</a
                 >