Fix display of critical announcements in app (#3407)

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 />

packages/ui/src/components/base/Admonition.vue

@@ -39,14 +39,14 @@ defineProps({
 })
 
 const typeClasses = {
-  info: 'border-blue bg-bg-blue',
+  info: 'border-brand-blue bg-bg-blue',
-  warning: 'border-orange bg-bg-orange',
+  warning: 'border-brand-orange bg-bg-orange',
   critical: 'border-brand-red bg-bg-red',
 }
 
 const iconClasses = {
-  info: 'text-blue',
+  info: 'text-brand-blue',
-  warning: 'text-orange',
+  warning: 'text-brand-orange',
   critical: 'text-brand-red',
 }