diff --git a/package-lock.json b/package-lock.json index ece83eb02d..120ef5f374 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3925,6 +3925,26 @@ "is-buffer": "^1.1.5" } }, + "node_modules/@contentful/rich-text-html-renderer": { + "version": "16.0.2", + "resolved": "https://registry.npmjs.org/@contentful/rich-text-html-renderer/-/rich-text-html-renderer-16.0.2.tgz", + "integrity": "sha512-0flmxVixlNk5PMiHXAlABUJ2uURsWxOjbC6ZHhqpEVHU03kHMoIKfDdo6CRZc0S0rMWMO3c14Ei91E97T06T8w==", + "dependencies": { + "@contentful/rich-text-types": "^16.0.2", + "escape-html": "^1.0.3" + }, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@contentful/rich-text-types": { + "version": "16.0.2", + "resolved": "https://registry.npmjs.org/@contentful/rich-text-types/-/rich-text-types-16.0.2.tgz", + "integrity": "sha512-ovbmCKQjlyGek4NuABoqDesC3FBV3e5jPMMdtT2mpOy9ia31MKO0NSFMRGZu7Q+veZzmDMja8S1i/XeFCUT9Pw==", + "engines": { + "node": ">=6.0.0" + } + }, "node_modules/@cypress/react": { "version": "6.2.0", "resolved": "https://registry.npmjs.org/@cypress/react/-/react-6.2.0.tgz", @@ -38563,6 +38583,8 @@ "@codemirror/search": "^6.2.3", "@codemirror/state": "^6.1.4", "@codemirror/view": "^6.5.1", + "@contentful/rich-text-html-renderer": "^16.0.2", + "@contentful/rich-text-types": "^16.0.2", "@lezer/common": "^1.0.1", "@lezer/highlight": "^1.1.2", "@lezer/lr": "^1.2.4", @@ -43116,6 +43138,20 @@ "is-buffer": "^1.1.5" } }, + "@contentful/rich-text-html-renderer": { + "version": "16.0.2", + "resolved": "https://registry.npmjs.org/@contentful/rich-text-html-renderer/-/rich-text-html-renderer-16.0.2.tgz", + "integrity": "sha512-0flmxVixlNk5PMiHXAlABUJ2uURsWxOjbC6ZHhqpEVHU03kHMoIKfDdo6CRZc0S0rMWMO3c14Ei91E97T06T8w==", + "requires": { + "@contentful/rich-text-types": "^16.0.2", + "escape-html": "^1.0.3" + } + }, + "@contentful/rich-text-types": { + "version": "16.0.2", + "resolved": "https://registry.npmjs.org/@contentful/rich-text-types/-/rich-text-types-16.0.2.tgz", + "integrity": "sha512-ovbmCKQjlyGek4NuABoqDesC3FBV3e5jPMMdtT2mpOy9ia31MKO0NSFMRGZu7Q+veZzmDMja8S1i/XeFCUT9Pw==" + }, "@cypress/react": { "version": "6.2.0", "resolved": "https://registry.npmjs.org/@cypress/react/-/react-6.2.0.tgz", @@ -48654,6 +48690,8 @@ "@codemirror/search": "^6.2.3", "@codemirror/state": "^6.1.4", "@codemirror/view": "^6.5.1", + "@contentful/rich-text-html-renderer": "^16.0.2", + "@contentful/rich-text-types": "^16.0.2", "@cypress/react": "^6.2.0", "@juggle/resize-observer": "^3.3.1", "@lezer/common": "^1.0.1", diff --git a/services/web/frontend/stylesheets/components/labels.less b/services/web/frontend/stylesheets/components/labels.less index 9a21d8f6b3..058ee4ea7b 100755 --- a/services/web/frontend/stylesheets/components/labels.less +++ b/services/web/frontend/stylesheets/components/labels.less @@ -36,6 +36,10 @@ } } +.label when(@is-new-css = true) { + padding: 0.3em 0.6em; +} + // Colors // Contextual variations (linked labels get darker on :hover) @@ -67,3 +71,18 @@ color: @ol-type-color; font-size: 100%; } + +.label-premium { + background-color: @neutral-20; + background-image: url('../../../public/img/material-icons/star-gradient.svg'); + background-repeat: no-repeat; + background-position: 2px 2px; + border-radius: 4px; + color: @neutral-90; + display: inline-block; + font-size: 12px; + font-family: @font-family-sans-serif; + margin-left: 10px; + padding: 4px 4px 4px 20px; + vertical-align: middle; +} diff --git a/services/web/frontend/stylesheets/core/variables.less b/services/web/frontend/stylesheets/core/variables.less index 5ad98749b8..eb17713e3d 100644 --- a/services/web/frontend/stylesheets/core/variables.less +++ b/services/web/frontend/stylesheets/core/variables.less @@ -9,6 +9,8 @@ @gray-lighter: #cfcfcf; @gray-lightest: #f0f0f0; @white: #ffffff; +@neutral-20: #e7e9ee; +@neutral-90: #1b222c; // Styleguide colors @ol-blue-gray-0: #f4f5f8; diff --git a/services/web/package.json b/services/web/package.json index 3dffe21bc2..c98a47c142 100644 --- a/services/web/package.json +++ b/services/web/package.json @@ -79,6 +79,8 @@ "@codemirror/search": "^6.2.3", "@codemirror/state": "^6.1.4", "@codemirror/view": "^6.5.1", + "@contentful/rich-text-html-renderer": "^16.0.2", + "@contentful/rich-text-types": "^16.0.2", "@lezer/common": "^1.0.1", "@lezer/highlight": "^1.1.2", "@lezer/lr": "^1.2.4", diff --git a/services/web/public/img/material-icons/star-gradient.svg b/services/web/public/img/material-icons/star-gradient.svg new file mode 100644 index 0000000000..0f979e31c1 --- /dev/null +++ b/services/web/public/img/material-icons/star-gradient.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + +