Copy update for the no inventory found info card (#82)

* Adjusting copy for no inventory found message * Centering error card
Ben-Chapman · Mar 7, 2023 · 8a8ca8b · 8a8ca8b
1 parent 1695d2c
commit 8a8ca8b
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 45 deletions.
diff --git a/app/src/components/ErrorMessage.vue b/app/src/components/ErrorMessage.vue
@@ -1,37 +1,39 @@
 <template>
-  <b-card
-    style="max-width: 60vw"
-    bg-variant="warning"
-    text-variant="white"
-    title="Hmm, There's Been an Error"
-  >
-    <b-card-text class="pt-3">
-      <!-- This is displayed for shorter HTTP responses like from the EVFinder
-      API error text. -->
-      <div v-if="this.apiErrorDetail[2].length <= 60">
-      There was a server error with this request: <code class="error-message">{{ this.apiErrorDetail[2] }} ({{ this.apiErrorDetail[1] }})</code>
-        <p class="pt-3">Please refresh this page or retry.</p>
-      </div>
-      <div v-else>
-        <!-- For longer error responses passed through from the various manufacturer
-        APIs, we're collapsing the actual error text, accessible from an info button -->
-        There was a server error with this request.
-        <p class="pt-3">Please refresh this page or retry.
-          <b-button size="sm" variant="link" class="px-0 info-button" v-b-toggle.collapse-2>
-            <b-icon-info-circle aria-hidden="true"></b-icon-info-circle>
-          </b-button>
+  <div class="d-flex justify-content-center border-0">
+    <b-card
+      style="max-width: 60vw"
+      bg-variant="warning"
+      text-variant="white"
+      title="Hmm, There's Been an Error"
+    >
+      <b-card-text class="pt-3">
+        <!-- This is displayed for shorter HTTP responses like from the EVFinder
+        API error text. -->
+        <div v-if="this.apiErrorDetail[2].length <= 60">
+        There was a server error with this request: <code class="error-message">{{ this.apiErrorDetail[2] }} ({{ this.apiErrorDetail[1] }})</code>
+          <p class="pt-3">Please refresh this page or retry.</p>
+        </div>
+        <div v-else>
+          <!-- For longer error responses passed through from the various manufacturer
+          APIs, we're collapsing the actual error text, accessible from an info button -->
+          There was a server error with this request.
+          <p class="pt-3">Please refresh this page or retry.
+            <b-button size="sm" variant="link" class="px-0 info-button" v-b-toggle.collapse-2>
+              <b-icon-info-circle aria-hidden="true"></b-icon-info-circle>
+            </b-button>
 
-          <b-collapse id="collapse-2">
-            <b-card bg-variant="warning" text-variant="white">
-              <code class="error-message">{{ this.apiErrorDetail[2] }} ({{ this.apiErrorDetail[1] }})</code>
-            </b-card>
-          </b-collapse>
-        </p>
-      </div>
-    </b-card-text>
+            <b-collapse id="collapse-2">
+              <b-card bg-variant="warning" text-variant="white">
+                <code class="error-message">{{ this.apiErrorDetail[2] }} ({{ this.apiErrorDetail[1] }})</code>
+              </b-card>
+            </b-collapse>
+          </p>
+        </div>
+      </b-card-text>
 
-    <b-button @click="refreshPage()" class="float-right" variant="primary">Retry</b-button>
-  </b-card>
+      <b-button @click="refreshPage()" class="float-right" variant="primary">Retry</b-button>
+    </b-card>
+  </div>
 </template>
 
 <script>
@@ -78,4 +80,4 @@ export default {
 .info-button {
   color: #fff !important;
 }
-</style>
+</style>
diff --git a/app/src/components/InfoMessage.vue b/app/src/components/InfoMessage.vue
@@ -1,16 +1,16 @@
 <template>
   <div class="d-flex justify-content-center border-0">
-  <b-card
-    class="no-inventory"
-    bg-variant="secondary"
-    text-variant="dark"
-    >
-    <b-card-text>
-      <p class="h4">{{ infoTitle }}</p>
-      <p class=pt-3 v-html="infoText"></p>
-    </b-card-text>
-  </b-card>
-</div>
+    <b-card
+      class="no-inventory"
+      bg-variant="secondary"
+      text-variant="dark"
+      >
+      <b-card-text>
+        <p class="h4">{{ infoTitle }}</p>
+        <p class=pt-3 v-html="infoText"></p>
+      </b-card-text>
+    </b-card>
+  </div>
 </template>
 
 

diff --git a/app/src/components/InventoryTable.vue b/app/src/components/InventoryTable.vue
@@ -20,8 +20,8 @@
           infoTitle="No Inventory Available  😢"
           :infoText="`No ${this.form.year} ${this.form.vehicleName}'s were found within
           ${this.form.radius} miles of ${this.form.zipcode}.<br><br>
-          Adjust your search and try again — you can enter a search radius of up
-          to 999 miles.<br>That's a 16 hour drive (without stops), or a 4 hour flight :)`"
+          Adjust your search and try again.<br><br>You can enter a search radius of up
+          to 999 miles. That's a 16 hour drive (without stops), or a 4 hour flight :)`"
         />
       </div>