Fix admin sidebar scrolling and visual inconsistencies

What:
1. Removes much of the AI styling changes.
2. Changes the custom admin theme to inherit properties from the default theme.
3. Removes the sidebar text color override for mobile.
4. Fixes the issue with the sliding section of the light theme color at the top of the sidebar and ensures the dark theme color extends to the bottom of the sidebar (regardless of browser zoom).
5. Restores the appBar hiding functionality for desktop/large screens.
6. Fixes the issues with the sidebar scrolling by removing the scrolling wrapper and instead overriding the default react-admin sidebar with a custom version that has scrolling indicators that display whenever there is hidden content (either above or below the shown content).

Why:
1. The AI styling changes seem to be unnecessary and to have contributed to the visual inconsistencies/glitches.
2. Custom themes inheriting properties from the default theme is recommended in the React Admin documentation[1].
3. The sidebar text color override for mobile is no longer needed (and causes readability issues) now that the background color is the same for both mobile and desktop.
4. It looks better to have the sidebar be a single consistent color from top to bottom.
5. This keeps the behavior of the appBar the same as it was before the Update storybook PR (Hubs-Foundation#6563)
6. There were two scrolling areas, which caused the scrolling to appear erratic, and the scrolling indicators weren't updated live (live updates ensures that people are always aware when the content can be scrolled and in which direction).

[1] https://marmelab.com/react-admin/doc/3.19/Theming.html#sidebar-customization

Author: Exairnous

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 } from "react-admin";
+import { AppBar, Admin, Layout, Resource, Notification, defaultTheme, Sidebar } 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,9 +34,12 @@ 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 { createTheme, withStyles } from "@material-ui/core/styles";
 import { UnauthorizedPage } from "./react-components/unauthorized";
 import { store } from "hubs/src/utils/store-instance";
+import classNames from "classnames";
+import KeyboardArrowUpIcon from "@material-ui/icons/KeyboardArrowUp";
+import KeyboardArrowDownIcon from "@material-ui/icons/KeyboardArrowDown";
 
 const qs = new URLSearchParams(location.hash.split("?")[1]);
 
@@ -72,24 +75,13 @@ const CustomNotification = props => {
 let itaSchemas;
 
 const theme = createTheme({
+  ...defaultTheme,
   components: {
     MuiDrawer: {
       styleOverrides: {
         paper: {
           backgroundColor: "#222222",
-          minHeight: "100vh",
-          position: "sticky",
-          top: 0,
-          overflowX: "hidden"
-        }
-      }
-    },
-    MuiAppBar: {
-      styleOverrides: {
-        root: {
-          position: "sticky",
-          top: 0,
-          zIndex: 1100
+          minHeight: "100vh"
         }
       }
     }
@@ -261,6 +253,58 @@ const mountUI = async (retPhxChannel, customRoutes, layout) => {
     </IntlProvider>
   );
 };
+const HiddenAppBar = withStyles({
+  hideOnDesktop: {
+    "@media (min-width: 768px) and (min-height: 480px)": {
+      display: "none"
+    }
+  }
+})(props => {
+  const { classes, ...other } = props;
+  return <AppBar {...other} className={classes.hideOnDesktop} />;
+});
+
+const AdminSidebar = withStyles({
+  sidebarScrollingIndicator: {
+    position: "sticky",
+    display: "none",
+    alignItems: "center",
+    justifyContent: "center",
+    color: "#aaaaaa",
+    pointerEvents: "none",
+    zIndex: 9999,
+    transition: "opacity 0.5s ease",
+    opacity: 1
+  },
+  topIndicator: {
+    top: 0,
+    background: "linear-gradient(to bottom, rgba(0, 0, 0, 1.0) 0%, rgba(34, 34, 34, 0.7) 70%, transparent 100%)"
+  },
+  bottomIndicator: {
+    bottom: 0,
+    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;
+  return (
+    <Sidebar className="adminSidebar">
+      <div
+        className={classNames("adminSidebarTopIndicator", classes.sidebarScrollingIndicator, classes.topIndicator)}>
+        <KeyboardArrowUpIcon />
+      </div>
+      {other.children}
+      <div
+        className={classNames(
+          "adminSidebarBottomIndicator",
+          classes.sidebarScrollingIndicator,
+          classes.bottomIndicator
+        )}
+      >
+        <KeyboardArrowDownIcon />
+      </div>
+    </Sidebar>
+  );
+});
 
 document.addEventListener("DOMContentLoaded", async () => {
   const socket = await connectToReticulum();
@@ -328,13 +372,13 @@ document.addEventListener("DOMContentLoaded", async () => {
     );
   }
 
-  // Use standard React Admin Layout - will revisit gap issue in v4 upgrade
   const layout = props => (
     <Layout
       {...props}
       className="global_background"
-      appBar={() => null}
+      appBar={HiddenAppBar}
       menu={props => <AdminMenu {...props} services={schemaCategories} />}
+      sidebar={AdminSidebar}
     />
   );