review feedback

Author: matthargett

admin/.storybook/preview.js

@@ -1,46 +1,10 @@
 import React from "react";
 import { IntlProvider } from "react-intl";
-import { createTheme, ThemeProvider } from "@material-ui/core/styles";
+import { ThemeProvider } from "@material-ui/core/styles";
 import { Provider } from "react-redux";
 import mockStore from "./mocks/store.js";
 import "../src/styles/globals.scss";
-
-// Admin theme matching the one in admin.js
-const adminTheme = createTheme({
-  components: {
-    MuiDrawer: {
-      styleOverrides: {
-        paper: {
-          backgroundColor: "#222222",
-          minHeight: "100vh",
-          position: "sticky",
-          top: 0,
-          overflowX: "hidden"
-        }
-      }
-    },
-    MuiAppBar: {
-      styleOverrides: {
-        root: {
-          position: "sticky",
-          top: 0,
-          zIndex: 1100
-        }
-      }
-    }
-  },
-  palette: {
-    primary: {
-      main: "#1700c7"
-    },
-    secondary: {
-      main: "#000000"
-    }
-  },
-  typography: {
-    fontFamily: "Inter,Arial"
-  }
-});
+import { adminTheme } from "../src/admin-theme";
 
 // Simple messages for preview
 const messages = {
@@ -57,8 +21,8 @@ const AdminLayout = ({ children }) => {
     <Provider store={mockStore}>
       <IntlProvider locale="en" messages={messages}>
         <ThemeProvider theme={adminTheme}>
-          <div style={{ fontFamily: "Inter,Arial", margin: 0, padding: 0 }}>
-            {children}
+          <div className="global_background" style={{ fontFamily: "Inter,Arial", margin: 0, padding: 0 }}>
+            <main style={{ minHeight: "100vh" }}>{children}</main>
           </div>
         </ThemeProvider>
       </IntlProvider>

admin/src/admin.js

@@ -15,7 +15,7 @@ import {
 } from "./utils/ita";
 import { detectIdle } from "./utils/idle-detector";
 import { connectToReticulum } from "hubs/src/utils/phoenix-utils";
-import { Admin, Layout, Resource, Notification, defaultTheme } from "react-admin";
+import { Admin, Layout, Resource, Notification } from "react-admin";
 import { postgrestClient, postgrestAuthenticatior } from "./utils/postgrest-data-provider";
 import { AdminMenu } from "./react-components/admin-menu";
 import { SceneList, SceneEdit } from "./react-components/scenes";
@@ -34,10 +34,10 @@ import { ContentCDN } from "./react-components/content-cdn";
 import { ImportContent } from "./react-components/import-content";
 import { AutoEndSessionDialog } from "./react-components/auto-end-session-dialog";
 import registerTelemetry from "hubs/src/telemetry";
-import { createTheme } from "@material-ui/core/styles";
 import { UnauthorizedPage } from "./react-components/unauthorized";
 import { store } from "hubs/src/utils/store-instance";
 import { HiddenAppBar, AdminSidebar } from "./react-components/admin-chrome";
+import { adminTheme } from "./admin-theme";
 
 const qs = new URLSearchParams(location.hash.split("?")[1]);
 
@@ -72,30 +72,7 @@ const CustomNotification = props => {
 
 let itaSchemas;
 
-const theme = createTheme({
-  ...defaultTheme,
-  components: {
-    MuiDrawer: {
-      styleOverrides: {
-        paper: {
-          backgroundColor: "#222222",
-          minHeight: "100vh"
-        }
-      }
-    }
-  },
-  palette: {
-    primary: {
-      main: "#1700c7"
-    },
-    secondary: {
-      main: "#000000"
-    }
-  },
-  typography: {
-    fontFamily: "Inter,Arial"
-  }
-});
+const theme = adminTheme;
 
 class AdminUI extends Component {
   static propTypes = {

admin/src/react-components/admin-chrome.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React from "react"; // Required by eslint react/react-in-jsx-scope
 import classNames from "classnames";
 import { withStyles } from "@material-ui/core/styles";
 import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp";
@@ -12,8 +12,8 @@ export const HiddenAppBar = withStyles({
     }
   }
 })(props => {
-  const { classes, ...other } = props;
-  return <AppBar {...other} className={classes.hideOnDesktop} />;
+  const { classes, className, ...appBarProps } = props;
+  return <AppBar {...appBarProps} className={classNames(classes.hideOnDesktop, className)} />;
 });
 
 export const AdminSidebar = withStyles({
@@ -37,13 +37,13 @@ export const AdminSidebar = withStyles({
     background: "linear-gradient(to top, rgba(0, 0, 0, 1.0) 0%, rgba(34, 34, 34, 0.7) 70%, transparent 100%)"
   }
 })(props => {
-  const { classes, ...other } = props;
+  const { classes, className, children, ...sidebarProps } = props;
   return (
-    <Sidebar className="adminSidebar">
+    <Sidebar {...sidebarProps} className={classNames("adminSidebar", className)}>
       <div className={classNames("adminSidebarTopIndicator", classes.sidebarScrollingIndicator, classes.topIndicator)}>
         <KeyboardArrowUpIcon />
       </div>
-      {other.children}
+      {children}
       <div
         className={classNames(
           "adminSidebarBottomIndicator",

admin/src/react-components/admin-menu.js

@@ -155,6 +155,9 @@ class Menu extends Component {
       return null;
     };
 
+    // The Drawer that wraps <Sidebar> defers attaching the scrollable `<div>` that actually receives the
+    // overflow styles until after the first paint. On the initial frame the ancestor walk returns `null`,
+    // so we retry a handful of times via rAF to ensure we subscribe once Material-UI finishes mounting.
     const tryAttach = () => {
       if (this.sidebarScrollArea) return; // already attached
       const container = this.containerRef.current;