Animate nodes for fun :)

packages/frontend/src/components/Node.css

@@ -1,8 +1,8 @@
 .Node-Location {
   width: 10px;
   height: 10px;
-  background: #d64ca8;
+  background: #666;
-  border: 1px solid #000;
+  border: 1px solid #222;
   border-radius: 6px;
   margin-left: -6px;
   margin-top: -6px;
@@ -10,6 +10,15 @@
   top: 50%;
   left: 50%;
   cursor: pointer;
+  transition: background-color 0.25s linear;
+}
+
+.Node-Location-odd {
+  background: #bbb;
+}
+
+.Node-Location-synced {
+  background: #d64ca8;
 }
 
 .Node-Location:hover {

packages/frontend/src/components/Node.tsx

@@ -77,8 +77,16 @@ export namespace Node {
       return null;
     }
 
+    let className = 'Node-Location';
+
+    if (propagationTime) {
+      className += ' Node-Location-synced';
+    } else if (height % 2 === 1) {
+      className += ' Node-Location-odd';
+    }
+
     return (
-      <div className="Node-Location" style={{ left, top }}>
+      <div className={className} style={{ left, top }}>
         <table className="Node-details">
           <tbody>
             <tr>