Legend size and spacing

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;
+}

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>
     );
 }

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>
         );
     }

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;