diff --git a/_locales/en/messages.json b/_locales/en/messages.json index bab2dc344755..cb03c2d5237f 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -43,6 +43,10 @@ "messageformat": "Add “{contact}” to the group “{group}”", "description": "Shown in the confirmation dialog body when adding a contact to a group" }, + "icu:AddUserToAnotherGroupModal__search-placeholder": { + "messageformat": "Search", + "description": "Placeholder to use when searching for groups in the AddUserToAnotherGroupModal" + }, "icu:AddUserToAnotherGroupModal__toast--user-added-to-group": { "messageformat": "{contact} was added to {group}", "description": "Shown in toast after a user is added to an existing group" @@ -356,7 +360,7 @@ "description": "Placeholder of the search input in left pane when looking up someone by phone number" }, "icu:LeftPaneFindByHelper__description--findByUsername": { - "messageformat": "Enter a full username with its pair of digits.", + "messageformat": "Enter a username followed by a dot and its set of numbers.", "description": "Description displayed under search input in left pane when looking up someone by username" }, "icu:CountryCodeSelect__placeholder": { diff --git a/stylesheets/components/ContactModal.scss b/stylesheets/components/ContactModal.scss index 06cd0188528c..efc08b84523b 100644 --- a/stylesheets/components/ContactModal.scss +++ b/stylesheets/components/ContactModal.scss @@ -7,7 +7,7 @@ flex-direction: column; justify-content: center; margin-top: 4px; - margin-bottom: 16px; + margin-bottom: 24px; &__name { @include button-reset(); @@ -17,7 +17,7 @@ flex-direction: row; align-items: baseline; - margin-top: 6px; + margin-top: 12px; cursor: pointer; } @@ -63,8 +63,8 @@ display: flex; align-items: center; - padding-block: 7px; - padding-inline: 16px; + padding-block: 6px; + padding-inline: 24px; width: 100%; &:last-child { @@ -94,7 +94,7 @@ display: flex; justify-content: center; align-items: center; - margin-inline-end: 10px; + margin-inline-end: 12px; width: 20px; } @@ -130,6 +130,19 @@ } } + &__block__bubble-icon { + height: 20px; + width: 20px; + + @include light-theme { + @include color-svg('../images/icons/v3/block/block.svg', $color-gray-75); + } + + @include dark-theme { + @include color-svg('../images/icons/v3/block/block.svg', $color-gray-15); + } + } + &__make-admin__bubble-icon { height: 20px; width: 20px; @@ -239,4 +252,33 @@ ); } } + + &__quick-actions { + display: flex; + flex-direction: row; + justify-content: center; + gap: 16px; + + margin-block: 16px; + } + + &__divider { + // Full width minus margin + width: calc(100% - 48px); + + border-style: solid; + border-bottom: none; + border-width: 1px; + + @include light-theme { + border-color: $color-gray-15; + } + + @include dark-theme { + border-color: $color-gray-75; + } + + margin-block: 8px 5px; + margin-inline: 24px; + } } diff --git a/ts/components/AddUserToAnotherGroupModal.tsx b/ts/components/AddUserToAnotherGroupModal.tsx index bc929b133d8b..5f6f00e180f8 100644 --- a/ts/components/AddUserToAnotherGroupModal.tsx +++ b/ts/components/AddUserToAnotherGroupModal.tsx @@ -175,7 +175,9 @@ export function AddUserToAnotherGroupModal({
void; hideContactModal: () => void; + onOutgoingAudioCallInConversation: (conversationId: string) => unknown; + onOutgoingVideoCallInConversation: (conversationId: string) => unknown; removeMemberFromGroup: (conversationId: string, contactId: string) => void; showConversation: ShowConversationType; toggleAdmin: (conversationId: string, contactId: string) => void; @@ -62,19 +65,24 @@ enum SubModalState { None = 'None', ToggleAdmin = 'ToggleAdmin', MemberRemove = 'MemberRemove', + ConfirmingBlock = 'ConfirmingBlock', } export function ContactModal({ areWeAdmin, areWeASubscriber, badges, + blockConversation, contact, conversation, + hasActiveCall, hasStories, hideContactModal, i18n, isAdmin, isMember, + onOutgoingAudioCallInConversation, + onOutgoingVideoCallInConversation, removeMemberFromGroup, showConversation, theme, @@ -160,6 +168,27 @@ export function ContactModal({ /> ); break; + case SubModalState.ConfirmingBlock: + modalNode = ( + blockConversation(contact.id), + style: 'affirmative', + }, + ]} + i18n={i18n} + onClose={() => setSubModalState(SubModalState.None)} + title={i18n('icu:MessageRequests--block-direct-confirm-title', { + title: contact.title, + })} + > + {i18n('icu:MessageRequests--block-direct-confirm-body')} + + ); + break; default: { const state: never = subModalState; log.warn(`ContactModal: unexpected ${state}!`); @@ -221,31 +250,61 @@ export function ContactModal({ -
- -
{!contact.isMe && ( -
- +
+ + +
)} +
- + {!contact.isMe && ( + + )} {!contact.isMe && (