Add about field to ConversationDetailsHeader

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');
+      }
     }
   }
 }

ts/components/Button.tsx

@@ -124,7 +124,7 @@ export const Button = React.forwardRef<HTMLButtonElement, PropsType>(
           'module-Button',
           sizeClassName,
           variantClassName,
-          `module-Button__icon--${icon}`,
+          icon && `module-Button--icon--${icon}`,
           className
         )}
         disabled={disabled}

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<Props> = ({
       ]);
     }
   } else if (!isMe) {
-    subtitle = conversation.phoneNumber;
+    subtitle = (
+      <>
+        <div className={bem('subtitle__about')}>
+          <About text={conversation.about} />
+        </div>
+        <div className={bem('subtitle__phone-number')}>
+          {conversation.phoneNumber}
+        </div>
+      </>
+    );
   }
 
   const avatar = (