Fix error box styles

6 years ago · 63d2e77603
1 changed files with 18 additions and 2 deletions
--- a/packages/builder/src/components/common/ErrorsBox.svelte
+++ b/packages/builder/src/components/common/ErrorsBox.svelte
@ -5,9 +5,25 @@
 </script>

 {#if hasErrors}
-  <div class="bb__alert bb__alert--danger">
+  <div class="container bb__alert bb__alert--danger">
    {#each errors as error}
-      <div>{error.dataPath} {error.message}</div>
+      <div class="error">{error.dataPath} {error.message}</div>
    {/each}
  </div>
 {/if}
+
+<style>
+  .container {
+    border-radius: var(--border-radius-m);
+    margin: 0;
+    padding: var(--spacing-m);
+  }
+
+  .error {
+    font-size: var(--font-size-xs);
+    font-weight: 500;
+  }
+  .error:first-letter {
+    text-transform: uppercase;
+  }
+</style>