fix: made group members list match contacts list style on create group page

ts/components/MemberListItem.tsx

@@ -23,6 +23,7 @@ const StyledSessionMemberItem = styled.button<{
   zombie?: boolean;
   selected?: boolean;
   disableBg?: boolean;
+  withBorder?: boolean;
 }>`
   cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};
   display: flex;
@@ -40,11 +41,16 @@ const StyledSessionMemberItem = styled.button<{
       ? 'var(--conversation-tab-background-selected-color) !important'
       : null};
 
-  &:not(button:last-child) {
+  ${props => props.inMentions && 'max-width: 300px;'}
+  ${props =>
+    props.withBorder &&
+    `&:not(button:last-child) {
     border-bottom: 1px solid var(--border-color);
-  }
+  }`}
 
-  ${props => props.inMentions && 'max-width: 300px;'}
+  &:hover {
+    background-color: var(--conversation-tab-background-hover-color);
+  }
 `;
 
 const StyledInfo = styled.div`
@@ -75,6 +81,7 @@ export const MemberListItem = (props: {
   isZombie?: boolean;
   inMentions?: boolean; // set to true if we are rendering members but in the Mentions picker
   disableBg?: boolean;
+  withBorder?: boolean;
   maxNameWidth?: string;
   isAdmin?: boolean; // if true,  we add a small crown on top of their avatar
   onSelect?: (pubkey: string) => void;
@@ -91,6 +98,7 @@ export const MemberListItem = (props: {
     onUnselect,
     inMentions,
     disableBg,
+    withBorder = true,
     maxNameWidth,
     disabled,
     dataTestId,
@@ -104,18 +112,12 @@ export const MemberListItem = (props: {
         // eslint-disable-next-line no-unused-expressions
         isSelected ? onUnselect?.(pubkey) : onSelect?.(pubkey);
       }}
-      style={
-        !inMentions && !disableBg
-          ? {
-              backgroundColor: 'var(--background-primary-color)',
-            }
-          : {}
-      }
       data-testid={dataTestId}
       zombie={isZombie}
       inMentions={inMentions}
       selected={isSelected}
       disableBg={disableBg}
+      withBorder={withBorder}
       disabled={disabled}
     >
       <StyledInfo>

ts/components/leftpane/overlay/OverlayClosedGroup.tsx

@@ -46,9 +46,6 @@ const StyledGroupMemberListContainer = styled.div`
   overflow-x: hidden;
   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);
   }
@@ -192,6 +189,7 @@ export const OverlayClosedGroup = () => {
               isSelected={selectedMemberIds.includes(pubkey)}
               onSelect={addToSelected}
               onUnselect={removeFromSelected}
+              withBorder={false}
               disabled={loading}
             />
           ))