Web: Files: Templates: added icon for room template

packages/client/src/components/ItemIcon.js

@@ -90,6 +90,7 @@ const ItemIcon = ({
   color,
   isArchive,
   badgeUrl,
+  isTemplate,
 }) => {
   const isLoadedRoomIcon = !!logo?.medium;
   const showDefaultRoomIcon = !isLoadedRoomIcon && isRoom;
@@ -101,6 +102,7 @@ const ItemIcon = ({
           color={color}
           title={title}
           isArchive={isArchive}
+          isTemplate={isTemplate}
           showDefault={showDefaultRoomIcon}
           imgClassName="react-svg-icon"
           imgSrc={isRoom ? logo?.medium : icon}

packages/client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js

@@ -392,6 +392,7 @@ const SimpleFilesRow = (props) => {
       logo={item.logo}
       color={item.logo?.color}
       isArchive={item.isArchive}
+      isTemplate={item.isTemplate}
       badgeUrl={badgeUrl}
     />
   );

packages/client/src/pages/Home/Section/Body/TableView/TableRow.js

@@ -87,6 +87,7 @@ const FilesTableRow = (props) => {
       logo={item.logo}
       color={item.logo?.color}
       isArchive={item.isArchive}
+      isTemplate={item.isTemplate}
       badgeUrl={badgeUrl}
     />
   );

packages/client/src/pages/Home/Section/Body/TilesView/FileTile.js

@@ -109,6 +109,7 @@ const FileTile = (props) => {
       logo={item.logo}
       color={item.logo?.color}
       isArchive={item.isArchive}
+      isTemplate={item.isTemplate}
       badgeUrl={badgeUrl}
     />
   );

packages/shared/components/room-icon/index.tsx

@@ -27,10 +27,15 @@
 import React from "react";
 
 import styled, { css } from "styled-components";
+
+import TemplateRoomIcon from "PUBLIC_DIR/images/template-room-icon.react.svg?url";
+import { ReactSVG } from "react-svg";
+
 import { Base } from "../../themes";
 import { Text } from "../text";
 
 import { IconButton } from "../icon-button";
+import { classNames } from "../../utils";
 
 const StyledIcon = styled.div<{
   size: string;
@@ -100,6 +105,47 @@ const StyledIcon = styled.div<{
   }
 `;
 
+const StyledTemplateIcon = styled.div<{
+  size: string;
+  isArchive?: boolean;
+  color?: string;
+}>`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  height: ${(props) => props.size};
+  width: ${(props) => props.size};
+
+  .room-icon-svg {
+    position: absolute;
+
+    height: ${(props) => props.size};
+    width: ${(props) => props.size};
+
+    svg path {
+      fill: ${(props) =>
+        props.isArchive
+          ? props.theme.roomIcon.backgroundArchive
+          : `#${props.color}`};
+    }
+  }
+
+  .room-title {
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 16px;
+    color: ${({ isArchive, color, theme }) =>
+      isArchive ? theme.roomIcon.backgroundArchive : `#${color}`};
+    position: relative;
+  }
+
+  .room-image {
+    width: 24px;
+    height: 24px;
+  }
+`;
+
 StyledIcon.defaultProps = { theme: Base };
 
 // interface RoomIconProps {
@@ -117,6 +163,7 @@ StyledIcon.defaultProps = { theme: Base };
 type RoomIconDefault = {
   title: string;
   isArchive?: boolean;
+  isTemplate?: boolean;
   size?: string;
   radius?: string;
   showDefault: boolean;
@@ -156,6 +203,7 @@ const RoomIcon = ({
   badgeUrl,
   onBadgeClick,
   className,
+  isTemplate = false,
 }: RoomIconProps) => {
   const [correctImage, setCorrectImage] = React.useState(true);
 
@@ -183,6 +231,29 @@ const RoomIcon = ({
     prefetchImage();
   }, [prefetchImage]);
 
+  if (isTemplate) {
+    return (
+      <StyledTemplateIcon
+        size={size}
+        color={color}
+        isArchive={isArchive}
+        className={className}
+        data-testid="room-icon"
+      >
+        <ReactSVG className="room-icon-svg" src={TemplateRoomIcon} />
+        {correctImage ? (
+          <img
+            className={classNames([imgClassName, "room-image"])}
+            src={imgSrc}
+            alt="room icon"
+          />
+        ) : (
+          <Text className="room-title">{roomTitle}</Text>
+        )}
+      </StyledTemplateIcon>
+    );
+  }
+
   return (
     <StyledIcon
       color={color}

public/images/template-room-icon.react.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6 32C2.68629 32 0 29.3137 0 26V19C1.10457 19 2 19.8954 2 21V26C2 28.2091 3.79086 30 6 30H11C12.1046 30 13 30.8954 13 32H6ZM32 19C30.8954 19 30 19.8954 30 21V26C30 28.2091 28.2091 30 26 30H21C19.8954 30 19 30.8954 19 32H26C29.3137 32 32 29.3137 32 26V19ZM19 0C19 1.10457 19.8954 2 21 2H26C28.2091 2 30 3.79086 30 6V11C30 12.1046 30.8954 13 32 13V6C32 2.68629 29.3137 0 26 0H19ZM0 13C1.10457 13 2 12.1046 2 11V6C2 3.79086 3.79086 2 6 2H11C12.1046 2 13 1.10457 13 0H6C2.68629 0 0 2.68629 0 6V13Z" fill="#FF6680"/>
+</svg>