SONARCLOUD-380 Rework modal styling of SC and SQ

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

3 files changed, 121 insertions, 4 deletions

diff --git a/server/sonar-web/src/main/js/apps/account/components/Password.tsx b/server/sonar-web/src/main/js/apps/account/components/Password.tsx
index fa681a26ec8..66e2aa43986 100644
--- a/server/sonar-web/src/main/js/apps/account/components/Password.tsx
+++ b/server/sonar-web/src/main/js/apps/account/components/Password.tsx
@@ -87,7 +87,7 @@ export default class Password extends React.Component<Props, State> {
               </Alert>
             ))}
 
-          <div className="modal-field">
+          <div className="form-field">
             <label htmlFor="old_password">
               {translate('my_profile.password.old')}
               <em className="mandatory">*</em>
@@ -101,7 +101,7 @@ export default class Password extends React.Component<Props, State> {
               type="password"
             />
           </div>
-          <div className="modal-field">
+          <div className="form-field">
             <label htmlFor="password">
               {translate('my_profile.password.new')}
               <em className="mandatory">*</em>
@@ -115,7 +115,7 @@ export default class Password extends React.Component<Props, State> {
               type="password"
             />
           </div>
-          <div className="modal-field">
+          <div className="form-field">
             <label htmlFor="password_confirmation">
               {translate('my_profile.password.confirm')}
               <em className="mandatory">*</em>
@@ -129,7 +129,7 @@ export default class Password extends React.Component<Props, State> {
               type="password"
             />
           </div>
-          <div className="modal-field">
+          <div className="form-field">
             <SubmitButton id="change-password">
               {translate('my_profile.password.submit')}
             </SubmitButton>
diff --git a/server/sonar-web/src/main/js/apps/account/components/__tests__/Password-test.tsx b/server/sonar-web/src/main/js/apps/account/components/__tests__/Password-test.tsx
new file mode 100644
index 00000000000..2b5900be381
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/account/components/__tests__/Password-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 Password from '../Password';
+import { mockCurrentUser } from '../../../../helpers/testMocks';
+
+it('renders correctly', () => {
+  expect(shallow(<Password user={mockCurrentUser()} />)).toMatchSnapshot();
+});
diff --git a/server/sonar-web/src/main/js/apps/account/components/__tests__/__snapshots__/Password-test.tsx.snap b/server/sonar-web/src/main/js/apps/account/components/__tests__/__snapshots__/Password-test.tsx.snap
new file mode 100644
index 00000000000..e16485c7246
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/account/components/__tests__/__snapshots__/Password-test.tsx.snap
@@ -0,0 +1,90 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+<section
+  className="boxed-group"
+>
+  <h2
+    className="spacer-bottom"
+  >
+    my_profile.password.title
+  </h2>
+  <form
+    className="boxed-group-inner"
+    onSubmit={[Function]}
+  >
+    <div
+      className="form-field"
+    >
+      <label
+        htmlFor="old_password"
+      >
+        my_profile.password.old
+        <em
+          className="mandatory"
+        >
+          *
+        </em>
+      </label>
+      <input
+        autoComplete="off"
+        id="old_password"
+        name="old_password"
+        required={true}
+        type="password"
+      />
+    </div>
+    <div
+      className="form-field"
+    >
+      <label
+        htmlFor="password"
+      >
+        my_profile.password.new
+        <em
+          className="mandatory"
+        >
+          *
+        </em>
+      </label>
+      <input
+        autoComplete="off"
+        id="password"
+        name="password"
+        required={true}
+        type="password"
+      />
+    </div>
+    <div
+      className="form-field"
+    >
+      <label
+        htmlFor="password_confirmation"
+      >
+        my_profile.password.confirm
+        <em
+          className="mandatory"
+        >
+          *
+        </em>
+      </label>
+      <input
+        autoComplete="off"
+        id="password_confirmation"
+        name="password_confirmation"
+        required={true}
+        type="password"
+      />
+    </div>
+    <div
+      className="form-field"
+    >
+      <SubmitButton
+        id="change-password"
+      >
+        my_profile.password.submit
+      </SubmitButton>
+    </div>
+  </form>
+</section>
+`;