[ALS-7781] Update error alert colors (#286)

hms-dbmi · Nov 5, 2024 · d6a8703 · d6a8703
1 parent e621925
commit d6a8703
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 5 deletions.
diff --git a/src/lib/components/ErrorAlert.svelte b/src/lib/components/ErrorAlert.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
   export let title: string;
+  export let color: string = 'error';
 </script>
 
-<aside data-testid="error-alert" class="alert variant-filled-error">
-  <i class="fa-solid fa-triangle-exclamation text-4xl" aria-hidden="true"></i>
+<aside data-testid="error-alert" class="alert variant-ghost-{color}">
+  <i class="fa-solid fa-circle-exclamation text-4xl" aria-hidden="true"></i>
   <div class="alert-message">
     <h3 class="h3 text-left">{title}</h3>
     <slot />

diff --git a/src/lib/components/explorer/Explorer.svelte b/src/lib/components/explorer/Explorer.svelte
@@ -131,7 +131,7 @@
       </div>
     </div>
     {#if $error}
-      <ErrorAlert title="API Error">
+      <ErrorAlert title="Sorry, we could not retrieve your search results." color="secondary">
         <p>{$error}</p>
       </ErrorAlert>
     {:else if $searchTerm || $selectedFacets.length > 0}

diff --git a/src/lib/components/explorer/FacetSideBar.svelte b/src/lib/components/explorer/FacetSideBar.svelte
@@ -64,5 +64,7 @@
     </Accordion>
   {/if}
 {:catch}
-  <ErrorAlert title="An error occured while retrieving facets." />
+  <ErrorAlert title="Something went wrong loading your search options." color="secondary">
+    <p>Please wait a moment, refresh the page, and try again.</p>
+  </ErrorAlert>
 {/await}
diff --git a/tests/routes/explorer/facets/test.ts b/tests/routes/explorer/facets/test.ts
@@ -36,7 +36,9 @@ test.describe('Facet Side Bar', () => {
 
     await expect(facetSideBar).toBeVisible();
     await expect(errorAlert).toBeVisible();
-    await expect(errorAlert).toHaveText('An error occured while retrieving facets.');
+    await expect(errorAlert).toHaveText(
+      'Something went wrong loading your search options. Please wait a moment, refresh the page, and try again.',
+    );
   });
   test('Facet Side Bar showes all categories', async ({ page }) => {
     // Given