[57092] Right side of the instance upper banner looks misaligned (#16737

)

* replace bell icon with bell octicon

* set auto width for the header button

* remove line-height for menu item action

* remove additional space

* fix jumping icons

* undo last commit

frontend/src/app/features/in-app-notifications/bell/in-app-notification-bell.component.html

@@ -3,7 +3,7 @@
   data-test-selector="op-ian-bell"
   [href]="notificationsPath()"
 >
-  <op-icon icon-classes="icon-bell"></op-icon>
+  <svg bell-fill-icon size="small"></svg>
   <ng-container *ngIf="(unreadCount$ | async) as unreadCount">
     <span
       *ngIf="unreadCount !== 0"

frontend/src/app/shared/components/icon/icon.module.ts

@@ -29,6 +29,7 @@ import {
   StarFillIconComponent,
   StarIconComponent,
   XIconComponent,
+  BellFillIconComponent,
   OpGitlabIssueClosedIconComponent,
   OpGitlabLabelsIconComponent,
   OpGitlabIssueOpenIconComponent,
@@ -81,6 +82,7 @@ import {
     StarFillIconComponent,
     StarIconComponent,
     XIconComponent,
+    BellFillIconComponent,
 
     OpGitlabIssueClosedIconComponent,
     OpGitlabLabelsIconComponent,
@@ -136,6 +138,7 @@ import {
     StarFillIconComponent,
     StarIconComponent,
     XIconComponent,
+    BellFillIconComponent,
 
     OpGitlabIssueOpenIconComponent,
     OpGitlabIssueClosedIconComponent,

frontend/src/global_styles/common/header/app-menu.sass

@@ -31,7 +31,6 @@
     justify-content: center
     align-items: center
     height: var(--header-height)
-    line-height: var(--header-height)
     zoom: 1
     color: var(--header-item-font-color)
     font-size: var(--header-item-font-size)

frontend/src/global_styles/primer/_overrides.sass

@@ -86,6 +86,7 @@ sub-header,
 .Button.op-app-header--primer-button,
 .Button.op-app-header--primer-button .Button-visual
   color: var(--header-item-font-color)
+  width: auto
 
   &:hover
     background: var(--header-item-bg-hover-color)