SONARCLOUD-380 Rework modal styling of SC and SQ

* Update modal-fields
* Update form-fields styling
* Update modal-fields usage in extensions
* Clean css

4 files changed, 142 insertions, 22 deletions

diff --git a/server/sonar-web/src/main/js/apps/settings/components/EmailForm.tsx b/server/sonar-web/src/main/js/apps/settings/components/EmailForm.tsx
index 19ad53f17b2..278937d62d4 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/EmailForm.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/EmailForm.tsx
@@ -18,12 +18,13 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import { translate, translateWithParameters } from '../../../helpers/l10n';
-import { sendTestEmail } from '../../../api/settings';
-import { parseError } from '../../../helpers/request';
-import { SubmitButton } from '../../../components/ui/buttons';
+import DeferredSpinner from '../../../components/common/DeferredSpinner';
 import { Alert } from '../../../components/ui/Alert';
+import { SubmitButton } from '../../../components/ui/buttons';
 import { withCurrentUser } from '../../../components/hoc/withCurrentUser';
+import { sendTestEmail } from '../../../api/settings';
+import { translate, translateWithParameters } from '../../../helpers/l10n';
+import { parseError } from '../../../helpers/request';
 
 interface Props {
   currentUser: T.LoggedInUser;
@@ -38,7 +39,7 @@ interface State {
   error?: string;
 }
 
-class EmailForm extends React.PureComponent<Props, State> {
+export class EmailForm extends React.PureComponent<Props, State> {
   mounted = false;
 
   constructor(props: Props) {
@@ -93,12 +94,16 @@ class EmailForm extends React.PureComponent<Props, State> {
 
   render() {
     return (
-      <div className="huge-spacer-top">
-        <h3 className="spacer-bottom">{translate('email_configuration.test.title')}</h3>
-
-        <form onSubmit={this.handleFormSubmit} style={{ marginLeft: 201 }}>
+      <div className="settings-definition">
+        <div className="settings-definition-left">
+          <h3 className="settings-definition-name">
+            {translate('email_configuration.test.title')}
+          </h3>
+        </div>
+
+        <form className="settings-definition-right" onSubmit={this.handleFormSubmit}>
           {this.state.success && (
-            <div className="modal-field">
+            <div className="form-field">
               <Alert variant="success">
                 {translateWithParameters(
                   'email_configuration.test.email_was_sent_to_x',
@@ -109,12 +114,12 @@ class EmailForm extends React.PureComponent<Props, State> {
           )}
 
           {this.state.error != null && (
-            <div className="modal-field">
+            <div className="form-field">
               <Alert variant="error">{this.state.error}</Alert>
             </div>
           )}
 
-          <div className="modal-field">
+          <div className="form-field">
             <label htmlFor="test-email-to">
               {translate('email_configuration.test.to_address')}
               <em className="mandatory">*</em>
@@ -129,7 +134,7 @@ class EmailForm extends React.PureComponent<Props, State> {
               value={this.state.recipient}
             />
           </div>
-          <div className="modal-field">
+          <div className="form-field">
             <label htmlFor="test-email-subject">
               {translate('email_configuration.test.subject')}
             </label>
@@ -142,7 +147,7 @@ class EmailForm extends React.PureComponent<Props, State> {
               value={this.state.subject}
             />
           </div>
-          <div className="modal-field">
+          <div className="form-field">
             <label htmlFor="test-email-message">
               {translate('email_configuration.test.message')}
               <em className="mandatory">*</em>
@@ -158,12 +163,10 @@ class EmailForm extends React.PureComponent<Props, State> {
             />
           </div>
 
-          <div className="modal-field">
-            {this.state.loading && <i className="spacer-right spinner" />}
-            <SubmitButton disabled={this.state.loading}>
-              {translate('email_configuration.test.send')}
-            </SubmitButton>
-          </div>
+          <SubmitButton disabled={this.state.loading}>
+            {translate('email_configuration.test.send')}
+          </SubmitButton>
+          {this.state.loading && <DeferredSpinner className="spacer-left" />}
         </form>
       </div>
     );
diff --git a/server/sonar-web/src/main/js/apps/settings/components/__tests__/EmailForm-test.tsx b/server/sonar-web/src/main/js/apps/settings/components/__tests__/EmailForm-test.tsx
new file mode 100644
index 00000000000..6c714a8d248
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/settings/components/__tests__/EmailForm-test.tsx
@@ -0,0 +1,27 @@
+/*
+ * SonarQube
+ * Copyright (C) 2009-2019 SonarSource SA
+ * mailto:info AT sonarsource DOT com
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU Lesser General Public
+ * License as published by the Free Software Foundation; either
+ * version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program; if not, write to the Free Software Foundation,
+ * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ */
+import * as React from 'react';
+import { shallow } from 'enzyme';
+import { EmailForm } from '../EmailForm';
+import { mockCurrentUser } from '../../../../helpers/testMocks';
+
+it('should render correctly', () => {
+  expect(shallow(<EmailForm currentUser={mockCurrentUser()} />)).toMatchSnapshot();
+});
diff --git a/server/sonar-web/src/main/js/apps/settings/components/__tests__/__snapshots__/EmailForm-test.tsx.snap b/server/sonar-web/src/main/js/apps/settings/components/__tests__/__snapshots__/EmailForm-test.tsx.snap
new file mode 100644
index 00000000000..cc15cb3104d
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/settings/components/__tests__/__snapshots__/EmailForm-test.tsx.snap
@@ -0,0 +1,90 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render correctly 1`] = `
+<div
+  className="settings-definition"
+>
+  <div
+    className="settings-definition-left"
+  >
+    <h3
+      className="settings-definition-name"
+    >
+      email_configuration.test.title
+    </h3>
+  </div>
+  <form
+    className="settings-definition-right"
+    onSubmit={[Function]}
+  >
+    <div
+      className="form-field"
+    >
+      <label
+        htmlFor="test-email-to"
+      >
+        email_configuration.test.to_address
+        <em
+          className="mandatory"
+        >
+          *
+        </em>
+      </label>
+      <input
+        className="settings-large-input"
+        disabled={false}
+        id="test-email-to"
+        onChange={[Function]}
+        required={true}
+        type="email"
+        value=""
+      />
+    </div>
+    <div
+      className="form-field"
+    >
+      <label
+        htmlFor="test-email-subject"
+      >
+        email_configuration.test.subject
+      </label>
+      <input
+        className="settings-large-input"
+        disabled={false}
+        id="test-email-subject"
+        onChange={[Function]}
+        type="text"
+        value="email_configuration.test.subject"
+      />
+    </div>
+    <div
+      className="form-field"
+    >
+      <label
+        htmlFor="test-email-message"
+      >
+        email_configuration.test.message
+        <em
+          className="mandatory"
+        >
+          *
+        </em>
+      </label>
+      <textarea
+        className="settings-large-input"
+        disabled={false}
+        id="test-email-message"
+        onChange={[Function]}
+        required={true}
+        rows={5}
+        value="email_configuration.test.message_text"
+      />
+    </div>
+    <SubmitButton
+      disabled={false}
+    >
+      email_configuration.test.send
+    </SubmitButton>
+  </form>
+</div>
+`;
diff --git a/server/sonar-web/src/main/js/apps/settings/encryption/EncryptionForm.tsx b/server/sonar-web/src/main/js/apps/settings/encryption/EncryptionForm.tsx
index 57254c2fefa..8cfd77b3938 100644
--- a/server/sonar-web/src/main/js/apps/settings/encryption/EncryptionForm.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/encryption/EncryptionForm.tsx
@@ -89,11 +89,11 @@ export default class EncryptionForm extends React.PureComponent<Props, State> {
         <form className="big-spacer-bottom" id="encryption-form" onSubmit={this.handleEncrypt}>
           <textarea
             autoFocus={true}
-            className="input-super-large"
+            className="abs-width-600"
             id="encryption-form-value"
             onChange={this.handleChange}
             required={true}
-            rows={3}
+            rows={5}
             value={this.state.value}
           />
           <div className="spacer-top">