Layout changes

electron.js

@@ -21,7 +21,7 @@ let mountedPIDs = [];
 
 function createWindow() {
   // Create the browser window.
-  const height = process.env.ELECTRON_START_URL ? 344 : 324;
+  const height = process.env.ELECTRON_START_URL ? 324 : 304;
   mainWindow = new BrowserWindow({
     width: 425,
     height: height,

src/App.js

@@ -634,7 +634,7 @@ class App extends Component {
       let key = 0;
       mainContent.push((
         <div key={'rvd_' + key++}
-             style={{height: '40%'}}>
+             style={{height: '44%'}}>
           <ReleaseVersionDisplay disabled={this.state.DownloadActive || this.state.ExtractActive || this.state.MountsBusy}
                                  downloadClicked={this.handleReleaseDownload}
                                  downloadDisabled={!downloadEnabled}
@@ -653,7 +653,7 @@ class App extends Component {
       if (allowMount) {
         mainContent.push((
           <div key={'md_' + key++}
-               style={{height: '60%'}}>
+               style={{height: '56%'}}>
             <MountItems allowConfig={allowConfig}
                         autoMountChanged={this.handleAutoMountChanged}
                         autoMountProcessed={this.notifyAutoMountProcessed}

src/components/MountItem/MountItem.css

@@ -1,7 +0,0 @@
-.MountItem {
-  padding: 0;
-  margin: 0;
-  width: 100%;
-  box-sizing: border-box;
-}
-

src/components/MountItem/MountItem.js

@@ -4,70 +4,92 @@ import styles from './MountItem.css';
 import DropDown from '../UI/DropDown/DropDown';
 import Button from '../UI/Button/Button';
 import Loader from 'react-loader-spinner';
+import Text from '../UI/Text/Text';
+import Grid from '../UI/Grid/Grid';
 import configureImage from '../../assets/images/configure.png';
+import RootElem from '../../hoc/RootElem/RootElem';
 
 export default CSSModules((props) => {
   let configButton = null;
+  let secondRow = 6;
   if (props.allowConfig) {
     configButton = (
+      <RootElem colSpan={4}
+                rowSpan={6}>
         <img alt=''
              height={'16px'}
              onClick={props.configClicked}
              src={configureImage}
              style={{padding: 0, border: 0, margin: 0, cursor: 'pointer'}}
              width={'16px'}/>
+      </RootElem>
     );
   }
 
+  let inputColumnSpan;
   let inputControl = null;
-  let mountWidth = '70%';
   if (props.platform === 'win32') {
+    inputColumnSpan = 20;
     inputControl = <DropDown changed={props.changed}
+                             colSpan={inputColumnSpan}
                              disabled={!props.allowMount || props.mounted}
                              items={props.items}
+                             row={secondRow}
+                             rowSpan={7}
                              selected={props.items.indexOf(props.location)}/>;
-    mountWidth = '18%';
+
   } else {
-    inputControl = <input disabled={!props.allowMount || props.mounted}
+    inputColumnSpan = 60;
+    inputControl = (
+      <RootElem colSpan={inputColumnSpan}
+                row={secondRow}
+                rowSpan={7}>
+        <input disabled={!props.allowMount || props.mounted}
                onChange={props.changed}
                type={'text'}
-                          value={props.location}/>;
+               value={props.location}/>
+    </RootElem>);
   }
 
-  let actionDisplay = null;
+  const buttonDisplay = props.allowMount ?
-  if (props.allowMount) {
+    (props.mounted ? 'Unmount' : 'Mount') :
-    actionDisplay = <Button buttonStyles={{width: '100%'}}
+    <Loader color={'var(--heading_text_color)'}
-                            clicked={()=>props.clicked(props.title, !props.mounted, props.location, props.pid)}>{props.mounted ? 'Unmount' : 'Mount'}</Button>;
+            height='19px'
-  } else {
-    actionDisplay = <Loader color={'var(--heading_text_color)'}
-                            height='24px'
             type='Circles'
-                            width='24px'/>;
+            width='19px'/>;
-  }
 
-  return (
+  const actionsDisplay = (
-    <div styleName='MountItem'>
+    <Button clicked={()=>props.clicked(props.title, !props.mounted, props.location, props.pid)}
-      <table><tbody><tr><td>{configButton}</td><td><h2>{props.title}</h2></td></tr></tbody></table>
+            col={inputColumnSpan + 2}
-      <table cellPadding='2'
+            colSpan={20}
-             width='100%'>
+            disabled={!props.allowMount}
-        <tbody>
+            row={secondRow}
-          <tr>
+            rowSpan={7}>
-            <td height='30px'
+      {buttonDisplay}
-                width={mountWidth}>{inputControl}
+    </Button>);
-            </td>
+
-            <td align='center'
+  const autoMountControl = (
-                valign='middle'
+    <RootElem col={inputColumnSpan + 23}
-                width='25%'>
+              colSpan={26}
-              {actionDisplay}
+              row={secondRow}
-            </td>
+              rowSpan={7}>
-            <td>
       <input checked={props.autoMount}
              onChange={props.autoMountChanged}
              type='checkbox'/>Auto-mount
-            </td>
+    </RootElem>
-          </tr>
+  );
-        </tbody>
+
-      </table>
+  return (
-    </div>
+    <Grid>
+      {configButton}
+      <Text
+        col={configButton ? 6 : 0}
+        rowSpan={5}
+        text={props.title}
+        type={'Heading1'}/>
+      {inputControl}
+      {actionsDisplay}
+      {autoMountControl}
+    </Grid>
   );
 }, styles, {allowMultiple: true});

src/components/UI/Button/Button.css

@@ -1,7 +1,6 @@
 .Button {
   display: block;
   text-align: center;
-  margin: 0;
   padding: 4px;
   outline: 0;
   color: var(--text_color);
@@ -10,8 +9,10 @@
   border: none;
   text-decoration: none;
   text-outline: none;
+  vertical-align: center;
   height: 100%;
   width: 100%;
+  overflow: hidden;
 }
 
 .Button:hover:enabled {
@@ -21,7 +22,7 @@
 }
 
 .Button:hover:disabled {
-  cursor: default;
+  cursor: no-drop;
 }
 
 .Button:active,

src/components/UI/DropDown/DropDown.css

@@ -24,3 +24,16 @@
   border-color: rgba(10, 10, 20, 0.9);
   color: var(--text_color);
 }
+
+.Select:hover:enabled {
+  cursor: pointer;
+}
+
+.Select:hover:disabled {
+  cursor: no-drop;
+}
+
+.Select:active,
+.Select.active {
+  cursor: pointer;
+}

src/components/UI/Grid/Grid.js

@@ -66,6 +66,7 @@ export default CSSModules(class extends Component {
     const dimensions = this.state.dimensions;
     if (this.state.calculated) {
       children = React.Children.map(this.props.children, (child, i) => {
+        if (child) {
           let row = child.props.row || 0;
           if (typeof(row) === 'function') {
             row = row(dimensions);
@@ -95,7 +96,11 @@ export default CSSModules(class extends Component {
             rowSpan={rowSpan}
             colSpan={colSpan}
             key={'gc_' + i}>{child}</GridComponent>;
-      });
+        } else {
+          return null;
+        }
+      })
+      .filter(i => i !== null);
     }
 
     const style = {

src/containers/MountItems/MountItems.css

@@ -1,5 +1,6 @@
 .MountItems {
   padding: 0;
+  margin: 0;
   width: 100%;
   box-sizing: border-box;
 }

src/hoc/RootElem/RootElem.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default (props) => {
+  return (
+    <div style={{margin: 0, padding: 0}} {...props}>
+      {props.children}
+    </div>
+  )
+};

src/index.css

@@ -2,7 +2,7 @@
   --border_radius: 4px;
 
   --control_background: rgba(150, 150, 190, .15);
-  --control_background_hover: rgba(150, 150, 190, .3);
+  --control_background_hover: rgba(150, 150, 190, .35);
   --control_border: 1px solid rgba(70, 70, 70, 0.9);
   --control_box_shadow: 1px 1px 1px black;
   --control_transparent_background: rgba(40, 40, 55, 0.45);
@@ -11,7 +11,7 @@
   --text_color: rgba(200, 205, 220, 0.7);
   --text_color_hover: rgba(200, 205, 220, 0.7);
   --text_color_error: rgba(203, 120, 120, 0.8);
-  --heading_text_color: rgba(166, 177, 219, 0.7);
+  --heading_text_color: rgba(161, 190, 219, 0.7);
   --heading_other_text_color: var(--heading_text_color);
   --text_color_transition: color 0.3s;
 }