Layout changes

src/containers/MountItems/MountItems.css

@@ -10,7 +10,7 @@
 .MountItemsRemote {
   padding: 0;
   margin: 0;
-  height: 151px;
+  height: 121px;
   width: 100%;
   box-sizing: border-box;
   overflow-x: hidden;

src/containers/MountItems/MountItems.js

@@ -141,7 +141,6 @@ class MountItems extends IPCContainer {
   };
 
   handleMountUnMount = (provider, remote, mount, location) => {
-    console.log(provider, remote, mount, location);
     if (!location || (location.trim().length === 0)) {
       this.props.notifyError('Mount location is not set');
     } else {
@@ -284,18 +283,17 @@ class MountItems extends IPCContainer {
     let retryDisplay;
     if (this.state.DisplayRetry) {
       let retryList = [];
-      let retryListCount = 0;
+      let retryCount = 0;
       for (const provider in this.state.RetryItems) {
         if (this.state.RetryItems.hasOwnProperty(provider)) {
-          retryListCount++;
           if (this.state.RetryItems[provider].RetryMessage) {
-            retryList.push(<p key={'p' + retryListCount}>{this.state.RetryItems[provider].RetryMessage}</p>);
+            retryList.push(<p key={'rl_' + retryList.length}>{this.state.RetryItems[provider].RetryMessage}</p>);
           }
-          retryList.push(<Button
-            clicked={()=>this.cancelRetryMount(provider, ()=> this.detectMounts())}
-            key={'b' + retryListCount}>Cancel {provider} Remount ({this.state.RetryItems[provider].RetrySeconds}s)</Button>);
-          if (retryListCount < Object.keys(this.state.RetryItems).length) {
-            retryList.push(<div style={{paddingTop: '8px'}} key={'d' + retryListCount}/>);
+          retryList.push(<Button clicked={()=>this.cancelRetryMount(provider, ()=> this.detectMounts())}
+                                 key={'rl_' + retryList.length}>Cancel {provider} Remount ({this.state.RetryItems[provider].RetrySeconds}s)</Button>);
+          if (retryCount++ < Object.keys(this.state.RetryItems).length) {
+            retryList.push(<div style={{paddingTop: '8px'}}
+                                key={'rl_' + retryList.length}/>);
           }
         }
       }
@@ -310,13 +308,14 @@ class MountItems extends IPCContainer {
       )
     }
 
-    let items = [];
+    let headerItems = [];
     if (this.props.remoteSupported) {
-      items.push(<AddRemoteMount key={'mi_' + items.length}/>);
-      items.push(<div key={'di_' + items.length}
+      headerItems.push(<AddRemoteMount key={'hi_' + headerItems.length}/>);
+      headerItems.push(<div key={'hi_' + headerItems.length}
                             style={{paddingTop: '4px'}} />)
     }
 
+    let items = [];
     for (const provider of Constants.PROVIDER_LIST) {
       items.push((
         <MountItem allowConfig={this.props.allowConfig}
@@ -324,10 +323,10 @@ class MountItems extends IPCContainer {
                    browseClicked={this.handleBrowseLocation}
                    changed={e => this.handleMountLocationChanged(provider, e.target.value)}
                    clicked={this.handleMountUnMount}
-                   key={'mi_' + items.length}
+                   key={'it_' + items.length}
                    provider={provider}/>
       ));
-      items.push(<div key={'di_' + items.length}
+      items.push(<div key={'it_' + items.length}
                       style={{paddingTop: '4px'}} />)
     }
 
@@ -339,11 +338,11 @@ class MountItems extends IPCContainer {
                      browseClicked={this.handleBrowseLocation}
                      changed={e => this.handleMountLocationChanged(provider, e.target.value)}
                      clicked={this.handleMountUnMount}
-                     key={'mi_' + items.length}
+                     key={'it_' + items.length}
                      provider={provider}
                      remote/>
         ));
-        items.push(<div key={'di_' + items.length}
+        items.push(<div key={'it_' + items.length}
                         style={{paddingTop: '4px'}}/>)
       }
       if (this.props.RemoteMounts.length > 0) {
@@ -354,9 +353,12 @@ class MountItems extends IPCContainer {
     }
     
     return (
-      <div className={this.props.remoteSupported ? 'MountItemsRemote' : 'MountItems'}>
+      <div>
         {retryDisplay}
+        {headerItems}
+        <div className={this.props.remoteSupported ? 'MountItemsRemote' : 'MountItems'}>
           {items}
+        </div>
       </div>);
   }
 }

src/index.css

@@ -78,7 +78,7 @@ p {
 }
 
 .scrollable-content, ::-webkit-scrollbar {
-  width: 10px;
+  width: 8px;
 }
 
 .scrollable-content, ::-webkit-scrollbar * {
@@ -86,5 +86,5 @@ p {
 }
 
 .scrollable-content, ::-webkit-scrollbar-thumb {
-  background: rgba(90, 90, 90, 0.6) !important;
+  background: var(--control_background_hover) !important;
 }