feature(network transaction): design network transaction form

app/components/Network/TransactionForm.js

@@ -0,0 +1,23 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import styles from './TransactionForm.scss'
+
+const TransactionForm = ({}) => (
+  <div>
+    <input 
+      type='text'
+      placeholder='payment request'
+      className={styles.input}
+    />
+
+    <div className={styles.submitContainer}>
+      <span className={styles.submit}>submit</span>
+    </div>
+  </div>
+)
+
+TransactionForm.propTypes = {
+  
+}
+
+export default TransactionForm

app/components/Network/TransactionForm.scss

@@ -0,0 +1,28 @@
+@import '../../variables.scss';
+
+.input {
+  width: 100%;
+  background: $secondary;
+  color: $terminalgreen;
+  -webkit-appearance: none;
+  border: none;
+  border-bottom: 1px solid $terminalgreen;
+  padding: 5px;
+  outline: 0;
+}
+
+.submitContainer {
+  margin-top: 20px;
+  text-align: right;
+}
+
+.submit {
+  padding: 5px;
+  color: $terminalgreen;
+  cursor: pointer;
+
+  &:hover {
+    background: $terminalgreen;
+    color: $secondary;
+  }
+}

app/routes/network/components/Network.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types'
 import { InteractiveForceGraph, ForceGraphNode, ForceGraphLink } from 'react-vis-force'
 import LoadingBolt from 'components/LoadingBolt'
 import PeersList from 'components/Network/PeersList'
+import TransactionForm from 'components/Network/TransactionForm'
 
 import styles from './Network.scss'
 
@@ -39,7 +40,7 @@ class Network extends Component {
           return <h1>channels</h1>
           break
         case 3:
-          return <h1>transaction</h1>
+          return <TransactionForm />
           break
       }
     }

app/variables.scss

@@ -11,6 +11,7 @@ $darkestgrey: #999999;
 $bluegrey: #555459;
 
 $green: #0bb634;
+$terminalgreen: #00FF00;
 $red: #ff0b00;
 $blue: #007bb6;
 $curve: cubic-bezier(0.650, 0.000, 0.450, 1.000);