Skip to content

Commit 22d8f4d

Browse files
BilbBilb
authored
Merge pull request #1459 from Bilb/chore/ucs-qa-feedback-1
fix: Updated Conversation Settings QA fixes
2 parents 88dc6f5 + dc7f67a commit 22d8f4d

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

52 files changed

+515
-588
lines changed

‎images/avatar-svg-mask.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@
7979
"fs-extra": "11.3.0",
8080
"glob": "10.4.5",
8181
"image-type": "^4.1.0",
82-
"libsession_util_nodejs": "https://github.com/session-foundation/libsession-util-nodejs/releases/download/v0.5.4/libsession_util_nodejs-v0.5.4.tar.gz",
82+
"libsession_util_nodejs": "https://github.com/session-foundation/libsession-util-nodejs/releases/download/v0.5.5/libsession_util_nodejs-v0.5.5.tar.gz",
8383
"libsodium-wrappers-sumo": "^0.7.15",
8484
"linkify-it": "^5.0.0",
8585
"lodash": "^4.17.21",

‎stylesheets/_avatar.scss‎

Lines changed: 2 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -9,80 +9,8 @@
99
img {
1010
object-fit: cover;
1111
border-radius: 50%;
12-
border: 1px solid var(--avatar-border-color);
13-
}
14-
}
15-
16-
.module-avatar__icon-closed .module-avatar--28,
17-
.module-avatar--28 {
18-
height: 28px;
19-
width: 28px;
20-
21-
img {
22-
height: 28px;
23-
width: 28px;
24-
}
25-
}
26-
27-
.module-avatar__icon-closed .module-avatar--36,
28-
.module-avatar--36 {
29-
height: 36px;
30-
width: 36px;
31-
32-
img {
33-
height: 36px;
34-
width: 36px;
35-
}
36-
}
37-
38-
.module-avatar__icon-closed .module-avatar--48,
39-
.module-avatar--48 {
40-
height: 48px;
41-
width: 48px;
42-
43-
img {
44-
height: 48px;
45-
width: 48px;
46-
}
47-
}
48-
49-
.module-avatar__icon-closed .module-avatar--64,
50-
.module-avatar--64 {
51-
height: 64px;
52-
width: 64px;
53-
54-
img {
55-
height: 64px;
56-
width: 64px;
57-
}
58-
}
59-
60-
.module-avatar__icon-closed .module-avatar--80,
61-
.module-avatar--80 {
62-
height: 80px;
63-
width: 80px;
64-
65-
img {
66-
height: 80px;
67-
width: 80px;
68-
}
69-
}
70-
71-
.module-avatar--300 {
72-
height: 300px;
73-
width: 300px;
74-
75-
img {
76-
height: 300px;
77-
width: 300px;
78-
}
79-
}
80-
81-
.module-avatar__icon-closed {
82-
.module-avatar:last-child {
83-
position: absolute;
84-
right: 0px;
85-
bottom: 0px;
12+
height: 100%;
13+
width: 100%;
8614
}
8715
}
8816

‎stylesheets/_session.scss‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -145,16 +145,6 @@ label {
145145
user-select: none;
146146
}
147147

