Merge pull request #23 from Safelite/feature/SSR-84

fixed styling for subheader

package-lock.json

@@ -3571,9 +3571,9 @@
       "dev": true
     },
     "bootstrap": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.1.tgz",
-      "integrity": "sha512-UQi3v2NpVPEi1n35dmRRzBJFlgvWHYwyem6yHhuT6afYF+sziEt46McRbT//kVXZ7b1YUYEVGdXEH74Nx3xzGA=="
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.2.tgz",
+      "integrity": "sha512-dEtzMTV71n6Fhmbg4fYJzQsw1N29hJKO1js5ackCgIpDcGid2ETMGC6zwSYw09v05Y+oRdQ9loC54zB1La3hHQ=="
     },
     "brace-expansion": {
       "version": "1.1.11",

package.json

@@ -11,7 +11,7 @@
   "dependencies": {
     "@popperjs/core": "^2.10.2",
     "axios": "^0.27.2",
-    "bootstrap": "^5.1.1",
+    "bootstrap": "^5.2.2",
     "jest-junit": "^13.0.0",
     "maska": "^1.5.0",
     "pinia": "^2.0.22",

src/common-components/site-sub-header/site-sub-header.spec.js

@@ -3,14 +3,14 @@ import { shallowMount } from "@vue/test-utils";
 
 describe("site sub header", () => {
 
-    const subHeaderText = "<p>let's fix your glass</p>";
+    const subHeaderText = "let's fix your glass";
     const mockMixin = {
         methods: {
             getCmsContent: jest.fn().mockImplementation(()=> {
                 return subHeaderText;
             })
         }
-    }
+    };
 
     it("should contain the cms content", () => {
         const wrapper = shallowMount(siteSubHeader, {
@@ -18,10 +18,9 @@ describe("site sub header", () => {
         });
       
         wrapper.getCmsContent = jest.fn();
-        const actual = wrapper.find("p");
-
-        expect(actual.html()).toBe(subHeaderText);
-    })
+        const actual = wrapper.find("span");
+        expect(actual.html()).toContain(subHeaderText);
+    });
 
 });
 

src/common-components/site-sub-header/site-sub-header.vue

@@ -1,8 +1,14 @@
 <template>
     <div>
-        <div id="subHeader" v-html="content"></div>
+      <div class="d-flex align-items-center justify-content-center container-fluid overflow-hidden">
+        <h5 class="text-center fw-normal mb-0" >
+          <span>
+            {{ content }}
+          </span>
+        </h5>
+      </div>
     </div>
-</template>
+  </template>
 
 <script>
     export default ({
@@ -19,9 +25,13 @@
     })
 </script>
 
+  
 <style lang="scss" scoped>
-    #subHeader{
-        margin: 16px auto;
-        text-align: center;
-    }
+h5 {
+  line-height: 32px;
+
+  button {
+    color: inherit;
+  }
+}
 </style>