feat: make the tick on memberList a radio looking element

stylesheets/_session.scss

@@ -1126,65 +1126,6 @@ input {
   }
 }
 
-.session-member-item.compact {
-  height: 40px;
-}
-
-.session-member-item {
-  cursor: pointer;
-  flex-shrink: 0;
-  font-family: $session-font-default;
-  padding: 0px $session-margin-sm;
-  height: 50px;
-  display: flex;
-  justify-content: space-between;
-  transition: $session-transition-duration;
-
-  &:not(:last-child) {
-    border-bottom: var(--border-session);
-  }
-
-  &.selected {
-    background-color: var(--color-conversation-item-selected) !important;
-  }
-
-  &.zombie {
-    opacity: 0.5;
-  }
-
-  &__checkmark {
-    opacity: 0;
-    transition: $session-transition-duration;
-
-    &.selected {
-      opacity: 1;
-      svg {
-        fill: var(--color-accent) !important;
-      }
-    }
-  }
-
-  &__info,
-  &__checkmark {
-    display: flex;
-    align-items: center;
-  }
-
-  &__name {
-    font-weight: bold;
-    margin-inline-start: $session-margin-md;
-    margin-inline-end: $session-margin-md;
-  }
-  &__pubkey {
-    margin-inline-start: 5px;
-    opacity: 0.8;
-  }
-
-  &__avatar > div {
-    margin-bottom: 0px !important;
-  }
-}
-
 .module-message-detail {
   .module-message {
     pointer-events: none;
@@ -1194,20 +1135,3 @@ input {
 .module-message__text {
   white-space: pre-wrap;
 }
-
-.speedButton {
-  padding: $session-margin-xs;
-  opacity: 0.6;
-  transition: none;
-  &:hover {
-    opacity: 1;
-  }
-
-  .session-button {
-    transition: none;
-
-    &:hover {
-      color: var(--color-text-opposite);
-    }
-  }
-}

ts/components/MemberListItem.tsx

@@ -1,10 +1,8 @@
 import React from 'react';
-import classNames from 'classnames';
 import { Avatar, AvatarSize, CrownIcon } from './avatar/Avatar';
-import { Constants } from '../session';
-import { SessionIcon } from './icon';
 import { useConversationUsernameOrShorten } from '../hooks/useParamSelector';
 import styled from 'styled-components';
+import { SessionRadio } from './basic/SessionRadio';
 
 const AvatarContainer = styled.div`
   position: relative;
@@ -20,12 +18,52 @@ const AvatarItem = (props: { memberPubkey: string; isAdmin: boolean }) => {
   );
 };
 
+const StyledSessionMemberItem = styled.div<{
+  inMentions?: boolean;
+  zombie?: boolean;
+  selected?: boolean;
+}>`
+  cursor: pointer;
+  flex-shrink: 0;
+  font-family: var(--font-default);
+  padding: 0px var(--margins-sm);
+  height: ${props => (props.inMentions ? '40px' : '50px')};
+  display: flex;
+  justify-content: space-between;
+  transition: var(--default-duration);
+
+  opacity: ${props => (props.zombie ? 0.5 : 1)};
+
+  :not(:last-child) {
+    border-bottom: var(--border-session);
+  }
+
+  background-color: ${props =>
+    props.selected ? 'var(--color-conversation-item-selected) !important' : null};
+`;
+
+const StyledInfo = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const StyledName = styled.span`
+  font-weight: bold;
+  margin-inline-start: var(--margins-md);
+  margin-inline-end: var(--margins-md);
+`;
+
+const StyledCheckContainer = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
 export const MemberListItem = (props: {
   pubkey: string;
   isSelected: boolean;
   // this bool is used to make a zombie appear with less opacity than a normal member
   isZombie?: boolean;
-  disableBg?: boolean;
+  inMentions?: boolean; // set to true if we are rendering members but in the Mentions picker
   isAdmin?: boolean; // if true,  we add a small crown on top of their avatar
   onSelect?: (pubkey: string) => void;
   onUnselect?: (pubkey: string) => void;
@@ -38,7 +76,7 @@ export const MemberListItem = (props: {
     isAdmin,
     onSelect,
     onUnselect,
-    disableBg,
+    inMentions,
     dataTestId,
   } = props;
 
@@ -46,18 +84,12 @@ export const MemberListItem = (props: {
 
   return (
     // tslint:disable-next-line: use-simple-attributes
-    <div
+    <StyledSessionMemberItem
-      className={classNames(
-        'session-member-item',
-        isSelected && 'selected',
-        isZombie && 'zombie',
-        disableBg && 'compact'
-      )}
       onClick={() => {
         isSelected ? onUnselect?.(pubkey) : onSelect?.(pubkey);
       }}
       style={
-        !disableBg
+        !inMentions
           ? {
               backgroundColor: 'var(--color-cell-background)',
             }
@@ -65,16 +97,21 @@ export const MemberListItem = (props: {
       }
       role="button"
       data-testid={dataTestId}
+      zombie={isZombie}
+      inMentions={inMentions}
+      selected={isSelected}
     >
-      <div className="session-member-item__info">
+      <StyledInfo>
-        <span className="session-member-item__avatar">
+        <AvatarItem memberPubkey={pubkey} isAdmin={isAdmin || false} />
-          <AvatarItem memberPubkey={pubkey} isAdmin={isAdmin || false} />
+
-        </span>
+        <StyledName>{memberName}</StyledName>
-        <span className="session-member-item__name">{memberName}</span>
+      </StyledInfo>
-      </div>
+
-      <span className={classNames('session-member-item__checkmark', isSelected && 'selected')}>
+      {!inMentions && (
-        <SessionIcon iconType="check" iconSize="medium" iconColor={Constants.UI.COLORS.GREEN} />
+        <StyledCheckContainer>
-      </span>
+          <SessionRadio active={isSelected} value="tet" inputName="wewee" label="" />
-    </div>
+        </StyledCheckContainer>
+      )}
+    </StyledSessionMemberItem>
   );
 };

ts/components/basic/SessionRadio.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ChangeEvent } from 'react';
 import styled, { CSSProperties } from 'styled-components';
 import { Flex } from '../basic/Flex';
 // tslint:disable: react-unused-props-and-state
@@ -8,7 +8,7 @@ type Props = {
   value: string;
   active: boolean;
   inputName?: string;
-  onClick: (value: string) => void;
+  onClick?: (value: string) => void;
 };
 
 const StyledInput = styled.input`
@@ -30,17 +30,15 @@ const StyledLabel = styled.label`
   :before {
     content: '';
     display: inline-block;
-    width: var(--filled-size);
+    margin-inline-end: var(--filled-size);
-    height: var(--filled-size);
-    margin-inline-end: var(--margin-end);
     border-radius: 100%;
 
     transition: var(--default-duration);
-    padding: 7px;
+    padding: calc(var(--filled-size) / 2);
-    outline-offset: var(--outline-offset);
+    outline-offset: 3px;
     outline: var(--color-text) solid 1px;
     border: none;
-    margin-top: 5px;
+    margin-top: var(--filled-size);
 
     :hover {
       background: var(--color-accent);
@@ -51,9 +49,12 @@ const StyledLabel = styled.label`
 export const SessionRadio = (props: Props) => {
   const { label, inputName, value, active, onClick } = props;
 
-  function clickHandler(e: any) {
+  function clickHandler(e: ChangeEvent<any>) {
-    e.stopPropagation();
+    if (onClick) {
-    onClick(value);
+      // let something else catch the event if our click handler is not set
+      e.stopPropagation();
+      onClick?.(value);
+    }
   }
 
   return (
@@ -63,8 +64,6 @@ export const SessionRadio = (props: Props) => {
       style={
         {
           '--filled-size': '15px',
-          '--margin-end': '1rem',
-          '--outline-offset': '3px',
         } as CSSProperties
       }
     >
@@ -76,30 +75,10 @@ export const SessionRadio = (props: Props) => {
         checked={active}
         onChange={clickHandler}
       />
+
       <StyledLabel role="button" onClick={clickHandler}>
         {label}
       </StyledLabel>
     </Flex>
   );
 };
-
-export const SessionRadioInput = (
-  props: Pick<Props, 'active' | 'inputName' | 'onClick' | 'value'>
-) => {
-  const { active, onClick, inputName, value } = props;
-  function clickHandler(e: any) {
-    e.stopPropagation();
-    onClick(value);
-  }
-
-  return (
-    <StyledInput
-      type="radio"
-      name={inputName || ''}
-      value={value}
-      aria-checked={active}
-      checked={active}
-      onChange={clickHandler}
-    />
-  );
-};

ts/components/conversation/H5AudioPlayer.tsx

@@ -2,6 +2,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import H5AudioPlayer, { RHAP_UI } from 'react-h5-audio-player';
 import { useDispatch, useSelector } from 'react-redux';
+import styled from 'styled-components';
 import { useEncryptedFileFetch } from '../../hooks/useEncryptedFileFetch';
 import { setNextMessageToPlayId } from '../../state/ducks/conversations';
 import {
@@ -100,7 +101,7 @@ export const AudioPlayerWithEncryptedFile = (props: {
       ref={player}
       customControlsSection={[
         RHAP_UI.MAIN_CONTROLS,
-        <div className="speedButton" key="togglePlaybackSpeed">
+        <StyledSpeedButton key="togglePlaybackSpeed">
           <SessionButton
             text={`${playbackSpeed}x`}
             onClick={() => {
@@ -109,7 +110,7 @@ export const AudioPlayerWithEncryptedFile = (props: {
             buttonType={SessionButtonType.Simple}
             buttonColor={SessionButtonColor.None}
           />
-        </div>,
+        </StyledSpeedButton>,
       ]}
       customIcons={{
         play: (
@@ -122,3 +123,21 @@ export const AudioPlayerWithEncryptedFile = (props: {
     />
   );
 };
+
+const StyledSpeedButton = styled.div`
+  padding: var(--margins-xs);
+  opacity: 0.6;
+  transition: none;
+
+  :hover {
+    opacity: 1;
+  }
+
+  .session-button {
+    transition: none;
+
+    &:hover {
+      color: var(--color-text-opposite);
+    }
+  }
+`;

ts/components/conversation/composition/UserMentions.tsx

@@ -29,7 +29,7 @@ export const renderUserMentionRow = (suggestion: SuggestionDataItem) => {
       isSelected={false}
       key={suggestion.id}
       pubkey={`${suggestion.id}`}
-      disableBg={true}
+      inMentions={true}
       dataTestId="mentions-popup-row"
     />
   );

ts/components/leftpane/overlay/choose-action/ContactRow.tsx

@@ -70,7 +70,9 @@ export const ContactRow = (props: Props) => {
       onClick={() => openConversationWithMessages({ conversationKey: id, messageId: null })}
     >
       <AvatarItem id={id} displayName={displayName} />
-      <StyledContactRowName>{displayName || id}</StyledContactRowName>
+      <StyledContactRowName data-testid="module-conversation__user__profile-name">
+        {displayName || id}
+      </StyledContactRowName>
     </StyledRowContainer>
   );
 };

ts/components/leftpane/overlay/choose-action/OverlayChooseAction.tsx

@@ -66,15 +66,15 @@ export const OverlayChooseAction = () => {
 
   return (
     <div className="module-left-pane-overlay">
-      <StyledActionRow onClick={openNewMessage}>
+      <StyledActionRow onClick={openNewMessage} data-testid="chooser-new-conversation-button">
         <IconOnActionRow iconType="chatBubble" />
         <StyledChooseActionTitle>{window.i18n('newMessage')}</StyledChooseActionTitle>
       </StyledActionRow>
-      <StyledActionRow onClick={openCreateGroup}>
+      <StyledActionRow onClick={openCreateGroup} data-testid="chooser-new-group">
         <IconOnActionRow iconType="group" />
         <StyledChooseActionTitle>{window.i18n('createGroup')}</StyledChooseActionTitle>
       </StyledActionRow>
-      <StyledActionRow onClick={openJoinCommunity}>
+      <StyledActionRow onClick={openJoinCommunity} data-testid="chooser-new-community">
         <IconOnActionRow iconType="communities" />
         <StyledChooseActionTitle>{window.i18n('joinOpenGroup')}</StyledChooseActionTitle>
       </StyledActionRow>

ts/state/ducks/section.tsx

@@ -94,7 +94,7 @@ export const initialSectionState: SectionStateType = {
   focusedSection: SectionType.Message,
   focusedSettingsSection: undefined,
   isAppFocused: false,
-  overlayMode: 'choose-action',
+  overlayMode: undefined,
 };
 
 export type SectionStateType = {