148-
.conversation-header {
149-
.module-avatar img {
150-
box-shadow: 0px 0px 5px 0px rgba(255, 255, 255, 0.2);
151-
}
152-
153-
.search-icon {
154-
margin-inline-end: 10px;
155-
}
156-
}
157-
158148
.module-conversation-header {
159149
position: relative;
160150
padding: 0px var(--margins-lg) 0px var(--margins-sm);

‎ts/components/avatar/Avatar.tsx‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,14 @@ import { AvatarPlaceHolder } from './AvatarPlaceHolder/AvatarPlaceHolder';
1515
import { ClosedGroupAvatar } from './AvatarPlaceHolder/ClosedGroupAvatar';
1616
import { useIsMessageSelectionMode } from '../../state/selectors/selectedConversation';
1717
import { PlusAvatarButton } from '../buttons/PlusAvatarButton';
18+
import { StyledAvatar } from './AvatarPlaceHolder/StyledAvatar';
1819

1920
export enum AvatarSize {
2021
XS = 28,
2122
S = 36,
2223
M = 48,
23-
L = 64,
24-
XL = 80,
24+
L = 80,
25+
XL = 110,
2526
HUGE = 300,
2627
}
2728

@@ -162,13 +163,9 @@ const AvatarInner = (props: Props) => {
162163
const isClickable = !!onAvatarClick || (isCommunity && onPlusAvatarClick);
163164

164165
return (
165-
<div
166-
className={clsx(
167-
'module-avatar',
168-
`module-avatar--${size}`,
169-
hasImage ? 'module-avatar--with-image' : 'module-avatar--no-image',
170-
isClickable && 'module-avatar-clickable'
171-
)}
166+
<StyledAvatar
167+
$diameter={size}
168+
className={clsx('module-avatar', isClickable && 'module-avatar-clickable')}
172169
onClick={e => {
173170
if (isSelectingMessages) {
174171
// we could toggle the selection of this message,
@@ -209,7 +206,7 @@ const AvatarInner = (props: Props) => {
209206
{onPlusAvatarClick ? (
210207
<PlusAvatarButton onClick={onPlusAvatarClick} dataTestId="image-upload-section" />
211208
) : null}
212-
</div>
209+
</StyledAvatar>
213210
);
214211
};
215212

‎ts/components/avatar/AvatarPlaceHolder/AvatarPlaceHolder.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -115,8 +115,6 @@ export const AvatarPlaceHolder = (props: Props) => {
115115
r={rWithoutBorder}
116116
fill={bgColor}
117117
shapeRendering="geometricPrecision"
118-
stroke={'var(--avatar-border-color)'}
119-
strokeWidth="1"
120118
/>
121119
<text
122120
fontSize={fontSize}

‎ts/components/avatar/AvatarPlaceHolder/ClosedGroupAvatar.tsx‎

Lines changed: 31 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,10 @@
1+
import styled from 'styled-components';
12
import { useIsClosedGroup, useSortedGroupMembers } from '../../../hooks/useParamSelector';
23
import { UserUtils } from '../../../session/utils';
3-
import { assertUnreachable } from '../../../types/sqlSharedTypes';
44
import { MemberAvatarPlaceHolder } from '../../icon/MemberAvatarPlaceHolder';
55
import { Avatar, AvatarSize } from '../Avatar';
66
import { useAvatarBgColor } from './AvatarPlaceHolder';
7-
8-
function getClosedGroupAvatarsSize(size: AvatarSize): AvatarSize {
9-
// Always use the size directly under the one requested
10-
switch (size) {
11-
case AvatarSize.XS:
12-
throw new Error('AvatarSize.XS is not supported for closed group avatar sizes');
13-
case AvatarSize.S:
14-
return AvatarSize.XS;
15-
case AvatarSize.M:
16-
return AvatarSize.S;
17-
case AvatarSize.L:
18-
return AvatarSize.M;
19-
case AvatarSize.XL:
20-
return AvatarSize.L;
21-
case AvatarSize.HUGE:
22-
return AvatarSize.XL;
23-
default:
24-
assertUnreachable(size, `Invalid size request for closed group avatar "${size}"`);
25-
return AvatarSize.XL; // just to make eslint happy
26-
}
27-
}
7+
import { StyledAvatar } from './StyledAvatar';
288

299
/**
3010
* Move our pubkey at the end of the list if we are in the list of members.
@@ -67,41 +47,58 @@ function useGroupMembersAvatars(convoId: string | undefined) {
6747
return sortAndSlice(sortedMembers, us);
6848
}
6949

50+
const StyledAvatarClosedContainer = styled.div<{ containerSize: number }>`
51+
width: ${({ containerSize }) => containerSize}px;
52+
height: ${({ containerSize }) => containerSize}px;
53+
mask-image: url(images/avatar-svg-mask.svg);
54+
55+
.module-avatar:last-child {
56+
position: absolute;
57+
right: 0px;
58+
bottom: 0px;
59+
}
60+
`;
61+
7062
export const ClosedGroupAvatar = ({
7163
convoId,
72-
size,
64+
size: containerSize,
7365
onAvatarClick,
7466
}: {
75-
size: number;
67+
size: AvatarSize;
7668
convoId: string;
7769
onAvatarClick?: () => void;
7870
}) => {
7971
const memberAvatars = useGroupMembersAvatars(convoId);
8072
const firstMemberId = memberAvatars?.firstMember || '';
8173
const secondMemberID = memberAvatars?.secondMember || '';
82-
const avatarsDiameter = getClosedGroupAvatarsSize(size);
74+
75+
const avatarSize = Math.floor((containerSize * 8) / 11);
76+
77+
if (!avatarSize) {
78+
throw new Error(`Invalid avatar size ${containerSize}`);
79+
}
8380

8481
const { bgColor } = useAvatarBgColor(secondMemberID || convoId);
8582

8683
if (firstMemberId && secondMemberID) {
8784
return (
88-
<div className="module-avatar__icon-closed">
89-
<Avatar size={avatarsDiameter} pubkey={firstMemberId} onAvatarClick={onAvatarClick} />
90-
<Avatar size={avatarsDiameter} pubkey={secondMemberID} onAvatarClick={onAvatarClick} />
91-
</div>
85+
<StyledAvatarClosedContainer containerSize={containerSize}>
86+
<Avatar size={avatarSize} pubkey={firstMemberId} onAvatarClick={onAvatarClick} />
87+
<Avatar size={avatarSize} pubkey={secondMemberID} onAvatarClick={onAvatarClick} />
88+
</StyledAvatarClosedContainer>
9289
);
9390
}
9491

9592
return (
96-
<div className="module-avatar__icon-closed">
93+
<StyledAvatarClosedContainer containerSize={containerSize}>
9794
<Avatar
98-
size={avatarsDiameter}
95+
size={avatarSize}
9996
pubkey={UserUtils.getOurPubKeyStrFromCache()}
10097
onAvatarClick={onAvatarClick}
10198
/>
102-
<div className={`module-avatar module-avatar--${avatarsDiameter} module-avatar--no-image`}>
99+
<StyledAvatar $diameter={avatarSize} className={`module-avatar`}>
103100
<MemberAvatarPlaceHolder bgColor={bgColor} />
104-
</div>
105-
</div>
101+
</StyledAvatar>
102+
</StyledAvatarClosedContainer>
106103
);
107104
};

‎ts/components/avatar/AvatarPlaceHolder/StyledAvatar.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import styled from 'styled-components';
2+
3+
export const StyledAvatar = styled.div<{ $diameter: number }>`
4+
width: ${({ $diameter }) => $diameter}px;
5+
height: ${({ $diameter }) => $diameter}px;
6+
`;

‎ts/components/basic/YourSessionIDPill.tsx‎

Lines changed: 17 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import styled from 'styled-components';
2-
import { UserUtils } from '../../session/utils';
2+
import type { SessionDataTestId } from 'react';
33

44
const StyledPillDividerLine = styled.div`
55
border-bottom: 1px solid var(--border-color);
@@ -33,23 +33,32 @@ export const YourSessionIDPill = () => {
3333
);
3434
};
3535

36-
const StyledYourSessionIDSelectable = styled.p`
36+
const StyledSessionIDNonEditable = styled.p`
3737
user-select: none;
3838
text-align: center;
3939
word-break: break-all;
4040
font-weight: 300;
4141
font-size: var(--font-size-sm);
4242
color: var(--text-primary-color);
4343
flex-shrink: 0;
44+
font-family: var(--font-mono);
4445
`;
4546

46-
export const YourSessionIDSelectable = () => {
47-
const ourSessionID = UserUtils.getOurPubKeyStrFromCache();
47+
export const SessionIDNonEditable = ({
48+
sessionId,
49+
dataTestId,
50+
}: {
51+
sessionId: string;
52+
dataTestId?: SessionDataTestId;
53+
}) => {
54+
if (sessionId.length !== 66) {
55+
throw new Error('Unsupported case for SessionIDNonEditable: sessionId.length !== 66');
56+
}
4857
return (
49-
<StyledYourSessionIDSelectable data-testid="your-session-id">
50-
{ourSessionID.slice(0, 33)}
58+
<StyledSessionIDNonEditable data-testid={dataTestId}>
59+
{sessionId.slice(0, 33)}
5160
<br />
52-
{ourSessionID.slice(33)}
53-
</StyledYourSessionIDSelectable>
61+
{sessionId.slice(33)}
62+
</StyledSessionIDNonEditable>
5463
);
5564
};

‎ts/components/buttons/PanelButton.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ export const PanelButtonGroup = (props: PanelButtonGroupProps) => {
5252
);
5353
};
5454

55-
const StyledPanelButton = styled.button<{
55+
export const StyledPanelButton = styled.button<{
5656
disabled: boolean;
5757
color?: string;
5858
}>`
@@ -63,10 +63,11 @@ const StyledPanelButton = styled.button<{
6363
flex-shrink: 0;
6464
flex-grow: 1;
6565
font-family: var(--font-default);
66-
height: 50px;
6766
width: 100%;
6867
transition: var(--default-duration);
6968
color: ${props => (props.disabled ? 'var(--disabled-color)' : props.color)};
69+
padding-inline: var(--margins-xs);
70+
padding-block: var(--margins-sm);
7071
7172
&:not(:last-child) {
7273
border-bottom: 1px solid var(--border-color);

0 commit comments

Comments
 (0)