From 447b1adee3d62b3625d885b1acc19b477e00ae45 Mon Sep 17 00:00:00 2001 From: yash-signal Date: Tue, 22 Apr 2025 12:33:51 -0500 Subject: [PATCH] Release notes UI fixes --- images/icons/v3/official/official-compact.svg | 5 +++- .../v3/official/official-fill-compact.svg | 1 + .../{official.svg => official-fill.svg} | 0 images/profile-avatar.svg | 27 ++++++++++++------- stylesheets/components/Avatar.scss | 6 ++--- stylesheets/components/ContactModal.scss | 4 +-- .../components/ConversationDetails.scss | 8 ++++++ stylesheets/components/ConversationHero.scss | 19 ++++++++----- ts/components/conversation/ContactName.tsx | 10 ++++++- .../conversation/ConversationHero.stories.tsx | 2 ++ .../conversation/ConversationHero.tsx | 19 ++++++++----- .../ConversationDetails.tsx | 2 +- .../ConversationDetailsIcon.tsx | 1 + 13 files changed, 74 insertions(+), 30 deletions(-) create mode 100644 images/icons/v3/official/official-fill-compact.svg rename images/icons/v3/official/{official.svg => official-fill.svg} (100%) diff --git a/images/icons/v3/official/official-compact.svg b/images/icons/v3/official/official-compact.svg index e546bf5efa..e9c36fac80 100644 --- a/images/icons/v3/official/official-compact.svg +++ b/images/icons/v3/official/official-compact.svg @@ -1 +1,4 @@ - \ No newline at end of file + + + + \ No newline at end of file diff --git a/images/icons/v3/official/official-fill-compact.svg b/images/icons/v3/official/official-fill-compact.svg new file mode 100644 index 0000000000..e546bf5efa --- /dev/null +++ b/images/icons/v3/official/official-fill-compact.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/icons/v3/official/official.svg b/images/icons/v3/official/official-fill.svg similarity index 100% rename from images/icons/v3/official/official.svg rename to images/icons/v3/official/official-fill.svg diff --git a/images/profile-avatar.svg b/images/profile-avatar.svg index 68da034b5f..50772c4fe0 100644 --- a/images/profile-avatar.svg +++ b/images/profile-avatar.svg @@ -1,10 +1,19 @@ - - - - - - - - - + + + + + + + + + + + + + + + + + + diff --git a/stylesheets/components/Avatar.scss b/stylesheets/components/Avatar.scss index 39bff7d3ec..7e2292655e 100644 --- a/stylesheets/components/Avatar.scss +++ b/stylesheets/components/Avatar.scss @@ -177,14 +177,14 @@ &--signal-official { .module-Avatar__contents { align-items: center; - background-color: variables.$color-ultramarine; + background-color: #3640fd; display: flex; justify-content: center; } .module-Avatar__image { - height: 66%; - width: 66%; + height: 62%; + width: 62%; } } } diff --git a/stylesheets/components/ContactModal.scss b/stylesheets/components/ContactModal.scss index 79efa297d2..fc2ca32923 100644 --- a/stylesheets/components/ContactModal.scss +++ b/stylesheets/components/ContactModal.scss @@ -288,7 +288,7 @@ width: 100%; height: 100%; @include mixins.color-svg( - '../images/icons/v3/official/official-compact.svg', + '../images/icons/v3/official/official-fill-compact.svg', variables.$color-ultramarine ); } @@ -313,7 +313,7 @@ width: 100%; height: 100%; @include mixins.color-svg( - '../images/icons/v3/official/official.svg', + '../images/icons/v3/official/official-fill.svg', variables.$color-ultramarine ); } diff --git a/stylesheets/components/ConversationDetails.scss b/stylesheets/components/ConversationDetails.scss index 7708ac690d..85db763fba 100644 --- a/stylesheets/components/ConversationDetails.scss +++ b/stylesheets/components/ConversationDetails.scss @@ -266,6 +266,14 @@ } } + &--official { + &::after { + @include details-icon( + '../images/icons/v3/official/official-compact.svg' + ); + } + } + &--heart { &::after { @include details-icon('../images/icons/v3/heart/heart.svg'); diff --git a/stylesheets/components/ConversationHero.scss b/stylesheets/components/ConversationHero.scss index de6763551b..5db11ede24 100644 --- a/stylesheets/components/ConversationHero.scss +++ b/stylesheets/components/ConversationHero.scss @@ -45,11 +45,16 @@ align-items: center; justify-content: center; - @include mixins.font-title-2; + @include mixins.font-title-1; margin-bottom: 2px; margin-top: 0; color: light-dark(variables.$color-gray-90, variables.$color-gray-05); + + .module-contact-name { + display: flex; + align-items: center; + } } &__with { @@ -137,16 +142,16 @@ max-width: 255px; margin-inline: auto; + margin-block-start: 10px; padding-block: 16px; padding-inline: 20px; border-radius: 18px; - background-color: #e0e8fc; - margin-inline: auto; + background-color: light-dark(#eeefff, #3b3d50); display: flex; flex-direction: column; gap: 8px; - color: variables.$color-gray-75; + color: light-dark(variables.$color-gray-75, variables.$color-gray-02); } &__release-notes-notice-content { @@ -162,8 +167,8 @@ top: 3px; @include mixins.color-svg( - '../images/icons/v3/check/check-circle-fill.svg', - variables.$color-borage-blue + '../images/icons/v3/official/official-compact.svg', + light-dark(variables.$color-gray-75, variables.$color-gray-05) ); } @@ -178,7 +183,7 @@ @include mixins.color-svg( '../images/icons/v3/bell/bell-compact.svg', - variables.$color-gray-75 + light-dark(variables.$color-gray-75, variables.$color-gray-05) ); } diff --git a/ts/components/conversation/ContactName.tsx b/ts/components/conversation/ContactName.tsx index 019e738970..fff9133883 100644 --- a/ts/components/conversation/ContactName.tsx +++ b/ts/components/conversation/ContactName.tsx @@ -43,6 +43,7 @@ export type PropsType = ContactNameData & { module?: string; preferFirstName?: boolean; onClick?: VoidFunction; + largeVerifiedBadge?: boolean; }; export function ContactName({ @@ -54,6 +55,7 @@ export function ContactName({ preferFirstName, title, onClick, + largeVerifiedBadge, }: PropsType): JSX.Element { const getClassName = getClassNamesFor('module-contact-name', module); @@ -75,7 +77,13 @@ export function ContactName({ > {(isSignalConversation || isMe) && ( - + )} ); diff --git a/ts/components/conversation/ConversationHero.stories.tsx b/ts/components/conversation/ConversationHero.stories.tsx index 28c4ce91be..5107c89379 100644 --- a/ts/components/conversation/ConversationHero.stories.tsx +++ b/ts/components/conversation/ConversationHero.stories.tsx @@ -120,6 +120,8 @@ DirectNoGroupsJustProfile.args = { export const SignalConversation = Template.bind({}); SignalConversation.args = { + avatarUrl: 'images/profile-avatar.svg', + title: 'Signal', isSignalConversation: true, phoneNumber: casual.phone, }; diff --git a/ts/components/conversation/ConversationHero.tsx b/ts/components/conversation/ConversationHero.tsx index c5beae0a4d..938ef9d00f 100644 --- a/ts/components/conversation/ConversationHero.tsx +++ b/ts/components/conversation/ConversationHero.tsx @@ -291,10 +291,20 @@ export function ConversationHero({ let titleElem: JSX.Element | undefined; if (isMe) { - titleElem = <>{i18n('icu:noteToSelf')}; + titleElem = ( + + ); } else if (isSignalConversation || conversationType !== 'direct') { titleElem = ( - + ); } else if (title) { titleElem = ( @@ -336,10 +346,7 @@ export function ConversationHero({ theme={theme} title={title} /> -

- {titleElem} - {isMe && } -

+

{titleElem}

{about && !isMe && (
diff --git a/ts/components/conversation/conversation-details/ConversationDetails.tsx b/ts/components/conversation/conversation-details/ConversationDetails.tsx index e53fbb1bc5..fafc24b12c 100644 --- a/ts/components/conversation/conversation-details/ConversationDetails.tsx +++ b/ts/components/conversation/conversation-details/ConversationDetails.tsx @@ -495,7 +495,7 @@ export function ConversationDetails({ icon={ } label={i18n('icu:ConversationHero--signal-official-chat')} diff --git a/ts/components/conversation/conversation-details/ConversationDetailsIcon.tsx b/ts/components/conversation/conversation-details/ConversationDetailsIcon.tsx index 346a826a2b..e2526eea87 100644 --- a/ts/components/conversation/conversation-details/ConversationDetailsIcon.tsx +++ b/ts/components/conversation/conversation-details/ConversationDetailsIcon.tsx @@ -26,6 +26,7 @@ export enum IconType { 'mention' = 'mention', 'mute' = 'mute', 'notifications' = 'notifications', + 'official' = 'official', 'reset' = 'reset', 'share' = 'share', 'spinner' = 'spinner',