added hint text to all selection bar icon

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;
+    addToCollectionHelper: (
-    moveToCollectionHelper: (collectionName, collection) => void;
+        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) => (
+        <OverlayTrigger
+            placement="bottom"
+            overlay={<p style={{ zIndex: 1002 }}>{props.message}</p>}>
+            {props.children}
+        </OverlayTrigger>
+    );
+
     return (
         <SelectionBar>
             <SelectionContainer>
@@ -96,27 +113,37 @@ const SelectedFileOptions = ({
                 </div>
             </SelectionContainer>
             {activeCollection === ARCHIVE_SECTION ? (
+                <IconWithMessage message={constants.UNARCHIVE}>
                     <IconButton onClick={unArchiveFilesHelper}>
                         <UnArchive />
                     </IconButton>
+                </IconWithMessage>
             ) : (
                 <>
                     {activeCollection === ALL_SECTION && (
+                        <IconWithMessage message={constants.ARCHIVE}>
                             <IconButton onClick={archiveFilesHelper}>
                                 <Archive />
                             </IconButton>
+                        </IconWithMessage>
                     )}
                     {activeCollection !== ALL_SECTION && (
+                        <IconWithMessage message={constants.MOVE}>
                             <IconButton onClick={moveToCollection}>
                                 <MoveIcon />
                             </IconButton>
+                        </IconWithMessage>
                     )}
+                    <IconWithMessage message={constants.ADD}>
                         <IconButton onClick={addToCollection}>
                             <AddIcon />
                         </IconButton>
+                    </IconWithMessage>
+                    <IconWithMessage message={constants.DELETE}>
                         <IconButton onClick={deleteHandler}>
                             <DeleteIcon />
                         </IconButton>
+                    </IconWithMessage>
                 </>
             )}
         </SelectionBar>

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;