Merge pull request #770 from Financial-Times/ELES-1147-adjust-top-pad…

…ding-for-share-modal-fix-off-looking-non-subscriber Adjust top padding for share modal & fix off looking Non-subscriber
Financial-Times · Mar 18, 2024 · 2e15aec · 2e15aec
2 parents 532dc81 + 2f9ec67
commit 2e15aec
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 9 deletions.
diff --git a/components/x-gift-article/src/CreateLinkButton.jsx b/components/x-gift-article/src/CreateLinkButton.jsx
@@ -4,7 +4,7 @@ import oShare from '@financial-times/o-share/main'
 import { canShareWithNonSubscribers, isNonSubscriberOption } from './lib/highlightsHelpers'
 
 export const CreateLinkButton = (props) => {
-	const { shareType, actions, enterpriseEnabled, isFreeArticle } = props
+	const { shareType, actions, enterpriseEnabled, isFreeArticle, isRegisteredUser } = props
 
 	const _canShareWithNonSubscribers = canShareWithNonSubscribers(props)
 	const _isNonSubscriberOption = isNonSubscriberOption(props)
@@ -26,7 +26,7 @@ export const CreateLinkButton = (props) => {
 	}
 	return (
 		<button
-			disabled={!_canShareWithNonSubscribers && _isNonSubscriberOption && !isFreeArticle}
+			disabled={!_canShareWithNonSubscribers && _isNonSubscriberOption && !isFreeArticle && !isRegisteredUser}
 			id="create-link-button"
 			className={`o-buttons o-buttons--big o-buttons--primary share-article-dialog__create-link-button ${
 				enterpriseEnabled ? 'o-buttons--professional' : ''

diff --git a/components/x-gift-article/src/RegisteredUserAlert.jsx b/components/x-gift-article/src/RegisteredUserAlert.jsx
@@ -4,7 +4,7 @@ export const RegisteredUserAlert = ({ children }) => {
 	return (
 		<div
 			id="registered-user-alert"
-			className="o-message o-message--alert o-message--neutral"
+			className="o-message o-message--alert o-message--received-highlights share-article-dialog__alert"
 			data-o-component="o-message"
 		>
 			<div className="o-message__container">

diff --git a/components/x-gift-article/src/ShareArticleDialog.scss b/components/x-gift-article/src/ShareArticleDialog.scss
@@ -142,11 +142,12 @@
 
 	.share-article-dialog__main {
 		.o-forms-input,
-		.o-forms-field {
+		.o-forms-field,
+		.no-margin {
 			margin: 0;
 		}
 
-		padding: oSpacingByName('s6') oSpacingByName('s4') oSpacingByName('s4') oSpacingByName('s4');
+		padding: oSpacingByName('s4');
 
 		.share-article-dialog__header {
 			margin: 0;

diff --git a/components/x-gift-article/src/SharedLinkTypeSelector.jsx b/components/x-gift-article/src/SharedLinkTypeSelector.jsx
@@ -24,7 +24,7 @@ export const SharedLinkTypeSelector = (props) => {
 			role="group"
 			aria-labelledby="share-with-non-subscribers-checkbox"
 		>
-			{!_canShareWithNonSubscribers && _isNonSubscriberOption && (
+			{!_canShareWithNonSubscribers && _isNonSubscriberOption && !isRegisteredUser && (
 				<NoCreditAlert>
 					You’ve run out of sharing credits, which you need to share articles with non-subscribers. Use FT
 					subscribers only option or{' '}

diff --git a/components/x-gift-article/src/SharingOptionsToggler.jsx b/components/x-gift-article/src/SharingOptionsToggler.jsx
@@ -44,7 +44,7 @@ export const SharingOptionsToggler = (props) => {
 			<span className="o-forms-input o-forms-input--saving o-forms-input--radio-box">
 				<span className="o-forms-input--radio-box__container">
 					{advancedSharingEnabled ? (
-						<label htmlFor="share-with-anyone-people-radio">
+						<label htmlFor="share-with-anyone-people-radio" className="no-margin">
 							<input
 								id="share-with-anyone-people-radio"
 								name="share-option"
@@ -56,7 +56,7 @@ export const SharingOptionsToggler = (props) => {
 							<span className="o-forms-input__label">Anyone</span>
 						</label>
 					) : (
-						<label htmlFor="share-with-a-non-subscriber-radio">
+						<label htmlFor="share-with-a-non-subscriber-radio" className="no-margin">
 							<input
 								id="share-with-a-non-subscriber-radio"
 								name="share-option"
@@ -68,7 +68,7 @@ export const SharingOptionsToggler = (props) => {
 							<span className="o-forms-input__label">Non-subscriber</span>
 						</label>
 					)}
-					<label htmlFor="share-with-one-person-radio">
+					<label htmlFor="share-with-one-person-radio" className="no-margin">
 						<input
 							id="share-with-subscribers-radio"
 							name="share-option"