initial layout and design tweaks (#234)

ui/src/console/Console.js

@@ -1,4 +1,4 @@
-import {Container, Nav, Navbar, NavDropdown} from "react-bootstrap";
+import {Col, Container, Nav, Navbar, NavDropdown, Row} from "react-bootstrap";
 import {useEffect, useState} from "react";
 import Visualizer from "./visualizer/Visualizer";
 import Enable from "./modals/Enable";
@@ -64,14 +64,22 @@ const Console = (props) => {
                     </Navbar.Collapse>
                 </Container>
             </Navbar>
-            <Visualizer
-                user={props.user}
-                overview={overview}
-                defaultSelection={defaultSelection}
-                selection={selection}
-                setSelection={setSelection}
-            />
-            <Detail user={props.user} selection={selection} />
+            <Container fluid={"xl"}>
+                <Row id={"controls-row"}>
+                    <Col>
+                        <Visualizer
+                            user={props.user}
+                            overview={overview}
+                            defaultSelection={defaultSelection}
+                            selection={selection}
+                            setSelection={setSelection}
+                        />
+                    </Col>
+                    <Col>
+                        <Detail user={props.user} selection={selection} />
+                    </Col>
+                </Row>
+            </Container>
             <Enable show={showEnableModal} onHide={closeEnableModal} token={props.user.token} />
             <Version show={showVersionModal} onHide={closeVersionModal} />
         </Container>

ui/src/console/visualizer/Network.js

@@ -16,20 +16,8 @@ const Network = (props) => {
     }, []);
 
     const paintNode = (node, ctx) => {
-        let nodeColor = "#636363";
-        let textColor = "#ccc";
-        switch(node.type) {
-            case "environment":
-                nodeColor = "#444";
-                break;
-
-            case "share": // share
-                nodeColor = "#291A66";
-                break;
-
-            default:
-                //
-        }
+        let nodeColor = node.selected ? "#04adef" : "#9BF316";
+        let textColor = node.selected ? "white" : "black";
 
         ctx.textBaseline = "middle";
         ctx.textAlign = "center";
@@ -41,16 +29,6 @@ const Network = (props) => {
         roundRect(ctx, node.x - (nodeWidth / 2), node.y - 7, nodeWidth, 14, 1.25);
         ctx.fill();
 
-        if(node.selected) {
-            ctx.strokeStyle = "#c4bdde";
-            ctx.stroke();
-        } else {
-            if(node.type === "share") {
-                ctx.strokeStyle = "#433482";
-                ctx.stroke();
-            }
-        }
-
         ctx.fillStyle = textColor;
         ctx.fillText(node.label, node.x, node.y);
     }
@@ -64,12 +42,12 @@ const Network = (props) => {
             ref={targetRef}
             graphData={props.networkGraph}
             width={props.size.width}
-            height={500}
+            height={800}
             onNodeClick={nodeClicked}
             linkOpacity={.75}
             linkWidth={1.5}
             nodeCanvasObject={paintNode}
-            backgroundColor={"#3b2693"}
+            backgroundColor={"linear-gradient(180deg, #0E0238 0%, #231069 100%);"}
             cooldownTicks={300}
         />
     )

ui/src/console/visualizer/graph.js

@@ -40,7 +40,7 @@ export const mergeGraph = (oldGraph, user, newOverview) => {
         newGraph.links.push({
             target: accountNode.id,
             source: envNode.id,
-            color: "#777"
+            color: "#9BF316"
         });
         if(env.shares) {
             env.shares.forEach(shr => {
@@ -59,7 +59,7 @@ export const mergeGraph = (oldGraph, user, newOverview) => {
                 newGraph.links.push({
                     target: envNode.id,
                     source: shrNode.id,
-                    color: "#777"
+                    color: "#9BF316"
                 });
             });
         }

ui/src/index.css

@@ -25,7 +25,7 @@ code, pre {
 
 .visualizer-container {
     padding: 10px;
-    background: #3b2693;
+    background: linear-gradient(180deg, #0E0238 0%, #231069 100%);
     border-radius: 15px;
     margin-top: 15px;
 }
@@ -120,4 +120,13 @@ code, pre {
 
 #zrok-tou {
     margin-top: 15px;
+}
+
+#controls-row {
+    margin-left: -30px;
+    margin-right: -30px;
+}
+
+#navbar {
+    background: linear-gradient(180deg, #0E0238 0%, #231069 100%);
 }