SONAR-10324 Improve tick and cross icons

server/sonar-web/src/main/js/apps/background-tasks/background-tasks.css

@@ -39,10 +39,5 @@
 }
 
 .bt-workers-warning-icon {
-  position: relative;
-  top: -1px;
-}
-
-.bt-workers-warning-icon::before {
-  color: #d3d3d3;
+  margin-top: 5px;
 }

server/sonar-web/src/main/js/apps/background-tasks/components/Workers.tsx

@@ -20,12 +20,13 @@
 import * as React from 'react';
 import WorkersForm from './WorkersForm';
 import NoWorkersSupportPopup from './NoWorkersSupportPopup';
-import * as theme from '../../../app/theme';
+import AlertWarnIcon from '../../../components/icons-components/AlertWarnIcon';
+import BubblePopupHelper from '../../../components/common/BubblePopupHelper';
+import HelpIcon from '../../../components/icons-components/HelpIcon';
 import Tooltip from '../../../components/controls/Tooltip';
+import * as theme from '../../../app/theme';
 import { getWorkers } from '../../../api/ce';
 import { translate } from '../../../helpers/l10n';
-import HelpIcon from '../../../components/icons-components/HelpIcon';
-import BubblePopupHelper from '../../../components/common/BubblePopupHelper';
 import { EditButton } from '../../../components/ui/buttons';
 
 interface State {
@@ -106,7 +107,12 @@ export default class Workers extends React.PureComponent<{}, State> {
         {!loading &&
           workerCount > 1 && (
             <Tooltip overlay={translate('background_tasks.number_of_workers.warning')}>
-              <i className="icon-alert-warn little-spacer-right bt-workers-warning-icon" />
+              <span>
+                <AlertWarnIcon
+                  className="little-spacer-right bt-workers-warning-icon"
+                  fill="#d3d3d3"
+                />
+              </span>
             </Tooltip>
           )}
 
@@ -138,8 +144,8 @@ export default class Workers extends React.PureComponent<{}, State> {
               </a>
               <BubblePopupHelper
                 isOpen={this.state.noSupportPopup}
-                position="bottomright"
                 popup={<NoWorkersSupportPopup />}
+                position="bottomright"
                 togglePopup={this.toggleNoSupportPopup}
               />
             </span>

server/sonar-web/src/main/js/apps/background-tasks/components/__tests__/__snapshots__/Workers-test.tsx.snap

@@ -95,9 +95,12 @@ exports[`renders 3`] = `
     overlay="background_tasks.number_of_workers.warning"
     placement="bottom"
   >
-    <i
-      className="icon-alert-warn little-spacer-right bt-workers-warning-icon"
-    />
+    <span>
+      <AlertWarnIcon
+        className="little-spacer-right bt-workers-warning-icon"
+        fill="#d3d3d3"
+      />
+    </span>
   </Tooltip>
   <span
     className="text-middle"
@@ -127,9 +130,12 @@ exports[`renders 4`] = `
     overlay="background_tasks.number_of_workers.warning"
     placement="bottom"
   >
-    <i
-      className="icon-alert-warn little-spacer-right bt-workers-warning-icon"
-    />
+    <span>
+      <AlertWarnIcon
+        className="little-spacer-right bt-workers-warning-icon"
+        fill="#d3d3d3"
+      />
+    </span>
   </Tooltip>
   <span
     className="text-middle"
@@ -198,9 +204,12 @@ exports[`updates worker count 2`] = `
     overlay="background_tasks.number_of_workers.warning"
     placement="bottom"
   >
-    <i
-      className="icon-alert-warn little-spacer-right bt-workers-warning-icon"
-    />
+    <span>
+      <AlertWarnIcon
+        className="little-spacer-right bt-workers-warning-icon"
+        fill="#d3d3d3"
+      />
+    </span>
   </Tooltip>
   <span
     className="text-middle"

server/sonar-web/src/main/js/apps/portfolio/components/Subscription.tsx

@@ -18,6 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
+import AlertSuccessIcon from '../../../components/icons-components/AlertSuccessIcon';
 import { ReportStatus, subscribe, unsubscribe } from '../../../api/report';
 import { translate, translateWithParameters } from '../../../helpers/l10n';
 import { Button } from '../../../components/ui/buttons';
@@ -92,7 +93,7 @@ export default class Subscription extends React.PureComponent<Props, State> {
   renderWhenSubscribed = () => (
     <div className="js-subscribed">
       <div className="spacer-bottom">
-        <i className="icon-check pull-left spacer-right" />
+        <AlertSuccessIcon className="pull-left spacer-right" />
         <div className="overflow-hidden">
           {translateWithParameters('report.subscribed', this.getEffectiveFrequencyText())}
         </div>

server/sonar-web/src/main/js/apps/portfolio/components/__tests__/__snapshots__/Subscription-test.tsx.snap

@@ -27,6 +27,7 @@ exports[`renders when not subscribed 1`] = `
     <Button
       className="js-report-subscribe"
       onClick={[Function]}
+      type="button"
     >
       report.subscribe
     </Button>
@@ -44,8 +45,8 @@ exports[`renders when subscribed 1`] = `
     <div
       className="spacer-bottom"
     >
-      <i
-        className="icon-check pull-left spacer-right"
+      <AlertSuccessIcon
+        className="pull-left spacer-right"
       />
       <div
         className="overflow-hidden"
@@ -55,6 +56,7 @@ exports[`renders when subscribed 1`] = `
     </div>
     <Button
       onClick={[Function]}
+      type="button"
     >
       report.unsubscribe
     </Button>

server/sonar-web/src/main/js/apps/quality-gates/components/ConditionsAlert.js

@@ -18,6 +18,9 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import React, { Component } from 'react';
+import AlertErrorIcon from '../../../components/icons-components/AlertErrorIcon';
+import AlertSuccessIcon from '../../../components/icons-components/AlertSuccessIcon';
+import AlertWarnIcon from '../../../components/icons-components/AlertWarnIcon';
 import { translate } from '../../../helpers/l10n';
 
 export default class ConditionsAlert extends Component {
@@ -46,13 +49,13 @@ export default class ConditionsAlert extends Component {
             {translate('quality_gates.health_icons')}
             <ul>
               <li className="little-spacer-top">
-                <i className="icon-alert-ok" /> {translate('alerts.notes.ok')}
+                <AlertSuccessIcon /> {translate('alerts.notes.ok')}
               </li>
               <li className="little-spacer-top">
-                <i className="icon-alert-warn" /> {translate('alerts.notes.warn')}
+                <AlertWarnIcon /> {translate('alerts.notes.warn')}
               </li>
               <li className="little-spacer-top">
-                <i className="icon-alert-error" /> {translate('alerts.notes.error')}
+                <AlertErrorIcon /> {translate('alerts.notes.error')}
               </li>
             </ul>
           </div>

server/sonar-web/src/main/js/apps/settings/components/Definition.js

@@ -31,6 +31,8 @@ import {
   getSettingValue,
   isDefaultOrInherited
 } from '../utils';
+import AlertErrorIcon from '../../../components/icons-components/AlertErrorIcon';
+import AlertSuccessIcon from '../../../components/icons-components/AlertSuccessIcon';
 import { translateWithParameters, translate } from '../../../helpers/l10n';
 import { resetValue, saveValue } from '../store/actions';
 import { passValidation } from '../store/settingsPage/validationMessages/actions';
@@ -166,7 +168,7 @@ class Definition extends React.PureComponent {
             {!loading &&
               this.props.validationMessage != null && (
                 <span className="text-danger">
-                  <i className="icon-alert-error spacer-right" />
+                  <AlertErrorIcon className="spacer-right" />
                   <span>
                     {translateWithParameters(
                       'settings.state.validation_failed',
@@ -179,30 +181,30 @@ class Definition extends React.PureComponent {
             {!loading &&
               this.state.success && (
                 <span className="text-success">
-                  <i className="icon-check spacer-right" />
+                  <AlertSuccessIcon className="spacer-right" />
                   {translate('settings.state.saved')}
                 </span>
               )}
           </div>
 
           <Input
-            setting={setting}
-            value={effectiveValue}
             onCancel={this.handleCancel}
             onChange={this.handleChange}
             onSave={this.handleSave}
+            setting={setting}
+            value={effectiveValue}
           />
 
           {!hasValueChanged && (
             <DefinitionDefaults
-              setting={setting}
               isDefault={isDefault}
               onReset={this.handleReset}
+              setting={setting}
             />
           )}
 
           {hasValueChanged && (
-            <DefinitionChanges onSave={this.handleSave} onCancel={this.handleCancel} />
+            <DefinitionChanges onCancel={this.handleCancel} onSave={this.handleSave} />
           )}
         </div>
       </div>

server/sonar-web/src/main/js/apps/system/components/info-items/SysInfoItem.tsx

@@ -20,8 +20,8 @@
 import * as React from 'react';
 import { map } from 'lodash';
 import HealthItem from './HealthItem';
-import CheckIcon from '../../../../components/icons-components/CheckIcon';
-import ClearIcon from '../../../../components/icons-components/ClearIcon';
+import AlertErrorIcon from '../../../../components/icons-components/AlertErrorIcon';
+import AlertSuccessIcon from '../../../../components/icons-components/AlertSuccessIcon';
 import { HealthType, SysValue, SysValueObject } from '../../../../api/system';
 import { HEALTH_FIELD } from '../../utils';
 
@@ -49,9 +49,9 @@ export default function SysInfoItem({ name, value }: Props): JSX.Element {
 
 function BooleanItem({ value }: { value: boolean }) {
   if (value) {
-    return <CheckIcon />;
+    return <AlertSuccessIcon />;
   } else {
-    return <ClearIcon />;
+    return <AlertErrorIcon />;
   }
 }
 

server/sonar-web/src/main/js/apps/system/components/info-items/__tests__/SysInfoItem-test.tsx

@@ -51,10 +51,10 @@ it('should render object correctly', () => {
 
 it('should render `true`', () => {
   const wrapper = mount(<SysInfoItem name="test" value={true} />);
-  expect(wrapper.find('CheckIcon').exists()).toBeTruthy();
+  expect(wrapper.find('AlertSuccessIcon').exists()).toBeTruthy();
 });
 
 it('should render `false`', () => {
   const wrapper = mount(<SysInfoItem name="test" value={false} />);
-  expect(wrapper.find('ClearIcon').exists()).toBeTruthy();
+  expect(wrapper.find('AlertErrorIcon').exists()).toBeTruthy();
 });

server/sonar-web/src/main/js/apps/system/components/info-items/__tests__/__snapshots__/SysInfoItem-test.tsx.snap

@@ -127,7 +127,7 @@ Array [
               <BooleanItem
                 value={true}
               >
-                <CheckIcon>
+                <AlertSuccessIcon>
                   <svg
                     height={16}
                     version="1.1"
@@ -137,16 +137,15 @@ Array [
                     xmlnsXlink="http://www.w3.org/1999/xlink"
                   >
                     <path
-                      d="M14.92 4.804q0 0.357-0.25 0.607l-7.679 7.679q-0.25 0.25-0.607 0.25t-0.607-0.25l-4.446-4.446q-0.25-0.25-0.25-0.607t0.25-0.607l1.214-1.214q0.25-0.25 0.607-0.25t0.607 0.25l2.625 2.634 5.857-5.866q0.25-0.25 0.607-0.25t0.607 0.25l1.214 1.214q0.25 0.25 0.25 0.607z"
+                      d="M12.607 6.554q0-0.25-0.161-0.411l-0.813-0.804q-0.17-0.17-0.402-0.17t-0.402 0.17l-3.643 3.634-2.018-2.018q-0.17-0.17-0.402-0.17t-0.402 0.17l-0.813 0.804q-0.161 0.161-0.161 0.411 0 0.241 0.161 0.402l3.232 3.232q0.17 0.17 0.402 0.17 0.241 0 0.411-0.17l4.848-4.848q0.161-0.161 0.161-0.402zM14.857 8q0 1.866-0.92 3.442t-2.496 2.496-3.442 0.92-3.442-0.92-2.496-2.496-0.92-3.442 0.92-3.442 2.496-2.496 3.442-0.92 3.442 0.92 2.496 2.496 0.92 3.442z"
                       style={
                         Object {
-                          "fill": "currentColor",
+                          "fill": "#00aa00",
                         }
                       }
                     />
-                    ;
                   </svg>
-                </CheckIcon>
+                </AlertSuccessIcon>
               </BooleanItem>
             </SysInfoItem>
           </td>

server/sonar-web/src/main/js/apps/tutorials/onboarding/NewOrganizationForm.js

@@ -25,6 +25,7 @@ import {
   deleteOrganization,
   getOrganization
 } from '../../../api/organizations';
+import AlertErrorIcon from '../../../components/icons-components/AlertErrorIcon';
 import { DeleteButton } from '../../../components/ui/buttons';
 import { translate } from '../../../helpers/l10n';
 
@@ -141,9 +142,9 @@ export default class NewOrganizationForm extends React.PureComponent {
         <input
           autoFocus={true}
           className="input-super-large spacer-right text-middle"
-          onChange={this.handleOrganizationChange}
           maxLength={32}
           minLength={2}
+          onChange={this.handleOrganizationChange}
           placeholder={translate('onboarding.organization.placeholder')}
           required={true}
           type="text"
@@ -152,13 +153,13 @@ export default class NewOrganizationForm extends React.PureComponent {
         {loading ? (
           <i className="spinner text-middle" />
         ) : (
-          <button className="text-middle" disabled={!valid}>
+          <button className="text-middle" disabled={!valid} type="submit">
             {translate('create')}
           </button>
         )}
         {!unique && (
           <span className="big-spacer-left text-danger text-middle">
-            <i className="icon-alert-error little-spacer-right text-text-top" />
+            <AlertErrorIcon className="little-spacer-right text-text-top" />
             {translate('this_name_is_already_taken')}
           </span>
         )}

server/sonar-web/src/main/js/apps/tutorials/onboarding/OrganizationStep.js

@@ -23,6 +23,7 @@ import classNames from 'classnames';
 import { sortBy } from 'lodash';
 import Step from './Step';
 import NewOrganizationForm from './NewOrganizationForm';
+import AlertSuccessIcon from '../../../components/icons-components/AlertSuccessIcon';
 import { getOrganizations } from '../../../api/organizations';
 import Select from '../../../components/controls/Select';
 import { translate } from '../../../helpers/l10n';
@@ -233,7 +234,7 @@ export default class OrganizationStep extends React.PureComponent {
         {this.getSelectedOrganization() != null &&
           !this.state.loading && (
             <div className="big-spacer-top">
-              <button className="js-continue" onClick={this.handleContinueClick}>
+              <button className="js-continue" onClick={this.handleContinueClick} type="button">
                 {translate('continue')}
               </button>
             </div>
@@ -246,8 +247,8 @@ export default class OrganizationStep extends React.PureComponent {
     const result = this.getSelectedOrganization();
 
     return result != null ? (
-      <div className="boxed-group-actions">
-        <i className="icon-check spacer-right" />
+      <div className="boxed-group-actions display-flex-center">
+        <AlertSuccessIcon className="spacer-right" />
         <strong>{result}</strong>
       </div>
     ) : null;

server/sonar-web/src/main/js/apps/tutorials/onboarding/ProjectWatcher.js

@@ -19,6 +19,8 @@
  */
 // @flow
 import React from 'react';
+import AlertErrorIcon from '../../../components/icons-components/AlertErrorIcon';
+import AlertSuccessIcon from '../../../components/icons-components/AlertSuccessIcon';
 import { getTasksForComponent } from '../../../api/ce';
 import { STATUSES } from '../../../apps/background-tasks/constants';
 import { translate } from '../../../helpers/l10n';
@@ -95,7 +97,7 @@ export default class ProjectWatcher extends React.PureComponent {
     if (status === STATUSES.SUCCESS) {
       return (
         <div className="big-spacer-top note text-center">
-          <i className="icon-check spacer-right" />
+          <AlertSuccessIcon className="spacer-right" />
           {translate('onboarding.project_watcher.finished')}
         </div>
       );
@@ -113,7 +115,7 @@ export default class ProjectWatcher extends React.PureComponent {
     if (status != null) {
       return (
         <div className="big-spacer-top note text-center">
-          <i className="icon-alert-danger spacer-right" />
+          <AlertErrorIcon className="spacer-right" />
           {translate('onboarding.project_watcher.failed')}
         </div>
       );

server/sonar-web/src/main/js/apps/tutorials/onboarding/TokenStep.js

@@ -23,6 +23,7 @@ import classNames from 'classnames';
 import Step from './Step';
 import { getTokens, generateToken, revokeToken } from '../../../api/user-tokens';
 import AlertErrorIcon from '../../../components/icons-components/AlertErrorIcon';
+import AlertSuccessIcon from '../../../components/icons-components/AlertSuccessIcon';
 import { DeleteButton } from '../../../components/ui/buttons';
 import { translate } from '../../../helpers/l10n';
 
@@ -183,7 +184,7 @@ export default class TokenStep extends React.PureComponent {
             {this.state.loading ? (
               <i className="spinner text-middle" />
             ) : (
-              <button className="text-middle" disabled={!this.state.tokenName}>
+              <button className="text-middle" disabled={!this.state.tokenName} type="submit">
                 {translate('onboarding.token.generate')}
               </button>
             )}
@@ -262,7 +263,7 @@ export default class TokenStep extends React.PureComponent {
 
         {this.canContinue() && (
           <div className="big-spacer-top">
-            <button className="js-continue" onClick={this.handleContinueClick}>
+            <button className="js-continue" onClick={this.handleContinueClick} type="button">
               {translate('continue')}
             </button>
           </div>
@@ -280,8 +281,8 @@ export default class TokenStep extends React.PureComponent {
     }
 
     return (
-      <div className="boxed-group-actions">
-        <i className="icon-check spacer-right" />
+      <div className="boxed-group-actions display-flex-center">
+        <AlertSuccessIcon className="spacer-right" />
         {selection === 'generate' && tokenName && `${tokenName}: `}
         <strong>{token}</strong>
       </div>

server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/NewOrganizationForm-test.js.snap

@@ -22,6 +22,7 @@ exports[`creates new organization 1`] = `
     <button
       className="text-middle"
       disabled={true}
+      type="submit"
     >
       create
     </button>
@@ -217,6 +218,7 @@ exports[`deletes organization 3`] = `
     <button
       className="text-middle"
       disabled={true}
+      type="submit"
     >
       create
     </button>

server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/ProjectWatcher-test.js.snap

@@ -23,8 +23,8 @@ exports[`renders 3`] = `
 <div
   className="big-spacer-top note text-center"
 >
-  <i
-    className="icon-check spacer-right"
+  <AlertSuccessIcon
+    className="spacer-right"
   />
   onboarding.project_watcher.finished
 </div>

server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/TokenStep-test.js.snap

@@ -70,6 +70,7 @@ exports[`generates token 1`] = `
                 <button
                   className="text-middle"
                   disabled={true}
+                  type="submit"
                 >
                   onboarding.token.generate
                 </button>
@@ -301,6 +302,7 @@ exports[`generates token 3`] = `
           <button
             className="js-continue"
             onClick={[Function]}
+            type="button"
           >
             continue
           </button>
@@ -411,6 +413,7 @@ exports[`revokes token 1`] = `
           <button
             className="js-continue"
             onClick={[Function]}
+            type="button"
           >
             continue
           </button>
@@ -490,6 +493,7 @@ exports[`revokes token 2`] = `
           <button
             className="js-continue"
             onClick={[Function]}
+            type="button"
           >
             continue
           </button>
@@ -570,6 +574,7 @@ exports[`revokes token 3`] = `
                 <button
                   className="text-middle"
                   disabled={true}
+                  type="submit"
                 >
                   onboarding.token.generate
                 </button>

server/sonar-web/src/main/js/apps/webhooks/components/DeliveryItem.tsx

@@ -18,8 +18,8 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import * as React from 'react';
-import CheckIcon from '../../../components/icons-components/CheckIcon';
-import ClearIcon from '../../../components/icons-components/ClearIcon';
+import AlertErrorIcon from '../../../components/icons-components/AlertErrorIcon';
+import AlertSuccessIcon from '../../../components/icons-components/AlertSuccessIcon';
 import DateTimeFormatter from '../../../components/intl/DateTimeFormatter';
 import BoxedGroupAccordion from '../../../components/controls/BoxedGroupAccordion';
 import CodeSnippet from '../../../components/common/CodeSnippet';

server/sonar-web/src/main/js/components/icons-components/AlertWarnIcon.tsx

@@ -19,8 +19,9 @@
  */
 import * as React from 'react';
 import { IconProps } from './types';
+import * as theme from '../../app/theme';
 
-export default function AlertWarnIcon({ className, fill = '#ed7d20', size = 16 }: IconProps) {
+export default function AlertWarnIcon({ className, fill = theme.orange, size = 16 }: IconProps) {
   return (
     <svg
       className={className}