Notifications settings UI

Closes #13859

app/assets/stylesheets/pages/notifications.scss

-.global-notifications-form .level-title {
-  font-size: 15px;
-  color: #333;
-  font-weight: bold;
+.notification-list-item {
+  line-height: 34px;
 }
 
-.notification-icon-holder {
-  width: 20px;
-  float: left;
+.notification {
+  position: relative;
+  top: 1px;
+
+  > .fa {
+    font-size: 18px;
+  }
 }
 
 .ns-part {
-  color: $gl-primary;
+  color: $gl-text-green;
 }
 
 .ns-watch {

app/views/profiles/notifications/_settings.html.haml

-%li
-  %span.notification.fa.fa-holder
+%li.notification-list-item
+  %span.notification.fa.fa-holder.append-right-5
     - if notification.global?
       = notification_icon(@notification)
     - else

app/views/profiles/notifications/show.html.haml

 - page_title "Notifications"
 - header_title page_title, profile_notifications_path
 
-.prepend-top-default
-= form_for @user, url: profile_notifications_path, method: :put, html: { class: 'update-notifications form-horizontal global-notifications-form' } do |f|
+= form_for @user, url: profile_notifications_path, method: :put, html: { class: 'update-notifications prepend-top-default' } do |f|
   -if @user.errors.any?
     %div.alert.alert-danger
       %ul
@@ -10,15 +9,22 @@
           %li= msg
 
   = hidden_field_tag :notification_type, 'global'
-
+  .row
+    .col-lg-3.profile-settings-sidebar
+      %h4
+        = page_title
+      %p
+        You can specify notification level per group or per project.
+      %p
+        By default, all projects and groups will use the global notifications setting.
+    .col-lg-9
+      %h5
+        Global notification settings
       .form-group
-    = f.label :notification_email, class: "control-label"
-    .col-sm-10
-      = f.select :notification_email, @user.all_emails, { include_blank: false }, class: "form-control"
-
+        = f.label :notification_email, class: "label-light"
+        = f.select :notification_email, @user.all_emails, { include_blank: false }, class: "select2"
       .form-group
-    = f.label :notification_level, class: 'control-label'
-    .col-sm-10
+        = f.label :notification_level, class: 'label-light'
         .radio
           = f.label :notification_level, value: Notification::N_DISABLED do
             = f.radio_button :notification_level, Notification::N_DISABLED
@@ -47,27 +53,21 @@
               Watch
             %p You will receive notifications for any activity
 
-  .gray-content-block
-    = f.submit 'Save changes', class: "btn btn-create"
-
-.row.all-notifications.prepend-top-default
-  .col-md-6
-    %p
-      You can also specify notification level per group or per project.
-      %br
-      By default, all projects and groups will use the notification level set above.
-    %h4 Groups:
+      .prepend-top-default
+        = f.submit 'Update settings', class: "btn btn-create"
+      %hr
+      %h5
+        Groups (#{@group_members.count})
+      %div
         %ul.bordered-list
           - @group_members.each do |group_member|
             - notification = Notification.new(group_member)
             = render 'settings', type: 'group', membership: group_member, notification: notification
-
-  .col-md-6
-    %p
-      To specify the notification level per project of a group you belong to,
-      %br
-      you need to be a member of the project itself, not only its group.
-    %h4 Projects:
+      %h5
+        Projects (#{@project_members.count})
+      %p.account-well
+        To specify the notification level per project of a group you belong to, you need to be a member of the project itself, not only its group.
+      .append-bottom-default
         %ul.bordered-list
           - @project_members.each do |project_member|
             - notification = Notification.new(project_member)