diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss
index a489dcd50..ba20054c4 100644
--- a/stylesheets/_session.scss
+++ b/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);
- }
- }
-}
diff --git a/ts/components/MemberListItem.tsx b/ts/components/MemberListItem.tsx
index 8e82bd8cf..61558a490 100644
--- a/ts/components/MemberListItem.tsx
+++ b/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
-
{
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}
>
-
-
-
-
-
+
+
+
+ {memberName}
+
+
+ {!inMentions && (
+
+
+
+ )}
+
);
};
diff --git a/ts/components/basic/SessionRadio.tsx b/ts/components/basic/SessionRadio.tsx
index 314bb88f4..e7ba39e4f 100644
--- a/ts/components/basic/SessionRadio.tsx
+++ b/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);
- height: var(--filled-size);
- margin-inline-end: var(--margin-end);
+ margin-inline-end: var(--filled-size);
border-radius: 100%;
transition: var(--default-duration);
- padding: 7px;
- outline-offset: var(--outline-offset);
+ padding: calc(var(--filled-size) / 2);
+ 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) {
- e.stopPropagation();
- onClick(value);
+ function clickHandler(e: ChangeEvent) {
+ if (onClick) {
+ // 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}
/>
+
{label}
);
};
-
-export const SessionRadioInput = (
- props: Pick
-) => {
- const { active, onClick, inputName, value } = props;
- function clickHandler(e: any) {
- e.stopPropagation();
- onClick(value);
- }
-
- return (
-
- );
-};
diff --git a/ts/components/conversation/H5AudioPlayer.tsx b/ts/components/conversation/H5AudioPlayer.tsx
index ed4bfb6fb..3d52e9b8b 100644
--- a/ts/components/conversation/H5AudioPlayer.tsx
+++ b/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,
-
+
{
@@ -109,7 +110,7 @@ export const AudioPlayerWithEncryptedFile = (props: {
buttonType={SessionButtonType.Simple}
buttonColor={SessionButtonColor.None}
/>
-
,
+ ,
]}
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);
+ }
+ }
+`;
diff --git a/ts/components/conversation/composition/UserMentions.tsx b/ts/components/conversation/composition/UserMentions.tsx
index b038d5658..385793ec3 100644
--- a/ts/components/conversation/composition/UserMentions.tsx
+++ b/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"
/>
);
diff --git a/ts/components/leftpane/overlay/choose-action/ContactRow.tsx b/ts/components/leftpane/overlay/choose-action/ContactRow.tsx
index d85e25e05..0b5a71d6a 100644
--- a/ts/components/leftpane/overlay/choose-action/ContactRow.tsx
+++ b/ts/components/leftpane/overlay/choose-action/ContactRow.tsx
@@ -70,7 +70,9 @@ export const ContactRow = (props: Props) => {
onClick={() => openConversationWithMessages({ conversationKey: id, messageId: null })}
>
- {displayName || id}
+
+ {displayName || id}
+
);
};
diff --git a/ts/components/leftpane/overlay/choose-action/OverlayChooseAction.tsx b/ts/components/leftpane/overlay/choose-action/OverlayChooseAction.tsx
index 268413cc5..4a41e3aa5 100644
--- a/ts/components/leftpane/overlay/choose-action/OverlayChooseAction.tsx
+++ b/ts/components/leftpane/overlay/choose-action/OverlayChooseAction.tsx
@@ -66,15 +66,15 @@ export const OverlayChooseAction = () => {
return (
-
+
{window.i18n('newMessage')}
-
+
{window.i18n('createGroup')}
-
+
{window.i18n('joinOpenGroup')}
diff --git a/ts/state/ducks/section.tsx b/ts/state/ducks/section.tsx
index 52b63dc22..4615b2027 100644
--- a/ts/state/ducks/section.tsx
+++ b/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 = {