fix(DHIS2-19023): use react-markdown for rendering descriptions (#584)

* fix(DHIS2-19023): use react-markdown for rendering descriptions

* fix: update styles for 'latest updates' to match AppHub

Author: kabaros

src/components/AppDetails/Description.jsx

@@ -1,16 +1,16 @@
+import PropTypes from 'prop-types'
 import React from 'react'
+import ReactMarkdown from 'react-markdown'
 import styles from './Description.module.css'
 
 export const Description = ({ description }) => {
-    const lines = description.split('\n')
-    return lines.map((line, index) => {
-        if (!line.trim()) {
-            return <br key={index} />
-        }
-        return (
-            <p key={index} className={styles.paragraph}>
-                {line}
-            </p>
-        )
-    })
+    return (
+        <div className={styles.description}>
+            <ReactMarkdown>{description}</ReactMarkdown>
+        </div>
+    )
+}
+
+Description.propTypes = {
+    description: PropTypes.string,
 }

src/components/AppDetails/Description.module.css

@@ -1,4 +1,15 @@
-.paragraph {
+.description {
     margin-top: 0;
     margin-bottom: var(--spacers-dp8);
+    line-height: 1.4rem;
+    font-size: 0.875em;
+}
+
+.description :global(h1) {
+    font-size: 1.1rem;
+}
+.description :global(h2),
+.description :global(h3),
+.description :global(h4) {
+    font-size: 1rem;
 }

src/components/AppDetails/LatestUpdates.module.css

@@ -4,7 +4,8 @@
 
 .latestUpdates {
     padding: var(--spacers-dp16);
-    background-color: var(--colors-blue100);
+    background-color: var(--colors-blue050);
+    border-radius: 5px;
 }
 
 .latestUpdatesHeader {
@@ -24,12 +25,13 @@
 .versionList {
     list-style: none;
     padding: 0;
-    font-size: 0.8rem;
+    font-size: 0.875rem;
 }
 
 .latestUpdatesVersionHeading {
-    font-size: 1.1em;
-    font-weight: bold;
+    font-size: 1rem;
+    font-weight: 700;
+    margin: 0;
 }
 
 .changeSummary :global(ul) {
@@ -38,6 +40,9 @@
 }
 
 .changeSummary :global(h3) {
-    font-size: 0.9em;
-    margin-bottom: 0.5em;
+    font-size: 1em;
+    margin: 0.5rem 0.25rem;
+}
+.versionList > li:not(:last-of-type) {
+    margin-block-end: var(--spacers-dp24);
 }