Update network map legend

diff --git a/app/static/src/sass/modules/_map-legend.scss b/app/static/src/sass/modules/_map-legend.scss
index 5f27217402e48d82d20f179dbd900c5d588b707f..4d196af21c33868844a56355dc0e46772210cb62 100644 (file)
--- a/app/static/src/sass/modules/_map-legend.scss
+++ b/app/static/src/sass/modules/_map-legend.scss
@@ -22,12 +22,13 @@ $module: ".map-legend";
 
 #{$module} {
 
-    @include padding(1);
+    @include padding(.5);
     position: absolute;
     bottom: 20px;
     left: 20px;
     z-index: 10;
     background: white;
+    border: 1px solid black;
 
     @include mq($until: xs) {
         display: none;
@@ -37,20 +38,22 @@ $module: ".map-legend";
 
         text-transform: uppercase;
         @include font-size(xs);
-        @include line-height(.5);
-        @include margin-bottom(.25);
         color: $color-black;
+        display: inline-block;
+        line-height: 22px;
 
         &:last-child {
-            @include margin-bottom(0);
+            @include margin-right(0);
         }
 
         &:before {
 
             content :"";
-            display: inline-block;
-            width: 8px;
-            height: 8px;
+            float: left;
+            width: 22px;
+            height: 22px;
+            background-repeat: no-repeat;
+            background-position: center center;
             @include margin-right(.5);
 
         }
@@ -58,7 +61,7 @@ $module: ".map-legend";
         &--red {
 
             &:before {
-                background: #e7413c;
+                background-image: url(../img/map-legend-red.png);
             }
 
         }
@@ -66,7 +69,7 @@ $module: ".map-legend";
         &--blue {
 
             &:before {
-                background: #3c7be7;
+                background-image: url(../img/map-legend-blue.png);
             }
 
         }
@@ -74,7 +77,7 @@ $module: ".map-legend";
         &--green {
 
             &:before {
-                background: #70e73c;
+                background-image: url(../img/map-legend-green.png);
             }
 
         }