Use no_results component for notification center page. Therefore the HTML of the no-results box was a bit harmonised throughout the system.

config/locales/js-en.yml

@@ -572,6 +572,9 @@ en:
         and_more_users:
           one: 'and 1 other'
           other: 'and %{count} others'
+        no_results:
+          at_all: 'New notifications will appear here when there is activity that concerns you'
+          with_current_filter: 'There are no notifications in this view at the moment'
         mark_all_read: 'Mark all as read'
         mark_as_read: 'Mark as read'
         text_update_date: "%{date} by"
@@ -589,10 +592,11 @@ en:
         mentioned: '@mentioned'
         watching: 'Watching'
       settings:
+        change_notification_settings: 'To view and change your notification settings, <a target="_blank" href="%{url}">click here</a>'
         title: "Notification settings"
         notify_me: "Notify me"
-        reasons: 
-          mentioned: 
+        reasons:
+          mentioned:
             title: 'I am @mentioned'
             description: 'Receive a notification every time someone mentions me anywhere'
           involved:

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

@@ -24,14 +24,12 @@
       </cdk-virtual-scroll-viewport>
     </ng-container>
     <ng-template #noResults>
-      <div class="generic-table--no-results-container" *ngIf="(loading$ | async) === false">
-        <span
-            class="generic-table--no-results-title"
-        >
-          <op-icon icon-classes="icon-info1"></op-icon>
-          {{ noResultText$ | async }}
-        </span>
-      </div>
+      <no-results *ngIf="(loading$ | async) === false"
+                  [title]="noResultText$ | async"
+                  [description]="text.change_notification_settings"
+                  [showIcon]="false"
+      >
+      </no-results>
     </ng-template>
   </div>
   <div class="op-ian-center--footer">

frontend/src/app/features/in-app-notifications/center/in-app-notification-center.component.ts

@@ -22,6 +22,8 @@ import {
 } from 'core-app/core/state/in-app-notifications/in-app-notification.model';
 import { UntilDestroyedMixin } from 'core-app/shared/helpers/angular/until-destroyed.mixin';
 import { APIV3Service } from 'core-app/core/apiv3/api-v3.service';
