Refactor to use only MediaQuery component

src/components/gui/gui.jsx

@@ -17,16 +17,9 @@ import StopAll from '../../containers/stop-all.jsx';
 import Box from '../box/box.jsx';
 import MenuBar from '../menu-bar/menu-bar.jsx';
 
+import layout from '../../lib/layout-constants.js';
 import styles from './gui.css';
 
-const layout = {
-    fullStageWidth: 480,
-    fullStageHeight: 360,
-    smallerStageWidth: 480 * 0.85,
-    smallerStageHeight: 360 * 0.85,
-    fullSizeMinWidth: 1096
-};
-
 const GUIComponent = props => {
     const {
         basePath,
@@ -95,31 +88,27 @@ const GUIComponent = props => {
                         </Tabs>
                     </Box>
 
-                    <MediaQuery minWidth={layout.fullSizeMinWidth}>
-                        {isFullSize => (
-                            <Box className={styles.stageAndTargetWrapper}>
-                                <Box className={styles.stageMenuWrapper}>
-                                    <GreenFlag vm={vm} />
-                                    <StopAll vm={vm} />
-                                </Box>
-
-                                <Box className={styles.stageWrapper}>
-                                    <Stage
-                                        height={isFullSize ? layout.fullStageHeight : layout.smallerStageHeight}
-                                        shrink={0}
-                                        vm={vm}
-                                        width={isFullSize ? layout.fullStageWidth : layout.smallerStageWidth}
-                                    />
-                                </Box>
-
-                                <Box className={styles.targetWrapper}>
-                                    <TargetPane
-                                        vm={vm}
-                                    />
-                                </Box>
-                            </Box>
-                        )}
-                    </MediaQuery>
+                    <Box className={styles.stageAndTargetWrapper}>
+                        <Box className={styles.stageMenuWrapper}>
+                            <GreenFlag vm={vm} />
+                            <StopAll vm={vm} />
+                        </Box>
+                        <Box className={styles.stageWrapper}>
+                            <MediaQuery minWidth={layout.fullSizeMinWidth}>{isFullSize => (
+                                <Stage
+                                    height={isFullSize ? layout.fullStageHeight : layout.smallerStageHeight}
+                                    shrink={0}
+                                    vm={vm}
+                                    width={isFullSize ? layout.fullStageWidth : layout.smallerStageWidth}
+                                />
+                            )}</MediaQuery>
+                        </Box>
+                        <Box className={styles.targetWrapper}>
+                            <TargetPane
+                                vm={vm}
+                            />
+                        </Box>
+                    </Box>
                 </Box>
             </Box>
         </Box>

src/components/sprite-info/sprite-info.css

@@ -79,9 +79,3 @@
     user-select: none;
     outline: none;
 }
-
-@media only screen and (max-width: 1096px) {
-    .non-essential {
-        display: none;
-    }
-}

src/components/sprite-info/sprite-info.jsx

 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
+import MediaQuery from 'react-responsive';
 
 import Box from '../box/box.jsx';
 import Label from '../forms/label.jsx';
 import Input from '../forms/input.jsx';
 import BufferedInputHOC from '../forms/buffered-input-hoc.jsx';
 
+import layout from '../../lib/layout-constants.js';
 import styles from './sprite-info.css';
 
 import xIcon from './icon--x.svg';
@@ -49,12 +51,14 @@ class SpriteInfo extends React.Component {
                     </div>
 
                     <div className={styles.group}>
-                        <div className={classNames(styles.iconWrapper, styles.nonEssential)}>
-                            <img
-                                className={classNames(styles.xIcon, styles.icon)}
-                                src={xIcon}
-                            />
-                        </div>
+                        <MediaQuery minWidth={layout.fullSizeMinWidth}>
+                            <div className={styles.iconWrapper}>
+                                <img
+                                    className={classNames(styles.xIcon, styles.icon)}
+                                    src={xIcon}
+                                />
+                            </div>
+                        </MediaQuery>
                         <Label text="x">
                             <BufferedInput
                                 small
@@ -69,12 +73,14 @@ class SpriteInfo extends React.Component {
                     </div>
 
                     <div className={styles.group}>
-                        <div className={classNames(styles.iconWrapper, styles.nonEssential)}>
-                            <img
-                                className={classNames(styles.yIcon, styles.icon)}
-                                src={yIcon}
-                            />
-                        </div>
+                        <MediaQuery minWidth={layout.fullSizeMinWidth}>
+                            <div className={styles.iconWrapper}>
+                                <img
+                                    className={classNames(styles.yIcon, styles.icon)}
+                                    src={yIcon}
+                                />
+                            </div>
+                        </MediaQuery>
                         <Label text="y">
                             <BufferedInput
                                 small

src/lib/layout-constants.js

+export default {
+    fullStageWidth: 480,
+    fullStageHeight: 360,
+    smallerStageWidth: 480 * 0.85,
+    smallerStageHeight: 360 * 0.85,
+    fullSizeMinWidth: 1096
+};