}
.bt-workers-warning-icon {
- position: relative;
- top: -1px;
-}
-
-.bt-workers-warning-icon::before {
- color: #d3d3d3;
+ margin-top: 5px;
}
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 {
{!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>
)}
</a>
<BubblePopupHelper
isOpen={this.state.noSupportPopup}
- position="bottomright"
popup={<NoWorkersSupportPopup />}
+ position="bottomright"
togglePopup={this.toggleNoSupportPopup}
/>
</span>
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"
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"
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"
* 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';
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>
<Button
className="js-report-subscribe"
onClick={[Function]}
+ type="button"
>
report.subscribe
</Button>
<div
className="spacer-bottom"
>
- <i
- className="icon-check pull-left spacer-right"
+ <AlertSuccessIcon
+ className="pull-left spacer-right"
/>
<div
className="overflow-hidden"
</div>
<Button
onClick={[Function]}
+ type="button"
>
report.unsubscribe
</Button>
* 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 {
{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>
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';
{!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',
{!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>
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';
function BooleanItem({ value }: { value: boolean }) {
if (value) {
- return <CheckIcon />;
+ return <AlertSuccessIcon />;
} else {
- return <ClearIcon />;
+ return <AlertErrorIcon />;
}
}
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();
});
<BooleanItem
value={true}
>
- <CheckIcon>
+ <AlertSuccessIcon>
<svg
height={16}
version="1.1"
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>
deleteOrganization,
getOrganization
} from '../../../api/organizations';
+import AlertErrorIcon from '../../../components/icons-components/AlertErrorIcon';
import { DeleteButton } from '../../../components/ui/buttons';
import { translate } from '../../../helpers/l10n';
<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"
{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>
)}
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';
{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>
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;
*/
// @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';
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>
);
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>
);
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';
{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>
)}
{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>
}
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>
<button
className="text-middle"
disabled={true}
+ type="submit"
>
create
</button>
<button
className="text-middle"
disabled={true}
+ type="submit"
>
create
</button>
<div
className="big-spacer-top note text-center"
>
- <i
- className="icon-check spacer-right"
+ <AlertSuccessIcon
+ className="spacer-right"
/>
onboarding.project_watcher.finished
</div>
<button
className="text-middle"
disabled={true}
+ type="submit"
>
onboarding.token.generate
</button>
<button
className="js-continue"
onClick={[Function]}
+ type="button"
>
continue
</button>
<button
className="js-continue"
onClick={[Function]}
+ type="button"
>
continue
</button>
<button
className="js-continue"
onClick={[Function]}
+ type="button"
>
continue
</button>
<button
className="text-middle"
disabled={true}
+ type="submit"
>
onboarding.token.generate
</button>
* 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';
*/
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}