feat: enhance UI and adapt to different group colors

Financial-Times · Aug 27, 2024 · 8c8126b · 8c8126b
1 parent ae1d742
commit 8c8126b
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 8 deletions.
diff --git a/components/x-gift-article/src/GiftArticle.jsx b/components/x-gift-article/src/GiftArticle.jsx
@@ -262,7 +262,8 @@ const withGiftFormActions = withActions(
 			getHighlightPreview() {
 				return (state) => {
 					state.highlight = document.querySelector(`.${state.highlightClassName}`)?.textContent
-					return { highlight: state.highlight }
+					state.highlightClassName = document.querySelector(`.${state.highlightClassName}`)?.classList.value
+					return { highlight: state.highlight, highlightClassName: state.highlightClassName }
 				}
 			}
 		}

diff --git a/components/x-gift-article/src/IncludeHighlights.jsx b/components/x-gift-article/src/IncludeHighlights.jsx
@@ -2,7 +2,7 @@ import { h } from '@financial-times/x-engine'
 import { canShareWithNonSubscribers, isNonSubscriberOption, trimHighlights } from './lib/highlightsHelpers'
 
 export const IncludeHighlights = (props) => {
-	const { actions, highlight, enterpriseEnabled, includeHighlights } = props
+	const { actions, highlight, enterpriseEnabled, includeHighlights, highlightClassName } = props
 	const _canShareWithNonSubscribers = canShareWithNonSubscribers(props)
 	const _isNonSubscriberOption = isNonSubscriberOption(props)
 
@@ -18,7 +18,17 @@ export const IncludeHighlights = (props) => {
 			role="group"
 		>
 			{includeHighlights && (
-				<p className="shared-article-dialog__include-highlights-quote">{trimHighlights(highlight)}</p>
+				<div className="shared-article-dialog__include-highlights-quote-wrapper">
+					<h3 className="share-article-dialog__header">
+						<span className="share-article-dialog__header-share-article-title">
+							Highlighted text when shared:
+						</span>
+					</h3>
+
+					<mark className={`shared-article-dialog__include-highlights-quote ${highlightClassName}`}>
+						{trimHighlights(highlight)}
+					</mark>
+				</div>
 			)}
 			<div className="o-forms-input o-forms-input--checkbox o-forms-field">
 				<label htmlFor="excludeHighlights">

diff --git a/components/x-gift-article/src/ShareArticleDialog.scss b/components/x-gift-article/src/ShareArticleDialog.scss
@@ -199,12 +199,15 @@
 			margin-top: oSpacingByName('s6');
 		}
 
+		.shared-article-dialog__include-highlights-quote-wrapper {
+			margin-bottom: oSpacingByName('s6');
+		}
+
 		.shared-article-dialog__include-highlights-quote {
-			@include oTypographyDisplay($scale: 0, $weight: 'semibold');
-			margin-top: 0;
-			margin-bottom: oSpacingByName('s4');
-			padding: oSpacingByName('s1') oSpacingByName('s2');
-			background-color: rgba(255, 236, 26, 0.5);
+			@include oTypographySans($scale: 0, $include-font-family: 0);
+			font-family: Georgia, serif;
+			padding: oSpacingByName('s1') oSpacingByName('s3');
+			display: block;
 		}
 
 		.share-article-dialog__create-link-button {