SONAR-16463 Improve title hierarchy on rule description

3 files changed, 37 insertions, 12 deletions

diff --git a/server/sonar-web/src/main/js/app/styles/style.css b/server/sonar-web/src/main/js/app/styles/style.css
index 5fc30094730..ede5ef7c216 100644
--- a/server/sonar-web/src/main/js/app/styles/style.css
+++ b/server/sonar-web/src/main/js/app/styles/style.css
@@ -100,24 +100,40 @@
   margin: 1em 0;
 }
 
-.rule-desc h2,
 .markdown h2 {
   font-size: var(--bigFontSize);
   font-weight: 400;
 }
 
-.rule-desc h3,
 .markdown h3,
-.rule-desc h4,
 .markdown h4,
-.rule-desc h5,
 .markdown h5,
-.rule-desc h6,
 .markdown h6 {
   font-size: var(--baseFontSize);
   font-weight: 600;
 }
 
+.rule-desc h2 {
+  font-size: 20px;
+  font-weight: 400;
+  border-bottom: 1px solid #e6e6e6;
+}
+
+.rule-desc h3 {
+  font-size: 18px;
+  font-weight: 500;
+}
+.rule-desc h4 {
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.rule-desc h5,
+.rule-desc h6 {
+  font-size: var(--baseFontSize);
+  font-weight: 600;
+}
+
 .rule-desc pre,
 .markdown pre,
 .rule-desc code,
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsDescription.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsDescription.tsx
index a400ae0e402..004f7facaca 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsDescription.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsDescription.tsx
@@ -211,7 +211,7 @@ export default class RuleDetailsDescription extends React.PureComponent<Props, S
     if (section.key === RuleDescriptionSections.DEFAULT) {
       return (
         <section
-          className="coding-rules-detail-description rule-desc markdown"
+          className="coding-rules-detail-description markdown"
           key={section.key}
           /* eslint-disable-next-line react/no-danger */
           dangerouslySetInnerHTML={{ __html: sanitizeString(section.content) }}
@@ -226,7 +226,7 @@ export default class RuleDetailsDescription extends React.PureComponent<Props, S
         : translate('coding_rules.description_section.title', section.key);
 
     return (
-      <section className="coding-rules-detail-description rule-desc markdown" key={section.key}>
+      <section className="coding-rules-detail-description rule-desc" key={section.key}>
         <h2>{title}</h2>
         <div
           /* eslint-disable-next-line react/no-danger */
diff --git a/server/sonar-web/src/main/js/apps/issues/components/IssueTabViewer.tsx b/server/sonar-web/src/main/js/apps/issues/components/IssueTabViewer.tsx
index 94e5cdc6d17..8ebe71635d0 100644
--- a/server/sonar-web/src/main/js/apps/issues/components/IssueTabViewer.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/components/IssueTabViewer.tsx
@@ -42,6 +42,7 @@ interface Tab {
   key: TabKeys;
   label: React.ReactNode;
   content: string;
+  isDefault: boolean;
 }
 
 export enum TabKeys {
@@ -91,21 +92,27 @@ export default class IssueViewerTabs extends React.PureComponent<Props, State> {
           [RuleDescriptionSections.DEFAULT, RuleDescriptionSections.ROOT_CAUSE].includes(
             section.key
           )
-        )?.content
+        )?.content,
+        isDefault:
+          ruleDetails.descriptionSections?.find(
+            section => section.key === RuleDescriptionSections.DEFAULT
+          ) !== undefined
       },
       {
         key: TabKeys.HowToFixIt,
         label: translate('issue.tabs', TabKeys.HowToFixIt),
         content: ruleDetails.descriptionSections?.find(
           section => section.key === RuleDescriptionSections.HOW_TO_FIX
-        )?.content
+        )?.content,
+        isDefault: false
       },
       {
         key: TabKeys.Resources,
         label: translate('issue.tabs', TabKeys.Resources),
         content: ruleDetails.descriptionSections?.find(
           section => section.key === RuleDescriptionSections.RESOURCES
-        )?.content
+        )?.content,
+        isDefault: false
       }
     ].filter(tab => tab.content !== undefined) as Array<Tab>;
 
@@ -155,8 +162,10 @@ export default class IssueViewerTabs extends React.PureComponent<Props, State> {
           {tabs.slice(1).map(tab => (
             <div
               key={tab.key}
-              className={classNames('markdown big-padded', {
-                hidden: currentTabKey !== tab.key
+              className={classNames('big-padded', {
+                hidden: currentTabKey !== tab.key,
+                markdown: tab.isDefault,
+                'rule-desc': !tab.isDefault
               })}
               // eslint-disable-next-line react/no-danger
               dangerouslySetInnerHTML={{ __html: sanitizeString(tab.content) }}