+import { PathHelperService } from 'core-app/core/path-helper/path-helper.service';
+import { IanBellService } from 'core-app/features/in-app-notifications/bell/state/ian-bell.service';
 
 @Component({
   selector: 'op-in-app-notification-center',
@@ -40,12 +42,12 @@ export class InAppNotificationCenterComponent extends UntilDestroyedMixin implem
 
   loading$ = this.storeService.query.selectLoading();
 
+  private totalCount$ = this.bellService.unread$;
+
   noResultText$ = this
-    .storeService
-    .query
-    .activeFacet$
+    .totalCount$
     .pipe(
-      map((facet:'unread'|'all') => this.text.no_results[facet] || this.text.no_results.unread),
+      map((count:number) => (count > 0 ? this.text.no_results.with_current_filter : this.text.no_results.at_all)),
     );
 
   totalCountWarning$ = this
@@ -75,11 +77,15 @@ export class InAppNotificationCenterComponent extends UntilDestroyedMixin implem
     .join(',');
 
   text = {
+    change_notification_settings: this.I18n.t(
+      'js.notifications.settings.change_notification_settings',
+      { url: this.pathService.myNotificationsSettingsPath() },
+    ),
     title: this.I18n.t('js.notifications.title'),
     button_close: this.I18n.t('js.button_close'),
     no_results: {
-      unread: this.I18n.t('js.notifications.no_unread'),
-      all: this.I18n.t('js.notice_no_results_to_display'),
+      at_all: this.I18n.t('js.notifications.center.no_results.at_all'),
+      with_current_filter: this.I18n.t('js.notifications.center.no_results.with_current_filter'),
     },
   };
 
@@ -90,9 +96,11 @@ export class InAppNotificationCenterComponent extends UntilDestroyedMixin implem
     readonly elementRef:ElementRef,
     readonly I18n:I18nService,
     readonly storeService:IanCenterService,
+    readonly bellService:IanBellService,
     readonly uiRouterGlobals:UIRouterGlobals,
     readonly state:StateService,
     readonly apiV3:APIV3Service,
+    readonly pathService:PathHelperService,
   ) {
     super();
   }

frontend/src/app/shared/components/no-results/no-results.component.html

@@ -1,5 +1,9 @@
-<i class="icon-info1" aria-hidden="true"></i>
+<i *ngIf="showIcon"
+   class="icon-info1"
+   aria-hidden="true"></i>
 <span class="generic-table--no-results-title">
   {{ title }}
-  <span *ngIf="description" [textContent]="description"></span>
+  <div *ngIf="description"
+       class="generic-table--no-results-description"
+       [innerHTML]="description"></div>
 </span>

frontend/src/app/shared/components/no-results/no-results.component.ts

@@ -38,5 +38,7 @@ export class NoResultsComponent {
 
   @Input() description:string;
 
+  @Input() showIcon = true;
+
   @HostBinding('class.generic-table--no-results-container') setHostClass = true;
 }

frontend/src/global_styles/content/_table.lsg

@@ -394,9 +394,9 @@ Use `-no-ellipse` class to a TD element to disable the text-overflow applied usu
 <div class="generic-table--container" style="height:150px">
   <div class="generic-table--no-results-container">
     <i class="icon-info1"></i>
-    <h2 class="generic-table--no-results-title">
+    <span class="generic-table--no-results-title">
       Nothing to display
-    </h2>
+    </span>
     <div class="generic-table--no-results-description">
       <p>Either nothing have been created or everything is filtered out.</p>
     </div>

frontend/src/global_styles/content/_table.sass

@@ -50,7 +50,7 @@ $toolbar-height--mobile: 100px
     display: contents
   .generic-table
     position: relative
-  
+
 .generic-table--container
   position:     relative
   height:       100%
@@ -124,7 +124,7 @@ table.generic-table
         content:  '*'
         color:    var(--primary-color-dark)
         padding:  0 0.2rem
-      
+
       &.-max
         .generic-table--sort-header
           max-width: none
@@ -280,7 +280,7 @@ thead.-sticky th
     @include text-shortener
     &.-inactive
       color: var(--button--active-font-color)
-      
+
   & > op-icon
     flex: 0 0 0
     padding-left: 15px
@@ -309,7 +309,8 @@ thead.-sticky th
   > i,
   .generic-table--no-results-title
     display:        inline-block
-    font-size:      rem-calc(17)
+    font-size:      1rem
+    font-weight:    bold
     line-height:    1.4
     vertical-align: top
 
@@ -325,7 +326,8 @@ thead.-sticky th
   width:          99%
 
 .generic-table--no-results-description
-  font-size:      rem-calc(15)
+  font-size:      rem-calc(14)
+  font-weight:    normal
   line-height:    1.4
   margin-top:     4px
 

frontend/src/global_styles/content/work_packages/_table_content.lsg

@@ -160,9 +160,9 @@
 <div class="generic-table--container work-package-table--container" style="height:150px">
   <div class="generic-table--no-results-container">
     <i class="icon-info1"></i>
-    <h2 class="generic-table--no-results-title">
+    <span class="generic-table--no-results-title">
       No work packages to display
-    </h2>
+    </span>
     <div class="generic-table--no-results-description">
       <p>Either none have been created or all work packages are filtered out.</p>
     </div>

modules/reporting/lib/widget/table.rb

@@ -69,7 +69,7 @@ class Widget::Table < Widget::Base
     if @subject.result.count <= 0
       write(content_tag(:div, '', class: 'generic-table--no-results-container') do
         content_tag(:i, '', class: 'icon-info1') +
-          content_tag(:h2, I18n.t(:no_results_title_text), class: 'generic-table--no-results-title')
+          content_tag(:span, I18n.t(:no_results_title_text), class: 'generic-table--no-results-title')
       end)
     else
       str = render_widget(resolve_table, @subject, @options.reverse_merge(to: @output))