Fixes viktorstrate/photoview#6

- Fixed issue that prevented favorites toggle to switch on on the Photos page
- The favorites toggle is moved on left

ui/src/Pages/AlbumPage/AlbumPage.js

@@ -52,21 +52,21 @@ function AlbumPage({ match }) {
   )
 
   const toggleFavorites = refetch => {
-    const onlyFavorites = !onlyFavorites
+    const newState = !onlyFavorites
     if (
-      (refetchNeededAll && !onlyFavorites) ||
+      (refetchNeededAll && !newState) ||
-      (refetchNeededFavorites && onlyFavorites)
+      (refetchNeededFavorites && newState)
     ) {
-      refetch({ id: albumId, onlyFavorites: onlyFavorites }).then(() => {
+      refetch({ id: albumId, onlyFavorites: newState }).then(() => {
         if (onlyFavorites) {
           refetchNeededFavorites = false
         } else {
           refetchNeededAll = false
         }
-        setOnlyFavorites(onlyFavorites)
+        setOnlyFavorites(newState)
       })
     } else {
-      setOnlyFavorites(onlyFavorites)
+      setOnlyFavorites(newState)
     }
     history.replaceState(
       {},

ui/src/Pages/PhotosPage/PhotosPage.js

@@ -44,8 +44,7 @@ const photoQuery = gql`
 `
 
 const FavoritesCheckbox = styled(Checkbox)`
-  float: right;
+  margin: 0.5rem 0 0 0;
-  margin: 0.5rem 0 0 1rem;
 `
 
 class PhotosPage extends Component {

ui/src/components/AlbumTitle.js

@@ -34,9 +34,7 @@ const StyledIcon = styled(Icon)`
 `
 
 const FavoritesCheckbox = styled(Checkbox)`
-  float: right;
+  margin-bottom: 16px;
-  padding-left: 10px;
-  margin-top: 0.5rem;
 `
 
 const SettingsIcon = props => {
@@ -103,6 +101,7 @@ const AlbumTitle = ({
   }
 
   return (
+    <>
       <Header>
         <Breadcrumb>{breadcrumbSections}</Breadcrumb>
         {title}
@@ -113,6 +112,7 @@ const AlbumTitle = ({
             }}
           />
         )}
+      </Header>
       {authToken() && showFavoritesToggle && (
         <FavoritesCheckbox
           toggle
@@ -122,7 +122,7 @@ const AlbumTitle = ({
           onChange={setOnlyFavorites}
         />
       )}
-    </Header>
+    </>
   )
 }