fix: rebuilt disappearing messages header beause syncthing

_locales/en/messages.json

@@ -195,6 +195,7 @@
   "timerOption_1_week": "1 week",
   "timerOption_2_weeks": "2 weeks",
   "disappearingMessages": "Disappearing messages",
+  "disappearingMessagesSubtitle": "This setting applies to everyone in this conversation",
   "set": "Set",
   "changeNickname": "Change Nickname",
   "clearNickname": "Clear Nickname",

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

@@ -2,14 +2,17 @@ import React, { useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import styled from 'styled-components';
 import { setDisappearingMessagesByConvoId } from '../../../../interactions/conversationInteractions';
+import { closeRightPanel } from '../../../../state/ducks/conversations';
 import { resetRightOverlayMode } from '../../../../state/ducks/section';
 import { getSelectedConversationKey } from '../../../../state/selectors/conversations';
 import { getTimerOptions } from '../../../../state/selectors/timerOptions';
+import { Flex } from '../../../basic/Flex';
 import { SessionButton } from '../../../basic/SessionButton';
 import { PanelButtonGroup } from '../../../buttons';
 import { PanelRadioButton } from '../../../buttons/PanelRadioButton';
+import { SessionIconButton } from '../../../icon';
 
-const StyledContainer = styled.div`
+const StyledContainer = styled(Flex)`
   width: 100%;
 
   .session-button {
@@ -20,6 +23,64 @@ const StyledContainer = styled.div`
   }
 `;
 
+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;
+};
+
+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>
+  );
+};
+
 type TimerOptionsProps = {
   options: any[];
   selected: number;
@@ -48,21 +109,17 @@ const TimeOptions = (props: TimerOptionsProps) => {
 };
 
 export const OverlayDisappearingMessages = () => {
-  const dispatch = useDispatch();
   const selectedConversationKey = useSelector(getSelectedConversationKey);
   const timerOptions = useSelector(getTimerOptions).timerOptions;
 
   const [selected, setSelected] = useState(timerOptions[0].value);
 
   return (
-    <StyledContainer>
-      <div
-        onClick={() => {
-          dispatch(resetRightOverlayMode());
-        }}
-      >
-        TODO
-      </div>
+    <StyledContainer container={true} flexDirection={'column'} alignItems={'center'}>
+      <Header
+        title={window.i18n('disappearingMessages')}
+        subtitle={window.i18n('disappearingMessagesSubtitle')}
+      />
       <TimeOptions options={timerOptions} selected={selected} setSelected={setSelected} />
       <SessionButton
         onClick={() => {

ts/types/LocalizerKeys.ts

@@ -461,6 +461,7 @@ export type LocalizerKeys =
   | 'stagedImageAttachment'
   | 'thisWeek'
   | 'savedTheFile'
+  | 'timerSetTo'
   | 'mediaEmptyState'
   | 'linkVisitWarningTitle'
   | 'invalidPassword'
@@ -471,7 +472,7 @@ export type LocalizerKeys =
   | 'autoUpdateNewVersionMessage'
   | 'oneNonImageAtATimeToast'
   | 'reactionPopupMany'
-  | 'timerSetTo'
+  | 'disappearingMessagesSubtitle'
   | 'iAmSure'
   | 'primaryColorRed'
   | 'selectMessage'