diff --git a/packages/client/src/components/ItemIcon.js b/packages/client/src/components/ItemIcon.js
index 2046caa1c9..dd5e316c5a 100644
--- a/packages/client/src/components/ItemIcon.js
+++ b/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}
diff --git a/packages/client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js b/packages/client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js
index 5f98672a6c..483d516965 100644
--- a/packages/client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js
+++ b/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}
/>
);
diff --git a/packages/client/src/pages/Home/Section/Body/TableView/TableRow.js b/packages/client/src/pages/Home/Section/Body/TableView/TableRow.js
index e102620b20..96bfeb05b6 100644
--- a/packages/client/src/pages/Home/Section/Body/TableView/TableRow.js
+++ b/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}
/>
);
diff --git a/packages/client/src/pages/Home/Section/Body/TilesView/FileTile.js b/packages/client/src/pages/Home/Section/Body/TilesView/FileTile.js
index 57dec29391..41fd37548e 100644
--- a/packages/client/src/pages/Home/Section/Body/TilesView/FileTile.js
+++ b/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}
/>
);
diff --git a/packages/shared/components/room-icon/index.tsx b/packages/shared/components/room-icon/index.tsx
index e2f5032391..d3a07a534d 100644
--- a/packages/shared/components/room-icon/index.tsx
+++ b/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 (
+
+
+ {correctImage ? (
+
+ ) : (
+ {roomTitle}
+ )}
+
+ );
+ }
+
return (
+
+