Wording and visual changes suggested by James Cobb

Author: holly-cummins

src/components/extensions-list.js

@@ -28,10 +28,13 @@ const RightColumn = styled.div`
   width: 100%;
 `
 
-const ExtensionCount = styled.div`
+const ExtensionCount = styled.h2`
   margin-top: 1.25rem;
   margin-left: 3.25rem;
+  margin-bottom: 0.5rem;
   width: 100%;
+  font-size: 1.25rem;
+  font-weight: 400;
 `
 
 const ExtensionsList = ({ extensions, categories }) => {
@@ -54,8 +57,8 @@ const ExtensionsList = ({ extensions, categories }) => {
 
     const countMessage =
       extensionCount === filteredExtensions.length
-        ? `Showing ${extensionCount} extensions.`
-        : `Showing ${filteredExtensions.length} of ${extensionCount} extensions.`
+        ? `Showing ${extensionCount} extensions`
+        : `Showing ${filteredExtensions.length} matching of ${extensionCount} extensions`
 
     return (
       <FilterableList className="extensions-list">

src/components/extensions-list.test.js

@@ -88,7 +88,7 @@ describe("extension list", () => {
   it("displays a brief message about how many extensions there are", async () => {
     // The superceded extension should not be counted
     const num = extensions.length - 1
-    expect(screen.getByText(`Showing ${num} extensions.`)).toBeTruthy()
+    expect(screen.getByText(`Showing ${num} extensions`)).toBeTruthy()
   })
 
   describe("searching and filtering", () => {
@@ -138,7 +138,7 @@ describe("extension list", () => {
 
         const total = extensions.length - 1
         expect(
-          screen.getByText(`Showing 2 of ${total} extensions.`)
+          screen.getByText(`Showing 2 matching of ${total} extensions`)
         ).toBeTruthy()
       })
     })