Add/social modal description (#38927)

* Add description to the social modal

* changelog

* Update text

* Fixup versions

projects/js-packages/publicize-components/changelog/add-social-modal-description

@@ -0,0 +1,4 @@
+Significance: minor
+Type: added
+
+Added a description for the social modal

projects/js-packages/publicize-components/package.json

@@ -1,7 +1,7 @@
 {
 	"private": true,
 	"name": "@automattic/jetpack-publicize-components",
-	"version": "0.60.1-alpha",
+	"version": "0.61.0-alpha",
 	"description": "A library of JS components required by the Publicize editor plugin",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/publicize-components/#readme",
 	"bugs": {

projects/js-packages/publicize-components/src/components/social-post-modal/settings-section.tsx

@@ -14,6 +14,9 @@ export function SettingsSection() {
 				<h2>{ __( 'Social Preview', 'jetpack' ) }</h2>
 			</div>
 			<div className={ styles[ 'settings-content' ] }>
+				<p className={ styles[ 'modal-description' ] }>
+					{ __( 'Edit and preview your social post before sharing.', 'jetpack' ) }
+				</p>
 				<SharePostForm analyticsData={ { location: 'preview-modal' } } />
 			</div>
 		</div>

projects/js-packages/publicize-components/src/components/social-post-modal/styles.module.scss

@@ -62,7 +62,7 @@
 }
 
 .settings-content {
-    padding: 2rem;
+    padding: 1rem 2rem;
 
     @include break-medium {
         border-inline-end: 1px solid var(--studio-gray-5);
@@ -97,3 +97,8 @@
 .disabled-tab {
     opacity: 0.5;
 }
+
+.modal-description {
+	color: var(--jp-gray-40);
+	margin-top: 0;
+}