New source found from dndbeyond.com

ddb_main/tools/js/CharacterSheet/containers/BackdropStyles/BackdropStyles.tsx

@@ -1,49 +1,37 @@
 import jss, { StyleSheet } from "jss";
 import preset from "jss-preset-default";
-import React from "react";
+import { FC, useEffect, useState } from "react";
 
 import { BackdropInfo } from "@dndbeyond/character-rules-engine/es";
 
 import { DDB_MEDIA_URL } from "../../../../../constants";
 
-interface Props {
+interface BackdropStylesProps {
   backdrop: BackdropInfo;
 }
-export default class BackdropStyles extends React.PureComponent<Props> {
-  sheet: StyleSheet | null = null;
 
-  componentDidMount() {
-    jss.setup(preset());
-    this.renderStyleSheet(this.props);
-  }
-
-  componentWillUnmount() {
-    this.removeStyleSheet();
-  }
-
-  componentDidUpdate(
-    prevProps: Readonly<Props>,
-    prevState: Readonly<{}>,
-    snapshot?: any
-  ): void {
-    this.removeStyleSheet();
-    this.renderStyleSheet(this.props);
-  }
-
-  renderStyleSheet = (props: Props): void => {
-    const { backdrop } = props;
+export const BackdropStyles: FC<BackdropStylesProps> = ({ backdrop }) => {
+  const [sheet, setSheet] = useState<StyleSheet | null>(null);
 
+  const renderStyleSheet = (): void => {
     if (backdrop.backdropAvatarUrl !== null) {
-      this.sheet = jss.createStyleSheet({});
+      let tempSheet = jss.createStyleSheet({});
 
-      if (this.sheet !== null) {
+      const bodyStyles = window.getComputedStyle(document.body);
+      const newNavHeight = bodyStyles.getPropertyValue(
+        "--top-navigation-height"
+      );
+      const navHeightVar = newNavHeight
+        ? "--top-navigation-height"
+        : "--ttui-site-nav-height";
+
+      if (tempSheet !== null) {
         let breakpointRules: Record<string, string> = [
-          { width: 768, height: 152, image: backdrop.backdropAvatarUrl },
-          { width: 1024, height: 218, image: backdrop.backdropAvatarUrl },
-          { width: 1200, height: 230, image: backdrop.backdropAvatarUrl },
+          { width: 768, image: backdrop.backdropAvatarUrl },
+          { width: 1024, image: backdrop.backdropAvatarUrl },
+          { width: 1200, image: backdrop.backdropAvatarUrl },
           {
             width: 1921,
-            height: 230,
             image:
               backdrop.smallBackdropAvatarUrl === null
                 ? ""
@@ -51,7 +39,6 @@ export default class BackdropStyles extends React.PureComponent<Props> {
           },
           {
             width: 2561,
-            height: 230,
             image:
               backdrop.largeBackdropAvatarUrl === null
                 ? ""
@@ -59,30 +46,42 @@ export default class BackdropStyles extends React.PureComponent<Props> {
           },
         ].reduce((acc, breakpoint) => {
           acc[`@media (min-width: ${breakpoint.width}px)`] = {
-            background: `url(${breakpoint.image}) no-repeat center ${breakpoint.height}px, url(${DDB_MEDIA_URL}/attachments/0/84/background_texture.png) #f9f9f9 !important`,
+            background: `url(${breakpoint.image}) no-repeat center calc(var(${navHeightVar}) + var(--sheet-header-height)), url(${DDB_MEDIA_URL}/attachments/0/84/background_texture.png) #f9f9f9 !important`,
           };
           return acc;
         }, {});
 
-        this.sheet.addRules({
+        tempSheet.addRules({
           "@global": {
             "html body.body-rpgcharacter-sheet": breakpointRules,
           },
         });
 
-        this.sheet.attach();
+        tempSheet.attach();
+        setSheet(tempSheet);
       }
     }
   };
 
-  removeStyleSheet = (): void => {
-    if (this.sheet) {
-      jss.removeStyleSheet(this.sheet);
-      this.sheet = null;
+  const removeStyleSheet = (): void => {
+    if (sheet) {
+      jss.removeStyleSheet(sheet);
+      setSheet(null);
     }
   };
 
-  render() {
-    return null;
-  }
-}
+  useEffect(() => {
+    jss.setup(preset());
+    renderStyleSheet();
+    return () => {
+      removeStyleSheet();
+    };
+  }, []);
+
+  useEffect(() => {
+    removeStyleSheet();
+    renderStyleSheet();
+  }, [backdrop]);
+
+  return null;
+};

ddb_main/tools/js/CharacterSheet/containers/BackdropStyles/index.ts

@@ -1,4 +0,0 @@
-import BackdropStyles from "./BackdropStyles";
-
-export default BackdropStyles;
-export { BackdropStyles };