Add about field to ConversationDetailsHeader

images/icons/v2/bell-disabled-outline-24.svg

@@ -1 +1 @@
-<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m21.057 4.1-.957-1.156-2.786 2.318a5.981 5.981 0 0 0 -11.176 1.465l-1.427 6.843a7.284 7.284 0 0 1 -1.749 3.651l-2.019 1.679.957 1.156zm-14.877 9.776 1.42-6.832a4.5 4.5 0 0 1 8.533-.8l-10.323 8.605a3.552 3.552 0 0 0 .37-.973zm15.82 3.624a1.5 1.5 0 0 1 -1.5 1.5h-14.983l1.8-1.5h13.175a5.511 5.511 0 0 1 -2.664-3.606l-.915-4.387 1.306-1.088 1.074 5.151a4.033 4.033 0 0 0 1.975 2.646 1.486 1.486 0 0 1 .732 1.284zm-12.45 3h4.9a2.5 2.5 0 0 1 -4.9 0z"/></svg>
+<svg height="24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M21.057 4.1 20.1 2.944l-2.786 2.318A5.981 5.981 0 0 0 6.138 6.727L4.711 13.57a7.284 7.284 0 0 1-1.749 3.651L.943 18.9l.957 1.156zM6.18 13.876 7.6 7.044a4.5 4.5 0 0 1 8.533-.8L5.81 14.849a3.552 3.552 0 0 0 .37-.973zM22 17.5a1.5 1.5 0 0 1-1.5 1.5H5.517l1.8-1.5h13.175a5.511 5.511 0 0 1-2.664-3.606l-.915-4.387 1.306-1.088 1.074 5.151a4.033 4.033 0 0 0 1.975 2.646A1.486 1.486 0 0 1 22 17.5zm-12.45 3h4.9a2.5 2.5 0 0 1-4.9 0z"/></svg>

images/icons/v2/bell-disabled-solid-24.svg

@@ -1 +1 @@
-<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m1.9 20.056-.957-1.156 2.122-1.769a6.1 6.1 0 0 0 1.646-3.561l1.427-6.843a5.981 5.981 0 0 1 11.176-1.465l2.786-2.318.957 1.156zm10.1 2.444a2.5 2.5 0 0 0 2.45-2h-4.9a2.5 2.5 0 0 0 2.45 2zm9.264-6.284a4.033 4.033 0 0 1 -1.975-2.646l-1.074-5.151-12.698 10.581h14.983a1.5 1.5 0 0 0 .764-2.784z"/></svg>
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M21.057 4.1 20.1 2.944l-2.786 2.318A5.98 5.98 0 0 0 6.138 6.727L4.711 13.57a6.1 6.1 0 0 1-1.646 3.565L.943 18.9l.957 1.156L21.057 4.1ZM12 22.5a2.5 2.5 0 0 0 2.45-2h-4.9a2.5 2.5 0 0 0 2.45 2ZM21.264 16.216a4.031 4.031 0 0 1-1.975-2.646l-1.074-5.151-12.698 10.58H20.5a1.5 1.5 0 0 0 .764-2.783Z" fill="#000"/></svg>

images/icons/v2/bell-outline-24.svg

@@ -1 +1 @@
-<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m14.45 20.5a2.5 2.5 0 0 1 -4.9 0zm-2.45-17a4.521 4.521 0 0 0 -4.4 3.544l-1.42 6.832a5.537 5.537 0 0 1 -2.674 3.624h16.982a5.511 5.511 0 0 1 -2.664-3.6l-1.431-6.867a4.517 4.517 0 0 0 -4.393-3.533m0-1.5a6 6 0 0 1 5.862 4.727l1.427 6.843a4.033 4.033 0 0 0 1.975 2.646 1.5 1.5 0 0 1 -.764 2.784h-17a1.5 1.5 0 0 1 -.732-2.8 4.036 4.036 0 0 0 1.943-2.63l1.427-6.843a6 6 0 0 1 5.862-4.727z"/></svg>
+<svg height="24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M14.45 20.5a2.5 2.5 0 0 1-4.9 0zM12 3.5a4.521 4.521 0 0 0-4.4 3.544l-1.42 6.832A5.537 5.537 0 0 1 3.506 17.5h16.982a5.511 5.511 0 0 1-2.664-3.6l-1.431-6.867A4.517 4.517 0 0 0 12 3.5M12 2a6 6 0 0 1 5.862 4.727l1.427 6.843a4.033 4.033 0 0 0 1.975 2.646A1.5 1.5 0 0 1 20.5 19h-17a1.5 1.5 0 0 1-.732-2.8 4.036 4.036 0 0 0 1.943-2.63l1.427-6.843A6 6 0 0 1 12 2z"/></svg>

images/icons/v2/bell-solid-24.svg

