fix: add new designs of typing message settings with animation

stylesheets/_session.scss

@@ -192,7 +192,7 @@ textarea {
 
   &.brand {
     min-width: 165px;
-    height: 45px;
+    height: 34px;
     align-items: center;
     padding: 0px var(--margins-lg);
     font-size: $session-font-md;

ts/components/conversation/SessionMessagesListContainer.tsx

@@ -7,8 +7,6 @@ import { connect } from 'react-redux';
 
 import { SessionMessagesList } from './SessionMessagesList';
 import autoBind from 'auto-bind';
-import { ConversationTypeEnum } from '../../models/conversationAttributes';
-import { getConversationController } from '../../session/conversations';
 import {
   quotedMessageToAnimate,
   ReduxConversationType,
@@ -93,13 +91,6 @@ class SessionMessagesListContainerInner extends React.Component<Props> {
       return null;
     }
 
-    let displayedName = null;
-    if (conversation.type === ConversationTypeEnum.PRIVATE) {
-      displayedName = getConversationController().getContactProfileNameOrShortenedPubKey(
-        conversationKey
-      );
-    }
-
     return (
       <div
         className="messages-container"
@@ -109,9 +100,7 @@ class SessionMessagesListContainerInner extends React.Component<Props> {
         data-testid="messages-container"
       >
         <TypingBubble
-          pubkey={conversationKey}
           conversationType={conversation.type}
-          displayedName={displayedName}
           isTyping={!!conversation.isTyping}
           key="typing-bubble"
         />

ts/components/conversation/TypingBubble.tsx

@@ -5,9 +5,6 @@ import styled from 'styled-components';
 import { ConversationTypeEnum } from '../../models/conversationAttributes';
 
 interface TypingBubbleProps {
-  avatarPath?: string;
-  pubkey: string;
-  displayedName: string | null;
   conversationType: ConversationTypeEnum;
   isTyping: boolean;
 }

ts/components/settings/SessionSettingListItem.tsx

@@ -32,12 +32,24 @@ const StyledInfo = styled.div`
   padding-inline-end: var(--margins-lg);
 `;
 
-const SettingsTitleAndDescription = (props: { title?: string; description?: string }) => {
+const StyledDescriptionContainer = styled(StyledDescription)`
+  display: flex;
+  align-items: center;
+`;
+
+const SettingsTitleAndDescription = (props: {
+  title?: string;
+  description?: string;
+  childrenDescription?: React.ReactNode;
+}) => {
+  const { description, childrenDescription, title } = props;
   return (
     <StyledInfo>
-      <StyledTitle>{props.title}</StyledTitle>
-
-      {props.description && <StyledDescription>{props.description}</StyledDescription>}
+      <StyledTitle>{title}</StyledTitle>
+      <StyledDescriptionContainer>
+        {description && <StyledDescription>{description}</StyledDescription>}
+        <>{childrenDescription}</>
+      </StyledDescriptionContainer>
     </StyledInfo>
   );
 };
@@ -46,13 +58,20 @@ export const SessionSettingsItemWrapper = (props: {
   inline: boolean;
   title?: string;
   description?: string;
+  isTypingMessageItem?: boolean;
   children?: React.ReactNode;
+  childrenDescription?: React.ReactNode;
 }) => {
-  const ComponentToRender = props.inline ? StyledSettingItemInline : StyledSettingItem;
+  const { inline, children, description, title, childrenDescription } = props;
+  const ComponentToRender = inline ? StyledSettingItemInline : StyledSettingItem;
   return (
     <ComponentToRender>
-      <SettingsTitleAndDescription title={props.title} description={props.description} />
-      <div>{props.children}</div>
+      <SettingsTitleAndDescription
+        title={title}
+        description={description}
+        childrenDescription={childrenDescription}
+      />
+      <div>{children}</div>
     </ComponentToRender>
   );
 };
@@ -79,11 +98,24 @@ export const SessionToggleWithDescription = (props: {
   active: boolean;
   onClickToggle: () => void;
   confirmationDialogParams?: SessionConfirmDialogProps;
+  childrenDescription?: React.ReactNode; // if set, those elements will be appended next to description field (only used for typing message settings as of now)
 }) => {
-  const { title, description, active, onClickToggle, confirmationDialogParams } = props;
+  const {
+    title,
+    description,
+    active,
+    onClickToggle,
+    confirmationDialogParams,
+    childrenDescription,
+  } = props;
 
   return (
-    <SessionSettingsItemWrapper title={title} description={description} inline={true}>
+    <SessionSettingsItemWrapper
+      title={title}
+      description={description}
+      inline={true}
+      childrenDescription={childrenDescription}
+    >
       <SessionToggle
         active={active}
         onClick={onClickToggle}

ts/components/settings/SessionSettings.tsx

@@ -27,10 +27,8 @@ export function getCallMediaPermissionsSettings() {
 export enum SessionSettingCategory {
   Privacy = 'privacy',
   Notifications = 'notifications',
-
   Conversations = 'conversations',
   MessageRequests = 'messageRequests',
-
   Appearance = 'appearance',
   Permissions = 'permissions',
   Help = 'help',

ts/components/settings/section/CategoryPrivacy.tsx

@@ -3,8 +3,11 @@ import React from 'react';
 import useUpdate from 'react-use/lib/useUpdate';
 import { Data, hasLinkPreviewPopupBeenDisplayed } from '../../../data/data';
 import { SettingsKey } from '../../../data/settings-key';
+import { ConversationTypeEnum } from '../../../models/conversationAttributes';
 import { sessionPassword, updateConfirmModal } from '../../../state/ducks/modalDialog';
 import { SessionButtonColor, SessionButtonType } from '../../basic/SessionButton';
+import { SpacerLG } from '../../basic/Text';
+import { TypingBubble } from '../../conversation/TypingBubble';
 import { PasswordAction } from '../../dialog/SessionPasswordDialog';
 
 import { SessionSettingButtonItem, SessionToggleWithDescription } from '../SessionSettingListItem';
@@ -39,6 +42,16 @@ async function toggleLinkPreviews() {
   }
 }
 
+const TypingBubbleItem = () => {
+  return (
+    <>
+      <SpacerLG />
+
+      <TypingBubble conversationType={ConversationTypeEnum.PRIVATE} isTyping={true} />
+    </>
+  );
+};
+
 export const SettingsCategoryPrivacy = (props: {
   hasPassword: boolean | null;
   onPasswordUpdated: (action: string) => void;
@@ -68,6 +81,7 @@ export const SettingsCategoryPrivacy = (props: {
           title={window.i18n('typingIndicatorsSettingTitle')}
           description={window.i18n('typingIndicatorsSettingDescription')}
           active={Boolean(window.getSettingValue(SettingsKey.settingsTypingIndicator))}
+          childrenDescription={<TypingBubbleItem />}
         />
         <SessionToggleWithDescription
           onClickToggle={async () => {