Fix icons which are SVGs.

blocks/info-mouseover/info-mouseover.css

@@ -9,7 +9,7 @@
   display: block;
 }
 
-.info-mouseover.block span.icon svg {
+.info-mouseover.block span.icon img {
   display: block;
   height: 13px;
   width: 13px;
@@ -105,4 +105,4 @@
   .info-mouseover.block .info-content-wrapper::after {
     left: 18px;
   }
-}
+}

blocks/library-metadata/library-metadata.css

@@ -0,0 +1 @@
+/* Empty file for handling PSI checks on Block Library pages. */

blocks/library-metadata/library-metadata.js

@@ -0,0 +1 @@
+// Empty file for handling PSI checks on Block Library pages.

blocks/liveby-demographics/liveby-demographics.css

@@ -55,7 +55,7 @@
   font-size: var(--body-font-size-xxl);
 }
 
-.liveby-demographics.block > div .census-item .icon-bubble span.icon svg {
+.liveby-demographics.block > div .census-item .icon-bubble span.icon img {
   font-size: var(--body-font-size-xxl);
   color: var(--primary-color);
   height: 1em;

blocks/liveby-schools/liveby-schools.css

@@ -41,9 +41,13 @@ main .section.liveby-schools-container p {
 .liveby-schools .school-lists section {
   margin: 1em 0;
 }
+.liveby-schools .actions p.button-container {
+  text-align: center;
+}
 
 .liveby-schools .actions p.button-container a {
   padding: .85em 1.15em;
+  margin: 0 auto;
   font-size: var(--body-font-size-m);
   color: var(--white);
   background-color: var(--primary-color);
@@ -96,7 +100,7 @@ main .section.liveby-schools-container p {
   font-family: var(--font-family-georgia);
   font-weight: var(--font-weight-bold);
   font-size: var(--heading-font-size-xs);
-  line-height: var(--line-height-reg);
+  line-height: var(--line-height-m);
   border-bottom: none;
 }
 
@@ -162,4 +166,4 @@ main .section.liveby-schools-container p {
     flex-basis: 33%;
     margin: 1em;
   }
-}
+}

blocks/liveby-schools/liveby-schools.js

@@ -50,7 +50,8 @@ const sortMap = {
   rating: ratingSort,
 };
 
-function buildSchoolList(type, schools, sort = ratingSort) {
+async function buildSchoolList(type, schools, sort = ratingSort) {
+  const star = await fetch('/icons/liveby_rating.svg').then((resp) => (resp.ok ? resp.text() : ''));
   const sorted = schools.sort(sort);
 
   const section = document.createElement('section');
@@ -86,6 +87,7 @@ function buildSchoolList(type, schools, sort = ratingSort) {
         if (s.rating >= i) {
           span.classList.add('filled');
         }
+        span.innerHTML = star;
         rating.append(span);
       }
     } else {
@@ -95,8 +97,6 @@ function buildSchoolList(type, schools, sort = ratingSort) {
     item.append(rating);
     section.append(item);
   });
-
-  decorateIcons(section);
   return section;
 }
 
@@ -152,9 +152,9 @@ export default async function decorate(block) {
       sections.classList.add('school-lists');
 
       sections.append(
-        buildSchoolList('Elementary', elementary),
-        buildSchoolList('Middle', middle),
-        buildSchoolList('High', high),
+        await buildSchoolList('Elementary', elementary),
+        await buildSchoolList('Middle', middle),
+        await buildSchoolList('High', high),
       );
       block.append(sections);
 
@@ -173,14 +173,14 @@ export default async function decorate(block) {
       });
       block.append(more);
 
-      block.querySelector('.sort select').addEventListener('change', (e) => {
+      block.querySelector('.sort select').addEventListener('change', async (e) => {
         e.preventDefault();
         e.stopPropagation();
         const resort = sortMap[e.target.value || 'name'];
         sections.replaceChildren(
-          buildSchoolList('Elementary', elementary, resort),
-          buildSchoolList('Middle', middle, resort),
-          buildSchoolList('High', high, resort),
+          await buildSchoolList('Elementary', elementary, resort),
+          await buildSchoolList('Middle', middle, resort),
+          await buildSchoolList('High', high, resort),
         );
       });
     }