fix: address regression tests UI issues

_locales/en/messages.json

@@ -251,7 +251,7 @@
   "userBanned": "Banned successfully",
   "userBanFailed": "Ban failed!",
   "leaveGroup": "Leave Group",
-  "leaveAndRemoveForEveryone": "Leave Group and remove for everyone",
+  "leaveAndRemoveForEveryone": "Leave Group and Remove for Everyone",
   "leaveGroupConfirmation": "Are you sure you want to leave this group?",
   "leaveGroupConfirmationAdmin": "As you are the admin of this group, if you leave it it will be removed for every current members. Are you sure you want to leave this group?",
   "cannotRemoveCreatorFromGroup": "Cannot remove this user",
@@ -274,6 +274,8 @@
   "removeAccountPasswordDescription": "Remove the password required to unlock Session.",
   "enterPassword": "Please enter your password",
   "confirmPassword": "Confirm password",
+  "enterNewPassword": "Please enter your new password",
+  "confirmNewPassword": "Confirm new password",
   "showRecoveryPhrasePasswordRequest": "Please enter your password",
   "recoveryPhraseSavePromptMain": "Your recovery phrase is the master key to your Session ID — you can use it to restore your Session ID if you lose access to your device. Store your recovery phrase in a safe place, and don't give it to anyone.",
   "invalidOpenGroupUrl": "Invalid URL",

stylesheets/_quote.scss

@@ -89,6 +89,7 @@
   margin-bottom: 5px;
   margin-top: 10px;
   padding-left: 10px;
