Skip to content

Commit 568fc54

Browse files
BilbBilb
committed
fix: address modal styling issues
1 parent 15bf185 commit 568fc54

27 files changed

+190
-189
lines changed

‎ts/components/SessionPasswordPrompt.tsx‎

Lines changed: 23 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import { ShowHideSessionInput } from './inputs/SessionInput';
2424
import { sleepFor } from '../session/utils/Promise';
2525
import { ModalDescription } from './dialog/shared/ModalDescriptionContainer';
2626
import { SpacerMD } from './basic/Text';
27+
import { ModalFlexContainer } from './dialog/shared/ModalFlexContainer';
2728

2829
const MAX_LOGIN_TRIES = 3;
2930

@@ -215,26 +216,28 @@ const SessionPasswordPromptInner = () => {
215216
)
216217
}
217218
>
218-
{loading ? (
219-
<>
220-
<SessionSpinner loading={true} />
221-
<TextPleaseWait isLoading={loading} />
222-
<SpacerMD />
223-
</>
224-
) : clearDataView ? (
225-
<ModalDescription
226-
dataTestId="modal-description"
227-
localizerProps={{
228-
token: 'clearDeviceDescription',
229-
}}
230-
/>
231-
) : (
232-
<PasswordPrompt
233-
onEnterPressed={initLogin}
234-
onPasswordChange={setPassword}
235-
password={password}
236-
/>
237-
)}
219+
<ModalFlexContainer>
220+
{loading ? (
221+
<>
222+
<SessionSpinner loading={true} />
223+
<TextPleaseWait isLoading={loading} />
224+
<SpacerMD />
225+
</>
226+
) : clearDataView ? (
227+
<ModalDescription
228+
dataTestId="modal-description"
229+
localizerProps={{
230+
token: 'clearDeviceDescription',
231+
}}
232+
/>
233+
) : (
234+
<PasswordPrompt
235+
onEnterPressed={initLogin}
236+
onPasswordChange={setPassword}
237+
password={password}
238+
/>
239+
)}
240+
</ModalFlexContainer>
238241
</SessionWrapperModal>
239242
);
240243
};

