Remove Is Reskinned Flag: Remove from user and notice sections (#99112)

ddc22 · web-flow · commit aa2c86ec8e66 · 2025-02-04T09:57:30.000-05:00
* Remove Is Reskinned Flag: Remove is reskinned flag from user and notice sections

* Center notice

* Fix snapshots
diff --git a/client/blocks/signup-form/index.jsx b/client/blocks/signup-form/index.jsx
@@ -32,7 +32,6 @@ import FormPasswordInput from 'calypso/components/forms/form-password-input';
 import FormSettingExplanation from 'calypso/components/forms/form-setting-explanation';
 import FormTextInput from 'calypso/components/forms/form-text-input';
 import LoggedOutForm from 'calypso/components/logged-out-form';
-import LoggedOutFormBackLink from 'calypso/components/logged-out-form/back-link';
 import LoggedOutFormFooter from 'calypso/components/logged-out-form/footer';
 import LoggedOutFormLinkItem from 'calypso/components/logged-out-form/link-item';
 import LoggedOutFormLinks from 'calypso/components/logged-out-form/links';
@@ -724,7 +723,7 @@ class SignupForm extends Component {
 				{ this.displayUsernameInput() && (
 					<>
 						<FormLabel htmlFor="username">
-							{ this.props.isReskinned || ( this.props.isWoo && ! this.props.isWooJPC )
+							{ this.props.isWoo && ! this.props.isWooJPC
 								? this.props.translate( 'Username' )
 								: this.props.translate( 'Choose a username' ) }
 						</FormLabel>
@@ -1063,7 +1062,7 @@ class SignupForm extends Component {
 	}
 
 	footerLink() {
-		const { flowName, translate, isWoo, isBlazePro } = this.props;
+		const { isWoo, isBlazePro } = this.props;
 
 		if ( this.props.isP2Flow ) {
 			return (
@@ -1095,25 +1094,7 @@ class SignupForm extends Component {
 			);
 		}
 
-		return (
-			<>
-				{ ! this.props.isReskinned && (
-					<LoggedOutFormLinks>
-						<LoggedOutFormLinkItem href={ this.getLoginLink() }>
-							{ flowName === 'onboarding' || flowName === 'onboarding-pm'
-								? translate( 'Log in to create a site for your existing account.' )
-								: translate( 'Already have a WordPress.com account?' ) }
-						</LoggedOutFormLinkItem>
-						{ this.props.oauth2Client && (
-							<LoggedOutFormBackLink
-								oauth2Client={ this.props.oauth2Client }
-								recordClick={ this.recordBackLinkClick }
-							/>
-						) }
-					</LoggedOutFormLinks>
-				) }
-			</>
-		);
+		return null;
 	}
 
 	handleOnChangeAccount = () => {
diff --git a/client/blocks/time-mismatch-warning/test/__snapshots__/index.jsx.snap b/client/blocks/time-mismatch-warning/test/__snapshots__/index.jsx.snap
@@ -4,7 +4,7 @@ exports[`TimeMismatchWarning to render if GMT offsets do not match 1`] = `
 <div>
   <div
     aria-label="Notice"
-    class="notice is-warning is-dismissable"
+    class="notice is-reskinned is-warning is-dismissable"
     role="status"
   >
     <span
diff --git a/client/components/global-notices/test/__snapshots__/index.js.snap b/client/components/global-notices/test/__snapshots__/index.js.snap
@@ -8,7 +8,7 @@ exports[`<GlobalNotices /> should render notices with the expected structure 1`]
   >
     <div
       aria-label="Notice"
-      class="notice is-success is-dismissable"
+      class="notice is-reskinned is-success is-dismissable"
       role="status"
     >
       <span
diff --git a/client/components/notice/README.md b/client/components/notice/README.md
@@ -28,7 +28,6 @@ function MyNotice() {
 | `text`           | `string`   | null    | The message that shows in the notice.                                                 |
 | `showDismiss`    | `bool`     | true    | Whether to show a close action on the right of the notice.                            |
 | `isCompact`      | `bool`     | false   | Whether this is a compact notice (smaller and not full width).                        |
-| `isReskinned`    | `bool`     | false   | Whether to use the newer/updated version used for the plans pages.                    |
 | `duration`       | `integer`  | 0       | How long to show the notice for in milliseconds.                                      |
 | `onDismissClick` | `function` | null    | A function to call when the notice is dismissed.                                      |
 | `children`       | `string`   | null    | You can also pass the content on the notice within children.                          |
diff --git a/client/components/notice/index.jsx b/client/components/notice/index.jsx
@@ -36,7 +36,6 @@ export class Notice extends Component {
 		onDismissClick: noop,
 		status: null,
 		text: null,
-		isReskinned: false,
 	};
 
 	static propTypes = {
@@ -57,7 +56,6 @@ export class Notice extends Component {
 		] ),
 		text: PropTypes.node,
 		translate: PropTypes.func.isRequired,
-		isReskinned: PropTypes.bool,
 	};
 
 	dismissTimeout = null;
@@ -119,13 +117,11 @@ export class Notice extends Component {
 			status,
 			text,
 			translate,
-			isReskinned,
 		} = this.props;
-		const classes = clsx( 'notice', status, className, {
+		const classes = clsx( 'notice is-reskinned', status, className, {
 			'is-compact': isCompact,
 			'is-loading': isLoading,
 			'is-dismissable': showDismiss,
-			'is-reskinned': isReskinned,
 		} );
 
 		let iconNeedsDrop = false;
diff --git a/client/components/notice/style.scss b/client/components/notice/style.scss
@@ -21,6 +21,7 @@
 	background: var(--color-neutral-80);
 	color: var(--color-text-inverted);
 	line-height: 1.5;
+	align-items: center;
 
 	@include breakpoint-deprecated( ">660px" ) {
 		margin-bottom: 24px;
diff --git a/client/jetpack-connect/test/__snapshots__/jetpack-connect-notices.js.snap b/client/jetpack-connect/test/__snapshots__/jetpack-connect-notices.js.snap
@@ -7,7 +7,7 @@ exports[`JetpackConnectNotices Should render non-terminal notice if callback sup
   >
     <div
       aria-label="Notice"
-      class="notice is-warning"
+      class="notice is-reskinned is-warning"
       role="status"
     >
       <span
@@ -49,7 +49,7 @@ exports[`JetpackConnectNotices Should render notice 1`] = `
   >
     <div
       aria-label="Notice"
-      class="notice is-error"
+      class="notice is-reskinned is-error"
       role="status"
     >
       <span
diff --git a/client/my-sites/plans-features-main/components/plan-notice-credit-update.tsx b/client/my-sites/plans-features-main/components/plan-notice-credit-update.tsx
@@ -42,7 +42,6 @@ const PlanNoticeCreditUpgrade = ( { className, onDismissClick, siteId, visiblePl
 					onDismissClick={ onDismissClick }
 					icon="info-outline"
 					status="is-success"
-					isReskinned
 				>
 					{ translate(
 						'You have {{b}}%(amountInCurrency)s{{/b}} in {{a}}upgrade credits{{/a}} available from your current plan. This credit will be applied to the pricing below at checkout if you upgrade today!',
diff --git a/client/my-sites/plans-features-main/components/plan-notice.tsx b/client/my-sites/plans-features-main/components/plan-notice.tsx
@@ -111,7 +111,6 @@ export default function PlanNotice( props: PlanNoticeProps ) {
 					onDismissClick={ handleDismissNotice }
 					icon="info-outline"
 					status="is-success"
-					isReskinned
 				>
 					{ 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.'
@@ -126,7 +125,6 @@ export default function PlanNotice( props: PlanNoticeProps ) {
 					onDismissClick={ handleDismissNotice }
 					icon="info-outline"
 					status="is-warning"
-					isReskinned
 				>
 					{ translate(
 						'Your plan currently has a legacy feature that provides 200GB of space. ' +
@@ -153,7 +151,6 @@ export default function PlanNotice( props: PlanNoticeProps ) {
 					onDismissClick={ handleDismissNotice }
 					icon="info-outline"
 					status="is-success"
-					isReskinned
 				>
 					{ activeDiscount.plansPageNoticeTextTitle && (
 						<strong>
@@ -178,7 +175,6 @@ export default function PlanNotice( props: PlanNoticeProps ) {
 				<Notice
 					className="plan-features-main__notice"
 					showDismiss={ false }
-					isReskinned
 					icon="info-outline"
 					status="is-error"
 					text={ translate(
@@ -194,7 +190,6 @@ export default function PlanNotice( props: PlanNoticeProps ) {
 				<Notice
 					className="plan-features-main__notice"
 					showDismiss={ false }
-					isReskinned
 					icon="info-outline"
 					status="is-error"
 					text={ translate(
diff --git a/client/my-sites/promote-post-i2/components/campaign-item-details/index.tsx b/client/my-sites/promote-post-i2/components/campaign-item-details/index.tsx
@@ -744,7 +744,6 @@ export default function CampaignItemDetails( props: Props ) {
 			<Main wideLayout className="campaign-item-details">
 				{ status === 'rejected' && (
 					<Notice
-						isReskinned
 						showDismiss={ false }
 						status="is-error"
 						icon="notice-outline"
@@ -777,7 +776,6 @@ export default function CampaignItemDetails( props: Props ) {
 				{ status === 'suspended' && payment_links && payment_links.length > 0 && (
 					<>
 						<Notice
-							isReskinned
 							showDismiss={ false }
 							status="is-error"
 							icon="notice-outline"
diff --git a/client/my-sites/promote-post-i2/main.tsx b/client/my-sites/promote-post-i2/main.tsx
@@ -324,7 +324,6 @@ export default function PromotedPosts( { tab }: Props ) {
 
 			{ ! isLoadingBillingSummary && paymentBlocked && (
 				<Notice
-					isReskinned
 					showDismiss={ false }
 					status="is-error"
 					icon="notice-outline"
@@ -350,7 +349,6 @@ export default function PromotedPosts( { tab }: Props ) {
 			{ shouldDisplayDebtAndPaymentLinks && (
 				<>
 					<Notice
-						isReskinned
 						showDismiss={ false }
 						status="is-error"
 						icon="notice-outline"
diff --git a/client/my-sites/subscribers/components/add-subscribers-modal/add-subscribers-modal.tsx b/client/my-sites/subscribers/components/add-subscribers-modal/add-subscribers-modal.tsx
@@ -203,7 +203,6 @@ const AddSubscribersModal = ( { site }: AddSubscribersModalProps ) => {
 							className="add-subscribers-modal__notice"
 							icon={ <Gridicon icon="info" /> }
 							isCompact
-							isReskinned
 							status="is-info"
 							showDismiss={ false }
 						>
@@ -219,7 +218,6 @@ const AddSubscribersModal = ( { site }: AddSubscribersModalProps ) => {
 							className="add-subscribers-modal__notice"
 							icon={ <Gridicon icon="notice" /> }
 							isCompact
-							isReskinned
 							status="is-warning"
 							showDismiss={ false }
 						>
@@ -265,7 +263,6 @@ const AddSubscribersModal = ( { site }: AddSubscribersModalProps ) => {
 							className="add-subscribers-modal__notice"
 							icon={ <Gridicon icon="info" /> }
 							isCompact
-							isReskinned
 							status="is-info"
 							showDismiss={ false }
 						>
@@ -281,7 +278,6 @@ const AddSubscribersModal = ( { site }: AddSubscribersModalProps ) => {
 							className="add-subscribers-modal__notice"
 							icon={ <Gridicon icon="notice" /> }
 							isCompact
-							isReskinned
 							status="is-warning"
 							showDismiss={ false }
 						>
diff --git a/client/signup/signup-header/index.tsx b/client/signup/signup-header/index.tsx
@@ -1,6 +1,5 @@
 import { ProgressBar, WooCommerceWooLogo } from '@automattic/components';
 import { useFlowProgress } from '@automattic/onboarding';
-import clsx from 'clsx';
 import { useTranslate } from 'i18n-calypso';
 import WordPressLogo from 'calypso/components/wordpress-logo';
 import './style.scss';
@@ -13,15 +12,13 @@ interface ProgressBarData {
 interface Props {
 	progressBar?: ProgressBarData;
 	shouldShowLoadingScreen?: boolean;
-	isReskinned?: boolean;
 	rightComponent?: React.ReactNode;
 	pageTitle?: string;
 	showWooLogo?: boolean;
 }
 
 const SignupHeader = ( {
 	shouldShowLoadingScreen,
-	isReskinned,
 	rightComponent,
 	progressBar = {},
 	pageTitle,
@@ -40,9 +37,7 @@ const SignupHeader = ( {
 		variationName ? { flowName: variationName, stepName: progressBar.stepName } : progressBar
 	);
 
-	const logoClasses = clsx( 'wordpress-logo', {
-		'is-large': shouldShowLoadingScreen && ! isReskinned,
-	} );
+	const logoClasses = 'wordpress-logo';
 
 	return (
 		<>
diff --git a/client/signup/steps/design-picker/index.jsx b/client/signup/steps/design-picker/index.jsx
@@ -30,7 +30,6 @@ export default function DesignPickerStep( props ) {
 	const {
 		flowName,
 		stepName,
-		isReskinned,
 		showDesignPickerCategories,
 		showLetUsChoose,
 		hideFullScreenPreview,
@@ -179,7 +178,7 @@ export default function DesignPickerStep( props ) {
 			<>
 				<DesignPicker
 					designs={ designs }
-					theme={ isReskinned ? 'light' : 'dark' }
+					theme="light"
 					locale={ translate.localeSlug }
 					onSelect={ pickDesign }
 					onUpgrade={ upgradePlanFromDesignPicker }
@@ -291,8 +290,8 @@ export default function DesignPickerStep( props ) {
 			} ) }
 			{ ...headerProps }
 			stepContent={ renderDesignPicker() }
-			align={ isReskinned ? 'left' : 'center' }
-			skipButtonAlign={ isReskinned ? 'top' : 'bottom' }
+			align="left"
+			skipButtonAlign="top"
 			skipLabelText={ skipLabelText() }
 		/>
 	);
diff --git a/client/signup/steps/domains/test/index.js b/client/signup/steps/domains/test/index.js
@@ -29,7 +29,6 @@ describe( 'sortProductsByPriceDescending', () => {
 			stepName: 'stepName',
 			stepSectionName: 'sectionName',
 			selectedSite: {},
-			isReskinned: false,
 			signupDependencies: {
 				suggestedDomain: 'example.com',
 			},
diff --git a/client/signup/steps/intent/index.tsx b/client/signup/steps/intent/index.tsx
@@ -18,7 +18,6 @@ import type { Dependencies } from 'calypso/signup/types';
 
 interface Props {
 	goToNextStep: () => void;
-	isReskinned: boolean;
 	signupDependencies: any;
 	stepName: string;
 	queryObject: {
diff --git a/client/signup/steps/starting-point/index.tsx b/client/signup/steps/starting-point/index.tsx
@@ -12,7 +12,6 @@ import type { Dependencies } from 'calypso/signup/types';
 
 interface Props {
 	goToNextStep: () => void;
-	isReskinned: boolean;
 	signupDependencies: any;
 	stepName: string;
 	initialContext: any;
diff --git a/client/signup/steps/store-features/index.tsx b/client/signup/steps/store-features/index.tsx
@@ -18,7 +18,6 @@ import './index.scss';
 
 interface Props {
 	goToNextStep: () => void;
-	isReskinned: boolean;
 	signupDependencies: any;
 	stepName: string;
 	initialContext: any;
diff --git a/client/signup/steps/user/index.jsx b/client/signup/steps/user/index.jsx
@@ -168,7 +168,7 @@ export class UserStep extends Component {
 	}
 
 	getLoginUrl() {
-		const { oauth2Client, wccomFrom, isReskinned, sectionName, from, locale, step } = this.props;
+		const { oauth2Client, wccomFrom, sectionName, from, locale, step } = this.props;
 		const emailAddress = step?.form?.email?.value ?? step?.form?.email;
 
 		return login( {
@@ -178,7 +178,6 @@ export class UserStep extends Component {
 			locale,
 			oauth2ClientId: oauth2Client?.id,
 			wccomFrom,
-			isWhiteLogin: isReskinned,
 			signupUrl: window.location.pathname + window.location.search,
 			emailAddress,
 		} );
@@ -192,7 +191,6 @@ export class UserStep extends Component {
 			translate,
 			userLoggedIn,
 			wccomFrom,
-			isReskinned,
 			isOnboardingAffiliateFlow,
 			isWCCOM,
 		} = this.props;
@@ -280,7 +278,7 @@ export class UserStep extends Component {
 			subHeaderText = translate( 'Welcome to the WordPress.com community.' );
 		}
 
-		if ( isReskinned && 0 === positionInFlow ) {
+		if ( 0 === positionInFlow ) {
 			if ( this.props.isSocialFirst ) {
 				subHeaderText = '';
 			} else {
@@ -569,7 +567,7 @@ export class UserStep extends Component {
 	}
 
 	renderSignupForm() {
-		const { oauth2Client, isReskinned, isWCCOM, isWoo } = this.props;
+		const { oauth2Client, isWCCOM, isWoo } = this.props;
 		const isPasswordless =
 			isMobile() ||
 			this.props.isPasswordless ||
@@ -615,8 +613,7 @@ export class UserStep extends Component {
 					socialService={ socialService }
 					socialServiceResponse={ socialServiceResponse }
 					recaptchaClientId={ this.state.recaptchaClientId }
-					horizontal={ isReskinned }
-					isReskinned={ isReskinned }
+					horizontal
 					shouldDisplayUserExistsError={ ! isWCCOM && ! isBlazeProOAuth2Client( oauth2Client ) }
 					isSocialFirst={ this.props.isSocialFirst }
 					labelText={ isWoo ? this.props.translate( 'Your email' ) : null }
diff --git a/packages/plans-grid-next/src/types.ts b/packages/plans-grid-next/src/types.ts

Original file line number	Diff line number	Diff line change
@@ -4,7 +4,7 @@ exports[`TimeMismatchWarning to render if GMT offsets do not match 1`] = `
`4`	`4`	`<div>`
`5`	`5`	`<div`
`6`	`6`	`aria-label="Notice"`
`7`		`- class="notice is-warning is-dismissable"`
	`7`	`+ class="notice is-reskinned is-warning is-dismissable"`
`8`	`8`	`role="status"`
`9`	`9`	`>`
`10`	`10`	`<span`
Original file line number	Diff line number	Diff line change
@@ -8,7 +8,7 @@ exports[`<GlobalNotices /> should render notices with the expected structure 1`]
`8`	`8`	`>`
`9`	`9`	`<div`
`10`	`10`	`aria-label="Notice"`
`11`		`- class="notice is-success is-dismissable"`
	`11`	`+ class="notice is-reskinned is-success is-dismissable"`
`12`	`12`	`role="status"`
`13`	`13`	`>`
`14`	`14`	`<span`
Original file line number	Diff line number	Diff line change
@@ -7,7 +7,7 @@ exports[`JetpackConnectNotices Should render non-terminal notice if callback sup
`7`	`7`	`>`
`8`	`8`	`<div`
`9`	`9`	`aria-label="Notice"`
`10`		`- class="notice is-warning"`
	`10`	`+ class="notice is-reskinned is-warning"`
`11`	`11`	`role="status"`
`12`	`12`	`>`
`13`	`13`	`<span`
@@ -49,7 +49,7 @@ exports[`JetpackConnectNotices Should render notice 1`] = `
`49`	`49`	`>`
`50`	`50`	`<div`
`51`	`51`	`aria-label="Notice"`
`52`		`- class="notice is-error"`
	`52`	`+ class="notice is-reskinned is-error"`
`53`	`53`	`role="status"`
`54`	`54`	`>`
`55`	`55`	`<span`
Original file line number	Diff line number	Diff line change
`@@ -42,7 +42,6 @@ const PlanNoticeCreditUpgrade = ( { className, onDismissClick, siteId, visiblePl`
`42`	`42`	`onDismissClick={ onDismissClick }`
`43`	`43`	`icon="info-outline"`
`44`	`44`	`status="is-success"`
`45`		`- isReskinned`
`46`	`45`	`>`
`47`	`46`	`{ translate(`
`48`	`47`	`'You have {{b}}%(amountInCurrency)s{{/b}} in {{a}}upgrade credits{{/a}} available from your current plan. This credit will be applied to the pricing below at checkout if you upgrade today!',`