Layout changes

src/App.js

@@ -684,7 +684,7 @@ class App extends Component {
       let key = 0;
       mainContent.push((
         <div key={'rvd_' + key++}
-             style={{height: '34%'}}>
+             style={{height: '25%'}}>
           <ReleaseVersionDisplay disabled={this.state.DownloadActive || this.state.ExtractActive || this.state.MountsBusy}
                                  downloadClicked={this.handleReleaseDownload}
                                  downloadDisabled={!downloadEnabled}

src/components/ReleaseVersionDisplay/ReleaseVersionDisplay.js

@@ -8,19 +8,57 @@ import Button from '../UI/Button/Button';
 import UpgradeIcon from '../UpgradeIcon/UpgradeIcon';
 
 export default CSSModules((props) => {
-  let optionsDisplay = null;
+  let optionsDisplay = [];
+  let key = 0;
   if (props.releaseExtracting) {
-    optionsDisplay = <Text align='center'
-                           row={13}
-                           rowSpan={7}
-                           colSpan={'remain'}
-                           text={'Activating <' + props.installedVersion + '>'}/>
+    optionsDisplay.push((
+      <Text col={dimensions => (dimensions.columns / 3) * 2}
+            colSpan={'remain'}
+            key={key++}
+            rowSpan={4}
+            text={'Activating'}
+            textAlign={'left'}
+            type={'Heading2'}/>
+    ));
+    optionsDisplay.push((
+      <Text col={dimensions => (dimensions.columns / 3) * 2}
+            colSpan={'remain'}
+            key={key++}
+            row={5}
+            rowSpan={7}
+            text={props.installedVersion}
+            textAlign={'left'}/>
+    ));
+  } else if (props.downloadDisabled) {
+    optionsDisplay.push((
+      <Text col={dimensions => (dimensions.columns / 3) * 2}
+            colSpan={'remain'}
+            key={key++}
+            rowSpan={4}
+            text={'Installed'}
+            textAlign={'left'}
+            type={'Heading2'}/>
+      ));
+
+    optionsDisplay.push((
+      <Text col={dimensions => (dimensions.columns / 3) * 2}
+            colSpan={'remain'}
+            key={key++}
+            row={5}
+            rowSpan={7}
+            text={props.installedVersion}
+            textAlign={'left'}/>
+    ));
   } else {
-    optionsDisplay = <Button clicked={props.downloadClicked}
-                             colSpan={20}
-                             disabled={props.downloadDisabled}
-                             row={13}
-                             rowSpan={7}>Install</Button>;
+    optionsDisplay.push((
+      <Button clicked={props.downloadClicked}
+              col={dimensions => (dimensions.columns / 3) * 2}
+              colSpan={20}
+              key={key++}
+              disabled={props.downloadDisabled}
+              row={5}
+              rowSpan={7}>Install</Button>
+    ));
   }
 
   return (
@@ -56,18 +94,6 @@ export default CSSModules((props) => {
                 row={5}
                 rowSpan={7}
                 selected={props.version}/>
-      <Text col={dimensions => (dimensions.columns / 3) * 2}
-            colSpan={'remain'}
-            rowSpan={4}
-            text={'Installed'}
-            textAlign={'left'}
-            type={'Heading2'}/>
-      <Text col={dimensions => (dimensions.columns / 3) * 2}
-            colSpan={'remain'}
-            row={5}
-            rowSpan={7}
-            text={props.installedVersion}
-            textAlign={'left'}/>
       {optionsDisplay}
     </Grid>
   );