diff --git a/stylesheets/components/EditHistoryMessagesModal.scss b/stylesheets/components/EditHistoryMessagesModal.scss index f580fdcb7cff..66820212c21f 100644 --- a/stylesheets/components/EditHistoryMessagesModal.scss +++ b/stylesheets/components/EditHistoryMessagesModal.scss @@ -2,6 +2,14 @@ // SPDX-License-Identifier: AGPL-3.0-only .EditHistoryMessagesModal { + &__divider { + margin-block: 24px; + } + + &__title { + @include font-body-1-bold; + } + .module-message { padding-inline: 0; diff --git a/ts/components/EditHistoryMessagesModal.tsx b/ts/components/EditHistoryMessagesModal.tsx index 7683765747e3..35166f00c116 100644 --- a/ts/components/EditHistoryMessagesModal.tsx +++ b/ts/components/EditHistoryMessagesModal.tsx @@ -95,6 +95,9 @@ export function EditHistoryMessagesModal({ Record >({}); + const [currentMessage, ...pastEdits] = editHistoryMessages; + const currentMessageId = `${currentMessage.id}.${currentMessage.timestamp}`; + return (
- {editHistoryMessages.map(messageAttributes => { + { + const update = { + ...displayLimitById, + [messageId]: displayLimit, + }; + setDisplayLimitById(update); + }} + platform={platform} + showLightbox={closeAndShowLightbox} + showSpoiler={(messageId, data) => { + const update = { + ...revealedSpoilersById, + [messageId]: data, + }; + setRevealedSpoilersById(update); + }} + theme={theme} + /> + +
+ +

+ {i18n('icu:EditHistoryMessagesModal__title')} +

+ + {pastEdits.map(messageAttributes => { const syntheticId = `${messageAttributes.id}.${messageAttributes.timestamp}`; return (