Web: Files: Templates: fixed styles for Tile view

packages/client/src/pages/Home/Section/Body/TilesView/sub-components/TemplatesTile.js

@@ -34,6 +34,11 @@ import { Text } from "@docspace/shared/components/text";
 import { Loader } from "@docspace/shared/components/loader";
 import { Base } from "@docspace/shared/themes";
 
+const checkedStyle = css`
+  background: ${({ theme }) =>
+    theme.filesSection.tilesView.tile.roomsCheckedColor};
+`;
+
 const StyledTemplatesTile = styled.div`
   display: contents;
 
@@ -90,6 +95,23 @@ const StyledTemplatesTile = styled.div`
       }
     }
   }
+
+  ${(props) =>
+    !props.isEdit &&
+    (props.checked || props.isActive) &&
+    css`
+      .room-tile-template_top-content,
+      .room-tile-template_bottom-content {
+        ${checkedStyle}
+      }
+    `}
+
+  :hover {
+    .room-tile-template_top-content,
+    .room-tile-template_bottom-content {
+      ${checkedStyle}
+    }
+  }
 `;
 
 const StyledContent = styled.div`
@@ -188,11 +210,12 @@ const TemplatesTile = (props) => {
     FilesTileContent,
     badges,
     contextMenuTitle,
+    isActive,
   } = props;
   const { isFolder, isRoom, id, fileExst, createdBy } = item;
 
   return (
-    <StyledTemplatesTile>
+    <StyledTemplatesTile checked={checked} isActive={isActive} isEdit={isEdit}>
       <div className="room-tile-template_top-content">
         {renderElement && !(!fileExst && id === -1) && !isEdit && (
           <>