Add page title, add correct table cell titles

app/controllers/my_controller.rb

@@ -85,7 +85,10 @@ class MyController < ApplicationController
   def notifications
     render html: '',
            layout: 'angular',
-           locals: { menu_name: :my_menu }
+           locals: {
+             menu_name: :my_menu,
+             page_title: [I18n.t(:label_my_account), I18n.t('js.notifications.settings.title')]
+           }
   end
 
   # Create a new feeds key

app/views/layouts/angular.html.erb

@@ -28,6 +28,7 @@ See docs/COPYRIGHT.rdoc for more details.
 ++#%>
 
 <%= content_for :header_tags do %>
+  <% html_title(*local_assigns[:page_title]) if local_assigns[:page_title].present? %>
   <%= nonced_javascript_tag do %>
     <%= include_gon(need_tag: false) -%>
   <% end %>

frontend/src/app/features/user-preferences/notifications-settings/table/notification-settings-table.component.html

@@ -20,13 +20,19 @@
     </thead>
     <tbody>
       <tr>
-        <th class="op-table--cell op-table--cell_soft-heading">{{ text.mentioned_header }}</th>
+        <th class="op-table--cell op-table--cell_soft-heading">
+          <h5>{{ text.mentioned_header.title }}</h5>
+          <p>{{ text.mentioned_header.description }}</p>
+        </th>
         <ng-container *ngFor="let item of settings.controls">
           <td class="op-table--cell"><input type="checkbox" disabled checked /></td>
         </ng-container>
       </tr>
       <tr>
-        <th class="op-table--cell op-table--cell_soft-heading">{{ text.involved_header }}</th>
+        <th class="op-table--cell op-table--cell_soft-heading">
+          <h5>{{ text.involved_header.title }}</h5>
+          <p>{{ text.involved_header.description }}</p>
+        </th>
         <ng-container *ngFor="let item of settings.controls">
           <td class="op-table--cell" [formGroup]="item">
             <input

frontend/src/app/features/user-preferences/notifications-settings/table/notification-settings-table.component.ts

@@ -25,8 +25,14 @@ export class NotificationSettingsTableComponent {
   text = {
     notify_me: this.I18n.t('js.notifications.settings.notify_me'),
     save: this.I18n.t('js.button_save'),
-    mentioned_header: this.I18n.t('js.notifications.settings.reasons.mentioned.title'),
-    involved_header: this.I18n.t('js.notifications.settings.reasons.involved.title'),
+    mentioned_header: {
+      title: this.I18n.t('js.notifications.settings.reasons.mentioned.title'),
+      description: this.I18n.t('js.notifications.settings.reasons.mentioned.description'),
+    },
+    involved_header: {
+      title: this.I18n.t('js.notifications.settings.reasons.involved.title'),
+      description: this.I18n.t('js.notifications.settings.reasons.involved.description'),
+    },
     watched_header: this.I18n.t('js.notifications.settings.reasons.watched'),
     work_package_commented_header: this.I18n.t('js.notifications.settings.reasons.work_package_commented'),
     work_package_created_header: this.I18n.t('js.notifications.settings.reasons.work_package_created'),