diff --git a/src/components/pages/gallery/SelectedFileOptions.tsx b/src/components/pages/gallery/SelectedFileOptions.tsx index 5f03ae805..ebf041aca 100644 --- a/src/components/pages/gallery/SelectedFileOptions.tsx +++ b/src/components/pages/gallery/SelectedFileOptions.tsx @@ -13,10 +13,18 @@ import MoveIcon from 'components/icons/MoveIcon'; import { COLLECTION_OPS_TYPE } from 'utils/collection'; import { ALL_SECTION, ARCHIVE_SECTION } from './Collections'; import UnArchive from 'components/icons/UnArchive'; +import { OverlayTrigger } from 'react-bootstrap'; +import { Collection } from 'services/collectionService'; interface Props { - addToCollectionHelper: (collectionName, collection) => void; - moveToCollectionHelper: (collectionName, collection) => void; + addToCollectionHelper: ( + collectionName: string, + collection: Collection + ) => void; + moveToCollectionHelper: ( + collectionName: string, + collection: Collection + ) => void; showCreateCollectionModal: (opsType: COLLECTION_OPS_TYPE) => () => void; setDialogMessage: SetDialogMessage; setCollectionSelectorAttributes: SetCollectionSelectorAttributes; @@ -34,6 +42,7 @@ const SelectionBar = styled(Navbar)` color: #fff; z-index: 1001; width: 100%; + padding: 0 16px; `; const SelectionContainer = styled.div` @@ -85,6 +94,14 @@ const SelectedFileOptions = ({ }); }; + const IconWithMessage = (props) => ( + {props.message}

}> + {props.children} +
+ ); + return ( @@ -96,27 +113,37 @@ const SelectedFileOptions = ({ {activeCollection === ARCHIVE_SECTION ? ( - - - + + + + + ) : ( <> {activeCollection === ALL_SECTION && ( - - - + + + + + )} {activeCollection !== ALL_SECTION && ( - - - + + + + + )} - - - - - - + + + + + + + + + + )} diff --git a/src/utils/strings/englishConstants.tsx b/src/utils/strings/englishConstants.tsx index ad576e533..a6e4d3eee 100644 --- a/src/utils/strings/englishConstants.tsx +++ b/src/utils/strings/englishConstants.tsx @@ -545,6 +545,9 @@ const englishConstants = { ARCHIVE: 'archive', ALL: 'all', MOVE_TO_COLLECTION: 'move to collection', + UNARCHIVE: 'un-archive', + MOVE: 'move', + ADD: 'add', }; export default englishConstants;