From 57b78c19763dde036a8980127a6b4adc8f9b0652 Mon Sep 17 00:00:00 2001
From: DmitrySychugov <dmitry.sychugov@onlyoffice.com>
Date: Thu, 29 Aug 2024 20:02:51 +0500
Subject: [PATCH] Client: ItemIcon: fixed styles

---
 packages/client/src/components/ItemIcon.js     | 18 +++++++++++++-----
 .../sub-components/SetRoomParams.js            | 11 ++++++++++-
 packages/shared/themes/base.ts                 |  1 +
 packages/shared/themes/dark.ts                 |  1 +
 4 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/packages/client/src/components/ItemIcon.js b/packages/client/src/components/ItemIcon.js
index a210483d42..0147b23b6f 100644
--- a/packages/client/src/components/ItemIcon.js
+++ b/packages/client/src/components/ItemIcon.js
@@ -74,7 +74,7 @@ const EditWrapper = styled.div`
   justify-content: center;
   width: 24px;
   height: 24px;
-  background-color: #eceef1; // add global color
+  background-color: ${(props) => props.theme.itemIcon.editIconColor};
   border-radius: 50%;
   position: absolute;
   bottom: -6px;
@@ -110,6 +110,9 @@ const ItemIcon = ({
   badgeUrl,
   size,
   withEditing,
+  setRoomLogoCoverDialogVisible,
+  showDefault,
+  imgClassName,
 }) => {
   const isLoadedRoomIcon = !!logo?.medium;
   const showDefaultRoomIcon = !isLoadedRoomIcon && isRoom;
@@ -123,6 +126,10 @@ const ItemIcon = ({
     setEditLogoOpen(false);
   };
 
+  const openCustomizeCover = () => {
+    setRoomLogoCoverDialogVisible(true);
+    closeEditLogo();
+  };
   return (
     <>
       <IconWrapper isRoom={isRoom}>
@@ -131,8 +138,8 @@ const ItemIcon = ({
           title={title}
           size={size}
           isArchive={isArchive}
-          showDefault={showDefaultRoomIcon}
-          imgClassName="react-svg-icon"
+          showDefault={showDefault || showDefaultRoomIcon}
+          imgClassName={imgClassName || "react-svg-icon"}
           imgSrc={isRoom ? logo?.medium : icon}
           badgeUrl={badgeUrl ? badgeUrl : ""}
         />
@@ -160,7 +167,7 @@ const ItemIcon = ({
               <DropDownItem
                 label={`Customize cover`}
                 icon={PenSvgUrl}
-                //     onClick={() => shareTwitter(activeLink[0])}
+                onClick={openCustomizeCover}
               />
             </DropDown>
           </EditWrapper>
@@ -171,8 +178,9 @@ const ItemIcon = ({
   );
 };
 
-export default inject(({ treeFoldersStore }) => {
+export default inject(({ treeFoldersStore, dialogsStore }) => {
   return {
     isPrivacy: treeFoldersStore.isPrivacyFolder,
+    setRoomLogoCoverDialogVisible: dialogsStore.setRoomLogoCoverDialogVisible,
   };
 })(observer(ItemIcon));
diff --git a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js
index 1a18b62ff6..17a72203da 100644
--- a/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js
+++ b/packages/client/src/components/dialogs/CreateEditRoomDialog/sub-components/SetRoomParams.js
@@ -86,6 +86,15 @@ const StyledSetRoomParams = styled.div`
       flex-direction: column;
       align-items: center;
     }
+
+    .react-svg-icon {
+      width: 64px;
+      height: 64px;
+      @media ${mobile} {
+        width: 96px;
+        height: 96px;
+      }
+    }
     .room-title {
       font-size: 32px;
       font-weight: 700;
@@ -178,7 +187,7 @@ const SetRoomParams = ({
       fileExst={bufferSelection.fileExst}
       isRoom={bufferSelection.isRoom}
       title={bufferSelection.title}
-      logo={bufferSelection.logo.medium}
+      logo={{ medium: bufferSelection.logo?.large }}
       color={bufferSelection.logo?.color}
       size={isMobile() ? "96px" : "64px"}
       withEditing={true}
diff --git a/packages/shared/themes/base.ts b/packages/shared/themes/base.ts
index 79b63b81ea..c682269490 100644
--- a/packages/shared/themes/base.ts
+++ b/packages/shared/themes/base.ts
@@ -3076,6 +3076,7 @@ export const getBaseTheme = () => {
 
     itemIcon: {
       borderColor: grayLightMid,
+      editIconColor: grayLightMid,
     },
 
     invitePage: {
diff --git a/packages/shared/themes/dark.ts b/packages/shared/themes/dark.ts
index e24b931750..5656386d22 100644
--- a/packages/shared/themes/dark.ts
+++ b/packages/shared/themes/dark.ts
@@ -3064,6 +3064,7 @@ const Dark: TTheme = {
 
   itemIcon: {
     borderColor: grayDarkStrong,
+    editIconColor: grayDarkMid,
   },
 
   invitePage: {