diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 206c71fd3..43d8ff6f7 100644 --- a/_locales/en/messages.json +++ b/_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$", diff --git a/ts/components/buttons/PanelButton.tsx b/ts/components/buttons/PanelButton.tsx index 33585d0c0..284f1e993 100644 --- a/ts/components/buttons/PanelButton.tsx +++ b/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); diff --git a/ts/components/conversation/right-panel/overlay/OverlayDisappearingMessages.tsx b/ts/components/conversation/right-panel/overlay/OverlayDisappearingMessages.tsx index bb332a28c..7ab9e61e6 100644 --- a/ts/components/conversation/right-panel/overlay/OverlayDisappearingMessages.tsx +++ b/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 ( - - {options.map((option: any) => ( - { - setSelected(option.value); - }} - disableBg={true} - /> - ))} - + <> + {window.i18n('timer')} + + {options.map((option: any) => ( + { + setSelected(option.value); + }} + disableBg={true} + /> + ))} + + ); }; diff --git a/ts/types/LocalizerKeys.ts b/ts/types/LocalizerKeys.ts index 172f5e292..b256b41a8 100644 --- a/ts/types/LocalizerKeys.ts +++ b/ts/types/LocalizerKeys.ts @@ -188,6 +188,7 @@ export type LocalizerKeys = | 'areYouSureDeleteEntireAccount' | 'noGivenPassword' | 'closedGroupInviteOkText' + | 'timer' | 'readReceiptSettingTitle' | 'copySessionID' | 'timerOption_0_seconds'