Slightly different style for name matches. (#8162)

Author: isoos

app/lib/frontend/templates/listing.dart

@@ -135,11 +135,14 @@ d.Node? _nameMatches(SearchForm form, List<String>? matches) {
       : 'Matching package ${singular ? 'name' : 'names'}: ';
 
   return d.p(children: [
-    d.b(text: nameMatchLabel),
+    d.text(nameMatchLabel),
     ...matches.expandIndexed((i, name) {
       return [
         if (i > 0) d.text(', '),
-        d.code(child: d.a(href: urls.pkgPageUrl(name), text: name)),
+        d.a(
+          href: urls.pkgPageUrl(name),
+          child: d.b(text: name),
+        ),
       ];
     }),
   ]);

app/lib/frontend/templates/views/pkg/index.dart

@@ -20,7 +20,8 @@ d.Node packageListingNode({
 }) {
   final innerContent = d.fragment([
     listingInfo,
-    if (nameMatches != null) nameMatches,
+    if (nameMatches != null)
+      d.div(classes: ['listing-highlight-block'], child: nameMatches),
     packageList,
     if (pagination != null) pagination,
     d.markdown('Check our help page for details on '

pkg/web_css/lib/src/_list.scss

@@ -44,6 +44,10 @@
   }
 }
 
+.listing-highlight-block {
+  margin: 8px 0px;
+}
+
 .sort-control {
   position: relative;
   cursor: pointer;