From 5bd9d0c92cd47640d12e25682e63a194d6ccccdb Mon Sep 17 00:00:00 2001
From: ramari16 <ramari16@gmail.com>
Date: Thu, 26 Sep 2024 17:01:57 -0400
Subject: [PATCH] Update discover warning (#209)

---
 .../(picsure)/(public)/discover/+page.svelte  | 36 +++++++++++--------
 1 file changed, 22 insertions(+), 14 deletions(-)

diff --git a/src/routes/(picsure)/(public)/discover/+page.svelte b/src/routes/(picsure)/(public)/discover/+page.svelte
index 349f7bb2..5c01f7d9 100644
--- 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} />