From 617011c528e15082fea29946bbfec350255a49a9 Mon Sep 17 00:00:00 2001
From: Paul Bienkowski <pb@opatut.de>
Date: Mon, 25 Jul 2022 22:24:41 +0200
Subject: [PATCH] make headers in sidebar pretty, and remove colors

---
 frontend/src/pages/MapPage/LayerSidebar.tsx | 22 +++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/frontend/src/pages/MapPage/LayerSidebar.tsx b/frontend/src/pages/MapPage/LayerSidebar.tsx
index b3ccc91..46167b2 100644
--- a/frontend/src/pages/MapPage/LayerSidebar.tsx
+++ b/frontend/src/pages/MapPage/LayerSidebar.tsx
@@ -105,12 +105,16 @@ function LayerSidebar({
               </List.Item></>
             ) :
             (
-              <List.Item>
-                <span style={{color: "olive"}}>Urban</span>
-                <DiscreteColorMapLegend map={colorByDistance('distance_overtaker')[3][5].slice(2)} />
-                <span style={{color: "brown"}}>Rural</span>
-                <DiscreteColorMapLegend map={colorByDistance('distance_overtaker')[3][3].slice(2)} />
-              </List.Item>
+              <>
+                <List.Item>
+                  <List.Header>Urban</List.Header>
+                  <DiscreteColorMapLegend map={colorByDistance('distance_overtaker')[3][5].slice(2)} />
+                </List.Item>
+                <List.Item>
+                  <List.Header>Rural</List.Header>
+                  <DiscreteColorMapLegend map={colorByDistance('distance_overtaker')[3][3].slice(2)} />
+                </List.Item>
+              </>
             )}
           </>
         )}
@@ -131,9 +135,11 @@ function LayerSidebar({
         {showEvents && (
           <>
             <List.Item>
-                <span style={{color: "blue"}}>Urban</span>
+              <List.Header>Urban</List.Header>
                 <DiscreteColorMapLegend map={colorByDistance('distance_overtaker')[3][5].slice(2)} />
-                <span style={{color: "cyan"}}>Rural</span>
+              </List.Item>
+            <List.Item>
+              <List.Header>Rural</List.Header>
                 <DiscreteColorMapLegend map={colorByDistance('distance_overtaker')[3][3].slice(2)} />
             </List.Item>
           </>