Add banner to profile page explaining syncing (#91962)

* Add banner to profile page explaining syncing * Update copy * Add banner to /me/account
Automattic · Jun 25, 2024 · 0fb8a0d · 0fb8a0d
1 parent 30e511b
commit 0fb8a0d
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 0 deletions.
diff --git a/client/me/account/main.jsx b/client/me/account/main.jsx
@@ -10,6 +10,7 @@ import { connect } from 'react-redux';
 import CSSTransition from 'react-transition-group/CSSTransition';
 import TransitionGroup from 'react-transition-group/TransitionGroup';
 import ColorSchemePicker from 'calypso/blocks/color-scheme-picker';
+import { Banner } from 'calypso/components/banner';
 import QueryUserSettings from 'calypso/components/data/query-user-settings';
 import FormButton from 'calypso/components/forms/form-button';
 import FormButtonsBar from 'calypso/components/forms/form-buttons-bar';
@@ -883,6 +884,19 @@ class Account extends Component {
 						}
 					) }
 				/>
+				<Banner
+					disableHref
+					title={ this.props.translate(
+						'These settings are applied to sites using the Default admin interface style. {{learnMoreLink}}Learn more{{/learnMoreLink}}.',
+						{
+							components: {
+								learnMoreLink: (
+									<InlineSupportLink supportContext="admin-interface-style" showIcon={ false } />
+								),
+							},
+						}
+					) }
+				/>
 
 				<SectionHeader label={ translate( 'Account Information' ) } />
 				<Card className="account__settings">

diff --git a/client/me/profile/index.jsx b/client/me/profile/index.jsx
@@ -6,6 +6,7 @@ import { flowRight as compose } from 'lodash';
 import { Component } from 'react';
 import { connect } from 'react-redux';
 import EditGravatar from 'calypso/blocks/edit-gravatar';
+import { Banner } from 'calypso/components/banner';
 import FormButton from 'calypso/components/forms/form-button';
 import FormFieldset from 'calypso/components/forms/form-fieldset';
 import FormTextInput from 'calypso/components/forms/form-text-input';
@@ -65,6 +66,19 @@ class Profile extends Component {
 						}
 					) }
 				/>
+				<Banner
+					disableHref
+					title={ this.props.translate(
+						'These settings are applied to sites using the Default admin interface style. {{learnMoreLink}}Learn more{{/learnMoreLink}}.',
+						{
+							components: {
+								learnMoreLink: (
+									<InlineSupportLink supportContext="admin-interface-style" showIcon={ false } />
+								),
+							},
+						}
+					) }
+				/>
 
 				<SectionHeader label={ this.props.translate( 'Profile' ) } />
 				<Card className="profile__settings">