From fe8e6f77374d295f5600b9bc2ac69fc43aa32c19 Mon Sep 17 00:00:00 2001
From: Tom Russell <tomalrussell@gmail.com>
Date: Mon, 1 Oct 2018 17:20:25 +0100
Subject: [PATCH] Add back buttons to sidebar header

---
 app/src/frontend/building-edit.js |  8 ++++----
 app/src/frontend/building-view.js |  6 +++---
 app/src/frontend/sidebar.css      | 11 +++++++++++
 app/src/frontend/sidebar.js       | 13 ++++++++++++-
 app/src/frontend/tooltip.js       |  4 ++--
 5 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/app/src/frontend/building-edit.js b/app/src/frontend/building-edit.js
index 737b9c23..048e61e6 100644
--- a/app/src/frontend/building-edit.js
+++ b/app/src/frontend/building-edit.js
@@ -59,7 +59,7 @@ class BuildingEdit extends Component {
         }
         if (!this.props.building_id){
             return (
-                <Sidebar title="Building Not Found">
+                <Sidebar title="Building Not Found" back="/map/date_year.html">
                     <InfoBox msg="We can't find that one anywhere - try the map again?" />
                     <div className="buttons-container">
                         <Link to="/map/date_year.html" className="btn btn-secondary">Back to maps</Link>
@@ -68,10 +68,10 @@ class BuildingEdit extends Component {
             );
         }
         return (
-            <Sidebar title={`Edit Building`}>
+            <Sidebar title={`Edit Building`} back={`/building/${this.props.building_id}.html`}>
                 {
-                    CONFIG.map((props) => {
-                        return <EditForm {...props} {...this.props} key={props.slug} />
+                    CONFIG.map((conf_props) => {
+                        return <EditForm {...conf_props} {...this.props} key={conf_props.slug} />
                     })
                 }
             </Sidebar>
diff --git a/app/src/frontend/building-view.js b/app/src/frontend/building-view.js
index 2e2eb45c..b8365a5e 100644
--- a/app/src/frontend/building-view.js
+++ b/app/src/frontend/building-view.js
@@ -4,7 +4,7 @@ import { Link, NavLink } from 'react-router-dom';
 import Sidebar from './sidebar';
 import Tooltip from './tooltip';
 import InfoBox from './info-box';
-import { InfoIcon, EditIcon } from './icons';
+import { HelpIcon, EditIcon } from './icons';
 
 
 const DataSection = function(props){
@@ -18,7 +18,7 @@ const DataSection = function(props){
                 {
                     props.helpLink?
                     <a className="icon-button help" title="Find out more" href={props.helpLink} target="_blank" rel="noopener noreferrer">
-                        <InfoIcon />
+                        <HelpIcon />
                     </a>
                     : null
                 }
@@ -55,7 +55,7 @@ const BuildingView = function(props){
     }
     const hash = (props.location && props.location.hash)? props.location.hash.replace('#', ''): undefined;
     return (
-        <Sidebar title={`View Building`}>
+        <Sidebar title={`View Building`} back="/map/date_year.html">
             <DataSection title="Location" slug="location" hash={hash}
                          helpLink="https://pollyhudson.wixsite.com/colouringlondon/location">
                 <p className="data-intro">
diff --git a/app/src/frontend/sidebar.css b/app/src/frontend/sidebar.css
index 5ef10c85..4ace48cb 100644
--- a/app/src/frontend/sidebar.css
+++ b/app/src/frontend/sidebar.css
@@ -47,3 +47,14 @@
         height: auto;
     }
 }
+
+.sidebar-header .h2 {
+    display: inline-block;
+}
+.sidebar-header .icon-button {
+    margin-left: 0.25rem;
+    margin-top: 0.4rem;
+}
+.sidebar-header .icon-button:hover {
+    background-color: #eee;
+}
diff --git a/app/src/frontend/sidebar.js b/app/src/frontend/sidebar.js
index 1c85f966..df4e6bb1 100644
--- a/app/src/frontend/sidebar.js
+++ b/app/src/frontend/sidebar.js
@@ -1,10 +1,21 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 
 import './sidebar.css';
+import { BackIcon } from './icons';
 
 const Sidebar = (props) => (
     <div id="legend" className="info-container">
-        <h2 className="h2">{props.title}</h2>
+        <header className="sidebar-header">
+            {
+                props.back?
+                    <Link className="icon-button back" to={props.back}>
+                        <BackIcon />
+                    </Link>
+                : null
+            }
+            <h2 className="h2">{props.title}</h2>
+        </header>
         {props.children}
     </div>
 );
diff --git a/app/src/frontend/tooltip.js b/app/src/frontend/tooltip.js
index b9b99949..4ca951ad 100644
--- a/app/src/frontend/tooltip.js
+++ b/app/src/frontend/tooltip.js
@@ -1,7 +1,7 @@
 import React, { Component, Fragment } from 'react';
 
 import './tooltip.css';
-import { HelpIcon } from './icons';
+import { InfoIcon } from './icons';
 
 class Tooltip extends Component {
     constructor(props) {
@@ -25,7 +25,7 @@ class Tooltip extends Component {
             <div className="tooltip-wrap">
                 <button className="tooltip-hint icon-button" title={this.props.text}
                         onClick={this.handleClick}>
-                    <HelpIcon />
+                    <InfoIcon />
                 </button>
                 {
                     this.state.active?