Web: Files: fixed tile styles

products/ASC.Files/Client/src/components/pages/Home/Section/Body/BadgesFileTile.js

@@ -6,6 +6,7 @@ import { canWebEdit, canConvert } from '../../../../../store/files/selectors';
 const StyledBadgesFileTile = styled.div`
     display: flex;
     align-self: start;
+    position: relative;
 `;
 
 class BadgesFileTile extends React.PureComponent  {

products/ASC.Files/Client/src/components/pages/Home/Section/Body/FilesTileContent.js

@@ -216,14 +216,12 @@ class FilesTileContent extends React.PureComponent {
 
   render() {
     
-    const { t, item, fileAction, isLoading, isTrashFolder, onLoading, folders } = this.props;
+    const { item, fileAction, isLoading, isTrashFolder, onLoading, folders } = this.props;
     const { itemTitle, editingId, showNewFilesPanel, newItems, newFolderId } = this.state;
     const {
       updated,
       fileExst,
-      fileStatus,
-      id,
-      versionGroup
+      id
     } = item;
 
 
@@ -233,6 +231,10 @@ class FilesTileContent extends React.PureComponent {
       height: auto;
       max-width: 100%;
       align-self: flex-end;
+
+      a{
+        word-break: break-word;
+      }
     }
 
     .mainIcons{

products/ASC.Files/Client/src/components/pages/Home/Section/Body/Tile.js

@@ -32,6 +32,17 @@ const StyledFileTileTop = styled.div`
   background-color:#F8F9F9;
   padding: 13px;
   height: 157px;
+  position: relative;
+
+  .thumbnailImage{
+    position: absolute;
+    bottom: 0;
+    left:0;
+    right:0;
+    display: block;
+    margin: auto;
+    z-index: 0;
+  }
 `;
 
 const StyledFileTileBottom = styled.div`
@@ -154,6 +165,9 @@ class Tile extends React.Component {
           :
             <>
               <StyledFileTileTop>
+                {item.thumbnail 
+                  ? <img className="thumbnailImage" src={item.thumbnail} alt="thumbnail"/>
+                  : <img className="thumbnailImage" src="images/example-thumbnail.png" alt="thumbnail"/>}
                 {renderCheckbox && (
                   <StyledCheckbox>
                     <Checkbox isChecked={checked} isIndeterminate={indeterminate} onChange={changeCheckbox} />