diff --git a/_locales/en/messages.json b/_locales/en/messages.json index adafcd090..df9361b1b 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -5150,6 +5150,10 @@ "messageformat": "Disappears in", "description": "In the message details screen, shown as a label of how long it will be before the message disappears" }, + "icu:MessageDetail__view-edits": { + "messageformat": "View edit history", + "description": "Link to view a message's edit history" + }, "icu:ProfileEditor--about": { "messageformat": "About", "description": "Default text for about field" diff --git a/stylesheets/components/CompositionInput.scss b/stylesheets/components/CompositionInput.scss index 3c441a998..e1c6fc9fe 100644 --- a/stylesheets/components/CompositionInput.scss +++ b/stylesheets/components/CompositionInput.scss @@ -424,6 +424,7 @@ } &__attachment img { + border-radius: 4px; height: 18px; position: absolute; inset-inline-end: 8px; diff --git a/stylesheets/components/ConversationDetails.scss b/stylesheets/components/ConversationDetails.scss index 54c989da0..2bc0fe438 100644 --- a/stylesheets/components/ConversationDetails.scss +++ b/stylesheets/components/ConversationDetails.scss @@ -253,6 +253,12 @@ } } + &--edit { + &::after { + @include details-icon('../images/icons/v3/edit/edit.svg'); + } + } + &--down { border-radius: 18px; @include light-theme { diff --git a/stylesheets/components/EditHistoryMessagesModal.scss b/stylesheets/components/EditHistoryMessagesModal.scss index 66820212c..879bda271 100644 --- a/stylesheets/components/EditHistoryMessagesModal.scss +++ b/stylesheets/components/EditHistoryMessagesModal.scss @@ -3,7 +3,16 @@ .EditHistoryMessagesModal { &__divider { + border-style: solid; margin-block: 24px; + + @include light-theme { + border-color: $color-gray-15; + } + + @include dark-theme { + border-color: $color-gray-75; + } } &__title { diff --git a/stylesheets/components/MessageDetail.scss b/stylesheets/components/MessageDetail.scss index 564cb4275..65f66dbb6 100644 --- a/stylesheets/components/MessageDetail.scss +++ b/stylesheets/components/MessageDetail.scss @@ -39,18 +39,6 @@ } } -.module-message-detail__contact-container { - border-top: 1px solid $color-gray-15; - margin-top: 36px; - - @include light-theme { - border-top-color: $color-gray-15; - } - @include dark-theme { - border-top-color: $color-gray-75; - } -} - .module-message-detail__contact-group__header { @include font-body-1-bold; align-items: center; diff --git a/ts/components/conversation/MessageDetail.tsx b/ts/components/conversation/MessageDetail.tsx index 261de4112..6df791229 100644 --- a/ts/components/conversation/MessageDetail.tsx +++ b/ts/components/conversation/MessageDetail.tsx @@ -27,6 +27,12 @@ import { formatDateTimeLong } from '../../util/timestamp'; import { DurationInSeconds } from '../../util/durations'; import { format as formatRelativeTime } from '../../util/expirationTimer'; import { missingCaseError } from '../../util/missingCaseError'; +import { PanelRow } from './conversation-details/PanelRow'; +import { PanelSection } from './conversation-details/PanelSection'; +import { + ConversationDetailsIcon, + IconType, +} from './conversation-details/ConversationDetailsIcon'; export type Contact = Pick< ConversationType, @@ -88,6 +94,7 @@ export type PropsReduxActions = Pick< | 'saveAttachment' | 'showContactModal' | 'showConversation' + | 'showEditHistoryModal' | 'showExpiredIncomingTapToViewToast' | 'showExpiredOutgoingTapToViewToast' | 'showLightbox' @@ -131,6 +138,7 @@ export function MessageDetail({ saveAttachment, showContactModal, showConversation, + showEditHistoryModal, showExpiredIncomingTapToViewToast, showExpiredOutgoingTapToViewToast, showLightbox, @@ -321,123 +329,150 @@ export function MessageDetail({ return ( // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+ {i18n('icu:error')} + | ++ {' '} + {error.message}{' '} + | +
- {i18n('icu:error')} + {i18n('icu:sent')} |
- {' '}
- {error.message}{' '}
+ |
{i18n('icu:sent')} | -
- |