@@ -53,16 +53,16 @@ export const HtmlFormatter = styled.div` | |||
h2, | |||
h3 { | |||
color: ${themeColor('pageTitle')}; | |||
${tw`sw-heading-md`} | |||
color: ${themeColor('pageContentDark')}; | |||
${tw`sw-body-md-highlight`} | |||
${tw`sw-my-6`} | |||
} | |||
h4, | |||
h5, | |||
h6 { | |||
color: ${themeColor('pageContent')}; | |||
${tw`sw-body-md-highlight`} | |||
color: ${themeColor('pageContentDark')}; | |||
${tw`sw-body-sm-highlight`} | |||
${tw`sw-mt-6 sw-mb-2`} | |||
} | |||
@@ -642,6 +642,10 @@ export const lightTheme = { | |||
// progressBar | |||
progressBarForeground: COLORS.indigo[500], | |||
progressBarBackground: COLORS.indigo[100], | |||
//education principles | |||
educationPrincipleBackground: COLORS.indigo[25], | |||
educationPrincipleBorder: COLORS.indigo[300], | |||
}, | |||
// contrast colors to be used for text when using a color background with the same name |
@@ -17,12 +17,7 @@ | |||
* along with this program; if not, write to the Free Software Foundation, | |||
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. | |||
*/ | |||
import { | |||
ClipboardIconButton, | |||
IssueMessageHighlighting, | |||
LinkIcon, | |||
PageContentFontWrapper, | |||
} from 'design-system'; | |||
import { ClipboardIconButton, IssueMessageHighlighting, LinkIcon, Title } from 'design-system'; | |||
import * as React from 'react'; | |||
import { translate } from '../../../helpers/l10n'; | |||
import { getPathUrlAsString, getRuleUrl } from '../../../helpers/urls'; | |||
@@ -46,7 +41,7 @@ export default function RuleDetailsMeta(props: Readonly<Props>) { | |||
return ( | |||
<header className="sw-flex sw-mb-6"> | |||
<div className="sw-mr-8 sw-grow sw-flex sw-flex-col sw-gap-4"> | |||
<PageContentFontWrapper className="sw-heading-md" as="h1"> | |||
<Title className="sw-mb-0"> | |||
<IssueMessageHighlighting message={ruleDetails.name} /> | |||
<ClipboardIconButton | |||
Icon={LinkIcon} | |||
@@ -55,7 +50,7 @@ export default function RuleDetailsMeta(props: Readonly<Props>) { | |||
copyValue={getPathUrlAsString(ruleUrl, ruleDetails.isExternal)} | |||
discreet | |||
/> | |||
</PageContentFontWrapper> | |||
</Title> | |||
<div className="sw-flex sw-flex-wrap sw-gap-2"> | |||
{hasTypeData && ( |
@@ -17,7 +17,7 @@ | |||
* along with this program; if not, write to the Free Software Foundation, | |||
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. | |||
*/ | |||
import { ContentCell, Link, Spinner, SubHeadingHighlight, Table, TableRow } from 'design-system'; | |||
import { ContentCell, Link, Spinner, SubTitle, Table, TableRow } from 'design-system'; | |||
import { keyBy } from 'lodash'; | |||
import * as React from 'react'; | |||
import { FormattedMessage } from 'react-intl'; | |||
@@ -182,10 +182,10 @@ export class RuleDetailsIssues extends React.PureComponent<Props, State> { | |||
return ( | |||
<div className="sw-mb-8"> | |||
<Spinner loading={loading}> | |||
<SubHeadingHighlight as="h2"> | |||
<SubTitle> | |||
{translate('coding_rules.issues')} | |||
{this.renderTotal()} | |||
</SubHeadingHighlight> | |||
</SubTitle> | |||
{projects.length > 0 ? ( | |||
<> |
@@ -28,7 +28,7 @@ import { | |||
InheritanceIcon, | |||
Link, | |||
Note, | |||
SubHeadingHighlight, | |||
SubTitle, | |||
Table, | |||
TableRowInteractive, | |||
} from 'design-system'; | |||
@@ -244,9 +244,9 @@ export default function RuleDetailsProfiles(props: Readonly<Props>) { | |||
}; | |||
return ( | |||
<div className="js-rule-profiles sw-mb-8"> | |||
<SubHeadingHighlight as="h2" id={PROFILES_HEADING_ID}> | |||
<SubTitle id={PROFILES_HEADING_ID}> | |||
<FormattedMessage id="coding_rules.quality_profiles" /> | |||
</SubHeadingHighlight> | |||
</SubTitle> | |||
{canActivate && ( | |||
<ActivationButton |
@@ -37,7 +37,6 @@ import ScreenPositionHelper from '../common/ScreenPositionHelper'; | |||
import withLocation from '../hoc/withLocation'; | |||
import MoreInfoRuleDescription from './MoreInfoRuleDescription'; | |||
import RuleDescription from './RuleDescription'; | |||
import './style.css'; | |||
interface IssueTabViewerProps extends CurrentUserContextInterface { | |||
ruleDetails: RuleDetails; |
@@ -17,16 +17,16 @@ | |||
* 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 { FlagMessage, SubTitle, themeBorder, themeColor } from 'design-system'; | |||
import * as React from 'react'; | |||
import { RuleDescriptionSection } from '../../apps/coding-rules/rule'; | |||
import { translate } from '../../helpers/l10n'; | |||
import { Dict } from '../../types/types'; | |||
import { ButtonLink } from '../controls/buttons'; | |||
import { Alert } from '../ui/Alert'; | |||
import RuleDescription from './RuleDescription'; | |||
import DefenseInDepth from './educationPrinciples/DefenseInDepth'; | |||
import NeverTrustUserInput from './educationPrinciples/NeverTrustUserInput'; | |||
import './style.css'; | |||
interface Props { | |||
displayEducationalPrinciplesNotification?: boolean; | |||
@@ -62,7 +62,7 @@ export default class MoreInfoRuleDescription extends React.PureComponent<Props, | |||
return ( | |||
<div className="sw-my-6 rule-desc"> | |||
{displayEducationalPrinciplesNotification && ( | |||
<Alert variant="info"> | |||
<FlagMessage variant="info"> | |||
<p className="little-spacer-bottom little-spacer-top"> | |||
{translate('coding_rules.more_info.notification_message')} | |||
</p> | |||
@@ -74,21 +74,21 @@ export default class MoreInfoRuleDescription extends React.PureComponent<Props, | |||
> | |||
{translate('coding_rules.more_info.scroll_message')} | |||
</ButtonLink> | |||
</Alert> | |||
</FlagMessage> | |||
)} | |||
{sections.length > 0 && ( | |||
<> | |||
<h2>{translate('coding_rules.more_info.resources.title')}</h2> | |||
<SubTitle>{translate('coding_rules.more_info.resources.title')}</SubTitle> | |||
<RuleDescription language={language} sections={sections} /> | |||
</> | |||
)} | |||
{educationPrinciples.length > 0 && ( | |||
<> | |||
<h2 ref={educationPrinciplesRef}> | |||
<SubTitle ref={educationPrinciplesRef}> | |||
{translate('coding_rules.more_info.education_principles.title')} | |||
</h2> | |||
</SubTitle> | |||
{educationPrinciples.map((key) => { | |||
const Concept = EDUCATION_PRINCIPLES_MAP[key]; | |||
@@ -98,9 +98,9 @@ export default class MoreInfoRuleDescription extends React.PureComponent<Props, | |||
} | |||
return ( | |||
<div key={key} className="education-principles big-spacer-top big-padded"> | |||
<StyledEducationPrinciples key={key} className="sw-mt-4 sw-p-4 sw-rounded-1"> | |||
<Concept /> | |||
</div> | |||
</StyledEducationPrinciples> | |||
); | |||
})} | |||
</> | |||
@@ -109,3 +109,12 @@ export default class MoreInfoRuleDescription extends React.PureComponent<Props, | |||
); | |||
} | |||
} | |||
const StyledEducationPrinciples = styled.div` | |||
background-color: ${themeColor('educationPrincipleBackground')}; | |||
border: ${themeBorder('default', 'educationPrincipleBorder')}; | |||
& h3:first-child { | |||
margin-top: 0px; | |||
} | |||
`; |
@@ -33,7 +33,6 @@ import { getTabId, getTabPanelId } from '../controls/BoxedTabs'; | |||
import withLocation from '../hoc/withLocation'; | |||
import MoreInfoRuleDescription from './MoreInfoRuleDescription'; | |||
import RuleDescription from './RuleDescription'; | |||
import './style.css'; | |||
interface RuleTabViewerProps extends CurrentUserContextInterface { | |||
ruleDetails: RuleDetails; |
@@ -1,28 +0,0 @@ | |||
/* | |||
* 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. | |||
*/ | |||
.education-principles { | |||
background-color: var(--educationPrinciplesBgColor); | |||
border-radius: 2px; | |||
border: 1px solid var(--educationPrinciplesBorderColor); | |||
} | |||
.education-principles h3:first-child { | |||
margin-top: 0px; | |||
} |