Make faces clickable

ui/src/Layout.js

@@ -117,9 +117,9 @@ export const SideMenu = () => {
           <SideButtonLabel>Places</SideButtonLabel>
         </SideButton>
       ) : null}
-      <SideButton to="/faces" exact>
+      <SideButton to="/people" exact>
         <Icon name="user outline" />
-        <SideButtonLabel>Faces</SideButtonLabel>
+        <SideButtonLabel>People</SideButtonLabel>
       </SideButton>
       {isAdmin ? (
         <SideButton to="/settings" exact>

ui/src/Pages/PeoplePage/PeoplePage.js

@@ -49,7 +49,7 @@ const FaceImage = styled(ProtectedImage)`
 `
 
 const FaceGroup = ({ group }) => (
-  <Link to={`/faces/${group.id}`}>
+  <Link to={`/people/${group.id}`}>
     <CircleImageWrapper>
       <FaceImage src={group.imageFaces[0].media.thumbnail.url} />
     </CircleImageWrapper>
@@ -65,14 +65,14 @@ const FaceGroupsWrapper = styled.div`
   flex-wrap: wrap;
 `
 
-const FacesPage = ({ match }) => {
+const PeoplePage = ({ match }) => {
   const { data, error } = useQuery(MY_FACES_QUERY)
 
   if (error) {
     return error.message
   }
 
-  const faceGroup = match.params.face
+  const faceGroup = match.params.person
   if (faceGroup) {
     return (
       <Layout>
@@ -91,14 +91,14 @@ const FacesPage = ({ match }) => {
   }
 
   return (
-    <Layout>
+    <Layout title={'People'}>
       <FaceGroupsWrapper>{faces}</FaceGroupsWrapper>
     </Layout>
   )
 }
 
-FacesPage.propTypes = {
+PeoplePage.propTypes = {
   match: PropTypes.object.isRequired,
 }
 
-export default FacesPage
+export default PeoplePage

ui/src/Pages/PlacesPage/PlacesPage.js

@@ -112,7 +112,7 @@ const MapPage = () => {
   }
 
   return (
-    <Layout>
+    <Layout title="Places">
       <MapWrapper>
         <MapContainer ref={mapContainer}></MapContainer>
       </MapWrapper>

ui/src/Pages/SettingsPage/SettingsPage.js

@@ -25,7 +25,7 @@ export const InputLabelDescription = styled.p`
 
 const SettingsPage = () => {
   return (
-    <Layout>
+    <Layout title="Settings">
       <ScannerSection />
       <UsersTable />
     </Layout>

ui/src/components/routes/Routes.js

@@ -14,7 +14,7 @@ const AlbumPage = React.lazy(() => import('../../Pages/AlbumPage/AlbumPage'))
 const PhotosPage = React.lazy(() => import('../../Pages/PhotosPage/PhotosPage'))
 const PlacesPage = React.lazy(() => import('../../Pages/PlacesPage/PlacesPage'))
 const SharePage = React.lazy(() => import('../../Pages/SharePage/SharePage'))
-const FacesPage = React.lazy(() => import('../../Pages/FacesPage/FacesPage'))
+const PeoplePage = React.lazy(() => import('../../Pages/PeoplePage/PeoplePage'))
 
 const LoginPage = React.lazy(() => import('../../Pages/LoginPage/LoginPage'))
 const InitialSetupPage = React.lazy(() =>
@@ -48,7 +48,7 @@ const Routes = () => {
         <AuthorizedRoute path="/album/:id" component={AlbumPage} />
         <AuthorizedRoute path="/photos" component={PhotosPage} />
         <AuthorizedRoute path="/places" component={PlacesPage} />
-        <AuthorizedRoute path="/faces/:face?" component={FacesPage} />
+        <AuthorizedRoute path="/people/:person?" component={PeoplePage} />
         <AuthorizedRoute admin path="/settings" component={SettingsPage} />
         <Route path="/" exact render={() => <Redirect to="/photos" />} />
         <Route render={() => <div>Page not found</div>} />