From 735120caa30cf4b2b6d1aad3923ccab9c867b8af Mon Sep 17 00:00:00 2001
From: Lenni009 <guentherhanslphdyt@gmail.com>
Date: Sun, 25 Feb 2024 19:47:18 +0100
Subject: [PATCH] better error styling

---
 src/App.vue | 23 ++++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 511954e..e4363b6 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -53,7 +53,7 @@ function parseJson(rawJson: string) {
     <label
       class="label"
       for="json-input"
-      >Enter your PersistentPlayerBases JSON section here:</label
+      >Copy your PersistentPlayerBases JSON section here:</label
     >
     <textarea
       class="textarea"
@@ -61,18 +61,22 @@ function parseJson(rawJson: string) {
       @input="parseOnInput"
     ></textarea>
   </div>
-  <p v-if="isJsonInvalid">
+
+  <p
+    v-if="isJsonInvalid"
+    class="has-background-danger has-text-white p-2 mt-2 error"
+  >
     Something went wrong. Please make sure you copied the whole PersistentPlayerBases JSON section.
   </p>
   <div
     v-if="baseJson.length"
     class="my-4"
   >
-  <div class="stats is-flex is-flex-wrap-wrap">
-    <p>Total Number of Bases: {{ totalBases }}</p>
-    <p>Total Parts Used: {{ totalPartsUsed }}</p>
-    <p>Unused Parts: {{ totalPartsUnused }}</p>
-  </div>
+    <div class="stats is-flex is-flex-wrap-wrap">
+      <p>Total Number of Bases: {{ totalBases }}</p>
+      <p>Total Parts Used: {{ totalPartsUsed }}</p>
+      <p>Unused Parts: {{ totalPartsUnused }}</p>
+    </div>
     <BaseList :bases="baseJson" />
     <PartChart
       :bases="baseJson"
@@ -85,4 +89,9 @@ function parseJson(rawJson: string) {
 .stats {
   gap: 0 2rem;
 }
+
+.error {
+  width: fit-content;
+  border-radius: 5px;
+}
 </style>