AI Assistant: Breve UI and text enhancements (#38553)

* update feature color * add feature description text * change features text color * change the explainer text * changelog
Automattic · Jul 26, 2024 · 5385da3 · 5385da3
1 parent a810cb5
commit 5385da3
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 4 deletions.
diff --git a/projects/plugins/jetpack/changelog/update-jetpack-ai-breve-text b/projects/plugins/jetpack/changelog/update-jetpack-ai-breve-text
@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+AI Assistant: Breve UI and text enhancements
diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/breve.scss b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/breve.scss
@@ -4,8 +4,6 @@
 	margin-bottom: 24px;
 
 	.components-checkbox-control {
-		color: #757575;
-
 		&__input {
 			@include features-colors( ( 'border-color' ) );
 			&:checked {

diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/controls.js b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/controls.js
@@ -84,6 +84,7 @@ const Controls = ( { blocks, disabledFeatures } ) => {
 
 	return (
 		<div className="jetpack-ai-proofread">
+			<p> { __( 'Improve your writing with AI.', 'jetpack' ) }</p>
 			<PanelRow>
 				<BaseControl>
 					<div className="grade-level-container">

diff --git a/...ck/extensions/plugins/ai-assistant-plugin/components/breve/features/_features.colors.scss b/...ck/extensions/plugins/ai-assistant-plugin/components/breve/features/_features.colors.scss
@@ -3,7 +3,7 @@
 
 $features-colors: (
 	'complex-words': rgb( 240, 184, 73 ),
-	'unconfident-words': rgb( 0, 175, 82 ),
+	'unconfident-words': rgb( 9, 181, 133 ),
 	'long-sentences': rgb( 122, 0, 223 ),
 );
 

diff --git a/...ugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/highlight/index.tsx b/...ugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/highlight/index.tsx
@@ -215,7 +215,7 @@ export default function Highlight() {
 									{ suggestions?.suggestion }
 								</Button>
 								<div className="helper">
-									{ __( 'Click on a suggestion to insert it.', 'jetpack' ) }
+									{ __( 'Click on the suggestion to insert it.', 'jetpack' ) }
 								</div>
 							</div>
 						) : (