Make local apps available (Fixes #2771) (#2808)

js/src/ui/Container/container.css

@@ -18,14 +18,23 @@
   padding: 0em;
 }
 
+.compact,
 .padded {
-  padding: 1.5em;
   background: rgba(0, 0, 0, 0.8) !important;
   border-radius: 0 !important;
   position: relative;
   overflow: auto;
 }
 
+.compact {
+  padding: 0 1.5em;
+}
+
+.padded {
+  padding: 1.5em;
+}
+
+.light .compact,
 .light .padded {
   background: rgba(0, 0, 0, 0.5) !important;
 }

js/src/ui/Container/container.js

@@ -23,17 +23,18 @@ export default class Container extends Component {
   static propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
+    compact: PropTypes.bool,
     light: PropTypes.bool,
     style: PropTypes.object
   }
 
   render () {
-    const { children, className, light, style } = this.props;
+    const { children, className, compact, light, style } = this.props;
     const classes = `${styles.container} ${light ? styles.light : ''} ${className}`;
 
     return (
       <div className={ classes } style={ style }>
-        <Card className={ styles.padded }>
+        <Card className={ compact ? styles.compact : styles.padded }>
           { children }
         </Card>
       </div>

js/src/ui/Modal/modal.js

@@ -38,6 +38,7 @@ class Modal extends Component {
     busy: PropTypes.bool,
     children: PropTypes.node,
     className: PropTypes.string,
+    compact: PropTypes.bool,
     current: PropTypes.number,
     waiting: PropTypes.array,
     scroll: PropTypes.bool,
@@ -51,7 +52,7 @@ class Modal extends Component {
 
   render () {
     const { muiTheme } = this.context;
-    const { actions, busy, className, current, children, scroll, steps, waiting, title, visible, settings } = this.props;
+    const { actions, busy, className, current, children, compact, scroll, steps, waiting, title, visible, settings } = this.props;
     const contentStyle = muiTheme.parity.getBackgroundStyle(null, settings.backgroundSeed);
     const header = (
       <Title
@@ -82,7 +83,7 @@ class Modal extends Component {
         style={ DIALOG_STYLE }
         title={ header }
         titleStyle={ TITLE_STYLE }>
-        <Container light style={ { transition: 'none' } }>
+        <Container light compact={ compact } style={ { transition: 'none' } }>
           { children }
         </Container>
       </Dialog>