diff --git a/images/icons/v2/bell-disabled-outline-24.svg b/images/icons/v2/bell-disabled-outline-24.svg index 0529c8fa080..37bfd8a7db7 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 b0c7fa717ef..55a55de7ebe 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 cdfea27b95c..81f7d705985 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 12a5a70ad3f..813820c71a6 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 00000000000..76fa8539c36 --- /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 00000000000..618be9f5a63 --- /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 26241301bd9..946e19520fe 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 e7ee1fb8868..76f5dd622a1 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 c1ae3395bf8..e2d74676a01 100644 --- a/ts/components/Button.tsx +++ b/ts/components/Button.tsx @@ -124,7 +124,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 3c0b4c7a843..66391979f92 100644 --- a/ts/components/conversation/conversation-details/ConversationDetailsHeader.tsx +++ b/ts/components/conversation/conversation-details/ConversationDetailsHeader.tsx @@ -8,6 +8,7 @@ import { AvatarLightbox } from '../../AvatarLightbox'; import { ConversationType } from '../../../state/ducks/conversations'; import { Emojify } from '../Emojify'; import { GroupDescription } from '../GroupDescription'; +import { About } from '../About'; import { GroupV2Membership } from './ConversationDetailsMembershipList'; import { LocalizerType } from '../../../types/Util'; import { bemGenerator } from './util'; @@ -53,7 +54,16 @@ export const ConversationDetailsHeader: React.ComponentType = ({ ]); } } else if (!isMe) { - subtitle = conversation.phoneNumber; + subtitle = ( + <> +
+ +
+
+ {conversation.phoneNumber} +
+ + ); } const avatar = (