diff --git a/packages/client/src/components/FilesSelector/helpers/useRoomsHelper.ts b/packages/client/src/components/FilesSelector/helpers/useRoomsHelper.ts index faca35fae3..6a05e8cff5 100644 --- a/packages/client/src/components/FilesSelector/helpers/useRoomsHelper.ts +++ b/packages/client/src/components/FilesSelector/helpers/useRoomsHelper.ts @@ -60,6 +60,7 @@ export const convertRoomsToItems = (rooms: any) => { rootFolderType, isFolder: true, roomType, + color: logo.color, }; }); diff --git a/packages/client/src/components/ItemIcon.js b/packages/client/src/components/ItemIcon.js index 40ec69afef..dc70df492a 100644 --- a/packages/client/src/components/ItemIcon.js +++ b/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} diff --git a/packages/client/src/components/RoomSelector/index.js b/packages/client/src/components/RoomSelector/index.js index d9d42decf5..2521dbb710 100644 --- a/packages/client/src/components/RoomSelector/index.js +++ b/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; diff --git a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/FilesItemTitle.js b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/FilesItemTitle.js index dd912f1038..411be4dbf1 100644 --- a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/FilesItemTitle.js +++ b/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"; diff --git a/packages/client/src/pages/Home/InfoPanel/Body/views/Details/index.js b/packages/client/src/pages/Home/InfoPanel/Body/views/Details/index.js index 34bf41cc75..93879159e8 100644 --- a/packages/client/src/pages/Home/InfoPanel/Body/views/Details/index.js +++ b/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, diff --git a/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js b/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js index 8f5c7a40da..8dfa5e491f 100644 --- a/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js +++ b/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 diff --git a/packages/components/context-menu/index.js b/packages/components/context-menu/index.js index d3458e4ffb..680d1c64c9 100644 --- a/packages/components/context-menu/index.js +++ b/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 { /> ) : (