feat: add whiter background color on headers

Author: Joxit

src/components/line-render.riot

@@ -14,7 +14,7 @@
     <div class="render-column">
       <span class="render-header">id</span>
       <render-item if="{ state.lines }" each="{ line in state.lines }" min-height="{ state.minHeight }">
-        { line.id }
+        <span class="render-header">{ line.id }</span>
       </render-item>
     </div>
   </div>

src/components/polygon-render.riot

@@ -8,7 +8,7 @@
       min-height="{ state.minHeight }"
       style-props="{ polygonStyleFormatter(polygon, state.casing[polygon.id]) }"
     >
-      <span>{ polygon.id }</span>
+      <span class="render-header">{ polygon.id }</span>
     </render-item>
   </div>
   <script>

src/components/popover.riot

@@ -1,5 +1,5 @@
 <popover>
-  <div class="popover-wrapper" if="{ props.opened }">
+  <div class="popover-wrapper" if="{ props.opened && props.styleProps }">
     <div class="popover-dialog">
       <div class="popover-body" onclick="{ (e) => e.stopPropagation() }">
         <div class="popover-close" onclick="{ props.onClose }">

src/components/symbol-render.riot

@@ -15,7 +15,7 @@
     <div class="render-column">
       <span class="render-header">id</span>
       <render-item if="{ state.symbols }" each="{ symbol in state.symbols }" min-height="{ getMinHeight(symbol) }">
-        <span>{ symbol.id }</span>
+        <span class="render-header">{ symbol.id }</span>
       </render-item>
     </div>
   </div>

src/components/taxonomy.riot

@@ -34,7 +34,7 @@
         zooms="{ taxonomy.getZooms(group.zooms) }"
       ></annotation>
     </div>
-    <div style="font-size: 12px; text-align: center">
+    <div style="font-size: 12px; text-align: center; background-color: rgba(255,255,255, 0.2);">
       Powered by <a href="https://www.jawg.io/">Jawg<span style="color: #2999fd">Maps</span></a
       >. Contribute on <a href="https://github.com/jawg/taxonomy/">GitHub</a>.
     </div>
@@ -137,6 +137,7 @@
     taxonomy h2 {
       line-height: 1.5;
       text-align: center;
+      background-color: rgba(255,255,255, 0.2);
     }
 
     taxonomy a {
@@ -173,6 +174,10 @@
     taxonomy span.render-header {
       font-weight: bold;
       text-align: center;
+      background-color: rgba(255,255,255, 0.2);
+      border-radius: 1rem;
+      padding: 0 0.5em;
+      margin: 0 0.5em;
     }
 
     line-render render-item > canvas,