diff --git a/images/icons/v2/bell-disabled-outline-24.svg b/images/icons/v2/bell-disabled-outline-24.svg index 0529c8fa08..37bfd8a7db 100644 --- a/images/icons/v2/bell-disabled-outline-24.svg +++ b/images/icons/v2/bell-disabled-outline-24.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/images/icons/v2/bell-disabled-solid-24.svg b/images/icons/v2/bell-disabled-solid-24.svg index b0c7fa717e..55a55de7eb 100644 --- a/images/icons/v2/bell-disabled-solid-24.svg +++ b/images/icons/v2/bell-disabled-solid-24.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/images/icons/v2/bell-outline-24.svg b/images/icons/v2/bell-outline-24.svg index cdfea27b95..81f7d70598 100644 --- a/images/icons/v2/bell-outline-24.svg +++ b/images/icons/v2/bell-outline-24.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/images/icons/v2/bell-solid-24.svg b/images/icons/v2/bell-solid-24.svg index 12a5a70ad3..813820c71a 100644 --- a/images/icons/v2/bell-solid-24.svg +++ b/images/icons/v2/bell-solid-24.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/images/icons/v2/phone-outline-24.svg b/images/icons/v2/phone-outline-24.svg new file mode 100644 index 0000000000..76fa8539c3 --- /dev/null +++ b/images/icons/v2/phone-outline-24.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/icons/v2/phone-solid-24.svg b/images/icons/v2/phone-solid-24.svg new file mode 100644 index 0000000000..618be9f5a6 --- /dev/null +++ b/images/icons/v2/phone-solid-24.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/images/icons/v2/video-solid-24.svg b/images/icons/v2/video-solid-24.svg index 26241301bd..946e19520f 100644 --- a/images/icons/v2/video-solid-24.svg +++ b/images/icons/v2/video-solid-24.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/stylesheets/components/Button.scss b/stylesheets/components/Button.scss index e7ee1fb886..76f5dd622a 100644 --- a/stylesheets/components/Button.scss +++ b/stylesheets/components/Button.scss @@ -202,12 +202,12 @@ border-radius: 8px; display: flex; flex-direction: column; - font-size: 9px; + font-size: 11px; justify-content: center; - line-height: 14px; + line-height: 10px; min-height: 44px; - min-width: 60px; - padding: 0 8px; + min-width: 68px; + padding: 8px; @include light-theme { background-color: $color-gray-05; @@ -224,9 +224,13 @@ box-shadow: 0 0 0 2px $color-ultramarine; } } + + &::before { + margin-bottom: 6px; + } } - &__icon { + &--icon { @mixin button-icon($icon) { content: ''; display: block; @@ -242,11 +246,22 @@ } &--audio::before { - @include button-icon('../images/icons/v2/phone-right-outline-24.svg'); + @include light-theme { + @include button-icon('../images/icons/v2/phone-outline-24.svg'); + } + + @include dark-theme { + @include button-icon('../images/icons/v2/phone-solid-24.svg'); + } } &--muted::before { - @include button-icon('../images/icons/v2/bell-disabled-outline-24.svg'); + @include light-theme { + @include button-icon('../images/icons/v2/bell-disabled-outline-24.svg'); + } + @include dark-theme { + @include button-icon('../images/icons/v2/bell-disabled-solid-24.svg'); + } } &--photo::before { @@ -262,11 +277,22 @@ } &--unmuted::before { - @include button-icon('../images/icons/v2/bell-outline-24.svg'); + @include light-theme { + @include button-icon('../images/icons/v2/bell-outline-24.svg'); + } + @include dark-theme { + @include button-icon('../images/icons/v2/bell-solid-24.svg'); + } } &--video::before { - @include button-icon('../images/icons/v2/video-outline-24.svg'); + @include light-theme { + @include button-icon('../images/icons/v2/video-outline-24.svg'); + } + + @include dark-theme { + @include button-icon('../images/icons/v2/video-solid-24.svg'); + } } } } diff --git a/ts/components/Button.tsx b/ts/components/Button.tsx index 4c091b767b..a1d7585799 100644 --- a/ts/components/Button.tsx +++ b/ts/components/Button.tsx @@ -125,7 +125,7 @@ export const Button = React.forwardRef( 'module-Button', sizeClassName, variantClassName, - `module-Button__icon--${icon}`, + icon && `module-Button--icon--${icon}`, className )} disabled={disabled} diff --git a/ts/components/conversation/conversation-details/ConversationDetailsHeader.tsx b/ts/components/conversation/conversation-details/ConversationDetailsHeader.tsx index 3529568bee..23b982b5cb 100644 --- a/ts/components/conversation/conversation-details/ConversationDetailsHeader.tsx +++ b/ts/components/conversation/conversation-details/ConversationDetailsHeader.tsx @@ -9,6 +9,7 @@ import { AvatarLightbox } from '../../AvatarLightbox'; import type { ConversationType } from '../../../state/ducks/conversations'; import { Emojify } from '../Emojify'; import { GroupDescription } from '../GroupDescription'; +import { About } from '../About'; import type { GroupV2Membership } from './ConversationDetailsMembershipList'; import type { LocalizerType } from '../../../types/Util'; import { bemGenerator } from './util'; @@ -54,7 +55,16 @@ export const ConversationDetailsHeader: React.ComponentType = ({ ]); } } else if (!isMe) { - subtitle = conversation.phoneNumber; + subtitle = ( + <> + + + + + {conversation.phoneNumber} + + > + ); } const avatar = (