feat: improved conversation header title

stylesheets/_modules.scss

@@ -342,7 +342,7 @@
 
   min-width: 0;
   font-size: 16px;
-  line-height: 24px;
+  line-height: 26px;
   font-weight: 400;
   color: var(--text-primary-color);
 

ts/components/conversation/header/ConversationHeaderSubtitle.tsx

@@ -96,10 +96,10 @@ export const ConversationHeaderSubitle = (props: ConversationHeaderSubitleProps)
       >
         <SessionIconButton
           iconColor={'var(--button-icon-stroke-selected-color)'}
-          iconSize={'medium'}
+          iconSize={'small'}
           iconType="chevron"
           iconRotation={90}
-          margin={'0 var(--margins-xs) 0 0'}
+          margin={'0 3px 0 0'}
           onClick={() => {
             handleTitleCycle(-1);
           }}
@@ -128,10 +128,10 @@ export const ConversationHeaderSubitle = (props: ConversationHeaderSubitleProps)
         </span>
         <SessionIconButton
           iconColor={'var(--button-icon-stroke-selected-color)'}
-          iconSize={'medium'}
+          iconSize={'small'}
           iconType="chevron"
           iconRotation={270}
-          margin={'0 0 0 var(--margins-xs)'}
+          margin={'0 0 0 3px'}
           onClick={() => {
             handleTitleCycle(1);
           }}
@@ -142,7 +142,7 @@ export const ConversationHeaderSubitle = (props: ConversationHeaderSubitleProps)
       <SubtitleDotMenu
         options={subtitles}
         selectedOptionIndex={currentIndex}
-        style={{ visibility: subtitles.length < 2 ? 'hidden' : undefined, margin: '3px 0' }}
+        style={{ display: subtitles.length < 2 ? 'none' : undefined, margin: '8px 0' }}
       />
     </StyledSubtitleContainer>
   );

ts/components/conversation/header/ConversationHeaderTitle.tsx

@@ -144,12 +144,6 @@ export const ConversationHeaderTitle = () => {
           <span
             className="module-contact-name__profile-name"
             data-testid="header-conversation-name"
-            style={{
-              marginBottom:
-                subtitles && subtitles[visibleTitleIndex] && subtitles.length > 1
-                  ? '-5px'
-                  : undefined,
-            }}
           >
             {convoName}
           </span>

ts/themes/globals.tsx

@@ -110,7 +110,7 @@ export const THEME_GLOBALS: ThemeGlobals = {
   '--border-radius': '5px',
   '--border-radius-message-box': '16px',
 
-  '--main-view-header-height': '63px',
+  '--main-view-header-height': '68px',
   '--composition-container-height': '60px',
   '--search-input-height': '34px',