Merge pull request #2105 from ProjectMirador/2096-window-elevation

Give windows some elevation

src/components/Window.js

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
+import Paper from '@material-ui/core/Paper';
 import ns from '../config/css-ns';
 import WindowTopBar from '../containers/WindowTopBar';
 import PrimaryWindow from '../containers/PrimaryWindow';
@@ -49,7 +50,9 @@ export class Window extends Component {
     }
 
     return (
-      <section
+      <Paper
+        component="section"
+        elevation={1}
         id={window.id}
         className={
           cn(classes.window, ns('window'),
@@ -92,7 +95,7 @@ export class Window extends Component {
             />
           </div>
         )}
-      </section>
+      </Paper>
     );
   }
 }

src/styles/index.scss

@@ -111,3 +111,14 @@
     }
   }
 }
+
+// override react-mosaic styles to mimic MUI's elevation
+.mosaic {
+  &-tile {
+    box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 2px 1px -1px rgba(0,0,0,0.12);
+  }
+
+  &-window, &-preview {
+    box-shadow: none;
+  }
+}