GetStream/stream-chat-angular

Global font-family style breaks other fonts

ilyakonrad opened this issue ยท 3 comments

While creating a custom channelHeaderInfoTemplate that on click opens a popup with channel members, I've faced an issue related to Angular Material icon-buttons. The font was broken:

image

It turns out to be the result of this CSS:

image

Here's my channel-header-info-template.component.html:

<app-fade-in *ngIf="channel">
  <button class="open-member-list-button" (click)="openMembersList()">
    {{ channel.data?.member_count }} {{ channel.data?.member_count === 1 ? 'member' : 'members' }}
    {{ channel.state?.watcher_count || 0 }} {{ 'chat.online' | translate }}
  </button>

  <app-popup
    *ngIf="membersListPopup.open"
    [loading]="membersListPopup.loading"
    (popupClose)="membersListPopup.open = false"
  >
    <h3 class="popup__header">
      <span>Members</span>
      <div class="popup__header-button-wrapper">
        <div class="popup__header-buttons">
          <button mat-icon-button (click)="membersListPopup.open = false">
             <mat-icon>close</mat-icon>
          </button>
        </div>
      </div>
    </h3>
    ...
  </app-popup>
</app-fade-in>

Thanks for reporting the issue, it's indeed unnecessary to have the extra * in the font-family selector. I'll fix it, you'll be notified through this issue when it's released.

๐ŸŽ‰ This issue has been resolved in version 4.66.4 ๐ŸŽ‰

The release is available on:

Your semantic-release bot ๐Ÿ“ฆ๐Ÿš€

๐ŸŽ‰ This issue has been resolved in version 5.0.0-v5.12 ๐ŸŽ‰

The release is available on:

Your semantic-release bot ๐Ÿ“ฆ๐Ÿš€