feat: added panel label for timer options

_locales/en/messages.json

@@ -178,6 +178,7 @@
   "messageBody": "Message body",
   "unblockToSend": "Unblock this contact to send a message.",
   "unblockGroupToSend": "This group is blocked. Unlock it if you would like to send a message.",
+  "timer": "Timer",
   "youChangedTheTimer": "You set the disappearing message timer to $time$",
   "timerSetOnSync": "Updated disappearing message timer to $time$",
   "theyChangedTheTimer": "$name$ set the disappearing message timer to $time$",

ts/components/buttons/PanelButton.tsx

@@ -21,6 +21,14 @@ export const StyledText = styled.span`
   text-align: left;
 `;
 
+export const PanelLabel = styled.p`
+  color: var(--text-secondary-color);
+  width: 100%;
+  margin: 0;
+  padding-left: calc(var(--margins-lg) * 2 + var(--margins-sm));
+  padding-bottom: var(--margins-sm);
+`;
+
 const StyledRoundedPanelButtonGroup = styled.div`
   overflow: hidden;
   background: var(--right-panel-item-background-color);

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

@@ -9,6 +9,7 @@ import { getTimerOptions } from '../../../../state/selectors/timerOptions';
 import { Flex } from '../../../basic/Flex';
 import { SessionButton } from '../../../basic/SessionButton';
 import { PanelButtonGroup } from '../../../buttons';
+import { PanelLabel } from '../../../buttons/PanelButton';
 import { PanelRadioButton } from '../../../buttons/PanelRadioButton';
 import { SessionIconButton } from '../../../icon';
 
@@ -91,6 +92,8 @@ const TimeOptions = (props: TimerOptionsProps) => {
   const { options, selected, setSelected } = props;
 
   return (
+    <>
+      <PanelLabel>{window.i18n('timer')}</PanelLabel>
       <PanelButtonGroup>
         {options.map((option: any) => (
           <PanelRadioButton
@@ -105,6 +108,7 @@ const TimeOptions = (props: TimerOptionsProps) => {
           />
         ))}
       </PanelButtonGroup>
+    </>
   );
 };
 

ts/types/LocalizerKeys.ts

@@ -188,6 +188,7 @@ export type LocalizerKeys =
   | 'areYouSureDeleteEntireAccount'
   | 'noGivenPassword'
   | 'closedGroupInviteOkText'
+  | 'timer'
   | 'readReceiptSettingTitle'
   | 'copySessionID'
   | 'timerOption_0_seconds'