pond: More dark CSS

lotuspond/front/src/Address.js

@@ -105,7 +105,7 @@ class Address extends React.Component {
     }
 
     addr = <span className={`pondaddr-${this.props.addr}`}
-                 onMouseEnter={() => sheet.sheet.insertRule(`.pondaddr-${this.props.addr}, .pondaddr-${this.props.addr} * { color: #11ee11; }`, 0)}
+                 onMouseEnter={() => sheet.sheet.insertRule(`.pondaddr-${this.props.addr}, .pondaddr-${this.props.addr} * { color: #11ee11 !important; }`, 0)}
                  onMouseLeave={() => sheet.sheet.deleteRule(0)}
                  >{addr}</span>
 

lotuspond/front/src/App.css

@@ -80,7 +80,7 @@ a:visited {
 }
 
 a:hover {
-  color: #10a010;
+  color: #30a00a;
 }
 
 .Button {
@@ -92,6 +92,10 @@ a:hover {
 
 .Window {
   background: #2a2a2a !important;
+  color: #e0e0e0;
+}
+
+.Window b {
   color: #f0f0f0;
 }
 
@@ -103,6 +107,14 @@ a:hover {
   background: #f0f0f0;
 }
 
+.Window a:link {
+  color: #30a015;
+}
+
+.Window a:visited {
+  color: #30a015;
+}
+
 /* POND */
 
 .App {
@@ -169,19 +181,20 @@ a:hover {
 
 .ChainExplorer {
   font-family: monospace;
+  color: #d0d0d0;
 }
 
 .ChainExplorer-at {
   min-width: 40em;
-  background: #77ff77;
+  background: #222222;
 }
 
 .ChainExplorer-after {
-  background: #cc9c44
+  background: #440000
 }
 
 .ChainExplorer-before {
-  background: #cccc00
+  background: #444400
 }
 
 .Logs {

lotuspond/front/src/Block.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import {Cristal} from "react-cristal";
 import {BlockLinks} from "./BlockLink";
 import Address from "./Address";
+import Window from "./Window";
 
 class Block extends React.Component {
   constructor(props) {
@@ -57,9 +57,9 @@ class Block extends React.Component {
       )
     }
 
-    return (<Cristal className="CristalScroll" initialSize={{width: 700, height: 400}} onClose={this.props.onClose} title={`Block ${this.props.cid['/']}`}>
+    return (<Window className="CristalScroll" initialSize={{width: 700, height: 400}} onClose={this.props.onClose} title={`Block ${this.props.cid['/']}`}>
       {content}
-    </Cristal>)
+    </Window>)
   }
 }
 

lotuspond/front/src/ChainExplorer.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import {Cristal} from "react-cristal";
 import {BlockLinks} from "./BlockLink";
+import Window from "./Window";
 
 const rows = 32
 
@@ -132,9 +132,9 @@ class ChainExplorer extends React.Component {
       return <div key={row} className={className}>@{row} {info}</div>
     })}</div>
 
-    return (<Cristal onClose={this.props.onClose} title={`Chain Explorer ${this.state.follow ? '(Following)' : ''}`}>
+    return (<Window onClose={this.props.onClose} title={`Chain Explorer ${this.state.follow ? '(Following)' : ''}`}>
       {content}
-    </Cristal>)
+    </Window>)
   }
 }
 

lotuspond/front/src/Client.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import Cristal from 'react-cristal'
 import Address from "./Address";
+import Window from "./Window";
 
 const dealStates = [
   "Unknown",
@@ -94,12 +94,12 @@ class Client extends React.Component {
 
     </div>)
 
-    return <Cristal title={"Client - Node " + this.props.node.ID} onClose={this.props.onClose}>
+    return <Window title={"Client - Node " + this.props.node.ID} onClose={this.props.onClose}>
       <div className="Client">
         <div>{dealMaker}</div>
         <div>{deals}</div>
       </div>
-    </Cristal>
+    </Window>
   }
 }
 

lotuspond/front/src/ConnMgr.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Cristal from 'react-cristal'
+import Window from "./Window";
 
 async function awaitReducer(prev, c) {
   return {...await prev, ...await c}
@@ -107,7 +107,7 @@ class ConnMgr extends React.Component {
     })
 
     return(
-      <Cristal title={`Connection Manager${this.state.lock ? ' (syncing)' : ''}`}>
+      <Window title={`Connection Manager${this.state.lock ? ' (syncing)' : ''}`}>
         <table>
           <thead><tr><td></td>{keys.slice(0, -1).map((i) => (<td key={i}>{i}</td>))}</tr></thead>
           <tbody>{rows}</tbody>
@@ -118,7 +118,7 @@ class ConnMgr extends React.Component {
           <button onClick={this.connect1}>Conn1</button>
           <button onClick={this.connectChain}>ConnChain</button>
         </div>
-      </Cristal>
+      </Window>
     )
   }
 }

lotuspond/front/src/Consensus.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import {Cristal} from "react-cristal";
 import {BlockLinks} from "./BlockLink";
