From 82fad7b706be0257a529902701894faa598797ff Mon Sep 17 00:00:00 2001
From: "Scott E. Graves" <scott.e.graves@protonmail.com>
Date: Sun, 6 Oct 2019 13:59:51 -0500
Subject: [PATCH] Layout changes

---
 src/containers/MountItems/MountItems.css |  2 +-
 src/containers/MountItems/MountItems.js  | 40 +++++++++++++-----------
 src/index.css                            |  4 +--
 3 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/src/containers/MountItems/MountItems.css b/src/containers/MountItems/MountItems.css
index de49eee..e20e6d6 100644
--- a/src/containers/MountItems/MountItems.css
+++ b/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;
diff --git a/src/containers/MountItems/MountItems.js b/src/containers/MountItems/MountItems.js
index b09b9dd..eaeb91c 100644
--- a/src/containers/MountItems/MountItems.js
+++ b/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}
-                      style={{paddingTop: '4px'}} />)
+      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}
-        {items}
+        {headerItems}
+        <div className={this.props.remoteSupported ? 'MountItemsRemote' : 'MountItems'}>
+          {items}
+        </div>
       </div>);
   }
 }
diff --git a/src/index.css b/src/index.css
index df07952..434cd36 100644
--- a/src/index.css
+++ b/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;
 }