Feature/misc ui fixes (#449)

* Re-style category links, remove More button

* Fix colour, order and text of categories

* Increase legend max height

app/src/frontend/building/categories.css

@@ -26,7 +26,9 @@
   text-decoration: none;
 }
 .data-category-list .category-link {
-  display: block;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   padding: 0.1em;
   width: 100%;
   height: 100%;
@@ -36,32 +38,14 @@
 .data-category-list .category-link:focus {
   color: #222;
 }
-.data-category-list .help {
-  position: absolute;
-  bottom: 0.75rem;
-  right: 0.75rem;
-  color: #222;
-}
-.data-category-list .help:hover,
-.data-category-list .help:active,
-.data-category-list .help:focus {
-  color: #000;
-  background-color: rgba(37, 10, 10, 0.3);
-}
-
-.data-category-list .help::before {
-  content: "\f05a";
-  font-family: FontAwesome;
-  margin-right: 0.25rem;
-}
 
 .data-category-list .category {
   text-align: center;
-  font-size: 1.5em;
+  font-size: 1.4em;
-  margin: 1.4em 0 0.5em;
+  margin: 0 0 0.5em;
 }
 .data-category-list .description {
   text-align: center;
-  font-size: 1em;
+  font-size: 0.9em;
-  margin: 0 0 1em;
+  margin: 0;
 }

app/src/frontend/building/categories.tsx

@@ -35,7 +35,7 @@ const Categories = (props) => (
         />
         <Category
             title="Age"
-            desc="Age and history"
+            desc="Age & history"
             slug="age"
             help="https://pages.colouring.london/age"
             inactive={false}
@@ -44,7 +44,7 @@ const Categories = (props) => (
         />
         <Category
             title="Size &amp; Shape"
-            desc="Form and scale"
+            desc="Form & scale"
             slug="size"
             help="https://pages.colouring.london/shapeandsize"
             inactive={false}
@@ -53,22 +53,13 @@ const Categories = (props) => (
         />
         <Category
             title="Construction"
-            desc="Methods and materials"
+            desc="Methods & materials"
             slug="construction"
             help="https://pages.colouring.london/construction"
             inactive={true}
             mode={props.mode}
             building_id={props.building_id}
         />
-        <Category
-            title="Team"
-            desc="Builder and designer"
-            slug="team"
-            help="https://pages.colouring.london/team"
-            inactive={true}
-            mode={props.mode}
-            building_id={props.building_id}
-        />
         <Category
             title="Streetscape"
             desc="Environment"
@@ -78,6 +69,15 @@ const Categories = (props) => (
             mode={props.mode}
             building_id={props.building_id}
         />
+        <Category
+            title="Team"
+            desc="Builder & designer"
+            slug="team"
+            help="https://pages.colouring.london/team"
+            inactive={true}
+            mode={props.mode}
+            building_id={props.building_id}
+        />
         <Category
             title="Sustainability"
             desc="Performance"
@@ -136,12 +136,11 @@ const Category = (props) => {
                     'Coming soon… Click more info for details.'
                     : 'View/Edit Map'
             }>
-            <h3 className="category">{props.title}</h3>
+                <div className="category-title-container">
-            <p className="description">{props.desc}</p>
+                    <h3 className="category">{props.title}</h3>
+                    <p className="description">{props.desc}</p>
+                </div>
         </NavLink>
-        <a className="icon-button help" href={props.help}>
-            More
-        </a>
     </li>
     );
 }

app/src/frontend/map/legend.css

@@ -8,7 +8,8 @@
     z-index: 1000;
 
     min-width: 12rem;
-    max-height: 50%;
+    max-height: 60%;
+    
     display: flex;
     flex-direction: column;
 

app/src/frontend/styles/colours.css

@@ -74,13 +74,13 @@
 .background-construction {
     background-color: #aa7fa7;
 }
-.background-team {
+.background-streetscape {
     background-color: #6f879c;
 }
-.background-sustainability {
+.background-team {
     background-color: #5ec232;
 }
-.background-streetscape {
+.background-sustainability {
     background-color: #6dbb8b;
 }
 .background-community {