From 9ba016ba358c0d732d010b236df47228ca64f0d0 Mon Sep 17 00:00:00 2001
From: Aleksandr Lushkin <aleksandr.lushkin@onlyoffice.com>
Date: Mon, 12 Aug 2024 12:37:23 +0200
Subject: [PATCH] Client: EditGroupMembersDialog: Add email to member row

---
 .../sub-components/GroupMember/index.styled.ts    | 15 ++++++++++++++-
 .../sub-components/GroupMember/index.tsx          |  6 +++++-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/components/dialogs/EditGroupMembersDialog/sub-components/GroupMember/index.styled.ts b/packages/client/src/components/dialogs/EditGroupMembersDialog/sub-components/GroupMember/index.styled.ts
index f3e0e01173..61a072612b 100644
--- a/packages/client/src/components/dialogs/EditGroupMembersDialog/sub-components/GroupMember/index.styled.ts
+++ b/packages/client/src/components/dialogs/EditGroupMembersDialog/sub-components/GroupMember/index.styled.ts
@@ -42,11 +42,15 @@ export const GroupMember = styled.div<{ isExpect: boolean }>`
     overflow: auto;
   }
 
-  .name-wrapper,
+  .info,
   .role-email {
     display: flex;
   }
 
+  .info {
+    flex-direction: column;
+  }
+
   .name {
     font-weight: 600;
     font-size: 14px;
@@ -59,6 +63,15 @@ export const GroupMember = styled.div<{ isExpect: boolean }>`
       props.isExpect && `color: ${props.theme.infoPanel.members.isExpectName}`};
   }
 
+  .email {
+    color: ${({ theme }) => theme.sideBarRow.metaDataColor};
+    font-size: 12px;
+    line-height: 16px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
   .me-label {
     font-weight: 600;
     font-size: 14px;
diff --git a/packages/client/src/components/dialogs/EditGroupMembersDialog/sub-components/GroupMember/index.tsx b/packages/client/src/components/dialogs/EditGroupMembersDialog/sub-components/GroupMember/index.tsx
index 081701f4ea..7925f15b08 100644
--- a/packages/client/src/components/dialogs/EditGroupMembersDialog/sub-components/GroupMember/index.tsx
+++ b/packages/client/src/components/dialogs/EditGroupMembersDialog/sub-components/GroupMember/index.tsx
@@ -131,13 +131,17 @@ const GroupMember = ({ member, infoPanelSelection }: GroupMemberProps) => {
       />
 
       <div className="user_body-wrapper">
-        <div className="name-wrapper">
+        <div className="info">
           <Text
             className="name"
             data-tooltip-id={`userTooltip_${Math.random()}`}
+            noSelect
           >
             {decode(user.displayName)}
           </Text>
+          <Text className="email" noSelect>
+            {user.email}
+          </Text>
         </div>
       </div>