diff --git a/client/my-sites/plans-features-main/components/plan-notice.tsx b/client/my-sites/plans-features-main/components/plan-notice.tsx index bd0ebb6c3021..17b66e44424b 100644 --- a/client/my-sites/plans-features-main/components/plan-notice.tsx +++ b/client/my-sites/plans-features-main/components/plan-notice.tsx @@ -114,11 +114,11 @@ export default function PlanNotice( props: PlanNoticeProps ) { return ( { translate( 'This plan was purchased by a different WordPress.com account. To manage this plan, log in to that account or contact the account owner.' diff --git a/client/my-sites/plans-features-main/hooks/use-generate-action-hook.tsx b/client/my-sites/plans-features-main/hooks/use-generate-action-hook.tsx index 3731ae20beb9..18fcd96bc174 100644 --- a/client/my-sites/plans-features-main/hooks/use-generate-action-hook.tsx +++ b/client/my-sites/plans-features-main/hooks/use-generate-action-hook.tsx @@ -410,7 +410,8 @@ function getLoggedInPlansAction( { const createLoggedInPlansAction = ( text: TranslateResult, variant: GridAction[ 'primary' ][ 'variant' ] = 'primary', - ariaLabel?: TranslateResult + ariaLabel?: TranslateResult, + status?: GridAction[ 'primary' ][ 'status' ] ) => ( { primary: { callback: async () => { @@ -428,7 +429,8 @@ function getLoggedInPlansAction( { setIsLoading( false ); return; }, - status: ( isLoading ? 'blocked' : 'enabled' ) as GridAction[ 'primary' ][ 'status' ], + status: + status ?? ( ( isLoading ? 'blocked' : 'enabled' ) as GridAction[ 'primary' ][ 'status' ] ), text, ariaLabel, variant, @@ -465,7 +467,12 @@ function getLoggedInPlansAction( { }, }; } - return createLoggedInPlansAction( translate( 'Downgrade', { context: 'verb' } ), 'secondary' ); + return createLoggedInPlansAction( + translate( 'Downgrade', { context: 'verb' } ), + 'secondary', + undefined, + canUserManageCurrentPlan ? undefined : 'disabled' + ); } /** @@ -565,5 +572,10 @@ function getLoggedInPlansAction( { ); } - return createLoggedInPlansAction( translate( 'Upgrade', { context: 'verb' } ) ); + return createLoggedInPlansAction( + translate( 'Upgrade', { context: 'verb' } ), + 'primary', + undefined, + canUserManageCurrentPlan ? undefined : 'disabled' + ); } diff --git a/client/my-sites/plans-features-main/style.scss b/client/my-sites/plans-features-main/style.scss index 6fd28f55cd7d..2b841c0570ed 100644 --- a/client/my-sites/plans-features-main/style.scss +++ b/client/my-sites/plans-features-main/style.scss @@ -40,7 +40,7 @@ $plan-features-header-banner-height: 20px; } .plans-wrapper { - margin: 0 20px; + margin: 0; padding: 0 0 10px; overflow-x: visible; } diff --git a/packages/plans-grid-next/src/components/plan-button/index.tsx b/packages/plans-grid-next/src/components/plan-button/index.tsx index fbd10cc93401..78a573ca837b 100644 --- a/packages/plans-grid-next/src/components/plan-button/index.tsx +++ b/packages/plans-grid-next/src/components/plan-button/index.tsx @@ -41,7 +41,8 @@ const PlanButton = ( { 'is-current-plan': current, 'is-stuck': isStuck, 'is-large-currency': isLargeCurrency, - } + }, + disabled && 'disabled' ); return ( diff --git a/packages/plans-grid-next/src/components/plan-button/style.scss b/packages/plans-grid-next/src/components/plan-button/style.scss index 2a98c63cd0f5..badc1aafeb4f 100644 --- a/packages/plans-grid-next/src/components/plan-button/style.scss +++ b/packages/plans-grid-next/src/components/plan-button/style.scss @@ -24,7 +24,6 @@ &:hover { background-color: var(--studio-wordpress-blue-60); } - } &.is-personal-plan { @@ -74,10 +73,6 @@ } } - &:hover[disabled] { - background: none; - } - &.is-wooexpress-medium-plan { background-color: var(--color-accent); color: var(--color-text-inverted); @@ -154,11 +149,16 @@ } &:hover { - box-shadow: inset 0 0 0 1px var(--studio-gray-80); background-color: var(--studio-white); + box-shadow: inset 0 0 0 1px var(--studio-gray-80); } } + &:hover[disabled] { + background: none; + box-shadow: inset 0 0 0 1px #e0e0e0; + } + &.disabled, &[disabled] { background-color: var(--studio-white);