+  padding-right: 5px;
 }
 
 .module-quote--no-click {

stylesheets/_session.scss

@@ -319,7 +319,7 @@ pre {
   overflow: hidden;
   min-width: 30px;
   // To limit messages with things forcing them wider, like long attachment names
-  max-width: calc(100vw - 380px - 100px);
+  max-width: 100%;
   align-items: center;
 }
 label {
@@ -793,7 +793,7 @@ label {
       align-items: center;
 
       max-width: 90%;
-      width: 600px;
+      min-width: 400px;
 
       background: var(--color-cell-background);
       color: var(--color-text);

ts/components/basic/SessionToggle.tsx

@@ -26,10 +26,10 @@ const StyledSessionToggle = styled.div<{ active: boolean }>`
   border: 1px solid #e5e5ea; // TODO Theming update
   border-radius: 16px;
   position: relative;
-
   cursor: pointer;
   background-color: rgba(0, 0, 0, 0);
   transition: var(--default-duration);
+  flex-shrink: 0;
 
   background-color: ${props =>
     props.active ? 'var(--color-accent)' : 'var(--color-clickable-hovered)'};

ts/components/conversation/ExpireTimer.tsx

@@ -23,6 +23,7 @@ const ExpireTimerCount = styled.div<{
   text-transform: uppercase;
   user-select: none;
   color: ${props => props.color};
+  flex-shrink: 0;
 `;
 
 const ExpireTimerBucket = styled.div`

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

@@ -44,6 +44,10 @@ const StyledMessageContentContainer = styled.div<{ direction: 'left' | 'right' }
   }
 `;
 
+const StyledMessageWithAuthor = styled.div<{ isOutgoing: boolean }>`
+  max-width: ${props => (props.isOutgoing ? 'calc(100% - 17px)' : '100%')};
+`;
+
 export const MessageContentWithStatuses = (props: Props) => {
   const contentProps = useSelector(state =>
     getMessageContentWithStatusesSelectorProps(state as any, props.messageId)
@@ -122,11 +126,11 @@ export const MessageContentWithStatuses = (props: Props) => {
           messageId={messageId}
           isCorrectSide={isIncoming}
         />
-        <div>
+        <StyledMessageWithAuthor isOutgoing={!isIncoming}>
           <MessageAuthorText messageId={messageId} />
 
           <MessageContent messageId={messageId} isDetailView={isDetailView} />
-        </div>
+        </StyledMessageWithAuthor>
         <MessageStatus
           dataTestId="msg-status-outgoing"
           messageId={messageId}

ts/components/dialog/SessionPasswordDialog.tsx

@@ -50,14 +50,21 @@ export class SessionPasswordDialog extends React.Component<Props, State> {
 
   public render() {
     const { passwordAction } = this.props;
-    const placeholders =
-      passwordAction === 'change'
-        ? [
+    let placeholders: Array<string> = [];
+    switch (passwordAction) {
+      case 'change':
+        placeholders = [
           window.i18n('typeInOldPassword'),
           window.i18n('enterPassword'),
           window.i18n('confirmPassword'),
-          ]
-        : [window.i18n('enterPassword'), window.i18n('confirmPassword')];
+        ];
+        break;
+      case 'remove':
+        placeholders = [window.i18n('enterPassword'), window.i18n('confirmPassword')];
+        break;
+      default:
+        placeholders = [window.i18n('enterNewPassword'), window.i18n('confirmNewPassword')];
+    }
 
     const confirmButtonColor =
       passwordAction === 'remove' ? SessionButtonColor.Danger : SessionButtonColor.Green;

ts/models/conversation.ts

@@ -2069,11 +2069,7 @@ export class ConversationModel extends Backbone.Model<ConversationAttributes> {
         attachments
           .filter(
             (attachment: any) =>
-              attachment &&
-              attachment.contentType &&
-              !attachment.pending &&
-              !attachment.error &&
-              attachment?.thumbnail?.path // loadAttachmentData throws if the thumbnail.path is not set
+              attachment && attachment.contentType && !attachment.pending && !attachment.error
           )
           .slice(0, 1)
           .map(async (attachment: any) => {
@@ -2084,7 +2080,7 @@ export class ConversationModel extends Backbone.Model<ConversationAttributes> {
               // Our protos library complains about this field being undefined, so we
               //   force it to null
               fileName: fileName || null,
-              thumbnail: thumbnail
+              thumbnail: attachment?.thumbnail?.path // loadAttachmentData throws if the thumbnail.path is not set
                 ? {
                     ...(await loadAttachmentData(thumbnail)),
                     objectUrl: getAbsoluteAttachmentPath(thumbnail.path),

ts/session/utils/Toast.tsx

@@ -141,9 +141,9 @@ export function pushedMissedCall(conversationName: string) {
   );
 }
 
-const openPrivacySettings = () => {
+const openPermissionsSettings = () => {
   window.inboxStore?.dispatch(showLeftPaneSection(SectionType.Settings));
-  window.inboxStore?.dispatch(showSettingsSection(SessionSettingCategory.Privacy));
+  window.inboxStore?.dispatch(showSettingsSection(SessionSettingCategory.Permissions));
 };
 
 export function pushedMissedCallCauseOfPermission(conversationName: string) {
@@ -153,7 +153,7 @@ export function pushedMissedCallCauseOfPermission(conversationName: string) {
       title={window.i18n('callMissedTitle')}
       description={window.i18n('callMissedCausePermission', [conversationName])}
       type={SessionToastType.Info}
-      onToastClick={openPrivacySettings}
+      onToastClick={openPermissionsSettings}
     />,
     { toastId: id, updateId: id, autoClose: 10000 }
   );
@@ -172,7 +172,7 @@ export function pushVideoCallPermissionNeeded() {
     'videoCallPermissionNeeded',
     window.i18n('cameraPermissionNeededTitle'),
     window.i18n('cameraPermissionNeeded'),
-    openPrivacySettings
+    openPermissionsSettings
   );
 }
 
@@ -181,10 +181,7 @@ export function pushAudioPermissionNeeded() {
     'audioPermissionNeeded',
     window.i18n('audioPermissionNeededTitle'),
     window.i18n('audioPermissionNeeded'),
-    () => {
-      window.inboxStore?.dispatch(showLeftPaneSection(SectionType.Settings));
-      window.inboxStore?.dispatch(showSettingsSection(SessionSettingCategory.Privacy));
-    }
+    openPermissionsSettings
   );
 }
 

ts/types/LocalizerKeys.ts

@@ -84,6 +84,7 @@ export type LocalizerKeys =
   | 'mustBeApproved'
   | 'appMenuHideOthers'
   | 'sendFailed'
+  | 'enterNewPassword'
   | 'expandedReactionsText'
   | 'openMessageRequestInbox'
   | 'enterPassword'
@@ -261,6 +262,7 @@ export type LocalizerKeys =
   | 'audioMessageAutoplayDescription'
   | 'leaveAndRemoveForEveryone'
   | 'previewThumbnail'
+  | 'primaryColorPurple'
   | 'photo'
   | 'setPassword'
   | 'editMenuDeleteContact'
@@ -291,7 +293,7 @@ export type LocalizerKeys =
   | 'newMessage'
   | 'windowMenuClose'
   | 'mainMenuFile'
-  | 'primaryColorPurple'
+  | 'confirmNewPassword'
   | 'callMissed'
   | 'getStarted'
   | 'reactionListCountSingular'