Layout changes

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 = (
-      <img alt=''
-        height={'16px'}
-        onClick={props.configClicked}
-        src={configureImage}
-        style={{padding: 0, border: 0, margin: 0, cursor: 'pointer'}}
-        width={'16px'}/>
+      <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}
-                          onChange={props.changed}
-                          type={'text'}
-                          value={props.location}/>;
+    inputColumnSpan = 60;
+    inputControl = (
+      <RootElem colSpan={inputColumnSpan}
+                row={secondRow}
+                rowSpan={7}>
+        <input disabled={!props.allowMount || props.mounted}
+               onChange={props.changed}
+               type={'text'}
+               value={props.location}/>
+    </RootElem>);
   }
 
-  let actionDisplay = null;
-  if (props.allowMount) {
-    actionDisplay = <Button buttonStyles={{width: '100%'}}
-                            clicked={()=>props.clicked(props.title, !props.mounted, props.location, props.pid)}>{props.mounted ? 'Unmount' : 'Mount'}</Button>;
-  } else {
-    actionDisplay = <Loader color={'var(--heading_text_color)'}
-                            height='24px'
-                            type='Circles'
-                            width='24px'/>;
-  }
+  const buttonDisplay = props.allowMount ?
+    (props.mounted ? 'Unmount' : 'Mount') :
+    <Loader color={'var(--heading_text_color)'}
+            height='19px'
+            type='Circles'
+            width='19px'/>;
+
+  const actionsDisplay = (
+    <Button clicked={()=>props.clicked(props.title, !props.mounted, props.location, props.pid)}
+            col={inputColumnSpan + 2}
+            colSpan={20}
+            disabled={!props.allowMount}
+            row={secondRow}
+            rowSpan={7}>
+      {buttonDisplay}
+    </Button>);
+
+  const autoMountControl = (
+    <RootElem col={inputColumnSpan + 23}
+              colSpan={26}
+              row={secondRow}
+              rowSpan={7}>
+      <input checked={props.autoMount}
+             onChange={props.autoMountChanged}
+             type='checkbox'/>Auto-mount
+    </RootElem>
+  );
 
   return (
-    <div styleName='MountItem'>
-      <table><tbody><tr><td>{configButton}</td><td><h2>{props.title}</h2></td></tr></tbody></table>
-      <table cellPadding='2'
-             width='100%'>
-        <tbody>
-          <tr>
-            <td height='30px'
-                width={mountWidth}>{inputControl}
-            </td>
-            <td align='center'
-                valign='middle'
-                width='25%'>
-              {actionDisplay}
-            </td>
-            <td>
-              <input checked={props.autoMount}
-                     onChange={props.autoMountChanged}
-                     type='checkbox'/>Auto-mount
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
+    <Grid>
+      {configButton}
+      <Text
+        col={configButton ? 6 : 0}
+        rowSpan={5}
+        text={props.title}
+        type={'Heading1'}/>
+      {inputControl}
+      {actionsDisplay}
+      {autoMountControl}
+    </Grid>
   );
 }, styles, {allowMultiple: true});