From 2a0396d5221292c6346e632d4c3db8e3cd8c912f Mon Sep 17 00:00:00 2001
From: William Grant <willmgrant@gmail.com>
Date: Mon, 17 Oct 2022 13:44:29 +1100
Subject: [PATCH] fix: qa feedback - fixed background for group member list in
 create group overlay

---
 ts/components/dialog/UpdateGroupMembersDialog.tsx | 10 ++++++++--
 .../leftpane/overlay/OverlayClosedGroup.tsx       | 15 +++++++++++++--
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/ts/components/dialog/UpdateGroupMembersDialog.tsx b/ts/components/dialog/UpdateGroupMembersDialog.tsx
index e6ed6929a..56985d50d 100644
--- a/ts/components/dialog/UpdateGroupMembersDialog.tsx
+++ b/ts/components/dialog/UpdateGroupMembersDialog.tsx
@@ -15,11 +15,16 @@ import useKey from 'react-use/lib/useKey';
 import { useSet } from '../../hooks/useSet';
 import { getConversationController } from '../../session/conversations';
 import { initiateClosedGroupUpdate } from '../../session/group/closed-group';
+import styled from 'styled-components';
 
 type Props = {
   conversationId: string;
 };
 
+const StyledClassicMemberList = styled.div`
+  max-height: 240px;
+`;
+
 /**
  * Admins are always put first in the list of group members.
  * Also, admins have a little crown on their avatar.
@@ -54,6 +59,7 @@ const ClassicMemberList = (props: {
             onUnselect={onUnselect}
             key={member}
             isAdmin={isAdmin}
+            disableBg={true}
           />
         );
       })}
@@ -229,14 +235,14 @@ export const UpdateGroupMembersDialog = (props: Props) => {
 
   return (
     <SessionWrapperModal title={titleText} onClose={closeDialog}>
-      <div className="group-member-list__selection">
+      <StyledClassicMemberList className="group-member-list__selection">
         <ClassicMemberList
           convoId={conversationId}
           onSelect={onAdd}
           onUnselect={onRemove}
           selectedMembers={membersToKeepWithUpdate}
         />
-      </div>
+      </StyledClassicMemberList>
       <ZombiesList convoId={conversationId} />
       {showNoMembersMessage && <p>{window.i18n('noMembersInThisGroup')}</p>}
 
diff --git a/ts/components/leftpane/overlay/OverlayClosedGroup.tsx b/ts/components/leftpane/overlay/OverlayClosedGroup.tsx
index 282aad424..61492b53d 100644
--- a/ts/components/leftpane/overlay/OverlayClosedGroup.tsx
+++ b/ts/components/leftpane/overlay/OverlayClosedGroup.tsx
@@ -34,6 +34,16 @@ const StyledGroupMemberListContainer = styled.div`
   overflow-y: auto;
   border-top: 1px solid var(--border-color);
   border-bottom: 1px solid var(--border-color);
+
+  &::-webkit-scrollbar-track {
+    background-color: var(--background-secondary-color);
+  }
+`;
+
+const StyledGroupMemberList = styled.div`
+  button {
+    background-color: var(--background-secondary-color);
+  }
 `;
 
 const NoContacts = () => {
@@ -119,7 +129,7 @@ export const OverlayClosedGroup = () => {
         {noContactsForClosedGroup ? (
           <NoContacts />
         ) : (
-          <div className="group-member-list__selection">
+          <StyledGroupMemberList className="group-member-list__selection">
             {contactsToRender.map((memberPubkey: string) => (
               <MemberListItem
                 pubkey={memberPubkey}
@@ -127,9 +137,10 @@ export const OverlayClosedGroup = () => {
                 key={memberPubkey}
                 onSelect={addToSelected}
                 onUnselect={removeFromSelected}
+                disableBg={true}
               />
             ))}
-          </div>
+          </StyledGroupMemberList>
         )}
       </StyledGroupMemberListContainer>