Skip to content

Commit 0e04ab7

Browse files
BilbBilb
authored
Merge pull request #1478 from session-foundation/dev
Fix late found issues of UCS
2 parents 5f882d6 + 9e75008 commit 0e04ab7

12 files changed

+113
-85
lines changed

‎_locales/en/messages.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -761,9 +761,12 @@
761761
"pinUnpinConversation": "Unpin Conversation",
762762
"preview": "Preview",
763763
"proCallToActionLongerMessages": "Want to send longer messages? Send more text and unlock premium features with Session Pro",
764+
"proCallToActionPinnedConversations": "Want more pins? Organize your chats and unlock premium features with Session Pro",
765+
"proCallToActionPinnedConversationsMoreThan": "Want more than 5 pins? Organize your chats and unlock premium features with Session Pro",
764766
"proFeatureListLargerGroups": "Larger group chats up to 300 members",
765767
"proFeatureListLoadsMore": "Plus loads more exclusive features",
766768
"proFeatureListLongerMessages": "Messages up to 10,000 characters",
769+
"proFeatureListPinnedConversations": "Pin unlimited conversations",
767770
"proSendMore": "Send more with",
768771
"profile": "Profile",
769772
"profileDisplayPicture": "Display Picture",

‎ts/components/SessionWrapperModal2.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,10 +68,10 @@ const StyledModal = styled.div<{
6868
}
6969
7070
${StyledModalHeader} {
71+
z-index: 3;
7172
box-shadow: ${props => (props.scrolled ? '0px 0px 20px 8px var(--modal-shadow-color)' : '')};
7273
border-bottom: ${props =>
7374
props.scrolled ? '1px solid var(--border-color)' : '1px solid var(--transparent-color)'};
74-
margin-bottom: ${props => (props.bigHeader ? 'var(--margins-sm)' : 'var(--margins-xs)')};
7575
}
7676
`;
7777

‎ts/components/basic/SessionRadio.tsx‎

Lines changed: 21 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -9,40 +9,39 @@ const StyledContainer = styled.div<{ disabled: boolean }>`
99
background-color: var(--transparent-color);
1010
`;
1111

12-
const StyledRadioOuter = styled.div<{ $disabled: boolean; $diameterRadioBorder: number }>`
12+
const StyledRadioOuter = styled.div<{
13+
$disabled: boolean;
14+
$selected: boolean;
15+
$diameterRadioBorder: number;
16+
}>`
1317
width: ${props => props.$diameterRadioBorder}px;
1418
height: ${props => props.$diameterRadioBorder}px;
1519
border: 1px solid var(--text-primary-color);
1620
border-radius: 50%;
17-
background-color: transparent;
21+
1822
cursor: ${props => (props.$disabled ? 'not-allowed' : 'pointer')};
1923
position: relative;
20-
`;
2124
22-
const StyledSelectedInner = styled.div<{
23-
$disabled: boolean;
24-
$selected: boolean;
25-
$diameterRadioBg: number;
26-
}>`
27-
width: ${props => props.$diameterRadioBg}px;
28-
height: ${props => props.$diameterRadioBg}px;
29-
border-radius: 50%;
30-
opacity: ${props => (props.$selected ? 1 : 0)};
31-
background: ${props => (props.$disabled ? 'var(--disabled-color)' : 'var(--primary-color)')};
32-
pointer-events: none;
33-
transition-duration: var(--default-duration);
34-
position: absolute;
35-
top: 50%;
36-
left: 50%;
37-
transform: translate(-50%, -50%);
25+
&::before {
26+
content: '';
27+
position: absolute;
28+
inset: 0;
29+
border-radius: 50%;
30+
background: ${props =>
31+
props.$disabled
32+
? 'var(--disabled-color)'
33+
: 'radial-gradient(circle, var(--primary-color) 0%, var(--primary-color) 60%, transparent 60%, transparent 100%)'};
34+
opacity: ${props => (props.$selected ? 1 : 0)};
35+
transition: opacity 0.3s ease;
36+
pointer-events: none;
37+
}
3838
`;
3939

