My Jetpack: update social icons in the connection screen. (#38334)

* Connection screen: update the social icons area * Add changelog --------- Co-authored-by: Jeremy Herve <[email protected]>
Automattic · Jul 17, 2024 · 03a9135 · 03a9135
1 parent e534b7c
commit 03a9135
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 4 deletions.
diff --git a/projects/packages/my-jetpack/_inc/components/connection-screen/footer.tsx b/projects/packages/my-jetpack/_inc/components/connection-screen/footer.tsx
@@ -1,5 +1,6 @@
 import { __ } from '@wordpress/i18n';
 import appleLogo from './apple.svg';
+import githubLogo from './github.svg';
 import googleLogo from './google.svg';
 import styles from './styles.module.scss';
 import wordpressLogo from './wordpress.svg';
@@ -9,7 +10,10 @@ const ConnectionScreenFooter: React.FC = () => (
 		{ /* not using p here since connect screen apply styles for all p down the tree */ }
 		{ /* https://github.com/Automattic/jetpack/blob/trunk/projects/js-packages/connection/components/connect-screen/layout/style.scss#L49-L54 */ }
 		<div className={ styles[ 'account-description' ] }>
-			{ __( 'You can use your existing account on any of these services:', 'jetpack-my-jetpack' ) }
+			{ __(
+				'On the next screen, you can connect with an existing account from any of these services or create a new one.',
+				'jetpack-my-jetpack'
+			) }
 		</div>
 		{ /*
 				Since the list style type is set to none, `role=list` is required for VoiceOver (on Safari) to announce the list.
@@ -25,6 +29,9 @@ const ConnectionScreenFooter: React.FC = () => (
 			<li>
 				<img src={ appleLogo } className={ styles.apple } alt="Apple" />
 			</li>
+			<li>
+				<img src={ githubLogo } className={ styles.github } alt="GitHub" />
+			</li>
 		</ul>
 	</>
 );

diff --git a/projects/packages/my-jetpack/_inc/components/connection-screen/github.svg b/projects/packages/my-jetpack/_inc/components/connection-screen/github.svg
diff --git a/projects/packages/my-jetpack/_inc/components/connection-screen/styles.module.scss b/projects/packages/my-jetpack/_inc/components/connection-screen/styles.module.scss
@@ -12,13 +12,14 @@
 .account-description {
 	color: var(--jp-gray-50);
 	font-size: 13px;
-	margin-bottom: 16px;
+	margin-bottom: 8px;
 	width: 60%;
 }
 
 .account-images {
 	display: flex;
 	align-items: center;
+	gap: 8px;
 
 	li {
 		background: none !important;
@@ -28,7 +29,6 @@
 }
 
 .wordpress {
-	margin-right: 8px;
 	max-width: 110px;
 }
 
@@ -37,10 +37,13 @@
 }
 
 .apple {
-	margin-left: 8px;
 	height: 18px;
 }
 
+.github {
+	width: 16px;
+}
+
 .all-features {
 	display: inline-flex;
 	align-items: center;

diff --git a/projects/packages/my-jetpack/changelog/update-my-jetpack-connection-social-icons b/projects/packages/my-jetpack/changelog/update-my-jetpack-connection-social-icons
@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+My Jetpack: update social icons in the connection screen.