diff --git a/package-lock.json b/package-lock.json index ac58bef71..465f1eaec 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6884,6 +6884,12 @@ "@types/react": "*" } }, + "@types/remove-markdown": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/@types/remove-markdown/-/remove-markdown-0.1.1.tgz", + "integrity": "sha512-SCYOFMHUqyiJU5M0V2gBB6UDdBhPwma34j0vYX0JgWaqp/74ila2Ops1jt5tB/C1UQXVXqK+is61884bITn3LQ==", + "dev": true + }, "@types/responselike": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@types/responselike/-/responselike-1.0.0.tgz", @@ -29396,6 +29402,11 @@ "xtend": "^4.0.1" } }, + "remove-markdown": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/remove-markdown/-/remove-markdown-0.3.0.tgz", + "integrity": "sha1-XktmdJOpNXlyjz1S7MHbnKUF3Jg=" + }, "remove-trailing-separator": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz", diff --git a/package.json b/package.json index 43839032d..10f89a5bd 100644 --- a/package.json +++ b/package.json @@ -71,6 +71,7 @@ "react-spring": "^8.0.27", "react-tabs": "^3.1.1", "react-toastify": "^6.0.8", + "remove-markdown": "^0.3.0", "shortid": "^2.2.15", "slugify": "^1.4.5", "swr": "^0.3.5", @@ -95,6 +96,7 @@ "@types/react-helmet": "^6.1.0", "@types/react-paginate": "^6.2.1", "@types/react-tabs": "^2.3.2", + "@types/remove-markdown": "^0.1.1", "@types/shortid": "0.0.29", "@types/yup": "^0.29.7", "@typescript-eslint/eslint-plugin": "^4.3.0", diff --git a/src/components/molecules/AssetTeaser.module.css b/src/components/molecules/AssetTeaser.module.css index cfaff46ec..fb7739f0b 100644 --- a/src/components/molecules/AssetTeaser.module.css +++ b/src/components/molecules/AssetTeaser.module.css @@ -23,14 +23,18 @@ flex: 1; } +.content p { + margin-bottom: calc(var(--spacer) / 4); +} + .title { font-size: var(--font-size-large); - margin-bottom: calc(var(--spacer) / 4); + margin-bottom: calc(var(--spacer) / 3); } .foot { font-weight: var(--font-weight-bold); - margin-top: calc(var(--spacer) / 2); + margin-top: calc(var(--spacer) / 4); } .foot p { diff --git a/src/components/molecules/AssetTeaser.tsx b/src/components/molecules/AssetTeaser.tsx index cc20e8036..4ba935948 100644 --- a/src/components/molecules/AssetTeaser.tsx +++ b/src/components/molecules/AssetTeaser.tsx @@ -5,6 +5,7 @@ import { MetadataMarket } from '../../@types/MetaData' import Price from '../atoms/Price' import styles from './AssetTeaser.module.css' import { DDO } from '@oceanprotocol/lib' +import removeMarkdown from 'remove-markdown' declare type AssetTeaserProps = { ddo: DDO @@ -26,7 +27,7 @@ const AssetTeaser: React.FC = ({
- {metadata?.additionalInformation?.description || ''} + {removeMarkdown(metadata?.additionalInformation?.description || '')}