From a35df52b75fad9b4a69fcf095f3e324693ceb121 Mon Sep 17 00:00:00 2001
From: Tom Russell <tomalrussell@gmail.com>
Date: Mon, 3 Dec 2018 10:21:00 +0000
Subject: [PATCH] Legend size and spacing

---
 app/src/frontend/legend.css         | 26 ++++++++++++++++++++++++--
 app/src/frontend/legend.js          | 17 +++++++++++------
 app/src/frontend/map.js             |  2 +-
 app/src/frontend/theme-switcher.css | 15 +--------------
 4 files changed, 37 insertions(+), 23 deletions(-)

diff --git a/app/src/frontend/legend.css b/app/src/frontend/legend.css
index 728eef13..3c41c9ef 100644
--- a/app/src/frontend/legend.css
+++ b/app/src/frontend/legend.css
@@ -6,14 +6,32 @@
     position: absolute;
     bottom: 55px;
     right: 10px;
+    min-width: 7rem;
     float: right;
     background: white;
     border-radius: 4px;
-    padding: 0.25rem 0.5rem;
+    padding: 0.25rem 0;
+}
+@media (min-width: 380px){
+    .map-legend {
+        bottom: 40px;
+    }
+}
+@media (min-width: 1020px){
+    .map-legend {
+        bottom: 24px;
+    }
+}
+.map-legend h3,
+.map-legend h4,
+.data-legend {
+    padding: 0 0.5rem;
 }
 .data-legend {
+    max-height: 20rem;
+    overflow-y: auto;
     list-style: none;
-    padding: 0;
+    margin-bottom: 0;
 }
 .data-legend .key {
     display: inline-block;
@@ -24,3 +42,7 @@
     vertical-align: middle;
     overflow: hidden;
 }
+.map-legend .data-intro {
+    padding: 0 0.5rem;
+    opacity: 0.5;
+}
diff --git a/app/src/frontend/legend.js b/app/src/frontend/legend.js
index 9626147c..2e253fa8 100644
--- a/app/src/frontend/legend.js
+++ b/app/src/frontend/legend.js
@@ -55,7 +55,7 @@ const LEGEND_CONFIG = {
     like: {
         title: "Like Me",
         elements: [
-        { color: '#f65400', text: 'We like these buildings 👍 🎉 +1' },
+        { color: '#f65400', text: '👍 🎉 +1' },
         ]
     },
     use: {
@@ -98,14 +98,19 @@ const Legend = (props) => {
     const elements = details.elements;
     return (
         <div className="map-legend">
+            <h3 className="h3 logotype">Colouring London</h3>
             <h4 className="h4">{ title }</h4>
-            <ul className="data-legend">
             {
-                elements.map((data_item) => (
-                    <LegendItem {...data_item} key={data_item.color} />
-                ))
+                elements.length?
+                (<ul className="data-legend">
+                {
+                    elements.map((data_item) => (
+                        <LegendItem {...data_item} key={data_item.color} />
+                    ))
+                }
+                </ul>)
+                : (<p className="data-intro">Coming soon…</p>)
             }
-            </ul>
         </div>
     );
 }
diff --git a/app/src/frontend/map.js b/app/src/frontend/map.js
index e4371f84..083cd4e4 100644
--- a/app/src/frontend/map.js
+++ b/app/src/frontend/map.js
@@ -114,8 +114,8 @@ class ColouringMap extends Component {
                     <ZoomControl position="topright" />
                     <AttributionControl prefix="" />
                 </Map>
-                <ThemeSwitcher onSubmit={this.themeSwitch} currentTheme={this.state.theme} />
                 <Legend slug={cat} />
+                <ThemeSwitcher onSubmit={this.themeSwitch} currentTheme={this.state.theme} />
             </Fragment>
         );
     }
diff --git a/app/src/frontend/theme-switcher.css b/app/src/frontend/theme-switcher.css
index f07f9d2c..7b8a0007 100644
--- a/app/src/frontend/theme-switcher.css
+++ b/app/src/frontend/theme-switcher.css
@@ -1,33 +1,20 @@
 .theme-switcher {
     z-index: 1000;
     position: absolute;
-    bottom: 55px;
+    top: 75px;
     right: 10px;
     float: right;
     background: white;
     border-radius: 4px;
 }
-
-@media (min-width: 380px){
-    .theme-switcher {
-        bottom: 40px;
-    }
-}
-@media (min-width: 1020px){
-    .theme-switcher {
-        bottom: 24px;
-    }
-}
 .theme-switcher .btn {
     margin: 0;
 }
-
 .theme-switcher.night .btn {
     color: #fff;
     background-color: #343a40;
     border-color: #343a40;
 }
-
 .theme-switcher.night .btn:hover {
     color: #343a40;
     background-color: transparent;