fix: header alignment in right panel

ts/components/buttons/PanelButton.tsx

@@ -10,7 +10,7 @@ export const StyledContent = styled.div<{ disabled: boolean }>`
   color: ${props => (props.disabled ? 'var(--disabled-color)' : 'inherit')};
 `;
 
-export const StyledText = styled.span`
+export const StyledText = styled.span<{ color?: string }>`
   font-size: var(--font-size-md);
   font-weight: 500;
   white-space: nowrap;
@@ -19,6 +19,7 @@ export const StyledText = styled.span`
   width: 100%;
   /* TODO needs RTL support */
   text-align: left;
+  ${props => props.color && `color: ${props.color};`}
 `;
 
 export const PanelLabel = styled.p`

ts/components/conversation/right-panel/overlay/disappearing-messages/Header.tsx

@@ -1,65 +0,0 @@
-import React from 'react';
-import { useDispatch } from 'react-redux';
-import styled from 'styled-components';
-import { closeRightPanel } from '../../../../../state/ducks/conversations';
-import { resetRightOverlayMode } from '../../../../../state/ducks/section';
-import { Flex } from '../../../../basic/Flex';
-import { SessionIconButton } from '../../../../icon';
-
-const StyledTitle = styled.h2`
-  font-family: var(--font-default);
-  text-align: center;
-  margin-top: 0px;
-  margin-bottom: 0px;
-`;
-
-const StyledSubTitle = styled.h3`
-  font-family: var(--font-default);
-  font-size: 11px;
-  font-weight: 400;
-  text-align: center;
-  padding-top: 0px;
-  margin-top: 0;
-`;
-
-type HeaderProps = {
-  title: string;
-  subtitle: string;
-};
-
-export const Header = (props: HeaderProps) => {
-  const { title, subtitle } = props;
-  const dispatch = useDispatch();
-
-  return (
-    <Flex container={true} width={'100%'} padding={'32px var(--margins-lg) var(--margins-md)'}>
-      <SessionIconButton
-        iconSize={'medium'}
-        iconType={'chevron'}
-        iconRotation={90}
-        onClick={() => {
-          dispatch(resetRightOverlayMode());
-        }}
-      />
-      <Flex
-        container={true}
-        flexDirection={'column'}
-        justifyContent={'flex-start'}
-        alignItems={'center'}
-        width={'100%'}
-        margin={'-5px auto auto'}
-      >
-        <StyledTitle>{title}</StyledTitle>
-        <StyledSubTitle>{subtitle}</StyledSubTitle>
-      </Flex>
-      <SessionIconButton
-        iconSize={'tiny'}
-        iconType={'exit'}
-        onClick={() => {
-          dispatch(closeRightPanel());
-          dispatch(resetRightOverlayMode());
-        }}
-      />
-    </Flex>
-  );
-};

ts/components/conversation/right-panel/overlay/disappearing-messages/OverlayDisappearingMessages.tsx

@@ -19,16 +19,10 @@ import { ReleasedFeatures } from '../../../../../util/releaseFeature';
 import { Flex } from '../../../../basic/Flex';
 import { SessionButton } from '../../../../basic/SessionButton';
 import { SpacerLG, SpacerXL } from '../../../../basic/Text';
+import { Header, HeaderSubtitle, HeaderTitle, StyledScrollContainer } from '../components';
 import { DisappearingModes } from './DisappearingModes';
-import { Header } from './Header';
 import { TimeOptions } from './TimeOptions';
 
-const StyledScrollContainer = styled.div`
-  width: 100%;
-  height: 100%;
-  overflow: hidden auto;
-`;
-
 const StyledContainer = styled(Flex)`
   .session-button {
     font-weight: 500;
@@ -167,16 +161,16 @@ export const OverlayDisappearingMessages = () => {
   return (
     <StyledScrollContainer>
       <StyledContainer container={true} flexDirection={'column'} alignItems={'center'}>
-        <Header
+        <Header>
-          title={window.i18n('disappearingMessages')}
+          <HeaderTitle>{window.i18n('disappearingMessages')}</HeaderTitle>
-          subtitle={
+          <HeaderSubtitle>
-            singleMode === 'deleteAfterRead'
+            {singleMode === 'deleteAfterRead'
               ? window.i18n('disappearingMessagesModeAfterReadSubtitle')
               : singleMode === 'deleteAfterSend'
               ? window.i18n('disappearingMessagesModeAfterSendSubtitle')
-              : window.i18n('settingAppliesToYourMessages')
+              : window.i18n('settingAppliesToYourMessages')}
-          }
+          </HeaderSubtitle>
-        />
+        </Header>
         <DisappearingModes
           options={disappearingModeOptions}
           selected={modeSelected}

ts/components/conversation/right-panel/overlay/message-info/components/MessageFrom.tsx

@@ -8,7 +8,7 @@ const StyledFromContainer = styled.div`
   display: flex;
   gap: var(--margins-lg);
   align-items: center;
-  padding: var(--margins-xs);
+  padding: var(--margins-xs) var(--margins-xs) var(--margins-xs) 0;
 `;
 const StyledAuthorNamesContainer = styled.div`
   display: flex;