* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
+import styled from '@emotion/styled';
import { LinkHighlight, LinkStandalone } from '@sonarsource/echoes-react';
import * as React from 'react';
import Favorite from '../../../../components/controls/Favorite';
{breadcrumbElement.name}
</LinkStandalone>
- {isNotLast && <span className="slash-separator sw-mx-2" />}
+ {isNotLast && <SlashSeparator className="sw-mx-2" />}
</div>
);
})}
}
export default React.memo(Breadcrumb);
+
+const SlashSeparator = styled.span`
+ &:after {
+ content: '/';
+ color: rgba(68, 68, 68, 0.3);
+ }
+`;
* along with this program; if not, write to the Free Software Foundation,
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
+import { Link } from '@sonarsource/echoes-react';
import { HelperHintIcon } from 'design-system';
import React from 'react';
import DocumentationTooltip from '../../../../../components/common/DocumentationTooltip';
-import Link from '../../../../../components/common/Link';
import HelpTooltip from '../../../../../components/controls/HelpTooltip';
import { translate, translateWithParameters } from '../../../../../helpers/l10n';
import { getApplicationAdminUrl } from '../../../../../helpers/urls';
overlay={
<>
<p>{translate('application.branches.help')}</p>
- <hr className="spacer-top spacer-bottom" />
+ <hr className="sw-my-2" />
<Link to={getApplicationAdminUrl(component.key)}>
{translate('application.branches.link')}
</Link>
* along with this program; if not, write to the Free Software Foundation,
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
+import styled from '@emotion/styled';
import { ButtonSecondary, Popup, PopupPlacement, PopupZLevel } from 'design-system';
import * as React from 'react';
import EscKeydownHandler from '../../../../../components/controls/EscKeydownHandler';
return (
<>
- <span className="slash-separator sw-mx-2" />
+ <SlashSeparator className=" sw-mx-2" />
<div className="sw-flex sw-items-center it__branch-like-navigation-toggler-container">
<Popup
allowResizing
}
export default withAvailableFeatures(React.memo(BranchLikeNavigation));
+
+const SlashSeparator = styled.span`
+ &:after {
+ content: '/';
+ color: rgba(68, 68, 68, 0.3);
+ }
+`;
<ItemHeader>
{translate('branch_like_navigation.orphan_pull_requests')}
<HelpTooltip
- className="little-spacer-left"
+ className="sw-ml-1"
overlay={translate('branch_like_navigation.orphan_pull_requests.tooltip')}
>
<HelperHintIcon />
+++ /dev/null
-/*
- * SonarQube
- * Copyright (C) 2009-2024 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.
- */
-.nowrap {
- white-space: nowrap !important;
-}
-
-table.nowrap td,
-td.nowrap,
-th.nowrap {
- white-space: nowrap !important;
-}
-
-table.hide-overflow td,
-td.hide-overflow,
-th.hide-overflow {
- text-overflow: ellipsis;
- overflow: hidden;
-}
-
-.null-spacer-bottom {
- margin-bottom: 0 !important;
-}
-
-.spacer {
- margin: 8px !important;
-}
-
-.spacer-left {
- margin-left: 8px !important;
-}
-
-.spacer-right {
- margin-right: 8px !important;
-}
-
-.spacer-bottom {
- margin-bottom: 8px !important;
-}
-
-.spacer-top {
- margin-top: 8px !important;
-}
-
-.little-spacer {
- margin: 4px !important;
-}
-
-.little-spacer-left {
- margin-left: 4px !important;
-}
-
-.little-spacer-right {
- margin-right: 4px !important;
-}
-
-.little-spacer-bottom {
- margin-bottom: 4px !important;
-}
-
-.little-spacer-top {
- margin-top: 4px !important;
-}
-
-.padded {
- padding: var(--gridSize) !important;
-}
-
-.big-padded {
- padding: calc(2 * var(--gridSize)) !important;
-}
-
-.padded-right {
- padding-right: var(--gridSize) !important;
-}
-
-.padded-bottom {
- padding-bottom: var(--gridSize) !important;
-}
-
-.padded-left {
- padding-left: var(--gridSize) !important;
-}
-
-.big-padded-right {
- padding-right: calc(2 * var(--gridSize));
-}
-
-td.little-spacer-left {
- padding-left: 4px !important;
-}
-
-td.little-spacer-right {
- padding-right: 4px !important;
-}
-
-td.spacer-left {
- padding-left: 8px !important;
-}
-
-td.spacer-right {
- padding-right: 8px !important;
-}
-
-td.spacer-bottom {
- padding-bottom: 8px !important;
-}
-
-td.spacer-top {
- padding-top: 8px !important;
-}
-
-.pull-left {
- float: left !important;
-}
-
-.overflow-hidden {
- overflow: hidden !important;
-}
-
-.overflow-y-auto {
- overflow-y: auto !important;
-}
-
-.width-100 {
- width: 100% !important;
-}
-
-.abs-width-100 {
- width: 100px !important;
-}
-
-.abs-width-400 {
- width: 400px !important;
-}
-
-.abs-width-600 {
- width: 600px !important;
-}
-
-.display-flex-column {
- display: flex !important;
- flex-direction: column;
-}
-
-.display-flex-center {
- display: flex !important;
- align-items: center;
-}
-
-.display-flex-justify-center {
- display: flex !important;
- justify-content: center;
-}
-
-.display-flex-start {
- display: flex !important;
- align-items: flex-start !important;
-}
-
-.display-inline-flex-center {
- display: inline-flex !important;
- align-items: center;
-}
-
-.flex-1 {
- flex: 1;
-}
-
-.flex-grow {
- flex-grow: 1;
-}
-
-.slash-separator {
- margin-left: 5px;
- margin-right: 5px;
-}
-
-.slash-separator:after {
- content: '/';
- color: rgba(68, 68, 68, 0.3);
-}
import './components/global-loading.css';
import './init/base.css';
-import './init/misc.css';
import './print.css';
import './style.css';
<Title className="sw-mb-4">{translate('background_tasks.page')}</Title>
<p className="sw-max-w-3/4">
{translate('background_tasks.page.description')}
- <DocumentationLink className="spacer-left" to="/analyzing-source-code/background-tasks/">
+ <DocumentationLink className="sw-ml-2" to="/analyzing-source-code/background-tasks/">
{translate('learn_more')}
</DocumentationLink>
</p>
{params.length > 0 && <RuleDetailsParameters params={params} />}
{isEditable && (
- <div className="coding-rules-detail-description display-flex-center">
+ <div className="coding-rules-detail-description sw-flex sw-items-center">
{/* `templateRule` is used to get rule meta data, `customRule` is used to get parameter values */}
{/* it's expected to pass the same rule to both parameters */}
<CustomRuleButton customRule={ruleDetails} templateRule={ruleDetails}>
const path = getIssuesUrl({ ...DEFAULT_ISSUES_QUERY, rules: key });
const totalItem = (
- <span className="little-spacer-left">
+ <span className="sw-ml-1">
{'('}
<Link to={path}>{total}</Link>
{')'}
<div>
<div className="sw-flex sw-items-center sw-whitespace-nowrap">
<Highlight className="it__measure-overview-bubble-chart-title">{title}</Highlight>
- <HelpTooltip className="spacer-left" overlay={this.getDescription(domain)}>
+ <HelpTooltip className="sw-ml-2" overlay={this.getDescription(domain)}>
<HelperHintIcon />
</HelpTooltip>
</div>
</div>
{colorsMetric && (
<ColorRatingsLegend
- className="spacer-top"
+ className="sw-mt-2"
filters={ratingFilters}
onRatingClick={this.handleRatingFilterClick}
/>
<FlagMessage className="sw-mt-4 it__portfolio_warning" variant="warning">
{translate('component_measures.not_all_measures_are_shown')}
<HelpTooltip
- className="spacer-left"
+ className="sw-ml-2"
overlay={translate('component_measures.not_all_measures_are_shown.help')}
/>
</FlagMessage>
}
return (
- <div className="pull-left">
+ <div className="sw-float-left sw-flex sw-items-center">
<Checkbox
checked={isChecked}
- className="spacer-right text-middle"
+ className="sw-mr-2"
disabled={issues.length === 0}
id="issues-selection"
onCheck={this.handleCheckAll}
}
export default function IssuesCounter(props: Props) {
- return (
- <PageCounter className="spacer-left" label={translate('issues.issues')} total={props.total} />
- );
+ return <PageCounter className="sw-ml-2" label={translate('issues.issues')} total={props.total} />;
}
)}
<IssueSourceViewerHeader
- className={issueIsClosed && !issueIsFileLevel ? 'null-spacer-bottom' : ''}
+ className={issueIsClosed && !issueIsFileLevel ? 'sw-mb-0' : ''}
expandable={isExpandable(snippets, snippetGroup)}
issueKey={issue.key}
loading={loading}
<div className="it__js-actions">
{isAvailablePlugin(plugin) && (
<div>
- <p className="little-spacer-bottom">
- {translate('marketplace.available_under_commercial_license')}
- </p>
+ <p className="sw-mb-1">{translate('marketplace.available_under_commercial_license')}</p>
{plugin.homepageUrl && (
<Link to={plugin.homepageUrl} target="_blank">
{translate('marketplace.learn_more')}
)}
{isInstalledPlugin(plugin) && (
<p>
- <CheckIcon className="little-spacer-right" />
+ <CheckIcon className="sw-mr-1" />
{translate('marketplace.installed')}
</p>
)}
{isInstalledPlugin(plugin) && plugin.updates && plugin.updates.length > 0 && (
- <div className="spacer-top">
+ <div className="sw-mt-2">
{plugin.updates.map((update, idx) => (
<PluginUpdateButton
disabled={this.state.loading}
return (
<>
- <span className="little-spacer-right">{currentTask.errorMessage}</span>
+ <span className="sw-mr-1">{currentTask.errorMessage}</span>
{appState.canAdmin ? (
<Link to="/admin/extension/license/app">
{translate('license.component_navigation.button', currentTask.errorType)}.
* along with this program; if not, write to the Free Software Foundation,
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
+import { Spinner } from '@sonarsource/echoes-react';
import {
BasicSeparator,
ButtonSecondary,
FormField,
IllustratedSelectionCard,
InputSelect,
- Spinner,
SubTitle,
ToggleButton,
} from 'design-system';
<SubTitle>{translate('overview.badges.get_badge')}</SubTitle>
<p className="sw-mb-4">{translate('overview.badges.description', qualifier)}</p>
- <Spinner loading={isLoading || isEmpty(token)}>
+ <Spinner isLoading={isLoading || isEmpty(token)}>
<div className="sw-flex sw-space-x-4 sw-mb-4">
<IllustratedSelectionCard
className="sw-w-abs-300 it__badge-button"
</div>
</FormField>
- <Spinner className="spacer-top spacer-bottom" loading={isFetchingToken || isRenewing}>
+ <Spinner className="sw-my-2" isLoading={isFetchingToken || isRenewing}>
{!isLoading && (
<CodeSnippet
language="plaintext"
{translate('overview.badges.renew.description')}{' '}
<ButtonSecondary
disabled={isLoading}
- className="spacer-top it__project-info-renew-badge sw-mr-auto"
+ className="sw-mt-2 it__project-info-renew-badge sw-mr-auto"
onClick={() => {
renewToken(project);
}}
* along with this program; if not, write to the Free Software Foundation,
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
-import { Checkbox, FlagMessage, Spinner, SubTitle } from 'design-system';
+import { Spinner } from '@sonarsource/echoes-react';
+import { Checkbox, FlagMessage, SubTitle } from 'design-system';
import * as React from 'react';
import {
WithNotificationsProps,
<form aria-labelledby="notifications-update-title">
<SubTitle>{translate('project.info.notifications')}</SubTitle>
- <FlagMessage className="spacer-top" variant="info">
+ <FlagMessage className="sw-mt-2" variant="info">
{translate('notification.dispatcher.information')}
</FlagMessage>
- <Spinner className="sw-mt-6" loading={loading}>
+ <Spinner className="sw-mt-6" isLoading={loading}>
<h3 id="notifications-update-title" className="sw-mt-6">
{translate('notifications.send_email')}
</h3>
<components.Option {...props}>
<div>
<DisableableSelectOption
- className="abs-width-100"
+ className="sw-w-[100px]"
option={props.data}
disabledReason={translate('project_quality_gate.no_condition.reason')}
disableTooltipOverlay={() => (
<>
{profile.name}
{profile.isBuiltIn && (
- <BuiltInQualityProfileBadge className="spacer-left" />
+ <BuiltInQualityProfileBadge className="sw-ml-2" />
)}
</>
)}
}
return (
<ItemLink
- className="display-flex-center"
+ className="sw-flex sw-items-center"
to={{ pathname: '/projects/create', search: queryToSearch({ mode: alm }) }}
>
{alm !== 'manual' && (
<img
alt={alm}
- className="spacer-right"
+ className="sw-mr-2"
width={16}
src={`${getBaseUrl()}/images/alm/${almIcon}.svg`}
/>
export default function CaycBadgeTooltip() {
return (
<div>
- <p className="spacer-bottom padded-bottom bordered-bottom-cayc">
+ <p className="sw-mb-2 sw-pb-2 bordered-bottom-cayc">
{translate('quality_gates.cayc.tooltip.message')}
</p>
<DocumentationLink to="/user-guide/clean-as-you-code/">
export default function SeverityChange({ severity }: Props) {
return (
- <div className="nowrap">
+ <div className="sw-whitespace-nowrap">
{translate('quality_profiles.deprecated_severity_set_to')}{' '}
<SeverityHelper severity={severity} />
</div>
onClick={handleSelectExtend}
title={intl.formatMessage({ id: 'quality_profiles.creation_from_extend' })}
>
- <p className="spacer-bottom">
+ <p className="sw-mb-2">
{intl.formatMessage({ id: 'quality_profiles.creation_from_extend_description_1' })}
</p>
<p>
onClick={handleSelectCopy}
title={intl.formatMessage({ id: 'quality_profiles.creation_from_copy' })}
>
- <p className="spacer-bottom">
+ <p className="sw-mb-2">
{intl.formatMessage({ id: 'quality_profiles.creation_from_copy_description_1' })}
</p>
<p>
onConfirm={onDelete}
>
<>
- <p className="spacer-bottom">
+ <p className="sw-mb-2">
<FormattedMessage
defaultMessage={translate('settings.almintegration.delete.message')}
id="settings.almintegration.delete.message"
function renderDevOpsIcon(key: string) {
return (
- <img
- alt={key}
- className="spacer-right"
- height={16}
- src={`${getBaseUrl()}/images/alm/${key}.svg`}
- />
+ <img alt={key} className="sw-mr-2" height={16} src={`${getBaseUrl()}/images/alm/${key}.svg`} />
);
}
<InputTextArea
size="large"
aria-label={getPropertyName(setting.definition)}
- className="settings-large-input text-top spacer-right"
+ className="settings-large-input text-top sw-mr-2"
name={name}
onChange={handleInputChange}
rows={5}
overlay={translate('project_activity.graphs.custom.metric_no_history')}
>
<li
- className="spacer-left spacer-right"
+ className="sw-mx-2"
aria-label={translate('project_activity.graphs.custom.metric_no_history')}
>
{legendItem}
<Tooltip overlay={disableTooltipOverlay()} placement="left">
<span className={className}>
{label}
- {disabledReason !== undefined && (
- <em className="small little-spacer-left">({disabledReason})</em>
- )}
+ {disabledReason !== undefined && <em className="small sw-ml-1">({disabledReason})</em>}
</span>
</Tooltip>
) : (
overlay={
<div className="sw-py-4">
{title && (
- <div className="spacer-bottom">
+ <div className="sw-mb-2">
<strong>{title}</strong>
</div>
)}
<hr className="sw-my-4" />
{links.map(({ href, label, inPlace, doc = true }, index) => (
- <div className="little-spacer-bottom" key={label}>
+ <div className="sw-mb-1" key={label}>
{doc ? (
<DocumentationLink
to={href}
<img
alt={text}
aria-hidden
- className="spacer-right"
+ className="sw-mr-2"
height="18"
src={`${getBaseUrl()}/images/${icon}`}
width="18"
if (isPermissionDefinitionGroup(permission)) {
return permission.permissions.map((permission) => (
<React.Fragment key={permission.key}>
- <b className="little-spacer-right">{permission.name}:</b>
+ <b className="sw-mr-1">{permission.name}:</b>
<InstanceMessage key={permission.key} message={permission.description} />
<br />
</React.Fragment>
projects / sonarqube.git / commitdiff