Client: RoomLogoCoverDialog: variables are now dependent on the store, added onClose

packages/client/src/components/dialogs/RoomLogoCoverDialog/index.tsx

@@ -25,6 +25,7 @@
 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
 
 import React from "react";
+import { inject, observer } from "mobx-react";
 import styled from "styled-components";
 import { useTranslation } from "react-i18next";
 import {
@@ -57,13 +58,17 @@ const StyledModalDialog = styled(ModalDialog)`
   }
 `;
 
-const RoomLogoCoverDialog = () => {
+const RoomLogoCoverDialog = ({ setRoomLogoCoverDialogVisible }) => {
   const { t } = useTranslation(["Common"]);
+
+  const onCloseRoomLogo = () => {
+    setRoomLogoCoverDialogVisible(false);
+  };
   return (
     <StyledModalDialog
       visible
       autoMaxHeight
-      // onClose={onClose}
+      onClose={onCloseRoomLogo}
       displayType={isMobile() ? ModalDialogType.aside : ModalDialogType.modal}
       withBodyScroll
     >
@@ -84,7 +89,7 @@ const RoomLogoCoverDialog = () => {
         <Button
           scale
           tabIndex={0}
-          // onClick={onClose}
+          onClick={onCloseRoomLogo}
           size={ButtonSize.normal}
           label={t("Common:CancelButton")}
         />
@@ -93,4 +98,8 @@ const RoomLogoCoverDialog = () => {
   );
 };
 
-export default RoomLogoCoverDialog;
+export default inject<TStore>(({ dialogsStore }) => {
+  return {
+    setRoomLogoCoverDialogVisible: dialogsStore.setRoomLogoCoverDialogVisible,
+  };
+})(observer(RoomLogoCoverDialog));

packages/client/src/components/dialogs/RoomLogoCoverDialog/sub-components/CustomLogo.tsx

@@ -84,6 +84,7 @@ export const CustomLogo = ({
   icon,
   withoutIcon,
   isBaseTheme,
+  roomTitle,
 }: CustomLogoProps) => {
   return (
     <StyledLogo color={color} isBase={isBaseTheme}>
@@ -94,7 +95,7 @@ export const CustomLogo = ({
           color="#fff"
           fontWeight={700}
         >
-          Aa
+          {roomTitle}
         </Text>
       ) : (
         <ReactSVG className="custom-logo-cover" src={icon} alt="icon" />

packages/client/src/components/dialogs/RoomLogoCoverDialog/sub-components/RoomLogoCover.tsx

@@ -31,6 +31,8 @@ import styled from "styled-components";
 import { mobile, tablet, isMobile } from "@docspace/shared/utils";
 import { Scrollbar } from "@docspace/shared/components/scrollbar";
 
+import { getRoomTitle } from "@docspace/shared/components/room-icon/RoomIcon.utils";
+
 import { CustomLogo } from "./CustomLogo";
 import { SelectColor } from "./SelectColor/SelectColor";
 import { SelectIcon } from "./SelectIcon";
@@ -94,11 +96,15 @@ const RoomLogoCoverContainer = styled.div`
   }
 `;
 
-const RoomLogoCover = ({ isBaseTheme }: RoomLogoCoverProps) => {
+const RoomLogoCover = ({ isBaseTheme, logo, title }: RoomLogoCoverProps) => {
   const { t } = useTranslation(["Common", "CreateEditRoomDialog"]);
 
-  const [color, setColor] = useState<string>(logoColors[3]); // set room icon default color
-  const [icon, setIcon] = useState<string>("Aa");
+  const roomTitle = React.useMemo(() => getRoomTitle(title ?? ""), [title]);
+
+  const roomColor = logo.color ? `#${logo.color}` : logoColors[0];
+
+  const [color, setColor] = useState<string>(roomColor);
+  const [icon, setIcon] = useState<string>(roomTitle);
   const [withoutIcon, setWithoutIcon] = useState<boolean>(true);
 
   const scrollRef = useRef(null);
@@ -132,6 +138,7 @@ const RoomLogoCover = ({ isBaseTheme }: RoomLogoCoverProps) => {
           icon={icon}
           color={color}
           withoutIcon={withoutIcon}
+          roomTitle={roomTitle}
         />
       </div>
       <div className="select-container">
@@ -147,10 +154,13 @@ const RoomLogoCover = ({ isBaseTheme }: RoomLogoCoverProps) => {
   );
 };
 
-export default inject<TStore>(({ settingsStore }) => {
+export default inject<TStore>(({ settingsStore, filesStore }) => {
   const { theme } = settingsStore;
+  const { bufferSelection } = filesStore;
 
   return {
     isBaseTheme: theme?.isBase,
+    logo: bufferSelection?.logo,
+    title: bufferSelection?.title,
   };
 })(observer(RoomLogoCover));