Web:Fix room icon.

packages/client/src/components/FilesSelector/helpers/useRoomsHelper.ts

@@ -60,6 +60,7 @@ export const convertRoomsToItems = (rooms: any) => {
       rootFolderType,
       isFolder: true,
       roomType,
+      color: logo.color,
     };
   });
 

packages/client/src/components/ItemIcon.js

@@ -4,7 +4,7 @@ import { inject, observer } from "mobx-react";
 import styled, { css } from "styled-components";
 import Base from "@docspace/components/themes/base";
 import NoUserSelect from "@docspace/components/utils/commonStyles";
-import RoomIcon from "./RoomIcon";
+import RoomIcon from "@docspace/components/room-icon";
 
 const StyledIcon = styled.img`
   ${NoUserSelect}

packages/client/src/components/RoomSelector/index.js

@@ -41,8 +41,9 @@ const convertToItems = (folders) => {
     const { id, title, roomType, logo } = folder;
 
     const icon = logo.medium ? logo.medium : getRoomLogo(roomType);
+    const color = logo.color;
 
-    return { id, label: title, icon };
+    return { id, label: title, icon, color };
   });
 
   return items;

packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/FilesItemTitle.js

@@ -6,7 +6,7 @@ import IconButton from "@docspace/components/icon-button";
 import Text from "@docspace/components/text";
 import ItemContextOptions from "./ItemContextOptions";
 import { StyledTitle } from "../../styles/common";
-import RoomIcon from "@docspace/client/src/components/RoomIcon";
+import RoomIcon from "@docspace/components/room-icon";
 
 import { RoomsType, ShareAccessRights } from "@docspace/common/constants";
 

packages/client/src/pages/Home/InfoPanel/Body/views/Details/index.js

@@ -9,7 +9,7 @@ import Text from "@docspace/components/text";
 import DetailsHelper from "../../helpers/DetailsHelper.js";
 import { StyledNoThumbnail, StyledThumbnail } from "../../styles/details.js";
 import { StyledProperties, StyledSubtitle } from "../../styles/common.js";
-import RoomIcon from "@docspace/client/src/components/RoomIcon";
+import RoomIcon from "@docspace/components/room-icon";
 const Details = ({
   t,
   selection,

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

@@ -641,6 +641,7 @@ class Tile extends React.PureComponent {
     const contextMenuHeader = {
       icon: children[0].props.item.icon,
       title: children[0].props.item.title,
+      color: children[0].props.item.logo?.color,
     };
 
     const title = item.isFolder

packages/components/context-menu/index.js

@@ -20,7 +20,7 @@ import Text from "../text";
 import Avatar from "../avatar";
 import IconButton from "../icon-button";
 import ArrowLeftReactUrl from "PUBLIC_DIR/images/arrow-left.react.svg?url";
-
+import RoomIcon from "@docspace/components/room-icon";
 class ContextMenu extends Component {
   constructor(props) {
     super(props);
@@ -125,7 +125,9 @@ class ContextMenu extends Component {
   position = (event) => {
     if (event) {
       const rects = this.props.containerRef?.current.getBoundingClientRect();
-      let left = rects ? rects.left - this.props.leftOffset - this.props.rightOffset : event.pageX + 1;
+      let left = rects
+        ? rects.left - this.props.leftOffset - this.props.rightOffset
+        : event.pageX + 1;
       let top = rects ? rects.top : event.pageY + 1;
       let width = this.menuRef.current.offsetParent
         ? this.menuRef.current.offsetWidth
@@ -322,6 +324,7 @@ class ContextMenu extends Component {
     const isAvatarExist = this.props.header?.avatar;
 
     const withHeader = !!this.props.header?.title;
+    const defaultIcon = !!this.props.header?.color;
 
     return (
       <>
@@ -363,11 +366,18 @@ class ContextMenu extends Component {
                       />
                     ) : (
                       <div className="icon-wrapper">
-                        <img
-                          src={this.props.header.icon}
-                          className="drop-down-item_icon"
-                          alt="drop-down_icon"
-                        />
+                        {defaultIcon ? (
+                          <RoomIcon
+                            color={this.props.header.color}
+                            title={this.props.header.title}
+                          />
+                        ) : (
+                          <img
+                            src={this.props.header.icon}
+                            className="drop-down-item_icon"
+                            alt="drop-down_icon"
+                          />
+                        )}
                       </div>
                     ))}
                   {isAvatarExist && (

packages/components/room-icon/index.js

@@ -41,11 +41,12 @@ StyledIcon.defaultProps = { theme: Base };
 
 const RoomIcon = ({
   title,
-  isArchive,
+  isArchive = false,
   color,
   size = "32px",
   radius = "6px",
 }) => {
+  console.log("title", title);
   const titleWithoutSpaces = title.replace(/\s+/g, " ").trim();
   const indexAfterLastSpace = titleWithoutSpaces.lastIndexOf(" ");
   const secondCharacter =

packages/components/row/index.js

@@ -93,6 +93,7 @@ class Row extends React.Component {
         title: children.props.item.title
           ? children.props.item.title
           : children.props.item.displayName,
+        color: children.props.item.logo?.color,
       };
     }
 

packages/components/selector/sub-components/Item/Item.types.ts

@@ -8,6 +8,7 @@ export type Item = {
   isSelected?: boolean;
   email?: string;
   isDisabled?: boolean;
+  color?: string;
 };
 
 export type Data = {

packages/components/selector/sub-components/Item/index.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import Avatar from "../../../avatar";
 import Text from "../../../text";
 import Checkbox from "../../../checkbox";
-
+import RoomIcon from "../../../room-icon";
 import StyledItem from "./StyledItem";
 
 import { ItemProps, Data, Item as ItemType } from "./Item.types";
@@ -39,11 +39,12 @@ const Item = React.memo(({ index, style, data }: ItemProps) => {
     if (!item || (item && !item.id))
       return <div style={style}>{rowLoader}</div>;
 
-    const { label, avatar, icon, role, isSelected, isDisabled } = item;
+    const { label, avatar, icon, role, isSelected, isDisabled, color } = item;
 
     const currentRole = role ? role : "user";
 
-    const isLogo = !!icon;
+    const defaultIcon = !!color;
+    const isLogo = !!icon || defaultIcon;
 
     const onChangeAction = () => {
       onSelect && onSelect(item);
@@ -76,6 +77,8 @@ const Item = React.memo(({ index, style, data }: ItemProps) => {
             role={currentRole}
             size={"min"}
           />
+        ) : defaultIcon ? (
+          <RoomIcon color={color} title={label} />
         ) : (
           <img className="room-logo" src={icon} alt="room logo" />
         )}