From 16893ec0e39d0322310d73626b15d2771bde9ac9 Mon Sep 17 00:00:00 2001
From: Prospector <6166773+Prospector@users.noreply.github.com>
Date: Tue, 18 Mar 2025 18:24:14 -0700
Subject: [PATCH] Fix display of critical announcements in app (#3407)

---
 apps/app-frontend/src/App.vue                  | 10 ++++------
 packages/ui/src/components/base/Admonition.vue |  8 ++++----
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/apps/app-frontend/src/App.vue b/apps/app-frontend/src/App.vue
index 412ce1d3a..00c82c0cf 100644
--- a/apps/app-frontend/src/App.vue
+++ b/apps/app-frontend/src/App.vue
@@ -521,6 +521,10 @@ function handleAuxClick(e) {
           width: 'calc(100% - var(--right-bar-width))',
         }"
       ></div>
+      <div v-if="criticalErrorMessage" class="m-6 mb-0 flex flex-col border-red bg-bg-red rounded-2xl border-2 border-solid p-4 gap-1 font-semibold text-contrast">
+        <h1 class="m-0 text-lg font-extrabold">{{ criticalErrorMessage.header }}</h1>
+        <div class="markdown-body text-primary" v-html="renderString(criticalErrorMessage.body ?? '')"></div>
+      </div>
       <RouterView v-slot="{ Component }">
         <template v-if="Component">
           <Suspense @pending="loading.startLoading()" @resolve="loading.stopLoading()">
@@ -592,12 +596,6 @@ function handleAuxClick(e) {
         <PromotionWrapper />
       </template>
     </div>
-    <div class="view">
-      <div v-if="criticalErrorMessage" class="critical-error-banner" data-tauri-drag-region>
-        <h1>{{ criticalErrorMessage.header }}</h1>
-        <div class="markdown-body" v-html="renderString(criticalErrorMessage.body ?? '')"></div>
-      </div>
-    </div>
   </div>
   <URLConfirmModal ref="urlModal" />
   <Notifications ref="notificationsWrapper" sidebar />
diff --git a/packages/ui/src/components/base/Admonition.vue b/packages/ui/src/components/base/Admonition.vue
index fc9f691f6..538bb9d84 100644
--- a/packages/ui/src/components/base/Admonition.vue
+++ b/packages/ui/src/components/base/Admonition.vue
@@ -39,14 +39,14 @@ defineProps({
 })
 
 const typeClasses = {
-  info: 'border-blue bg-bg-blue',
-  warning: 'border-orange bg-bg-orange',
+  info: 'border-brand-blue bg-bg-blue',
+  warning: 'border-brand-orange bg-bg-orange',
   critical: 'border-brand-red bg-bg-red',
 }
 
 const iconClasses = {
-  info: 'text-blue',
-  warning: 'text-orange',
+  info: 'text-brand-blue',
+  warning: 'text-brand-orange',
   critical: 'text-brand-red',
 }