From 277349697f2e672ae8c5f438f734cfb9b6223d46 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Gr=C3=A9goire=20Aubert?= Date: Fri, 9 Feb 2018 16:33:23 +0100 Subject: [PATCH] SONAR-10324 Improve tick and cross icons --- .../background-tasks/background-tasks.css | 7 +---- .../background-tasks/components/Workers.tsx | 16 +++++++---- .../__snapshots__/Workers-test.tsx.snap | 27 ++++++++++++------- .../portfolio/components/Subscription.tsx | 3 ++- .../__snapshots__/Subscription-test.tsx.snap | 6 +++-- .../components/ConditionsAlert.js | 9 ++++--- .../js/apps/settings/components/Definition.js | 14 +++++----- .../components/info-items/SysInfoItem.tsx | 8 +++--- .../info-items/__tests__/SysInfoItem-test.tsx | 4 +-- .../__snapshots__/SysInfoItem-test.tsx.snap | 9 +++---- .../onboarding/NewOrganizationForm.js | 7 ++--- .../tutorials/onboarding/OrganizationStep.js | 7 ++--- .../tutorials/onboarding/ProjectWatcher.js | 6 +++-- .../js/apps/tutorials/onboarding/TokenStep.js | 9 ++++--- .../NewOrganizationForm-test.js.snap | 2 ++ .../__snapshots__/ProjectWatcher-test.js.snap | 4 +-- .../__snapshots__/TokenStep-test.js.snap | 5 ++++ .../apps/webhooks/components/DeliveryItem.tsx | 4 +-- .../icons-components/AlertWarnIcon.tsx | 3 ++- 19 files changed, 90 insertions(+), 60 deletions(-) diff --git a/server/sonar-web/src/main/js/apps/background-tasks/background-tasks.css b/server/sonar-web/src/main/js/apps/background-tasks/background-tasks.css index 308daa2e9d0..36e5a1abb40 100644 --- a/server/sonar-web/src/main/js/apps/background-tasks/background-tasks.css +++ b/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; } diff --git a/server/sonar-web/src/main/js/apps/background-tasks/components/Workers.tsx b/server/sonar-web/src/main/js/apps/background-tasks/components/Workers.tsx index 24f084cd739..1039418df33 100644 --- a/server/sonar-web/src/main/js/apps/background-tasks/components/Workers.tsx +++ b/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 && ( - + + + )} @@ -138,8 +144,8 @@ export default class Workers extends React.PureComponent<{}, State> { } + position="bottomright" togglePopup={this.toggleNoSupportPopup} /> diff --git a/server/sonar-web/src/main/js/apps/background-tasks/components/__tests__/__snapshots__/Workers-test.tsx.snap b/server/sonar-web/src/main/js/apps/background-tasks/components/__tests__/__snapshots__/Workers-test.tsx.snap index 3aa130c12ac..f7c56962de9 100644 --- a/server/sonar-web/src/main/js/apps/background-tasks/components/__tests__/__snapshots__/Workers-test.tsx.snap +++ b/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" > - + + + - + + + - + + + { renderWhenSubscribed = () => (
- +
{translateWithParameters('report.subscribed', this.getEffectiveFrequencyText())}
diff --git a/server/sonar-web/src/main/js/apps/portfolio/components/__tests__/__snapshots__/Subscription-test.tsx.snap b/server/sonar-web/src/main/js/apps/portfolio/components/__tests__/__snapshots__/Subscription-test.tsx.snap index 488d122219e..ed7f2844762 100644 --- a/server/sonar-web/src/main/js/apps/portfolio/components/__tests__/__snapshots__/Subscription-test.tsx.snap +++ b/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`] = ` @@ -44,8 +45,8 @@ exports[`renders when subscribed 1`] = `
-
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/ConditionsAlert.js b/server/sonar-web/src/main/js/apps/quality-gates/components/ConditionsAlert.js index 45c29729b07..e0e9e3c7f42 100644 --- a/server/sonar-web/src/main/js/apps/quality-gates/components/ConditionsAlert.js +++ b/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')}
  • - {translate('alerts.notes.ok')} + {translate('alerts.notes.ok')}
  • - {translate('alerts.notes.warn')} + {translate('alerts.notes.warn')}
  • - {translate('alerts.notes.error')} + {translate('alerts.notes.error')}
diff --git a/server/sonar-web/src/main/js/apps/settings/components/Definition.js b/server/sonar-web/src/main/js/apps/settings/components/Definition.js index 8073e2f9597..43f52fd1a22 100644 --- a/server/sonar-web/src/main/js/apps/settings/components/Definition.js +++ b/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 && ( - + {translateWithParameters( 'settings.state.validation_failed', @@ -179,30 +181,30 @@ class Definition extends React.PureComponent { {!loading && this.state.success && ( - + {translate('settings.state.saved')} )}
{!hasValueChanged && ( )} {hasValueChanged && ( - + )}
diff --git a/server/sonar-web/src/main/js/apps/system/components/info-items/SysInfoItem.tsx b/server/sonar-web/src/main/js/apps/system/components/info-items/SysInfoItem.tsx index 052dae587c2..e77f6b7aa36 100644 --- a/server/sonar-web/src/main/js/apps/system/components/info-items/SysInfoItem.tsx +++ b/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 ; + return ; } else { - return ; + return ; } } diff --git a/server/sonar-web/src/main/js/apps/system/components/info-items/__tests__/SysInfoItem-test.tsx b/server/sonar-web/src/main/js/apps/system/components/info-items/__tests__/SysInfoItem-test.tsx index b0ab7bfd737..84d96b8e1fe 100644 --- a/server/sonar-web/src/main/js/apps/system/components/info-items/__tests__/SysInfoItem-test.tsx +++ b/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(); - expect(wrapper.find('CheckIcon').exists()).toBeTruthy(); + expect(wrapper.find('AlertSuccessIcon').exists()).toBeTruthy(); }); it('should render `false`', () => { const wrapper = mount(); - expect(wrapper.find('ClearIcon').exists()).toBeTruthy(); + expect(wrapper.find('AlertErrorIcon').exists()).toBeTruthy(); }); diff --git a/server/sonar-web/src/main/js/apps/system/components/info-items/__tests__/__snapshots__/SysInfoItem-test.tsx.snap b/server/sonar-web/src/main/js/apps/system/components/info-items/__tests__/__snapshots__/SysInfoItem-test.tsx.snap index 9d3064d124c..3992c45c04c 100644 --- a/server/sonar-web/src/main/js/apps/system/components/info-items/__tests__/__snapshots__/SysInfoItem-test.tsx.snap +++ b/server/sonar-web/src/main/js/apps/system/components/info-items/__tests__/__snapshots__/SysInfoItem-test.tsx.snap @@ -127,7 +127,7 @@ Array [ - + - ; - + diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/NewOrganizationForm.js b/server/sonar-web/src/main/js/apps/tutorials/onboarding/NewOrganizationForm.js index cd2653b3348..618608b401e 100644 --- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/NewOrganizationForm.js +++ b/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 { ) : ( - )} {!unique && ( - + {translate('this_name_is_already_taken')} )} diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/OrganizationStep.js b/server/sonar-web/src/main/js/apps/tutorials/onboarding/OrganizationStep.js index e93163e652c..e7a5f9b938f 100644 --- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/OrganizationStep.js +++ b/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 && (
-
@@ -246,8 +247,8 @@ export default class OrganizationStep extends React.PureComponent { const result = this.getSelectedOrganization(); return result != null ? ( -
- +
+ {result}
) : null; diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/ProjectWatcher.js b/server/sonar-web/src/main/js/apps/tutorials/onboarding/ProjectWatcher.js index 86813dca37d..e836e988fbe 100644 --- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/ProjectWatcher.js +++ b/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 (
- + {translate('onboarding.project_watcher.finished')}
); @@ -113,7 +115,7 @@ export default class ProjectWatcher extends React.PureComponent { if (status != null) { return (
- + {translate('onboarding.project_watcher.failed')}
); diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/TokenStep.js b/server/sonar-web/src/main/js/apps/tutorials/onboarding/TokenStep.js index 86d963d2100..d29500382e0 100644 --- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/TokenStep.js +++ b/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 ? ( ) : ( - )} @@ -262,7 +263,7 @@ export default class TokenStep extends React.PureComponent { {this.canContinue() && (
-
@@ -280,8 +281,8 @@ export default class TokenStep extends React.PureComponent { } return ( -
- +
+ {selection === 'generate' && tokenName && `${tokenName}: `} {token}
diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/NewOrganizationForm-test.js.snap b/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/NewOrganizationForm-test.js.snap index 7694dfc182d..1e75378df8b 100644 --- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/NewOrganizationForm-test.js.snap +++ b/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/NewOrganizationForm-test.js.snap @@ -22,6 +22,7 @@ exports[`creates new organization 1`] = ` @@ -217,6 +218,7 @@ exports[`deletes organization 3`] = ` diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/ProjectWatcher-test.js.snap b/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/ProjectWatcher-test.js.snap index 91088ada48f..4ecd80c2ae3 100644 --- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/ProjectWatcher-test.js.snap +++ b/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/ProjectWatcher-test.js.snap @@ -23,8 +23,8 @@ exports[`renders 3`] = `
- onboarding.project_watcher.finished
diff --git a/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/TokenStep-test.js.snap b/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/TokenStep-test.js.snap index 86d6f2a627c..58074b468a3 100644 --- a/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/TokenStep-test.js.snap +++ b/server/sonar-web/src/main/js/apps/tutorials/onboarding/__tests__/__snapshots__/TokenStep-test.js.snap @@ -70,6 +70,7 @@ exports[`generates token 1`] = ` @@ -301,6 +302,7 @@ exports[`generates token 3`] = ` @@ -411,6 +413,7 @@ exports[`revokes token 1`] = ` @@ -490,6 +493,7 @@ exports[`revokes token 2`] = ` @@ -570,6 +574,7 @@ exports[`revokes token 3`] = ` diff --git a/server/sonar-web/src/main/js/apps/webhooks/components/DeliveryItem.tsx b/server/sonar-web/src/main/js/apps/webhooks/components/DeliveryItem.tsx index 61cf8bbbcd0..6eb15b3bc8b 100644 --- a/server/sonar-web/src/main/js/apps/webhooks/components/DeliveryItem.tsx +++ b/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'; diff --git a/server/sonar-web/src/main/js/components/icons-components/AlertWarnIcon.tsx b/server/sonar-web/src/main/js/components/icons-components/AlertWarnIcon.tsx index 91ee740b90b..d9fbdfa21f8 100644 --- a/server/sonar-web/src/main/js/components/icons-components/AlertWarnIcon.tsx +++ b/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 (