feedback: Update font styles for Help Content in Search Page

After: https://screenshot.googleplex.com/zeRqDftoLr8xSkG Spec: https://screenshot.googleplex.com/6dEkEQWt2ysUtSX Bug: b:185624798 Test: browser_tests --gtest_filter=OSFeedbackBrowserTest.*; Change-Id: I93c2ffb0ea9b4d7e7ef311253c585d3afef8f9e4 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3723692 Reviewed-by: Xiangdong Kong <[email protected]> Commit-Queue: Camden Bickel <[email protected]> Cr-Commit-Position: refs/heads/main@{#1018469}
hadissulejmani · Jun 27, 2022 · 0d729fc · 0d729fc
1 parent a2c04c2
commit 0d729fc
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 11 deletions.
diff --git a/ash/webui/os_feedback_ui/resources/help_content.html b/ash/webui/os_feedback_ui/resources/help_content.html
@@ -1,24 +1,28 @@
 <style>
-  a[href] {
-    color: var(--cros-text-color-primary);
-    text-decoration: none;
+  .help-content-label {
+    color: var(--cros-text-color-secondary);
+    font-size: 15px;
+    font-weight: 500;
+    margin: 24px 0 0;
   }
 
   .help-item {
     display: flex;
     margin:  12px 0 0;
   }
 
-  iron-icon {
-    padding-inline-end: 12px;
+  .help-item a {
+    color: var(--cros-text-color-primary);
+    font-size: 13px;
+    text-decoration: none;
   }
 
-  #helpContentLabel {
-    margin: 24px 0 0;
+  iron-icon {
+    padding-inline-end: 12px;
   }
 </style>
 <div id="helpContentContainer">
-  <h2 id="helpContentLabel">[[getLabel_(searchResult)]]</h2>
+  <h2 class="help-content-label">[[getLabel_(searchResult)]]</h2>
   <dom-repeat items="[[searchResult.contentList]]">
     <template>
       <div class="help-item">

diff --git a/chrome/test/data/webui/chromeos/os_feedback_ui/help_content_test.js b/chrome/test/data/webui/chromeos/os_feedback_ui/help_content_test.js
@@ -102,7 +102,7 @@ export function helpContentTestSuite() {
         /* isPopularContent= */ true);
 
     // Verify the title is in the helpContentElement.
-    const title = getElement('#helpContentLabel');
+    const title = getElement('.help-content-label');
     assertTrue(!!title);
     assertEquals('Top help content', title.textContent);
 
@@ -119,7 +119,7 @@ export function helpContentTestSuite() {
         /* isPopularContent =*/ false);
 
     // Verify the title is in the helpContentElement.
-    const title = getElement('#helpContentLabel');
+    const title = getElement('.help-content-label');
     assertTrue(!!title);
     assertEquals('Suggested help content', title.textContent);
 
@@ -175,7 +175,7 @@ export function helpContentTestSuite() {
         /* isPopularContent= */ true);
 
     // Verify the title is in the helpContentElement.
-    const title = getElement('#helpContentLabel');
+    const title = getElement('.help-content-label');
     assertTrue(!!title);
     assertEquals(
         'No suggested content. See top help content.', title.textContent);