4040
function RadioButton({
4141
disabled,
4242
onClick,
4343
selected,
4444
dataTestId,
45-
diameterRadioBg,
4645
diameterRadioBorder,
4746
style,
4847
ariaLabel,
@@ -51,7 +50,6 @@ function RadioButton({
5150
onClick: MouseEventHandler<HTMLDivElement>;
5251
disabled: boolean;
5352
dataTestId: SessionDataTestId | undefined;
54-
diameterRadioBg: number;
5553
diameterRadioBorder: number;
5654
style?: CSSProperties;
5755
ariaLabel?: string;
@@ -68,13 +66,8 @@ function RadioButton({
6866
aria-label={ariaLabel}
6967
data-checked={selected}
7068
data-disabled={disabled}
71-
>
72-
<StyledSelectedInner
73-
$disabled={disabled}
74-
$selected={selected}
75-
$diameterRadioBg={diameterRadioBg}
76-
/>
77-
</StyledRadioOuter>
69+
$selected={selected}
70+
/>
7871
);
7972
}
8073

@@ -120,7 +113,6 @@ export const SessionRadio = (props: SessionRadioProps) => {
120113
};
121114

122115
const diameterRadioBorder = 26;
123-
const diameterRadioBg = 20;
124116

125117
return (
126118
<StyledContainer
@@ -156,7 +148,6 @@ export const SessionRadio = (props: SessionRadioProps) => {
156148
disabled={disabled}
157149
dataTestId={inputDataTestId}
158150
diameterRadioBorder={diameterRadioBorder}
159-
diameterRadioBg={diameterRadioBg}
160151
/>
161152
</Flex>
162153
</StyledContainer>
@@ -186,7 +177,6 @@ export const SessionRadioPrimaryColors = (props: {
186177

187178
// this component has no padding between the selected background and the border
188179
const diameterRadioBorder = 26;
189-
const diameterRadioBg = 22;
190180

191181
const overriddenColorsVars = {
192182
'--primary-color': color,
@@ -201,7 +191,6 @@ export const SessionRadioPrimaryColors = (props: {
201191
disabled={false}
202192
dataTestId={undefined}
203193
diameterRadioBorder={diameterRadioBorder}
204-
diameterRadioBg={diameterRadioBg}
205194
style={overriddenColorsVars}
206195
ariaLabel={ariaLabel}
207196
/>

‎ts/components/buttons/PanelButton.tsx‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import styled, { CSSProperties } from 'styled-components';
33
import { Flex } from '../basic/Flex';
44
import { H8 } from '../basic/Heading';
55
import { SpacerXS } from '../basic/Text';
6+
import { useIsDarkTheme } from '../../state/theme/selectors/theme';
67

78
// NOTE Used for descendant components
89
export const StyledContent = styled.div<{ disabled: boolean }>`
@@ -16,7 +17,7 @@ export const PanelLabel = styled.p`
1617
color: var(--text-secondary-color);
1718
width: 100%;
1819
margin: 0;
19-
padding-left: calc(var(--margins-lg) * 2 + var(--margins-sm));
20+
padding-left: var(--margins-lg);
2021
padding-block: var(--margins-sm);
2122
`;
2223

@@ -27,8 +28,9 @@ const StyledRoundedPanelButtonGroup = styled.div`
2728
overflow: hidden;
2829
background: var(--background-tertiary-color);
2930
border-radius: 16px;
30-
padding: 0 var(--margins-lg) var(--margins-xs);
31-
margin: 0 var(--margins-lg);
31+
// Note: we need no padding here so we can change the bg color on hover
32+
padding: 0;
33+
margin: 0 var(--margins-xs);
3234
width: -webkit-fill-available;
3335
`;
3436

@@ -55,6 +57,7 @@ export const PanelButtonGroup = (props: PanelButtonGroupProps) => {
5557
export const StyledPanelButton = styled.button<{
5658
disabled: boolean;
5759
color?: string;
60+
isDarkTheme: boolean;
5861
}>`
5962
cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};
6063
display: flex;
@@ -66,11 +69,15 @@ export const StyledPanelButton = styled.button<{
6669
width: 100%;
6770
transition: var(--default-duration);
6871
color: ${props => (props.disabled ? 'var(--disabled-color)' : props.color)};
69-
padding-inline: var(--margins-xs);
72+
padding-inline: var(--margins-lg);
7073
padding-block: var(--margins-sm);
7174
72-
&:not(:last-child) {
73-
border-bottom: 1px solid var(--border-color);
75+
&:hover {
76+
background-color: ${props =>
77+
!props.disabled &&
78+
(props.isDarkTheme
79+
? 'var(--background-primary-color)'
80+
: 'var(--background-secondary-color)')};
7481
}
7582
`;
7683

@@ -88,6 +95,8 @@ export type PanelButtonProps = {
8895
export const PanelButton = (props: PanelButtonProps) => {
8996
const { className, disabled = false, children, onClick, dataTestId, style, color } = props;
9097

98+
const isDarkTheme = useIsDarkTheme();
99+
91100
return (
92101
<StyledPanelButton
93102
className={className}
@@ -96,6 +105,7 @@ export const PanelButton = (props: PanelButtonProps) => {
96105
style={style}
97106
data-testid={dataTestId}
98107
color={color}
108+
isDarkTheme={isDarkTheme}
99109
>
100110
{children}
101111
</StyledPanelButton>

‎ts/components/buttons/PanelIconButton.tsx‎

Lines changed: 25 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
import { LucideIcon } from '../icon/LucideIcon';
1313
import { IconSizeToPxStr, SessionIcon } from '../icon/SessionIcon';
1414
import type { SessionIconType } from '../icon';
15+
import { StyledPanelButtonSeparator } from './StyledPanelButtonGroupSeparator';
1516

1617
type PanelIconButtonProps = Omit<PanelButtonProps, 'children' | 'subText' | 'subTextDataTestId'> & {
1718
text: string;
@@ -36,22 +37,31 @@ export const PanelIconButton = (
3637
: undefined;
3738

3839
return (
39-
<PanelButton disabled={disabled} onClick={onClick} dataTestId={dataTestId} color={color}>
40-
<StyledContent disabled={disabled}>
41-
<IconContainer>{props.iconElement}</IconContainer>
40+
<>
41+
<PanelButton
42+
disabled={disabled}
43+
onClick={onClick}
44+
dataTestId={dataTestId}
45+
color={color}
46+
style={{ minHeight: '55px' }}
47+
>
48+
<StyledContent disabled={disabled}>
49+
<IconContainer>{props.iconElement}</IconContainer>
4250

43-
{subTextProps ? (
44-
<PanelButtonTextWithSubText
45-
text={text}
46-
textDataTestId={props.dataTestId}
47-
subText={subTextProps.subText}
48-
subTextDataTestId={subTextProps.subTextDataTestId}
49-
/>
50-
) : (
51-
<PanelButtonText text={text} textDataTestId={props.dataTestId} />
52-
)}
53-
</StyledContent>
54-
</PanelButton>
51+
{subTextProps ? (
52+
<PanelButtonTextWithSubText
53+
text={text}
54+
textDataTestId={props.dataTestId}
55+
subText={subTextProps.subText}
56+
subTextDataTestId={subTextProps.subTextDataTestId}
57+
/>
58+
) : (
59+
<PanelButtonText text={text} textDataTestId={props.dataTestId} />
60+
)}
61+
</StyledContent>
62+
</PanelButton>
63+
<StyledPanelButtonSeparator />
64+
</>
5565
);
5666
};
5767

‎ts/components/buttons/PanelRadioButton.tsx‎

Lines changed: 28 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import styled from 'styled-components';
22
import { SessionDataTestId, type ReactNode } from 'react';
33
import { SessionRadio } from '../basic/SessionRadio';
44
import { PanelButtonProps, StyledContent, StyledPanelButton } from './PanelButton';
5+
import { useIsDarkTheme } from '../../state/theme/selectors/theme';
6+
import { StyledPanelButtonSeparator } from './StyledPanelButtonGroupSeparator';
57

68
const StyledCheckContainer = styled.div`
79
display: flex;
@@ -32,28 +34,33 @@ export const PanelRadioButton = (props: PanelRadioButtonProps) => {
3234
radioInputDataTestId,
3335
textElement,
3436
} = props;
37+
const isDarkTheme = useIsDarkTheme();
3538

3639
return (
37-
<StyledPanelButton
38-
disabled={disabled}
39-
onClick={() => {
40-
return isSelected ? onUnselect?.('bye') : onSelect?.('hi');
41-
}}
42-
data-testid={rowDataTestId}
43-
>
44-
<StyledContent disabled={disabled}>
45-
{textElement}
46-
<StyledCheckContainer>
47-
<SessionRadio
48-
active={isSelected}
49-
value={value}
50-
inputName={value}
51-
disabled={disabled}
52-
inputDataTestId={radioInputDataTestId}
53-
style={{ paddingInlineEnd: 'var(--margins-xs)' }}
54-
/>
55-
</StyledCheckContainer>
56-
</StyledContent>
57-
</StyledPanelButton>
40+
<>
41+
<StyledPanelButton
42+
disabled={disabled}
43+
onClick={() => {
44+
return isSelected ? onUnselect?.('bye') : onSelect?.('hi');
45+
}}
46+
data-testid={rowDataTestId}
47+
isDarkTheme={isDarkTheme}
48+
>
49+
<StyledContent disabled={disabled}>
50+
{textElement}
51+
<StyledCheckContainer>
52+
<SessionRadio
53+
active={isSelected}
54+
value={value}
55+
inputName={value}
56+
disabled={disabled}
57+
inputDataTestId={radioInputDataTestId}
58+
style={{ paddingInlineEnd: 'var(--margins-xs)' }}
59+
/>
60+
</StyledCheckContainer>
61+
</StyledContent>
62+
</StyledPanelButton>
63+
<StyledPanelButtonSeparator />
64+
</>
5865
);
5966
};

‎ts/components/buttons/StyledPanelButtonGroupSeparator.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import styled from 'styled-components';
2+
3+
export const StyledPanelButtonSeparator = styled.div`
4+
width: calc(100% -2 * var(--margins-lg));
5+
// yes, 0.5px because 1px makes it sometimes 2, sometimes 1px and it is weird to have different
6+
// separator sizes in the same radio group
7+
height: 0.5px;
8+
background-color: var(--border-color);
9+
margin-inline: var(--margins-lg);
10+
11+
&:last-child {
12+
display: none;
13+
}
14+
`;

‎ts/components/dialog/SessionNicknameDialog.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,7 @@ export const SessionNicknameDialog = (props: Props) => {
8989
onClose={onClickClose}
9090
showExitIcon={true}
9191
showHeader={true}
92+
headerReverse={true}
9293
>
9394
<StyledMaxWidth className="session-modal__centered">
9495
<Localizer

‎ts/components/dialog/blockOrUnblock/BlockOrUnblockDialog.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ export const BlockOrUnblockDialog = ({ pubkeys, action, onConfirmed }: NonNullab
8888
}
8989

9090
return (
91-
<SessionWrapperModal showExitIcon={true} title={localizedAction} onClose={closeModal}>
91+
<SessionWrapperModal showExitIcon={false} title={localizedAction} onClose={closeModal}>
9292
<StyledModalDescriptionContainer data-testid="modal-description">
9393
<Localizer {...args} />
9494
</StyledModalDescriptionContainer>

‎ts/components/dialog/conversationSettings/conversationSettingsDialog.tsx‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -109,13 +109,7 @@ export function ConversationSettingsDialog(props: ConversationSettingsModalState
109109
$contentMinWidth="400px"
110110
bigHeader={true}
111111
>
112-
<Flex
113-
$container={true}
114-
$flexDirection="column"
115-
$alignItems="flex-start"
116-
padding="var(--margins-sm) 0"
117-
width="100%"
118-
>
112+
<Flex $container={true} $flexDirection="column" $alignItems="flex-start" width="100%">
119113
<PageToRender conversationId={props.conversationId} />
120114
</Flex>
121115
</SessionWrapperModal2>

0 commit comments

Comments
 (0)