‎ts/components/SessionWrapperModal.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -127,10 +127,15 @@ export const ModalActionsContainer = ({
127127
children,
128128
maxWidth,
129129
style = {},
130+
extraBottomMargin,
130131
}: {
131132
children: ReactNode;
132133
style?: CSSProperties;
133134
maxWidth?: string;
135+
/**
136+
* some buttons have border/background and need some extra margin to not appear to close to the edge
137+
*/
138+
extraBottomMargin?: boolean;
134139
}) => {
135140
return (
136141
<Flex
@@ -141,7 +146,11 @@ export const ModalActionsContainer = ({
141146
$alignItems="center"
142147
$flexGap="var(--margins-md)"
143148
height="50px"
144-
style={{ justifySelf: 'center', ...style }}
149+
style={{
150+
justifySelf: 'center',
151+
marginBottom: extraBottomMargin ? 'var(--margins-sm)' : '',
152+
...style,
153+
}}
145154
data-testid="modal-actions-container"
146155
>
147156
{children}

‎ts/components/basic/Flex.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,8 +61,8 @@ export const Flex = styled.div<FlexProps>`
6161
flex-wrap: ${props => (props.$flexWrap !== undefined ? props.$flexWrap : 'nowrap')};
6262
gap: ${props => props.$flexGap || undefined};
6363
align-items: ${props => props.$alignItems || 'stretch'};
64-
margin: ${props => props.margin || '0'};
65-
padding: ${props => props.padding || '0'};
64+
margin: ${props => props.margin || ''};
65+
padding: ${props => props.padding || ''};
6666
width: ${props => props.width || 'auto'};
6767
max-width: ${props => props.maxWidth || 'none'};
6868
min-width: ${props => props.minWidth || 'none'};

‎ts/components/conversation/message/message-content/MessageContentWithStatus.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -137,7 +137,8 @@ export const MessageContentWithStatuses = (props: Props) => {
137137
$container={true}
138138
$flexDirection="column"
139139
$flexShrink={0}
140-
$alignItems="flex-end"
140+
// we need this to prevent short messages from being misaligned (incoming)
141+
$alignItems={isIncoming ? 'flex-start' : 'flex-end'}
141142
maxWidth="100%"
142143
>
143144
<StyledMessageWithAuthor>

‎ts/components/conversation/message/message-content/MessageText.tsx‎

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -20,19 +20,15 @@ import { MessageBubble } from './MessageBubble';
2020

2121
type Props = WithMessageId;
2222

23-
const StyledMessageText = styled.div<{ isDeleted?: boolean }>`
23+
const StyledMessageText = styled.div`
2424
white-space: pre-wrap;
25+
`;
2526

26-
svg {
27-
margin-inline-end: var(--margins-xs);
28-
}
29-
30-
${({ isDeleted }) =>
31-
isDeleted &&
32-
`
33-
display: flex;
34-
align-items: center;
35-
`}
27+
const StyledMessageDeleted = styled.div`
28+
display: flex;
29+
flexgap: var(--margins-xs);
30+
flex-direction: row;
31+
align-items: center;
3632
`;
3733

3834
export const MessageText = ({ messageId }: Props) => {
@@ -53,16 +49,22 @@ export const MessageText = ({ messageId }: Props) => {
5349
? 'var(--message-bubbles-received-text-color)'
5450
: 'var(--message-bubbles-sent-text-color)';
5551

56-
return (
57-
<StyledMessageText dir="auto" className={clsx('module-message__text')} isDeleted={isDeleted}>
58-
{isDeleted && (
52+
if (isDeleted) {
53+
return (
54+
<StyledMessageDeleted>
5955
<LucideIcon
6056
unicode={LUCIDE_ICONS_UNICODE.TRASH2}
6157
iconSize="small"
6258
iconColor={iconColor}
6359
style={{ padding: '0 var(--margins-xs)' }}
6460
/>
65-
)}
61+
{contents}
62+
</StyledMessageDeleted>
63+
);
64+
}
65+
66+
return (
67+
<StyledMessageText dir="auto" className={clsx('module-message__text')}>
6668
<MessageBubble>
6769
<MessageBody
6870
text={contents || ''}

‎ts/components/dialog/BanOrUnbanUserDialog.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ import { ConvoHub } from '../../session/conversations/ConversationController';
1212
import { PubKey } from '../../session/types';
1313
import { ToastUtils } from '../../session/utils';
1414
import { BanType, updateBanOrUnbanUserModal } from '../../state/ducks/modalDialog';
15-
import { Flex } from '../basic/Flex';
1615
import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
1716
import { SessionSpinner } from '../loading';
1817
import {
@@ -22,8 +21,8 @@ import {
2221
} from '../SessionWrapperModal';
2322
import { localize } from '../../localization/localeTools';
2423
import { SimpleSessionInput } from '../inputs/SessionInput';
25-
import { SpacerSM } from '../basic/Text';
2624
import { ModalDescription } from './shared/ModalDescriptionContainer';
25+
import { ModalFlexContainer } from './shared/ModalFlexContainer';
2726

2827
async function banOrUnBanUserCall(
2928
convo: ConversationModel,
@@ -133,6 +132,7 @@ export const BanOrUnBanUserDialog = (props: {
133132
onClick={banOrUnBanUser}
134133
text={buttonText}
135134
disabled={inProgress}
135+
buttonColor={isBan && !hasPubkeyOnLoad ? SessionButtonColor.Danger : undefined}
136136
dataTestId={isBan ? 'ban-user-confirm-button' : 'unban-user-confirm-button'}
137137
/>
138138
{/*
@@ -162,27 +162,27 @@ export const BanOrUnBanUserDialog = (props: {
162162
</ModalActionsContainer>
163163
}
164164
>
165-
<Flex $container={true} $flexDirection="column" $alignItems="center" width="100%">
165+
<ModalFlexContainer>
166166
<ModalDescription
167167
dataTestId="modal-description"
168168
localizerProps={{ token: isBan ? 'banUserDescription' : 'banUnbanUserDescription' }}
169169
/>
170+
170171
<SimpleSessionInput
171172
inputRef={inputRef}
172173
placeholder={localize('accountId').toString()}
173174
onValueChanged={setInputBoxValue}
174175
disabled={inProgress || !!pubkey}
175176
value={pubkey ? inputTextToDisplay : inputBoxValue}
176177
errorDataTestId="error-message"
178+
padding="var(--margins-sm) var(--margins-md)"
177179
providedError={''}
178180
// don't do anything on enter as we don't know if the user wants to ban or ban-delete-all
179181
onEnterPressed={() => {}}
180182
inputDataTestId={isBan ? 'ban-user-input' : 'unban-user-input'}
181183
/>
182-
183184
<SessionSpinner loading={inProgress} />
184-
<SpacerSM />
185-
</Flex>
185+
</ModalFlexContainer>
186186
</SessionWrapperModal>
187187
);
188188
};

‎ts/components/dialog/DeleteAccountModal.tsx‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { useDispatch } from 'react-redux';
33

44
import { updateDeleteAccountModal } from '../../state/ducks/modalDialog';
55
import { SessionButton, SessionButtonColor, SessionButtonType } from '../basic/SessionButton';
6-
import { SpacerLG } from '../basic/Text';
76
import { SessionSpinner } from '../loading';
87

98
import {
@@ -18,6 +17,7 @@ import {
1817
SessionWrapperModal,
1918
} from '../SessionWrapperModal';
2019
import { ModalDescription } from './shared/ModalDescriptionContainer';
20+
import { ModalFlexContainer } from './shared/ModalFlexContainer';
2121

2222
const DEVICE_ONLY = 'device_only' as const;
2323
const DEVICE_AND_NETWORK = 'device_and_network' as const;
@@ -159,16 +159,17 @@ export const DeleteAccountModal = () => {
159159
</ModalActionsContainer>
160160
}
161161
>
162-
{askingConfirmation ? (
163-
<DescriptionWhenAskingConfirmation deleteMode={deleteMode} />
164-
) : (
165-
<DescriptionBeforeAskingConfirmation
166-
deleteMode={deleteMode}
167-
setDeleteMode={setDeleteMode}
168-
/>
169-
)}
170-
{isLoading && <SpacerLG />}
171-
<SessionSpinner loading={isLoading} />
162+
<ModalFlexContainer>
163+
{askingConfirmation ? (
164+
<DescriptionWhenAskingConfirmation deleteMode={deleteMode} />
165+
) : (
166+
<DescriptionBeforeAskingConfirmation
167+
deleteMode={deleteMode}
168+
setDeleteMode={setDeleteMode}
169+
/>
170+
)}
171+
<SessionSpinner loading={isLoading} />
172+
</ModalFlexContainer>
172173
</SessionWrapperModal>
173174
);
174175
};

‎ts/components/dialog/HideRecoveryPasswordDialog.tsx‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
} from '../SessionWrapperModal';
1313
import { localize } from '../../localization/localeTools';
1414
import { ModalDescription } from './shared/ModalDescriptionContainer';
15+
import { ModalFlexContainer } from './shared/ModalFlexContainer';
1516

1617
export type HideRecoveryPasswordDialogProps = {
1718
state: 'firstWarning' | 'secondWarning';
@@ -81,16 +82,17 @@ export function HideRecoveryPasswordDialog(props: HideRecoveryPasswordDialogProp
8182
</ModalActionsContainer>
8283
}
8384
>
84-
<ModalDescription
85-
dataTestId="modal-description"
86-
localizerProps={{
87-
token:
88-
state === 'firstWarning'
89-
? 'recoveryPasswordHidePermanentlyDescription1'
90-
: 'recoveryPasswordHidePermanentlyDescription2',
91-
}}
92-
/>
93-
85+
<ModalFlexContainer>
86+
<ModalDescription
87+
dataTestId="modal-description"
88+
localizerProps={{
89+
token:
90+
state === 'firstWarning'
91+
? 'recoveryPasswordHidePermanentlyDescription1'
92+
: 'recoveryPasswordHidePermanentlyDescription2',
93+
}}
94+
/>
95+
</ModalFlexContainer>
9496
<SpacerMD />
9597
</SessionWrapperModal>
9698
);

‎ts/components/dialog/LocalizedPopupDialog.tsx‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,11 @@ import {
88
} from '../../state/ducks/modalDialog';
99
import { ModalBasicHeader, SessionWrapperModal } from '../SessionWrapperModal';
1010
import { SessionButton, SessionButtonType } from '../basic/SessionButton';
11-
import { Flex } from '../basic/Flex';
1211
import { SpacerSM, SpacerXS } from '../basic/Text';
1312
import { localize } from '../../localization/localeTools';
1413
import { Localizer } from '../basic/Localizer';
1514
import { ModalDescription } from './shared/ModalDescriptionContainer';
15+
import { ModalFlexContainer } from './shared/ModalFlexContainer';
1616

1717
const StyledScrollDescriptionContainer = styled.div`
1818
max-height: 150px;
@@ -50,21 +50,15 @@ export function LocalizedPopupDialog(props: LocalizedPopupDialogState) {
5050
</StyledScrollDescriptionContainer>
5151
<SpacerSM />
5252

53-
<Flex
54-
$container={true}
55-
width={'100%'}
56-
$justifyContent="center"
57-
$alignItems="center"
58-
$flexGap="var(--margins-md)"
59-
>
53+
<ModalFlexContainer>
6054
<SessionButton
6155
buttonType={SessionButtonType.Simple}
6256
onClick={onClose}
6357
dataTestId="session-confirm-ok-button"
6458
>
6559
{localize('okay')}
6660
</SessionButton>
67-
</Flex>
61+
</ModalFlexContainer>
6862
<SpacerXS />
6963
</SessionWrapperModal>
7064
);

‎ts/components/dialog/ModeratorsAddDialog.tsx‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import { PubKey } from '../../session/types';
77
import { ToastUtils } from '../../session/utils';
88
import { ConvoHub } from '../../session/conversations';
99
import { updateAddModeratorsModal } from '../../state/ducks/modalDialog';
10-
import { Flex } from '../basic/Flex';
1110
import { SessionButton, SessionButtonType } from '../basic/SessionButton';
1211
import { SessionSpinner } from '../loading';
1312
import { localize } from '../../localization/localeTools';
@@ -17,10 +16,10 @@ import {
1716
ModalActionsContainer,
1817
SessionWrapperModal,
1918
} from '../SessionWrapperModal';
20-
import { SimpleSessionInput } from '../inputs/SessionInput';
21-
import { SpacerMD } from '../basic/Text';
19+
import { ModalSimpleSessionInput } from '../inputs/SessionInput';
2220
import { ClearInputButton } from '../inputs/ClearInputButton';
2321
import { ModalDescription } from './shared/ModalDescriptionContainer';
22+
import { ModalFlexContainer } from './shared/ModalFlexContainer';
2423

2524
type Props = {
2625
conversationId: string;
@@ -109,20 +108,19 @@ export const AddModeratorsDialog = (props: Props) => {
109108
</ModalActionsContainer>
110109
}
111110
>
112-
<Flex $container={true} $flexDirection="column" $alignItems="center">
111+
<ModalFlexContainer>
113112
<ModalDescription
114113
dataTestId="modal-description"
115114
localizerProps={{ token: 'addAdminsDescription' }}
116115
/>
117116

118-
<SimpleSessionInput
117+
<ModalSimpleSessionInput
119118
placeholder={localize('accountId').toString()}
120119
onValueChanged={setInputBoxValue}
121120
disabled={addingInProgress}
122121
value={inputBoxValue}
123122
ariaLabel="account Id input"
124123
textSize="md"
125-
padding={'var(--margins-md) var(--margins-md)'}
126124
inputDataTestId="add-admins-input"
127125
onEnterPressed={() => void addAsModerator()}
128126
errorDataTestId="error-message"
@@ -140,8 +138,7 @@ export const AddModeratorsDialog = (props: Props) => {
140138
/>
141139

142140
<SessionSpinner loading={addingInProgress} />
143-
<SpacerMD />
144-
</Flex>
141+
</ModalFlexContainer>
145142
</SessionWrapperModal>
146143
);
147144
};

0 commit comments

Comments
 (0)