Layout changes

public/electron.js

@@ -35,7 +35,7 @@ const SystemIPC = require('../src/renderer/ipc/SystemIPC');
 const UpgradeIPC = require('../src/renderer/ipc/UpgradeIPC');
 
 const dimensions = {
-  height: ((os.platform() === 'darwin') ? 294 : 274) + ((os.platform() === 'win32') ? 30 : -20),
+  height: ((os.platform() === 'darwin') ? 316 : 296) + ((os.platform() === 'win32') ? 30 : -20),
   width: 428 + ((os.platform() === 'win32') ? 40 : (os.platform() === 'darwin') ? 150 : 160),
 };
 

src/App.css

@@ -1,18 +1,14 @@
 .App {
-  display: flex;
-  flex-direction: column;
   margin: 0;
-  padding: 10px;
+  padding: 8px;
   box-sizing: border-box;
   height: 100vh;
   width: 100vw;
-  background-image: url('./assets/images/background.jpg');
+  background-image: url('./assets/images/background2.jpg');
   background-size: cover;
 }
 
 .AppContainer {
-  display: flex;
-  flex-direction: column;
   width: 100%;
   height: 100%;
   box-sizing: border-box;
@@ -25,6 +21,5 @@
 }
 
 .AppContent {
-  flex: 1;
   box-sizing: border-box;
 }

src/App.js

@@ -133,24 +133,30 @@ class App extends IPCContainer {
 
     let mainContent = [];
     if (this.props.DisplaySelectAppPlatform || !this.props.AppReady) {
-      mainContent = <Loading/>
+      mainContent = (
+        <Box>
+          <Loading/>
+        </Box>);
     } else {
       let key = 0;
       mainContent.push((
-        <div key={'rvd_' + key++}
-             style={{'paddingBottom': '4px'}}>
+        <Box key={'md_' + key++}
+             dxStyle={{padding: '8px', height: 'auto'}}>
           <ReleaseVersionDisplay downloadDisabled={!downloadEnabled}
                                  version={selectedVersion}/>
-        </div>
+        </Box>
       ));
-
+      mainContent.push(<div key={'md_' + key++}
+                            style={{paddingTop: '8px'}}/>);
       if (allowMount) {
         mainContent.push((
+          <Box dxStyle={{padding: '8px', height: 'auto'}}
+               key={'md_' + key++}>
             <MountItems allowConfig={allowConfig}
                         allowSiaPrime={allowSiaPrime}
-                        key={'md_' + key++}
                         noConsoleSupported={noConsoleSupported}
                         remoteSupported={remoteSupported}/>
+          </Box>
         ));
       }
     }
@@ -179,9 +185,7 @@ class App extends IPCContainer {
             </Box>
           </div>
           <div className={'AppContent'}>
-            <Box dxStyle={{padding: '8px 8px 0px 8px'}}>
-              {mainContent}
-            </Box>
+            {mainContent}
           </div>
         </div>
         {selectAppPlatformDisplay}

src/containers/MountItems/MountItems.js

@@ -311,8 +311,6 @@ class MountItems extends IPCContainer {
     let headerItems = [];
     if (this.props.remoteSupported) {
       headerItems.push(<AddRemoteMount key={'hi_' + headerItems.length}/>);
-      headerItems.push(<div key={'hi_' + headerItems.length}
-                            style={{paddingTop: '4px'}} />)
     }
 
     let items = [];
@@ -327,7 +325,7 @@ class MountItems extends IPCContainer {
                    provider={provider}/>
       ));
       items.push(<div key={'it_' + items.length}
-                      style={{paddingTop: '4px'}} />)
+                      style={{paddingTop: '8px'}} />)
     }
 
     if (this.props.remoteSupported) {
@@ -343,7 +341,7 @@ class MountItems extends IPCContainer {
                      remote/>
         ));
         items.push(<div key={'it_' + items.length}
-                        style={{paddingTop: '4px'}}/>)
+                        style={{paddingTop: '8px'}}/>)
       }
       if (this.props.RemoteMounts.length > 0) {
         items.splice(items.length - 1, 1);
@@ -353,12 +351,13 @@ class MountItems extends IPCContainer {
     }
     
     return (
-      <div>
+      <div style={{margin: 0, padding: 0}}>
         {retryDisplay}
-        {headerItems}
         <div className={this.props.remoteSupported ? 'MountItemsRemote' : 'MountItems'}>
           {items}
         </div>
+        <div style={{paddingTop: '8px'}}/>
+        {headerItems}
       </div>);
   }
 }

src/index.css

@@ -1,17 +1,17 @@
 :root {
   --border_radius: 4px;
 
-  --control_background: rgba(125, 145, 200, .15);
-  --control_background_hover: rgba(125, 145, 200, .30);
-  --control_border: 1px solid rgba(70, 70, 70, 0.9);
-  --control_box_shadow: 1px 1px 1px black;
-  --control_transparent_background: rgba(30, 30, 50, 0.3);
-  --control_dark_transparent_background: rgba(10, 10, 20, 0.8);
+  --control_background: rgba(105, 105, 150, .2);
+  --control_background_hover: rgba(105, 105, 150, .3);
+  --control_border: 1px solid rgba(80, 80, 90, 0.9);
+  --control_box_shadow: 2px 2px 2px black;
+  --control_transparent_background: rgba(10, 10, 16, 0.5);
+  --control_dark_transparent_background: rgba(10, 10, 16, 0.7);
 
-  --text_color: rgba(200, 205, 225, 0.8);
-  --text_color_hover: rgba(200, 205, 225, 0.9);
-  --text_color_error: rgba(203, 120, 120, 0.8);
-  --heading_text_color: rgba(146, 175, 220, 0.7);
+  --text_color: rgba(200, 200, 240, 0.6);
+  --text_color_hover: rgba(200, 200, 225, 0.6);
+  --text_color_error: rgba(203, 120, 120, 0.6);
+  --heading_text_color: rgba(132, 160, 230, 0.60);
   --heading_other_text_color: var(--heading_text_color);
   --text_color_transition: color 0.3s;