Title Optimization: Update sizes and spacings (#37333)

* Title Optimization: Update size and spacings * changelog
Automattic · May 10, 2024 · 72c6c4a · 72c6c4a
1 parent 927dc57
commit 72c6c4a
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 4 deletions.
diff --git a/projects/plugins/jetpack/changelog/update-title-optimization-sizes b/projects/plugins/jetpack/changelog/update-title-optimization-sizes
@@ -0,0 +1,4 @@
+Significance: minor
+Type: other
+
+Update sizes and spacings on Title Optimization
diff --git a/...plugins/ai-assistant-plugin/components/title-optimization/title-optimization-options.scss b/...plugins/ai-assistant-plugin/components/title-optimization/title-optimization-options.scss
@@ -19,13 +19,21 @@
 		}
 	}
 
-
 	&-content {
 		display: flex;
 		flex-direction: column;
 	}
 
 	&-label {
+		font-size: 15px;
 		font-weight: 600;
+		line-height: 22px;
+	}
+
+	&-description {
+		font-size: 13px;
+		font-weight: 400;
+		line-height: 20px;
+		padding-top: 4px;
 	}
 }
diff --git a/.../plugins/ai-assistant-plugin/components/title-optimization/title-optimization-options.tsx b/.../plugins/ai-assistant-plugin/components/title-optimization/title-optimization-options.tsx
@@ -43,10 +43,10 @@ export default function TitleOptimizationOptions( {
 							htmlFor={ `${ titleOptimizationId }-${ index }` }
 						>
 							{ option.label }
+							<div className="jetpack-ai-title-optimization__option-description">
+								{ option.description }
+							</div>
 						</label>
-						<span className="jetpack-ai-title-optimization__option-description">
-							{ option.description }
-						</span>
 					</div>
 				</div>
 			) ) }