@@ -1 +1 @@
-<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m14.45 20.5a2.5 2.5 0 0 1 -4.9 0zm6.814-4.284a4.033 4.033 0 0 1 -1.975-2.646l-1.427-6.843a6 6 0 0 0 -11.724 0l-1.427 6.843a4.036 4.036 0 0 1 -1.943 2.63 1.5 1.5 0 0 0 .732 2.8h17a1.5 1.5 0 0 0 .764-2.784z"/></svg>
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.45 20.5a2.5 2.5 0 0 1-4.9 0h4.9Zm6.814-4.284a4.032 4.032 0 0 1-1.975-2.646l-1.427-6.843a6 6 0 0 0-11.724 0L4.71 13.57a4.036 4.036 0 0 1-1.943 2.63A1.5 1.5 0 0 0 3.5 19h17a1.5 1.5 0 0 0 .764-2.784Z" fill="#000"/></svg>

images/icons/v2/phone-outline-24.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.21 22a8.084 8.084 0 0 1-2.66-.51 20.791 20.791 0 0 1-7.3-4.73 21 21 0 0 1-4.74-7.3c-.78-2.22-.67-4 .35-5.45a5 5 0 0 1 2-1.67 2.72 2.72 0 0 1 3.51.81l2.11 3a2.69 2.69 0 0 1-.35 3.49c-.37.34-.62.58-.93.85-.09.08-.15.22-.08.31A20.015 20.015 0 0 0 11 13c.69.69 1.428 1.328 2.21 1.91a.24.24 0 0 0 .3-.08c.28-.32.51-.57.85-.93a2.68 2.68 0 0 1 3.49-.35l3 2.11a2.679 2.679 0 0 1 .85 3.43 5.22 5.22 0 0 1-1.71 2 4.69 4.69 0 0 1-2.78.91ZM4.09 4.87c-.46.64-1 1.77-.16 4.08a19.28 19.28 0 0 0 4.38 6.74A19.493 19.493 0 0 0 15 20.07c2.31.81 3.44.3 4.09-.16a3.55 3.55 0 0 0 1.2-1.42A1.21 1.21 0 0 0 20 16.9l-3-2.12a1.18 1.18 0 0 0-1.53.15c-.33.36-.56.6-.82.9a1.72 1.72 0 0 1-2.33.29 21.914 21.914 0 0 1-2.37-2.05 22.204 22.204 0 0 1-2-2.37 1.71 1.71 0 0 1 .3-2.32l.89-.82A1.19 1.19 0 0 0 9.21 7L7.1 4a1.19 1.19 0 0 0-1.51-.38 3.72 3.72 0 0 0-1.5 1.25Z" fill="#000"/></svg>

images/icons/v2/phone-solid-24.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.47 4.44c-.51.73-1.19 2.1-.25 4.77a20.18 20.18 0 0 0 11.57 11.57c2.67.94 4 .26 4.77-.25A4.369 4.369 0 0 0 21 18.76a1.93 1.93 0 0 0-.61-2.47l-3-2.11a1.92 1.92 0 0 0-2.51.25l-.84.91a1 1 0 0 1-1.31.19 20.288 20.288 0 0 1-2.29-2 20.291 20.291 0 0 1-2-2.29A1 1 0 0 1 8.66 10l.91-.84a1.92 1.92 0 0 0 .25-2.56l-2.11-3A1.93 1.93 0 0 0 5.24 3a4.29 4.29 0 0 0-1.77 1.44Z" fill="#000"/></svg>

images/icons/v2/video-solid-24.svg

@@ -1 +1 @@
-<svg height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m23 8.06v7.88a1 1 0 0 1 -1.42.91l-3.58-1.65v-6.4l3.58-1.65a1 1 0 0 1 1.42.91zm-6.5 8.94v-10a3 3 0 0 0 -3-3h-9.5a3 3 0 0 0 -3 3v10a3 3 0 0 0 3 3h9.5a3 3 0 0 0 3-3z"/></svg>
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23 8.563v6.874a1 1 0 0 1-1.42.908l-3.08-1.422V9.077l3.08-1.422a1 1 0 0 1 1.42.908ZM2.535 4.876A2.639 2.639 0 0 0 1.4 5.939 3.854 3.854 0 0 0 1 8.105V15.9c-.08.746.059 1.498.4 2.166.263.46.658.83 1.134 1.063a4.6 4.6 0 0 0 2.31.376h8.309a4.6 4.6 0 0 0 2.31-.376 2.639 2.639 0 0 0 1.137-1.068c.34-.666.48-1.417.4-2.161V8.105a3.854 3.854 0 0 0-.4-2.166 2.64 2.64 0 0 0-1.134-1.063 4.6 4.6 0 0 0-2.312-.376H4.846a4.6 4.6 0 0 0-2.311.376Z" fill="#000"/></svg>

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

@@ -125,7 +125,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

@@ -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<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 = (