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,20 +92,23 @@ const TimeOptions = (props: TimerOptionsProps) => {
   const { options, selected, setSelected } = props;
 
   return (
-    <PanelButtonGroup>
+    <>
-      {options.map((option: any) => (
+      <PanelLabel>{window.i18n('timer')}</PanelLabel>
-        <PanelRadioButton
+      <PanelButtonGroup>
-          key={option.name}
+        {options.map((option: any) => (
-          text={option.name}
+          <PanelRadioButton
-          value={option.name}
+            key={option.name}
-          isSelected={selected === option.value}
+            text={option.name}
-          onSelect={() => {
+            value={option.name}
-            setSelected(option.value);
+            isSelected={selected === option.value}
-          }}
+            onSelect={() => {
-          disableBg={true}
+              setSelected(option.value);
-        />
+            }}
-      ))}
+            disableBg={true}
-    </PanelButtonGroup>
+          />
+        ))}
+      </PanelButtonGroup>
+    </>
   );
 };
 

ts/types/LocalizerKeys.ts

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