+import Window from "./Window";
 
 function styleForHDiff(max, act) {
   switch (max - act) {
@@ -42,7 +42,7 @@ class Consensus extends React.Component {
   }
 
   render() {
-    return (<Cristal title={`Consensus`}>
+    return (<Window title={`Consensus`}>
       <div className='Consensus'>
         <div>Max Height: {this.state.maxH}</div>
         <div>
@@ -62,7 +62,7 @@ class Consensus extends React.Component {
           </table>
         </div>
       </div>
-    </Cristal>)
+    </Window>)
   }
 }
 

lotuspond/front/src/Logs.js

@@ -1,9 +1,9 @@
 import React from 'react'
-import {Cristal} from "react-cristal";
 import { Terminal } from 'xterm';
 import { AttachAddon } from "xterm-addon-attach";
 import 'xterm/dist/xterm.css';
 import * as fit from 'xterm/lib/addons/fit/fit';
+import Window from "./Window";
 
 class Logs extends React.Component {
   constructor(props) {
@@ -22,9 +22,9 @@ class Logs extends React.Component {
   }
 
   render() {
-    return <Cristal className="Logs-window" onClose={this.props.onClose} initialSize={{width: 1000, height: 480}} title={`Node ${this.props.node} Logs`}>
+    return <Window className="Logs-window" onClose={this.props.onClose} initialSize={{width: 1000, height: 480}} title={`Node ${this.props.node} Logs`}>
       <div ref={this.termRef} className="Logs"/>
-    </Cristal>
+    </Window>
   }
 }
 

lotuspond/front/src/NodeList.js

@@ -2,12 +2,12 @@ import React from 'react';
 import FullNode from "./FullNode";
 import ConnMgr from "./ConnMgr";
 import Consensus from "./Consensus";
-import {Cristal} from "react-cristal";
 import StorageNode from "./StorageNode";
 import {Client} from "rpc-websockets";
 import pushMessage from "./chain/send";
 import Logs from "./Logs";
 import StorageNodeInit from "./StorageNodeInit";
+import Window from "./Window";
 
 const [NodeUnknown, NodeRunning, NodeStopped] = [0, 1, 2]
 
@@ -155,7 +155,7 @@ class NodeList extends React.Component {
     }
 
     return (
-      <Cristal title={"Node List"} initialPosition="bottom-left">
+      <Window title={"Node List"} initialPosition="bottom-left">
         <div className={'NodeList'}>
           <div>
             <button onClick={this.spawnNode} disabled={!this.state.existingLoaded}>Spawn Node</button>
@@ -190,7 +190,7 @@ class NodeList extends React.Component {
           {connMgr}
           {consensus}
         </div>
-      </Cristal>
+      </Window>
     );
   }
 }

lotuspond/front/src/State.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import {Cristal} from "react-cristal";
+import Window from "./Window";
 
 class State extends React.Component {
   constructor(props) {
@@ -21,9 +21,9 @@ class State extends React.Component {
       <div>{Object.keys(this.state.State).map(k => <div key={k}>{k}: <span>{JSON.stringify(this.state.State[k])}</span></div>)}</div>
     </div>
 
-    return <Cristal onClose={this.props.onClose} title={`Actor ${this.props.addr} @{this.props.ts.Height}`}>
+    return <Window onClose={this.props.onClose} title={`Actor ${this.props.addr} @{this.props.ts.Height}`}>
       {content}
-    </Cristal>
+    </Window>
   }
 }
 

lotuspond/front/src/StorageNode.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import {Cristal} from "react-cristal";
 import { Client } from 'rpc-websockets'
 import Address from "./Address";
+import Window from "./Window";
 
 const stateConnected = 'connected'
 const stateConnecting = 'connecting'
@@ -121,7 +121,7 @@ class StorageNode extends React.Component {
       )
     }
 
-    return <Cristal
+    return <Window
       title={"Storage Miner Node " + this.props.node.ID}
       initialPosition={{x: this.props.node.ID*30, y: this.props.node.ID * 30}}
       onClose={this.stop} >
@@ -130,7 +130,7 @@ class StorageNode extends React.Component {
           {runtime}
         </div>
       </div>
-    </Cristal>
+    </Window>
   }
 }
 

lotuspond/front/src/StorageNodeInit.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import {Cristal} from "react-cristal";
+import Window from "./Window";
-import StorageNode from "./StorageNode";
 
 class StorageNodeInit extends React.Component {
   async componentDidMount() {
@@ -11,7 +10,7 @@ class StorageNodeInit extends React.Component {
   }
 
   render() {
-    return <Cristal
+    return <Window
       title={"Storage miner initializing"}
       initialPosition={'center'}>
       <div className="CristalScroll">
@@ -19,7 +18,7 @@ class StorageNodeInit extends React.Component {
           Waiting for init, make sure at least one miner is enabled
         </div>
       </div>
-    </Cristal>
+    </Window>
   }
 }