SONAR-10188 Update project/organization header

6 files changed, 267 insertions, 255 deletions

diff --git a/server/sonar-web/src/main/js/apps/account/notifications/GlobalNotifications.js b/server/sonar-web/src/main/js/apps/account/notifications/GlobalNotifications.js
index d7ba3d35197..294c2c209c6 100644
--- a/server/sonar-web/src/main/js/apps/account/notifications/GlobalNotifications.js
+++ b/server/sonar-web/src/main/js/apps/account/notifications/GlobalNotifications.js
@@ -46,30 +46,32 @@ type Props = {
 
 function GlobalNotifications(props /*: Props */) {
   return (
-    <section>
-      <h2 className="spacer-bottom">{translate('my_profile.overall_notifications.title')}</h2>
+    <section className="boxed-group">
+      <h2>{translate('my_profile.overall_notifications.title')}</h2>
 
-      <table className="form">
-        <thead>
-          <tr>
-            <th />
-            {props.channels.map(channel => (
-              <th key={channel} className="text-center">
-                <h4>{translate('notification.channel', channel)}</h4>
-              </th>
-            ))}
-          </tr>
-        </thead>
+      <div className="boxed-group-inner">
+        <table className="form">
+          <thead>
+            <tr>
+              <th />
+              {props.channels.map(channel => (
+                <th key={channel} className="text-center">
+                  <h4>{translate('notification.channel', channel)}</h4>
+                </th>
+              ))}
+            </tr>
+          </thead>
 
-        <NotificationsList
-          notifications={props.notifications}
-          channels={props.channels}
-          types={props.types}
-          checkboxId={(d, c) => `global-notification-${d}-${c}`}
-          onAdd={props.addNotification}
-          onRemove={props.removeNotification}
-        />
-      </table>
+          <NotificationsList
+            notifications={props.notifications}
+            channels={props.channels}
+            types={props.types}
+            checkboxId={(d, c) => `global-notification-${d}-${c}`}
+            onAdd={props.addNotification}
+            onRemove={props.removeNotification}
+          />
+        </table>
+      </div>
     </section>
   );
 }
diff --git a/server/sonar-web/src/main/js/apps/account/notifications/Notifications.js b/server/sonar-web/src/main/js/apps/account/notifications/Notifications.js
index aa2c8d1179e..6e5fed53bcc 100644
--- a/server/sonar-web/src/main/js/apps/account/notifications/Notifications.js
+++ b/server/sonar-web/src/main/js/apps/account/notifications/Notifications.js
@@ -40,13 +40,8 @@ class Notifications extends React.PureComponent {
     return (
       <div className="account-body account-container">
         <Helmet title={translate('my_account.notifications')} />
-
-        <p className="big-spacer-bottom">{translate('notification.dispatcher.information')}</p>
-
+        <p className="alert alert-info">{translate('notification.dispatcher.information')}</p>
         <GlobalNotifications />
-
-        <hr className="account-separator" />
-
         <Projects />
       </div>
     );
diff --git a/server/sonar-web/src/main/js/apps/account/notifications/Projects.js b/server/sonar-web/src/main/js/apps/account/notifications/Projects.js
index 14a7f74020c..5345b55591a 100644
--- a/server/sonar-web/src/main/js/apps/account/notifications/Projects.js
+++ b/server/sonar-web/src/main/js/apps/account/notifications/Projects.js
@@ -113,30 +113,32 @@ class Projects extends React.PureComponent {
     const allProjects = [...this.props.projects, ...this.state.addedProjects];
 
     return (
-      <section>
-        <h2 className="spacer-bottom">{translate('my_profile.per_project_notifications.title')}</h2>
-
-        {allProjects.length === 0 && (
-          <div className="note">{translate('my_account.no_project_notifications')}</div>
-        )}
-
-        {allProjects.map(project => <ProjectNotifications key={project.key} project={project} />)}
-
-        <div className="spacer-top panel bg-muted">
-          <span className="text-middle spacer-right">
-            {translate('my_account.set_notifications_for')}:
-          </span>
-          <AsyncSelect
-            autoload={false}
-            cache={false}
-            name="new_project"
-            style={{ width: '300px' }}
-            loadOptions={this.loadOptions}
-            minimumInput={2}
-            optionRenderer={this.renderOption}
-            onChange={this.handleAddProject}
-            placeholder={translate('my_account.search_project')}
-          />
+      <section className="boxed-group">
+        <h2>{translate('my_profile.per_project_notifications.title')}</h2>
+
+        <div className="boxed-group-inner">
+          {allProjects.length === 0 && (
+            <div className="note">{translate('my_account.no_project_notifications')}</div>
+          )}
+
+          {allProjects.map(project => <ProjectNotifications key={project.key} project={project} />)}
+
+          <div className="spacer-top panel bg-muted">
+            <span className="text-middle spacer-right">
+              {translate('my_account.set_notifications_for')}:
+            </span>
+            <AsyncSelect
+              autoload={false}
+              cache={false}
+              name="new_project"
+              style={{ width: '300px' }}
+              loadOptions={this.loadOptions}
+              minimumInput={2}
+              optionRenderer={this.renderOption}
+              onChange={this.handleAddProject}
+              placeholder={translate('my_account.search_project')}
+            />
+          </div>
         </div>
       </section>
     );
diff --git a/server/sonar-web/src/main/js/apps/account/notifications/__tests__/__snapshots__/GlobalNotifications-test.js.snap b/server/sonar-web/src/main/js/apps/account/notifications/__tests__/__snapshots__/GlobalNotifications-test.js.snap
index 4a7d7d10c5a..64a62011d96 100644
--- a/server/sonar-web/src/main/js/apps/account/notifications/__tests__/__snapshots__/GlobalNotifications-test.js.snap
+++ b/server/sonar-web/src/main/js/apps/account/notifications/__tests__/__snapshots__/GlobalNotifications-test.js.snap
@@ -1,69 +1,73 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should match snapshot 1`] = `
-<section>
-  <h2
-    className="spacer-bottom"
-  >
+<section
+  className="boxed-group"
+>
+  <h2>
     my_profile.overall_notifications.title
   </h2>
-  <table
-    className="form"
+  <div
+    className="boxed-group-inner"
   >
-    <thead>
-      <tr>
-        <th />
-        <th
-          className="text-center"
-          key="channel1"
-        >
-          <h4>
-            notification.channel.channel1
-          </h4>
-        </th>
-        <th
-          className="text-center"
-          key="channel2"
-        >
-          <h4>
-            notification.channel.channel2
-          </h4>
-        </th>
-      </tr>
-    </thead>
-    <NotificationsList
-      channels={
-        Array [
-          "channel1",
-          "channel2",
-        ]
-      }
-      checkboxId={[Function]}
-      notifications={
-        Array [
-          Object {
-            "channel": "channel1",
-            "type": "type1",
-          },
-          Object {
-            "channel": "channel1",
-            "type": "type2",
-          },
-          Object {
-            "channel": "channel2",
-            "type": "type2",
-          },
-        ]
-      }
-      onAdd={[Function]}
-      onRemove={[Function]}
-      types={
-        Array [
-          "type1",
-          "type2",
-        ]
-      }
-    />
-  </table>
+    <table
+      className="form"
+    >
+      <thead>
+        <tr>
+          <th />
+          <th
+            className="text-center"
+            key="channel1"
+          >
+            <h4>
+              notification.channel.channel1
+            </h4>
+          </th>
+          <th
+            className="text-center"
+            key="channel2"
+          >
+            <h4>
+              notification.channel.channel2
+            </h4>
+          </th>
+        </tr>
+      </thead>
+      <NotificationsList
+        channels={
+          Array [
+            "channel1",
+            "channel2",
+          ]
+        }
+        checkboxId={[Function]}
+        notifications={
+          Array [
+            Object {
+              "channel": "channel1",
+              "type": "type1",
+            },
+            Object {
+              "channel": "channel1",
+              "type": "type2",
+            },
+            Object {
+              "channel": "channel2",
+              "type": "type2",
+            },
+          ]
+        }
+        onAdd={[Function]}
+        onRemove={[Function]}
+        types={
+          Array [
+            "type1",
+            "type2",
+          ]
+        }
+      />
+    </table>
+  </div>
 </section>
 `;
diff --git a/server/sonar-web/src/main/js/apps/account/notifications/__tests__/__snapshots__/Notifications-test.js.snap b/server/sonar-web/src/main/js/apps/account/notifications/__tests__/__snapshots__/Notifications-test.js.snap
index 8541cc01be7..855ccecb356 100644
--- a/server/sonar-web/src/main/js/apps/account/notifications/__tests__/__snapshots__/Notifications-test.js.snap
+++ b/server/sonar-web/src/main/js/apps/account/notifications/__tests__/__snapshots__/Notifications-test.js.snap
@@ -10,14 +10,11 @@ exports[`should match snapshot 1`] = `
     title="my_account.notifications"
   />
   <p
-    className="big-spacer-bottom"
+    className="alert alert-info"
   >
     notification.dispatcher.information
   </p>
   <Connect(GlobalNotifications) />
-  <hr
-    className="account-separator"
-  />
   <Connect(Projects) />
 </div>
 `;
diff --git a/server/sonar-web/src/main/js/apps/account/notifications/__tests__/__snapshots__/Projects-test.js.snap b/server/sonar-web/src/main/js/apps/account/notifications/__tests__/__snapshots__/Projects-test.js.snap
index 3d6b8b28eb1..7f2fb250868 100644
--- a/server/sonar-web/src/main/js/apps/account/notifications/__tests__/__snapshots__/Projects-test.js.snap
+++ b/server/sonar-web/src/main/js/apps/account/notifications/__tests__/__snapshots__/Projects-test.js.snap
@@ -1,178 +1,190 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render projects 1`] = `
-<section>
-  <h2
-    className="spacer-bottom"
-  >
+<section
+  className="boxed-group"
+>
+  <h2>
     my_profile.per_project_notifications.title
   </h2>
-  <Connect(ProjectNotifications)
-    key="foo"
-    project={
-      Object {
-        "key": "foo",
-        "name": "Foo",
-      }
-    }
-  />
-  <Connect(ProjectNotifications)
-    key="bar"
-    project={
-      Object {
-        "key": "bar",
-        "name": "Bar",
-      }
-    }
-  />
   <div
-    className="spacer-top panel bg-muted"
+    className="boxed-group-inner"
   >
-    <span
-      className="text-middle spacer-right"
-    >
-      my_account.set_notifications_for
-      :
-    </span>
-    <AsyncSelect
-      autoload={false}
-      cache={false}
-      loadOptions={[Function]}
-      minimumInput={2}
-      name="new_project"
-      onChange={[Function]}
-      optionRenderer={[Function]}
-      placeholder="my_account.search_project"
-      style={
+    <Connect(ProjectNotifications)
+      key="foo"
+      project={
+        Object {
+          "key": "foo",
+          "name": "Foo",
+        }
+      }
+    />
+    <Connect(ProjectNotifications)
+      key="bar"
+      project={
         Object {
-          "width": "300px",
+          "key": "bar",
+          "name": "Bar",
         }
       }
     />
+    <div
+      className="spacer-top panel bg-muted"
+    >
+      <span
+        className="text-middle spacer-right"
+      >
+        my_account.set_notifications_for
+        :
+      </span>
+      <AsyncSelect
+        autoload={false}
+        cache={false}
+        loadOptions={[Function]}
+        minimumInput={2}
+        name="new_project"
+        onChange={[Function]}
+        optionRenderer={[Function]}
+        placeholder="my_account.search_project"
+        style={
+          Object {
+            "width": "300px",
+          }
+        }
+      />
+    </div>
   </div>
 </section>
 `;
 
 exports[`should render projects 2`] = `
-<section>
-  <h2
-    className="spacer-bottom"
-  >
+<section
+  className="boxed-group"
+>
+  <h2>
     my_profile.per_project_notifications.title
   </h2>
-  <Connect(ProjectNotifications)
-    key="foo"
-    project={
-      Object {
-        "key": "foo",
-        "name": "Foo",
-      }
-    }
-  />
-  <Connect(ProjectNotifications)
-    key="bar"
-    project={
-      Object {
-        "key": "bar",
-        "name": "Bar",
-      }
-    }
-  />
-  <Connect(ProjectNotifications)
-    key="qux"
-    project={
-      Object {
-        "key": "qux",
-        "name": "Qux",
-      }
-    }
-  />
   <div
-    className="spacer-top panel bg-muted"
+    className="boxed-group-inner"
   >
-    <span
-      className="text-middle spacer-right"
-    >
-      my_account.set_notifications_for
-      :
-    </span>
-    <AsyncSelect
-      autoload={false}
-      cache={false}
-      loadOptions={[Function]}
-      minimumInput={2}
-      name="new_project"
-      onChange={[Function]}
-      optionRenderer={[Function]}
-      placeholder="my_account.search_project"
-      style={
+    <Connect(ProjectNotifications)
+      key="foo"
+      project={
+        Object {
+          "key": "foo",
+          "name": "Foo",
+        }
+      }
+    />
+    <Connect(ProjectNotifications)
+      key="bar"
+      project={
+        Object {
+          "key": "bar",
+          "name": "Bar",
+        }
+      }
+    />
+    <Connect(ProjectNotifications)
+      key="qux"
+      project={
         Object {
-          "width": "300px",
+          "key": "qux",
+          "name": "Qux",
         }
       }
     />
+    <div
+      className="spacer-top panel bg-muted"
+    >
+      <span
+        className="text-middle spacer-right"
+      >
+        my_account.set_notifications_for
+        :
+      </span>
+      <AsyncSelect
+        autoload={false}
+        cache={false}
+        loadOptions={[Function]}
+        minimumInput={2}
+        name="new_project"
+        onChange={[Function]}
+        optionRenderer={[Function]}
+        placeholder="my_account.search_project"
+        style={
+          Object {
+            "width": "300px",
+          }
+        }
+      />
+    </div>
   </div>
 </section>
 `;
 
 exports[`should render projects 3`] = `
-<section>
-  <h2
-    className="spacer-bottom"
-  >
+<section
+  className="boxed-group"
+>
+  <h2>
     my_profile.per_project_notifications.title
   </h2>
-  <Connect(ProjectNotifications)
-    key="foo"
-    project={
-      Object {
-        "key": "foo",
-        "name": "Foo",
-      }
-    }
-  />
-  <Connect(ProjectNotifications)
-    key="bar"
-    project={
-      Object {
-        "key": "bar",
-        "name": "Bar",
-      }
-    }
-  />
-  <Connect(ProjectNotifications)
-    key="qux"
-    project={
-      Object {
-        "key": "qux",
-        "name": "Qux",
-      }
-    }
-  />
   <div
-    className="spacer-top panel bg-muted"
+    className="boxed-group-inner"
   >
-    <span
-      className="text-middle spacer-right"
-    >
-      my_account.set_notifications_for
-      :
-    </span>
-    <AsyncSelect
-      autoload={false}
-      cache={false}
-      loadOptions={[Function]}
-      minimumInput={2}
-      name="new_project"
-      onChange={[Function]}
-      optionRenderer={[Function]}
-      placeholder="my_account.search_project"
-      style={
+    <Connect(ProjectNotifications)
+      key="foo"
+      project={
         Object {
-          "width": "300px",
+          "key": "foo",
+          "name": "Foo",
         }
       }
     />
+    <Connect(ProjectNotifications)
+      key="bar"
+      project={
+        Object {
+          "key": "bar",
+          "name": "Bar",
+        }
+      }
+    />
+    <Connect(ProjectNotifications)
+      key="qux"
+      project={
+        Object {
+          "key": "qux",
+          "name": "Qux",
+        }
+      }
+    />
+    <div
+      className="spacer-top panel bg-muted"
+    >
+      <span
+        className="text-middle spacer-right"
+      >
+        my_account.set_notifications_for
+        :
+      </span>
+      <AsyncSelect
+        autoload={false}
+        cache={false}
+        loadOptions={[Function]}
+        minimumInput={2}
+        name="new_project"
+        onChange={[Function]}
+        optionRenderer={[Function]}
+        placeholder="my_account.search_project"
+        style={
+          Object {
+            "width": "300px",
+          }
+        }
+      />
+    </div>
   </div>
 </section>
 `;