SONAR-10863 Tweak styling of embedded documentation markdown

6 files changed, 69 insertions, 26 deletions

diff --git a/server/sonar-web/src/main/js/app/styles/init/misc.css b/server/sonar-web/src/main/js/app/styles/init/misc.css
index 4da47ab79f6..16e78425e0a 100644
--- a/server/sonar-web/src/main/js/app/styles/init/misc.css
+++ b/server/sonar-web/src/main/js/app/styles/init/misc.css
@@ -33,6 +33,10 @@
   vertical-align: text-top !important;
 }
 
+.vertical-baseline {
+  vertical-align: baseline !important;
+}
+
 .nowrap {
   white-space: nowrap !important;
 }
diff --git a/server/sonar-web/src/main/js/apps/documentation/styles.css b/server/sonar-web/src/main/js/apps/documentation/styles.css
index 3b0071d3f25..65a00533990 100644
--- a/server/sonar-web/src/main/js/apps/documentation/styles.css
+++ b/server/sonar-web/src/main/js/apps/documentation/styles.css
@@ -21,12 +21,54 @@
   max-width: 740px;
 }
 
-.documentation-content > h1 {
-  margin-bottom: calc(4 * var(--gridSize));
-  font-size: 20px;
-}
-
 .documentation-footer div,
 .documentation-footer .page-footer-menu {
   max-width: 740px;
 }
+
+.documentation-content.markdown {
+  font-size: 14px;
+}
+
+.documentation-content.markdown > h1 {
+  font-size: 24px;
+  padding-top: var(--gridSize);
+  margin-bottom: 2em;
+}
+
+.documentation-content.markdown h2 {
+  font-weight: 800;
+  margin-top: 3em;
+}
+
+.documentation-content.markdown h3 {
+  font-size: 14px;
+  margin-bottom: 0.8em;
+}
+
+.documentation-content.markdown pre {
+  border: 1px solid #e6e6e6;
+  border-radius: 3px;
+  background-color: rgba(0, 0, 0, 0.06);
+}
+
+.documentation-content.markdown p,
+.documentation-content.markdown pre,
+.documentation-content.markdown table {
+  margin: 0.8em 0 2em;
+}
+
+.documentation-content.markdown p + ul,
+.documentation-content.markdown p + ol,
+.documentation-content.markdown p + pre {
+  margin: -1em 0 2em;
+}
+
+.documentation-content.markdown li > p {
+  margin: 0;
+}
+
+.documentation-content.markdown li > p + ul,
+.documentation-content.markdown li > p + ol {
+  margin: 0;
+}
diff --git a/server/sonar-web/src/main/js/components/docs/DocLink.tsx b/server/sonar-web/src/main/js/components/docs/DocLink.tsx
index 647256b3743..e4feddec312 100644
--- a/server/sonar-web/src/main/js/components/docs/DocLink.tsx
+++ b/server/sonar-web/src/main/js/components/docs/DocLink.tsx
@@ -38,11 +38,14 @@ export default function DocLink(props: React.AnchorHTMLAttributes<HTMLAnchorElem
   }
 
   return (
-    <span className="display-inline-flex-center">
+    <>
       <a href={href} rel="noopener noreferrer" target="_blank" {...other}>
         {children}
       </a>
-      <DetachIcon className="text-muted little-spacer-left little-spacer-right" size={12} />
-    </span>
+      <DetachIcon
+        className="text-muted little-spacer-left little-spacer-right vertical-baseline"
+        size={12}
+      />
+    </>
   );
 }
diff --git a/server/sonar-web/src/main/js/components/docs/DocTooltipLink.tsx b/server/sonar-web/src/main/js/components/docs/DocTooltipLink.tsx
index e539615e600..897b3568e89 100644
--- a/server/sonar-web/src/main/js/components/docs/DocTooltipLink.tsx
+++ b/server/sonar-web/src/main/js/components/docs/DocTooltipLink.tsx
@@ -24,7 +24,7 @@ import DetachIcon from '../../components/icons-components/DetachIcon';
 export default function DocTooltipLink(props: React.AnchorHTMLAttributes<HTMLAnchorElement>) {
   const { children, href, ...other } = props;
   return (
-    <span className="display-inline-flex-center">
+    <>
       {href && href.startsWith('/') ? (
         <Link
           rel="noopener noreferrer"
@@ -38,7 +38,7 @@ export default function DocTooltipLink(props: React.AnchorHTMLAttributes<HTMLAnc
           {children}
         </a>
       )}
-      <DetachIcon className="little-spacer-left little-spacer-right" size={12} />
-    </span>
+      <DetachIcon className="little-spacer-left little-spacer-right vertical-baseline" size={12} />
+    </>
   );
 }
diff --git a/server/sonar-web/src/main/js/components/docs/__tests__/__snapshots__/DocLink-test.tsx.snap b/server/sonar-web/src/main/js/components/docs/__tests__/__snapshots__/DocLink-test.tsx.snap
index 264acc8a5b4..4d443347a2e 100644
--- a/server/sonar-web/src/main/js/components/docs/__tests__/__snapshots__/DocLink-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/docs/__tests__/__snapshots__/DocLink-test.tsx.snap
@@ -9,19 +9,17 @@ exports[`should render documentation link 1`] = `
 `;
 
 exports[`should render simple link 1`] = `
-<span
-  className="display-inline-flex-center"
->
+<React.Fragment>
   <a
     href="http://sample.com"
     rel="noopener noreferrer"
     target="_blank"
   />
   <DetachIcon
-    className="text-muted little-spacer-left little-spacer-right"
+    className="text-muted little-spacer-left little-spacer-right vertical-baseline"
     size={12}
   />
-</span>
+</React.Fragment>
 `;
 
 exports[`should render sonarcloud link 1`] = `
diff --git a/server/sonar-web/src/main/js/components/docs/__tests__/__snapshots__/DocTooltipLink-test.tsx.snap b/server/sonar-web/src/main/js/components/docs/__tests__/__snapshots__/DocTooltipLink-test.tsx.snap
index 6d718398791..efb4518b4ae 100644
--- a/server/sonar-web/src/main/js/components/docs/__tests__/__snapshots__/DocTooltipLink-test.tsx.snap
+++ b/server/sonar-web/src/main/js/components/docs/__tests__/__snapshots__/DocTooltipLink-test.tsx.snap
@@ -1,9 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render internal link 1`] = `
-<span
-  className="display-inline-flex-center"
->
+<React.Fragment>
   <Link
     onlyActiveOnIndex={false}
     rel="noopener noreferrer"
@@ -12,24 +10,22 @@ exports[`should render internal link 1`] = `
     to="/documentation/foo/bar"
   />
   <DetachIcon
-    className="little-spacer-left little-spacer-right"
+    className="little-spacer-left little-spacer-right vertical-baseline"
     size={12}
   />
-</span>
+</React.Fragment>
 `;
 
 exports[`should render simple link 1`] = `
-<span
-  className="display-inline-flex-center"
->
+<React.Fragment>
   <a
     href="http://sample.com"
     rel="noopener noreferrer"
     target="_blank"
   />
   <DetachIcon
-    className="little-spacer-left little-spacer-right"
+    className="little-spacer-left little-spacer-right vertical-baseline"
     size={12}
   />
-</span>
+</React.Fragment>
 `;