legend added to the map

Signed-off-by: Uncle Fatso <uncle.fatso@ghostchain.io>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ghost-telemetry-frontend",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "author": "Uncle f4tso <f4ts0@ghostchain.io>",
   "license": "GPL-3.0",
   "description": "Ghost Telemetry frontend",

src/components/Map/Map.css

@@ -16,3 +16,40 @@
   top: 0;
   bottom: 0;
 }
+
+.Map-legend {
+    min-width: 170px;
+    position: absolute;
+    font-family: 'Ubuntu', sans-serif;
+    background: #50759e;
+    border: 1px solid #fff;
+    border-radius: 5px;
+    color: #fff;
+    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.5);
+    top: 80%;
+    margin: 0 5%;
+    font-size: .8rem;
+}
+
+.Map-legend-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 20px;
+    margin: 10px;
+}
+
+.Map-legend-item-circle {
+    width: 12px;
+    height: 12px;
+    background: transparent;
+    border: 3px solid #60c45b;
+    border-radius: 6px;
+    top: 50%;
+    left: 50%;
+    transform: translate(calc(50% - 6px), calc(50% - 6px));
+}
+
+.Map-legend-item:first-of-type > .Map-legend-item-circle {
+    border-color: #f2e370;
+}

src/components/Map/Map.tsx

@@ -142,6 +142,17 @@ export class WorldMap extends React.Component<MapProps, MapState> {
     return (
       <div className="Map-container">
         <div className="Map">
+          <div className="Map-legend">
+            <div className="Map-legend-item">
+                <div className="Map-legend-item-circle"></div>
+                <div>Full Node</div>
+            </div>
+            <div className="Map-legend-item">
+                <div className="Map-legend-item-circle"></div>
+                <div>Validator Node</div>
+            </div>
+          </div>
+
           {nodes.map(node => {
             let isRealPoint = true;
             let { lat, lon } = node;