From 8c8126b30456a5c39b5689019e13114afd83dfea Mon Sep 17 00:00:00 2001
From: ibrahim-mamdouh-ft <ibrahim.mamdouh@ft.com>
Date: Tue, 27 Aug 2024 15:25:00 +0300
Subject: [PATCH] feat: enhance UI and adapt to different group colors

---
 components/x-gift-article/src/GiftArticle.jsx      |  3 ++-
 .../x-gift-article/src/IncludeHighlights.jsx       | 14 ++++++++++++--
 .../x-gift-article/src/ShareArticleDialog.scss     | 13 ++++++++-----
 3 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/components/x-gift-article/src/GiftArticle.jsx b/components/x-gift-article/src/GiftArticle.jsx
index cba9d9624..d4925b715 100644
--- 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
index 6c5ed7e39..ab7f0171d 100644
--- 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
index 8b3c3aca7..83ac29569 100644
--- 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 {