Update discover warning (#209)

hms-dbmi · Sep 26, 2024 · 5bd9d0c · 5bd9d0c
1 parent 3462141
commit 5bd9d0c
Showing 1 changed file with 22 additions and 14 deletions.
diff --git a/src/routes/(picsure)/(public)/discover/+page.svelte b/src/routes/(picsure)/(public)/discover/+page.svelte
@@ -9,7 +9,6 @@
     removeUnallowedFilters,
   } from '$lib/stores/Filter.ts';
   import { goto } from '$app/navigation';
-  import ErrorAlert from '$lib/components/ErrorAlert.svelte';
   import openTour from '$lib/assets/openTourConfiguration.json';
 
   function resetQuery() {
@@ -24,20 +23,29 @@
 
 <Content full>
   {#if $hasGenomicFilter || $hasUnallowedFilter}
-    <section id="discover-error-container" class="flex gap-9">
-      <ErrorAlert
-        title="Your selected filters contain stigmatizing variables and/or genomic filters, which are not supported with Discover"
-      >
-        <p>Would you like to remove the invalid filters or go back to explore?</p>
-        <div class="dark">
-          <button class="btn variant-filled" on:click={() => resetQuery()}
-            >Remove Invalid Filters</button
-          >
-          <button class="btn variant-filled" on:click={() => goto('/explorer')}
-            >Back to Explore</button
-          >
+    <section id="discover-error-container" class="flex gap-9 justify-center">
+      <aside data-testid="warning-alert" class="alert variant-ghost-warning">
+        <i class="fa-solid fa-triangle-exclamation text-4xl" aria-hidden="true"></i>
+        <div class="alert-message">
+          <h3 class="h3 text-left">
+            Your selected filters contain stigmatizing variables and/or genomic filters,
+          </h3>
+          <h3 class="h3 text-left">which are not supported with Discover</h3>
+          <p>Would you like to remove the invalid filters or go back to explore?</p>
+          <div>
+            <div class="dark">
+              <button
+                class="btn variant-ringed hover:variant-filled-warning"
+                on:click={() => resetQuery()}>Remove Invalid Filters</button
+              >
+              <button
+                class="btn variant-ringed hover:variant-filled-warning"
+                on:click={() => goto('/explorer')}>Back to Explore</button
+              >
+            </div>
+          </div>
         </div>
-      </ErrorAlert>
+      </aside>
     </section>
   {:else}
     <Explorer tourConfig={openTour} />