Styling, i18n

Automattic · Jan 21, 2025 · 7e40383 · 7e40383
1 parent 94ca703
commit 7e40383
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 6 deletions.
diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-fiverr/wpcom-fiverr.php b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-fiverr/wpcom-fiverr.php
@@ -11,6 +11,12 @@
  * Enqueue assets needed by the fiverr cta.
  */
 function wpcom_fiverr_enqueue_scripts() {
+	wp_enqueue_style(
+		'wpcom-fiverr',
+		plugins_url( 'build/wpcom-fiverr/wpcom-fiverr.css', Jetpack_Mu_Wpcom::BASE_FILE ),
+		array(),
+		Jetpack_Mu_Wpcom::PACKAGE_VERSION
+	);
 	wp_enqueue_script(
 		'wpcom-fiverr',
 		plugins_url( 'build/wpcom-fiverr/wpcom-fiverr.js', Jetpack_Mu_Wpcom::BASE_FILE ),
@@ -39,18 +45,18 @@ function wpcom_fiverr_cta() {
 	?>
 	<tr class="wpcom-fiverr-cta">
 		<th>
-			<?php echo esc_html__( 'Site Logo', 'jetpack-mu-wpcom' ); ?>
+			<?php esc_html_e( 'Site Logo', 'jetpack-mu-wpcom' ); ?>
 		</th>
 		<td>
-			<p><b>Make an incredible logo in minutes</b></p>
-			<p>Pre-designed by top talent. Just add your touch.</p>
+			<p><b><?php esc_html_e( 'Make an incredible logo in minutes', 'jetpack-mu-wpcom' ); ?></b></p>
+			<p><?php esc_html_e( 'Pre-designed by top talent. Just add your touch.', 'jetpack-mu-wpcom' ); ?></p>
 			<p>
 				<button class="wpcom-fiverr-cta-button button">
-					<svg width="20" height="20" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg" style="vertical-align: middle;">
+					<svg width="20" height="20" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
 						<circle cx="250" cy="250" r="177" fill="white"/>
 						<path d="M500 250C500 111.93 388.07 0 250 0C111.93 0 0 111.93 0 250C0 388.07 111.93 500 250 500C388.07 500 500 388.07 500 250ZM360.42 382.5H294.77V237.2H231.94V382.5H165.9V237.2H128.45V183.45H165.9V167.13C165.9 124.54 198.12 95.48 246.05 95.48H294.78V149.22H256.93C241.62 149.22 231.95 157.58 231.95 171.12V183.45H360.43V382.5H360.42Z" fill="#1DBF73"/>
 					</svg>
-					Try Fiverr Logo Maker
+					<?php esc_html_e( 'Try Fiverr Logo Maker', 'jetpack-mu-wpcom' ); ?>
 				</button>
 			</p>
 		</td>

diff --git a/projects/packages/jetpack-mu-wpcom/src/features/wpcom-fiverr/wpcom-fiverr.scss b/projects/packages/jetpack-mu-wpcom/src/features/wpcom-fiverr/wpcom-fiverr.scss
@@ -0,0 +1,7 @@
+.wpcom-fiverr-cta-button {
+	margin-top: 1em;
+
+	svg {
+		vertical-align: middle;
+	}
+}
diff --git a/projects/packages/jetpack-mu-wpcom/webpack.config.js b/projects/packages/jetpack-mu-wpcom/webpack.config.js
@@ -55,7 +55,10 @@ module.exports = [
 			'starter-page-templates': './src/features/starter-page-templates/index.tsx',
 			'removed-calypso-screen-notice':
 				'./src/features/wpcom-admin-interface/removed-calypso-screen-notice.tsx',
-			'wpcom-fiverr': './src/features/wpcom-fiverr/wpcom-fiverr.ts',
+			'wpcom-fiverr': [
+				'./src/features/wpcom-fiverr/wpcom-fiverr.ts',
+				'./src/features/wpcom-fiverr/wpcom-fiverr.scss',
+			],
 		},
 		mode: jetpackWebpackConfig.mode,
 		devtool: jetpackWebpackConfig.devtool,