Import/export skeleton

src/containers/AddRemoteMount/AddRemoteMount.js

@@ -62,7 +62,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(class extends Compon
     const displayAdd = createModalConditionally(this.state.Display, (
       <Box dxDark
            dxStyle={{width: 'auto', height: 'auto', padding: 'var(--default_spacing)'}}>
-        <h1 style={{color: 'var(--text_color_error)', textAlign: 'center', paddingBottom: 'var(--default_spacing)'}}>Add Remote Mount</h1>
+        <h1 style={{textAlign: 'center', paddingBottom: 'var(--default_spacing)'}}>Add Remote Mount</h1>
         <Text text={'Hostname or IP'}
               textAlign={'left'}
               type={'Heading2'}/>

src/containers/MountItems/MountItem/MountItem.js

@@ -32,8 +32,8 @@ const mapStateToProps = (state, ownProps) => {
 const mapDispatchToProps = dispatch => {
   return {
     displayConfiguration: (provider, remote) => dispatch(displayConfiguration(provider, remote)),
-    displaySkynetExport: () => dispatch(displaySkynetExport()),
-    displaySkynetImport: () => dispatch(displaySkynetImport()),
+    displaySkynetExport: display => dispatch(displaySkynetExport(display)),
+    displaySkynetImport: display => dispatch(displaySkynetImport(display)),
     removeRemoteMount: provider => dispatch(removeRemoteMount(provider)),
     setProviderState: (provider, state) => dispatch(setProviderState(provider, state)),
   }
@@ -185,7 +185,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(props => {
         {(props.provider === 'Skynet') ? (
           <a href={'#'}
              col={configButton ? 24 : 18}
-             onClick={props.MState.AllowMount ? () => props.displaySkynetExport() : e => {e.preventDefault();}}
+             onClick={props.MState.AllowMount ? () => props.displaySkynetExport(true) : e => {e.preventDefault();}}
              rowSpan={5}
              style={{...pointer, fontWeight: 'normal'}}>
             <u>Export</u>
@@ -194,7 +194,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(props => {
         {(props.provider === 'Skynet') ? (
           <a href={'#'}
              col={configButton ? 24 + 13 : 18 + 13}
-             onClick={props.MState.AllowMount ? () => props.displaySkynetImport() : e => {e.preventDefault();}}
+             onClick={props.MState.AllowMount ? () => props.displaySkynetImport(true) : e => {e.preventDefault();}}
              rowSpan={5}
              style={{...pointer, fontWeight: 'normal'}}>
             <u>Import</u>

src/containers/SkynetImport/SkynetImport.css

@@ -0,0 +1,27 @@
+.SkynetImportTextArea {
+  display: block;
+  width: 100%;
+  margin: 0;
+  padding: 2px;
+  border-radius: var(--border_radius);
+  background: var(--control_background);
+  border: none;
+  box-shadow: none;
+  outline: none;
+  color: var(--text_color);
+  box-sizing: border-box;
+  resize: none;
+  overflow-y: scroll;
+  overflow:-moz-scrollbars-horizontal;
+  white-space: nowrap;
+}
+
+.SkynetImportButtons {
+  display: flex;
+  justify-content: space-between;
+}
+
+.SkynetImportHeading {
+  text-align: center;
+  padding-bottom: var(--default_spacing);
+}

src/containers/SkynetImport/SkynetImport.js

@@ -0,0 +1,46 @@
+import React from 'react'
+import {Component} from 'react';
+import {connect} from 'react-redux';
+import './SkynetImport.css'
+import Box from '../../components/UI/Box/Box';
+import Button from '../../components/UI/Button/Button';
+import {displaySkynetImport} from '../../redux/actions/skynet_actions';
+
+const mapDispatchToProps = dispatch => {
+  return {
+    displaySkynetImport: display => dispatch(displaySkynetImport(display)),
+  }
+};
+
+export default connect(null, mapDispatchToProps)(class extends Component {
+
+  state = {
+    import_list: '',
+  };
+
+  render() {
+    return (
+      <Box dxDark dxStyle={{height: 'auto', padding: 'var(--default_spacing)', width: 'calc(100vw - (var(--default_spacing) * 4)'}}>
+        <div style={{float: 'right', margin: 0, padding: 0, marginTop: '-4px', boxSizing: 'border-box', display: 'block'}}>
+          <a href={'#'}
+             onClick={()=>this.props.displaySkynetImport(false)}
+             style={{cursor: 'pointer'}}>X</a>
+        </div>
+        <h1 className={'SkynetImportHeading'}>Import List</h1>
+        <textarea autoFocus={true}
+                  className={'SkynetImportTextArea'}
+                  onChange={e => this.setState({
+                    ...this.state,
+                    import_list: e.target.value,
+                  })}
+                  value={this.state.import_list}
+                  rows={10} />
+
+        <div className={'SkynetImportButtons'}>
+          <Button buttonStyles={{height: 'auto', marginTop: 'var(--default_spacing)', width: 'auto'}}>Import Syntax...</Button>
+          <Button buttonStyles={{height: 'auto', marginLeft: 'var(--default_spacing)', marginTop: 'var(--default_spacing)', width: 'auto'}}>Next</Button>
+        </div>
+      </Box>
+    );
+  }
+});