# HG changeset patch
# User Fadi Abbud <fadi.abbud@intevation.de>
# Date 1558345566 -7200
# Node ID de0d0685a17bafae8cde925ed410eadef9908463
# Parent  b6afae085f5e49dab52e532b54184ed40cf99345
client: improve diagram-legends style

diff -r b6afae085f5e -r de0d0685a17b client/src/components/fairway/Fairwayprofile.vue
--- a/client/src/components/fairway/Fairwayprofile.vue	Mon May 20 11:41:35 2019 +0200
+++ b/client/src/components/fairway/Fairwayprofile.vue	Mon May 20 11:46:06 2019 +0200
@@ -4,13 +4,21 @@
     <div class="d-flex flex-fill">
       <DiagramLegend>
         <div class="legend">
-          <span style="background-color: #5995ff"></span> Water
+          <span
+            style="background-color: #5995ff; width: 20px; height: 20px;"
+          ></span>
+          Water
         </div>
         <div class="legend">
-          <span style="background-color: #1f4fff"></span> Fairway
+          <span
+            style="background-color: #1f4fff; width: 20px; height: 20px;"
+          ></span>
+          Fairway
         </div>
         <div class="legend">
-          <span style="background-color: #4a2f06"></span>
+          <span
+            style="background-color: #4a2f06; width: 20px; height: 20px;"
+          ></span>
           Ground
         </div>
         <div>
diff -r b6afae085f5e -r de0d0685a17b client/src/components/gauge/HydrologicalConditions.vue
--- a/client/src/components/gauge/HydrologicalConditions.vue	Mon May 20 11:41:35 2019 +0200
+++ b/client/src/components/gauge/HydrologicalConditions.vue	Mon May 20 11:46:06 2019 +0200
@@ -9,20 +9,33 @@
     <div class="d-flex flex-fill">
       <DiagramLegend>
         <div class="legend">
-          <span style="background-color: red"></span>
+          <span
+            style="background-color: red; width: 20px; height: 20px;"
+          ></span>
           {{ yearCompare }}
         </div>
         <div class="legend">
-          <span style="background-color: orange"></span> Q25%
+          <span
+            style="background-color: orange; width: 20px; height: 20px;"
+          ></span>
+          Q25%
         </div>
         <div class="legend">
-          <span style="background-color: black"></span> Median
+          <span
+            style="background-color: black; width: 20px; height: 20px;"
+          ></span>
+          Median
         </div>
         <div class="legend">
-          <span style="background-color: purple"></span> Q75%
+          <span
+            style="background-color: purple; width: 20px; height: 20px;"
+          ></span>
+          Q75%
         </div>
         <div class="legend">
-          <span style="background-color: lightsteelblue"></span>
+          <span
+            style="background-color: lightsteelblue; width: 20px; height: 20px;"
+          ></span>
           Long-term Amplitude
         </div>
         <select
diff -r b6afae085f5e -r de0d0685a17b client/src/components/gauge/Waterlevel.vue
--- a/client/src/components/gauge/Waterlevel.vue	Mon May 20 11:41:35 2019 +0200
+++ b/client/src/components/gauge/Waterlevel.vue	Mon May 20 11:46:06 2019 +0200
@@ -9,17 +9,22 @@
     <div class="d-flex flex-fill">
       <DiagramLegend>
         <div class="legend">
-          <span style="background-color: steelblue"></span> Waterlevel
+          <span
+            style="background-color: steelblue; width: 20px; height: 20px;"
+          ></span>
+          Waterlevel
         </div>
         <div class="legend">
           <span
-            style="width: 4px; height: 4px; background-color: rgba(70, 130, 180, 0.6); border: solid 4px rgba(70, 130, 180, 0.2); background-clip: padding-box; box-sizing: content-box;"
+            style="width: 8px; height: 8px; background-color: rgba(70, 130, 180, 0.6); border: solid 7px rgba(70, 130, 180, 0.2); background-clip: padding-box; box-sizing: content-box;"
           ></span>
           Prediction
         </div>
         <div class="legend">
-          <span style="background-color: rgba(0, 255, 0, 0.1)"></span> Navigable
-          Range
+          <span
+            style="background-color: rgba(0, 255, 0, 0.1); width: 20px; height: 20px;"
+          ></span>
+          Navigable Range
         </div>
         <div>
           <select