fix: 'Not found' page should obey theme

closes #1626

app/scenes/Document/components/DataLoader.js

@@ -7,6 +7,7 @@ import { observer, inject } from "mobx-react";
 import * as React from "react";
 import type { RouterHistory, Match } from "react-router-dom";
 import { withRouter } from "react-router-dom";
+import { withTheme } from "styled-components";
 import parseDocumentSlug from "shared/utils/parseDocumentSlug";
 import DocumentsStore from "stores/DocumentsStore";
 import PoliciesStore from "stores/PoliciesStore";
@@ -34,6 +35,7 @@ type Props = {|
   policies: PoliciesStore,
   revisions: RevisionsStore,
   ui: UiStore,
+  theme: Object,
   history: RouterHistory,
 |};
 
@@ -47,6 +49,7 @@ class DataLoader extends React.Component<Props> {
     const { documents, match } = this.props;
     this.document = documents.getByUrl(match.params.documentSlug);
     this.loadDocument();
+    this.updateBackground();
   }
 
   componentDidUpdate(prevProps: Props) {
@@ -71,6 +74,13 @@ class DataLoader extends React.Component<Props> {
     ) {
       this.loadRevision();
     }
+    this.updateBackground();
+  }
+
+  updateBackground() {
+    // ensure the wider page color always matches the theme. This is to
+    // account for share links which don't sit in the wider Layout component
+    window.document.body.style.background = this.props.theme.background;
   }
 
   get isEditing() {
@@ -258,5 +268,5 @@ export default withRouter(
     "revisions",
     "policies",
     "shares"
-  )(DataLoader)
+  )(withTheme(DataLoader))
 );

app/scenes/Document/components/Document.js

@@ -7,7 +7,7 @@ import * as React from "react";
 import keydown from "react-keydown";
 import { Prompt, Route, withRouter } from "react-router-dom";
 import type { RouterHistory, Match } from "react-router-dom";
-import styled, { withTheme } from "styled-components";
+import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 
 import AuthStore from "stores/AuthStore";
@@ -82,7 +82,6 @@ class DocumentScene extends React.Component<Props> {
 
   componentDidMount() {
     this.updateIsDirty();
-    this.updateBackground();
   }
 
   componentDidUpdate(prevProps) {
@@ -116,14 +115,6 @@ class DocumentScene extends React.Component<Props> {
       this.title = document.title;
       this.isDirty = true;
     }
-
-    this.updateBackground();
-  }
-
-  updateBackground() {
-    // ensure the wider page color always matches the theme. This is to
-    // account for share links which don't sit in the wider Layout component
-    window.document.body.style.background = this.props.theme.background;
   }
 
   @keydown("m")
@@ -504,5 +495,5 @@ const MaxWidth = styled(Flex)`
 `;
 
 export default withRouter(
-  inject("ui", "auth", "policies", "revisions")(withTheme(DocumentScene))
+  inject("ui", "auth", "policies", "revisions")(DocumentScene)
 );