Add text to icon-buttons for clarity

[Closes #94]

app/src/frontend/building-edit.js

@@ -113,8 +113,8 @@ class EditForm extends Component {
                     <nav className="icon-buttons">
                     {
                         this.props.help?
-                        <a className="icon-button help" title="Find out more" href={this.props.help}
-                            target="_blank" rel="noopener noreferrer">
+                        <a className="icon-button help" title="Find out more" href={this.props.help}>
+                            Help
                             <HelpIcon />
                         </a>
                         : null
@@ -122,15 +122,17 @@ class EditForm extends Component {
                         <NavLink className="icon-button save" title="Save Changes"
                             onClick={this.handleSubmit}
                             to={`/building/${this.props.building_id}.html?cat=${this.props.slug}`}>
+                            Save
                             <SaveIcon />
                         </NavLink>
-                        <NavLink className="icon-button close" title="Cancel"
+                        <NavLink className="icon-button close-edit" title="Cancel"
                             to={`/building/${this.props.building_id}.html?cat=${this.props.slug}`}>
+                            Cancel
                             <CloseIcon />
                         </NavLink>
                     </nav>
                 </header>
-                { this.props.intro? <p className="data-intro">{ this.props.intro }</p> : null }
+
                 <form action={`/building/${this.props.building_id}.html?cat=${this.props.slug}`}
                     method="GET" onSubmit={this.handleSubmit}>
                     <ErrorBox msg={this.state.error} />
@@ -161,21 +163,18 @@ class EditForm extends Component {
                             return el
                         })
                     }
-                    {
-                        (this.props.inactive)?
-                        null : (
-                            <div className="buttons-container">
-                                <Link to={`/building/${this.props.building_id}.html?cat=${this.props.slug}`}
-                                    className="btn btn-secondary">Cancel</Link>
-                                <button type="submit" className="btn btn-primary">Save</button>
-                            </div>
-                        )
-                    }
+
+                    <p className="alert alert-info">
+                        Colouring may take a few seconds - try zooming the map or
+                        hitting refresh after saving (we're working on making this
+                        smoother).</p>
+
+                    <div className="buttons-container">
+                        <Link to={`/building/${this.props.building_id}.html?cat=${this.props.slug}`}
+                            className="btn btn-secondary">Cancel</Link>
+                        <button type="submit" className="btn btn-primary">Save</button>
+                    </div>
                 </form>
-                <p className="data-intro">
-                    Colouring may take a few seconds - try zooming the map or
-                    hitting refresh after saving (we're working on making this
-                    smoother).</p>
             </section>
         )
     }

app/src/frontend/building-view.js

@@ -62,7 +62,8 @@ const DataSection = (props) => {
                 <nav className="icon-buttons">
                 {
                     props.help?
-                    <a className="icon-button help" title="Find out more" href={props.help} target="_blank" rel="noopener noreferrer">
+                    <a className="icon-button help" title="Find out more" href={props.help}>
+                        Help
                         <HelpIcon />
                     </a>
                     : null
@@ -71,6 +72,7 @@ const DataSection = (props) => {
                     !props.inactive?
                     <NavLink className="icon-button edit" title="Edit data"
                         to={`/building/${props.building_id}/edit.html?cat=${props.slug}`}>
+                        Edit
                         <EditIcon />
                     </NavLink>
                     : null

app/src/frontend/sidebar.css

@@ -40,11 +40,11 @@
     .info-container {
         top: 0;
         left: 0;
-        width: 20rem;
+        width: 25rem;
         bottom: 0;
     }
     .leaflet-right{
-        left: 20rem;
+        left: 25rem;
     }
     #root .leaflet-container .leaflet-control-attribution {
         height: auto;
@@ -136,31 +136,44 @@
  */
 .icon-button {
     display: inline-block;
-    width: 1.8rem;
-    height: 1.8rem;
-    padding: 0;
+    background-color: transparent;
+    font-size: 0.8333rem;
+
     outline: none;
     border: none;
-    border-radius: 0.9rem;
-    margin: 0 0.05rem;
-
-    background-color: transparent;
-    transition: background-color 0.2s;
 
     color: #222;
     vertical-align: top;
-    text-align: center;
+}
+.icon-button:hover {
+    color: #222;
+    text-decoration: none;
+}
+
+.icon-button.tooltip-hint {
+    padding: 0;
 }
 .icon-button svg {
-    transition: color 0.2s;
+    background-color: transparent;
+    transition: background-color color 0.2s;
+    display: inline-block;
+
     color: #222;
     margin-top: 2px;
-    width: 1rem;
-    height: 1rem;
+    width: 1.8rem;
+    height: 1.8rem;
+    padding: 0.4rem;
+    border-radius: 0.9rem;
+    margin: 0 0.05rem;
     display: inline-block;
     vertical-align: middle;
 }
-.icon-button:hover {
+.svg-inline--fa.fa-w-11,
+.svg-inline--fa.fa-w-16,
+.svg-inline--fa.fa-w-8 {
+    width: 1.8rem;
+}
+.icon-button:hover svg {
     background-color: #fff;
 }
 .icon-button.edit:hover svg {
@@ -173,10 +186,10 @@
 .icon-button.tooltip-hint:hover svg {
     color: rgb(255, 11, 245);
 }
-.icon-button.close svg {
+.icon-button.close-edit svg {
     margin-top: -1px;
 }
-.icon-button.close:hover svg {
+.icon-button.close-edit:hover svg {
     color: rgb(255, 72, 11)
 }
 .icon-button.save:hover svg {
@@ -187,6 +200,16 @@
     margin-top: -2px;
 }
 
+/* Back button */
+.icon-button.back,
+.icon-button.back:hover {
+    padding: 0;
+    background-color: transparent;
+}
+.icon-button.back:hover svg {
+    background-color: transparent;
+}
+
 /**
  * Data list sections
  */
@@ -207,7 +230,7 @@
 .data-list {
     margin: 0;
     padding-left: 0.75rem;
-    padding-right: 0.5rem;
+    padding-right: 0.75rem;
 }
 .data-section form {
     padding: 0 0.75rem;

app/src/frontend/tooltip.css

@@ -4,11 +4,10 @@
 .tooltip-wrap {
     float: right;
     position: relative;
-    top: -5px;
+    top: -3px;
+    right: -4px;
 }
 .tooltip-wrap .icon-button svg {
-    width: 1rem;
-    height: 1rem;
     margin-top: -2px;
 }
 .tooltip {

app/src/frontend/tooltip.js

@@ -22,8 +22,10 @@ class Tooltip extends Component {
     render() {
         return (
             <div className="tooltip-wrap">
-                <button className={(this.state.active? "active ": "") + "tooltip-hint icon-button"} title={this.props.text}
+                <button className={(this.state.active? "active ": "") + "tooltip-hint icon-button"}
+                        title={this.props.text}
                         onClick={this.handleClick}>
+                    Hint
                     <InfoIcon />
                 </button>
                 {