Use Polaris BlockStack for error overlay body

Author: jamesmengo

packages/theme/src/cli/utilities/theme-environment/hot-reload/error-page.ts

@@ -62,18 +62,21 @@ export function getErrorPage(options: {title: string; header: string; errors: Er
                       class="Polaris-BlockStack"
                       style="--pc-block-stack-order:column;--pc-block-stack-gap-xs:var(--p-space-200)"
                     >
-                      ${options.errors
-                        .map(
-                          (error) => `
-                <div>
-                  <span class="Polaris-Text--root Polaris-Text--bodyMd">
-                    ${error.file ? `<p class="error-file">${error.file}</p>` : ''}
-                    <p class="error-message">${error.message}${error.code}</p>
-                  </span>
-                </div>
-              `,
-                        )
-                        .join('')}
+                      <div
+                        class="Polaris-BlockStack"
+                        style="--pc-block-stack-order:column;--pc-block-stack-gap-xs:var(--p-space-500)"
+                      >
+                        ${options.errors
+                          .map(
+                            (error) => `
+                              <span class="Polaris-Text--root Polaris-Text--headingSm">${error.message}</span>
+                        <span class="Polaris-Text--root Polaris-Text--bodyLg"
+                          >- ${error.code}</span
+                        >
+                          `,
+                          )
+                          .join('')}
+                      </div>
                     </div>
                   </div>
                 </div>