pond: Some styles

lotuspond/front/src/App.css

@@ -1,11 +1,117 @@
+.Index {
+  width: 100vw;
+  height: 100vh;
+  background: #1a1a1a;
+  color: #f0f0f0;
+  font-family: monospace;
+
+  display: grid;
+  grid-template-columns: auto 40vw auto;
+  grid-template-rows: auto auto auto 3em;
+  grid-template-areas:
+    ". . ."
+    ". main ."
+    ". . ."
+    "footer footer footer";
+}
+
+.Index-footer {
+  background: #2a2a2a;
+  grid-area: footer;
+}
+
+.Index-footer > div {
+  padding-left: 0.7em;
+  padding-top: 0.7em;
+}
+
+.Index-nodes {
+  grid-area: main;
+  background: #2a2a2a;
+}
+
+.Index-node {
+  margin: 5px;
+  padding: 15px;
+  background: #1f1f1f;
+}
+
+.Index-addwrap {
+  margin-top: 5px;
+}
+
+/* SingleNode */
+
+
+.SingleNode-connecting {
+  width: 100vw;
+  height: 100vh;
+
+  background: #1a1a1a;
+  color: #ffffff;
+  font-family: monospace;
+
+  display: grid;
+  grid-template-columns: auto min-content auto;
+  grid-template-rows: auto min-content auto;
+  grid-template-areas:
+          ". . ."
+          ". main ."
+          ". . ."
+}
+
+.SingleNode-connecting > div {
+  grid-area: main;
+  padding: 15px;
+  white-space: nowrap;
+  background: #2a2a2a;
+}
+
+
+
+/*****/
+
+a:link {
+  color: #50f020;
+}
+
+a:visited {
+  color: #50f020;
+}
+
+a:hover {
+  color: #10a010;
+}
+
+.Button {
+  display: inline-block;
+  padding: 15px;
+  background: #1f1f1f;
+  margin-left: 5px;
+}
+
+.Window {
+  background: #2a2a2a !important;
+  color: #f0f0f0;
+}
+
+.Window > :first-child > :nth-child(2)::before {
+  background: #f0f0f0;
+}
+
+.Window > :first-child > :nth-child(2)::after {
+  background: #f0f0f0;
+}
+
+/* POND */
+
 .App {
   min-height: 100vh;
-  background: #b7c4cd;
+  background: #1a1a1a;
   font-family: monospace;
 }
 
 .NodeList {
-  background: #f9be77;
   user-select: text;
   font-family: monospace;
   min-width: 40em;
@@ -13,7 +119,6 @@
 }
 
 .FullNode {
-  background: #f9be77;
   user-select: text;
   font-family: monospace;
   min-width: 50em;
@@ -25,7 +130,6 @@
 }
 
 .StorageNode {
-  background: #f9be77;
   user-select: text;
   font-family: monospace;
   min-width: 40em;
@@ -33,7 +137,6 @@
 }
 
 .Block {
-  background: #f9be77;
   user-select: text;
   font-family: monospace;
   min-width: 50em;
@@ -41,7 +144,6 @@
 }
 
 .State {
-  background: #f9be77;
   user-select: text;
   font-family: monospace;
   min-width: 40em;
@@ -49,7 +151,6 @@
 }
 
 .Client {
-  background: #f9be77;
   user-select: text;
   font-family: monospace;
   display: inline-block;

lotuspond/front/src/App.js

@@ -49,25 +49,29 @@ class Index extends React.Component {
 
   render() {
     return (
-      <div>
-        <div><Link to={"/app/pond"}>Open Pond</Link></div>
-        <div>----------------</div>
-        <div>
-          <div>Managed Nodes:</div>
-          {
-            this.state.nodes.map((node, i) => <div>
-              <span>{i}. {node.addr} <Link to={`/app/node/${i}`}>[OPEN UI]</Link></span>
-            </div>)
-          }
-        </div>
-        <a hidden={this.state.addingNode} href='#' onClick={this.onAdd}>[Add]</a>
-        <div hidden={!this.state.addingNode}>
-          <div>---------------</div>
+      <div className="Index">
+        <div className="Index-nodes">
           <div>
-            + RPC:<input value={"ws://127.0.0.1:1234/rpc/v0"} onChange={this.update("rpcUrl")}/>
+            {
+              this.state.nodes.map((node, i) => <div className="Index-node">
+                <span>{i}. {node.addr} <Link to={`/app/node/${i}`}>[OPEN UI]</Link></span>
+              </div>)
+            }
           </div>
+          <a hidden={this.state.addingNode} href='#' onClick={this.onAdd} className="Button">[Add Node]</a>
+          <div hidden={!this.state.addingNode}>
+            <div>---------------</div>
+            <div>
+              + RPC:<input defaultValue={"ws://127.0.0.1:1234/rpc/v0"} onChange={this.update("rpcUrl")}/>
+            </div>
+            <div>
+              Token (<code>lotus auth create-admin-token</code>): <input onChange={this.update("rpcToken")}/>{this.tokenOk()}
+            </div>
+          </div>
+        </div>
+        <div className="Index-footer">
           <div>
-            Token (<code>lotus auth create-admin-token</code>): <input onChange={this.update("rpcToken")}/>{this.tokenOk()}
+            <Link to={"/app/pond"}>Open Pond</Link>
           </div>
         </div>
       </div>

lotuspond/front/src/FullNode.js

@@ -1,10 +1,9 @@
 import React from 'react';
-import Cristal from 'react-cristal'
 import { BlockLinks } from "./BlockLink";
-import StorageNodeInit from "./StorageNodeInit";
 import Address from "./Address";
 import ChainExplorer from "./ChainExplorer";
 import Client from "./Client";
+import Window from "./Window";
 
 class FullNode extends React.Component {
   constructor(props) {
@@ -168,10 +167,10 @@ class FullNode extends React.Component {
     }
 
     let nodeID = this.props.node.ID ? this.props.node.ID : ''
-    let nodePos = this.props.node.ID ? {x: this.props.node.ID*30, y: this.props.node.ID * 30} : undefined
+    let nodePos = this.props.node.ID ? {x: this.props.node.ID*30, y: this.props.node.ID * 30} : 'center'
 
     return (
-      <Cristal
+      <Window
         title={"Node " + nodeID}
         initialPosition={nodePos}
         initialSize={{width: 690, height: 300}}
@@ -181,7 +180,7 @@ class FullNode extends React.Component {
             {runtime}
           </div>
         </div>
-      </Cristal>
+      </Window>
     )
   }
 }

lotuspond/front/src/SingleNode.js

@@ -37,8 +37,11 @@ class SingleNode extends React.Component {
   render() {
     if (this.state.client === undefined) {
       return (
-        <div>
-          Connecting to Node RPC: <code>{`${this.state.addr}?token=****`}</code>
+        <div className="SingleNode-connecting">
+          <div>
+            <div>Connecting to Node RPC:</div>
+            <div>{`${this.state.addr}?token=****`}</div>
+          </div>
         </div>
       )
     }

lotuspond/front/src/Window.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import {Cristal} from "react-cristal";
+
+class Window extends React.Component {
+  render() {
+    let props = {className: '', ...this.props}
+    props.className = `${props.className} Window`
+
+    return <Cristal {...props}>
+      {this.props.children}
+    </Cristal>
+  }
+}
+
+export default Window