[Layout changes] [Skynet premium portal support]

src/containers/MountItems/MountItems.js

@@ -314,7 +314,7 @@ class MountItems extends IPCContainer {
     return false;
   };
 
-  onDetectMountReply = (event, arg) => {
+  onDetectMountReply = (_, arg) => {
     const provider = arg.data.Provider;
     if (!this.state.RetryItems[provider]) {
       if (
@@ -344,13 +344,13 @@ class MountItems extends IPCContainer {
     }
   };
 
-  onMountDriveReply = (event, arg) => {
+  onMountDriveReply = (_, arg) => {
     this.props.setMounted(arg.data.Provider, arg.data.Success);
     this.detectMount(arg.data.Provider);
     this.removeMountsBusy(arg.data.Provider);
   };
 
-  onUnmountDriveReply = (event, arg) => {
+  onUnmountDriveReply = (_, arg) => {
     if (
       arg &&
       arg.data &&
@@ -480,78 +480,49 @@ class MountItems extends IPCContainer {
       );
     }
 
-    let items = [];
-    for (const provider of this.getProviderList(true)) {
-      items.push(
+    let mountItems = [];
+    const addMountItem = (provider, remote, s3) => {
+      if (mountItems.length > 0) {
+        mountItems.push(
+          <div
+            key={'it_' + mountItems.length}
+            style={{ paddingTop: 'calc(var(--default_spacing) * 2.5)' }}
+          />
+        );
+      }
+
+      mountItems.push(
         <MountItem
-          allowRemove={false}
+          allowRemove={remote || s3}
           browseClicked={this.handleBrowseLocation}
           changed={(e) =>
             this.handleMountLocationChanged(provider, e.target.value)
           }
           clicked={this.handleMountUnMount}
-          key={'it_' + items.length}
+          key={'it_' + mountItems.length}
           provider={provider}
+          remote={remote}
+          s3={s3}
         />
       );
-      items.push(
-        <div
-          key={'it_' + items.length}
-          style={{ paddingTop: 'var(--default_spacing)' }}
-        />
-      );
+    };
+
+    for (const provider of this.getProviderList(true)) {
+      addMountItem(provider);
     }
 
     if (this.props.remoteSupported) {
       for (const provider of this.props.RemoteMounts) {
-        items.push(
-          <MountItem
-            allowRemove={true}
-            browseClicked={this.handleBrowseLocation}
-            changed={(e) =>
-              this.handleMountLocationChanged(provider, e.target.value)
-            }
-            clicked={this.handleMountUnMount}
-            key={'it_' + items.length}
-            provider={provider}
-            remote
-          />
-        );
-        items.push(
-          <div
-            key={'it_' + items.length}
-            style={{ paddingTop: 'var(--default_spacing)' }}
-          />
-        );
+        addMountItem(provider, true);
       }
     }
 
     if (this.props.s3Supported) {
       for (const provider of this.props.S3Mounts) {
-        items.push(
-          <MountItem
-            allowRemove={true}
-            browseClicked={this.handleBrowseLocation}
-            changed={(e) =>
-              this.handleMountLocationChanged(provider, e.target.value)
-            }
-            clicked={this.handleMountUnMount}
-            key={'it_' + items.length}
-            provider={provider}
-            s3
-          />
-        );
-        items.push(
-          <div
-            key={'it_' + items.length}
-            style={{ paddingTop: 'var(--default_spacing)' }}
-          />
-        );
+        addMountItem(provider, false, true);
       }
     }
 
-    items.splice(items.length - 1, 1);
-
     return (
       <div style={{ margin: 0, padding: 0 }}>
         {retryDisplay}
@@ -561,7 +532,7 @@ class MountItems extends IPCContainer {
               ? 'MountItemsRemote'
               : 'MountItems'
           }>
-          {items}
+          {mountItems}
         </div>
         <div style={{ paddingTop: 'var(--default_spacing)' }} />
         {footerItems}