Include view icon link

app/src/frontend/building/container-header.tsx

@@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 import { Link, NavLink } from 'react-router-dom';
 
-import { BackIcon, EditIcon }from '../components/icons';
+import { BackIcon, EditIcon, ViewIcon }from '../components/icons';
 
 
 const ContainerHeader: React.FunctionComponent<any> = (props) => (
@@ -46,13 +46,21 @@ const ContainerHeader: React.FunctionComponent<any> = (props) => (
             }
             {
                 !props.inactive && !props.copy.copying?
-                    <NavLink
-                        className="icon-button edit"
-                        title="Edit data"
-                        to={`/edit/${props.cat}/building/${props.building.building_id}.html`}>
-                        Edit
-                        <EditIcon />
-                    </NavLink>
+                    (props.mode === 'edit')?
+                        <NavLink
+                            className="icon-button view"
+                            title="View data"
+                            to={`/view/${props.cat}/building/${props.building.building_id}.html`}>
+                            View
+                            <ViewIcon />
+                        </NavLink>
+                        : <NavLink
+                            className="icon-button edit"
+                            title="Edit data"
+                            to={`/edit/${props.cat}/building/${props.building.building_id}.html`}>
+                            Edit
+                            <EditIcon />
+                        </NavLink>
                 : null
             }
         </nav>

app/src/frontend/building/sidebar.css

@@ -114,10 +114,14 @@
 }
 .svg-inline--fa.fa-w-11,
 .svg-inline--fa.fa-w-16,
+.svg-inline--fa.fa-w-18,
 .svg-inline--fa.fa-w-8 {
     width: 30px;
 }
-.icon-button.edit:hover svg {
+.icon-button.edit:active svg,
+.icon-button.edit:hover svg,
+.icon-button.view:active svg,
+.icon-button.view:hover svg {
     color: rgb(11, 225, 225);
 }
 .icon-button.help,

app/src/frontend/components/icons.tsx

@@ -5,7 +5,7 @@ import React from 'react'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faQuestionCircle, faPaintBrush, faInfoCircle, faTimes, faCheck, faCheckDouble,
-    faAngleLeft, faCaretDown, faSearch } from '@fortawesome/free-solid-svg-icons'
+    faAngleLeft, faCaretDown, faSearch, faEye } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
     faQuestionCircle,
@@ -16,7 +16,8 @@ library.add(
     faCheckDouble,
     faAngleLeft,
     faCaretDown,
-    faSearch
+    faSearch,
+    faEye
 );
 
 const HelpIcon = () => (
@@ -31,6 +32,10 @@ const EditIcon = () => (
     <FontAwesomeIcon icon="paint-brush" />
 );
 
+const ViewIcon = () => (
+    <FontAwesomeIcon icon="eye" />
+);
+
 const CloseIcon = () => (
     <FontAwesomeIcon icon="times" />
 );
@@ -55,4 +60,15 @@ const SearchIcon = () => (
     <FontAwesomeIcon icon="search" />
 );
 
-export { HelpIcon, InfoIcon, EditIcon, CloseIcon, SaveIcon, SaveDoneIcon, BackIcon, DownIcon, SearchIcon };
+export {
+    HelpIcon,
+    InfoIcon,
+    EditIcon,
+    ViewIcon,
+    CloseIcon,
+    SaveIcon,
+    SaveDoneIcon,
+    BackIcon,
+    DownIcon,
+    SearchIcon
+};