From 251e89fe5a78cde64b044eb65f9ca11ee61c321d Mon Sep 17 00:00:00 2001
From: "Calum H." <contact@cal.engineer>
Date: Tue, 9 Dec 2025 09:14:59 +0000
Subject: [PATCH] fix: notice btns not matching colour of notice + gap issue
 (#4823)

* feat: improve notices

* fix: bottom gap for notices

* fix: lint

* fix: lint
---
 apps/frontend/src/pages/hosting/manage/[id].vue  |  2 +-
 packages/ui/src/components/base/ServerNotice.vue | 10 ++++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/apps/frontend/src/pages/hosting/manage/[id].vue b/apps/frontend/src/pages/hosting/manage/[id].vue
index 34b54309..af174464 100644
--- a/apps/frontend/src/pages/hosting/manage/[id].vue
+++ b/apps/frontend/src/pages/hosting/manage/[id].vue
@@ -1,7 +1,7 @@
 <template>
 	<div
 		v-if="filteredNotices.length > 0"
-		class="experimental-styles-within relative mx-auto flex w-full min-w-0 max-w-[1280px] flex-col gap-3 px-6"
+		class="experimental-styles-within relative mx-auto mb-4 flex w-full min-w-0 max-w-[1280px] flex-col gap-3 px-6"
 	>
 		<ServerNotice
 			v-for="notice in filteredNotices"
diff --git a/packages/ui/src/components/base/ServerNotice.vue b/packages/ui/src/components/base/ServerNotice.vue
index bc7e48de..ba1daadd 100644
--- a/packages/ui/src/components/base/ServerNotice.vue
+++ b/packages/ui/src/components/base/ServerNotice.vue
@@ -18,12 +18,12 @@
 			</template>
 		</template>
 		<template #actions>
-			<ButtonStyled v-if="dismissable" circular>
+			<ButtonStyled v-if="dismissable" :color="NOTICE_TYPE_BTN[level]">
 				<button
 					v-tooltip="formatMessage(messages.dismiss)"
 					@click="() => (preview ? {} : emit('dismiss'))"
 				>
-					<XIcon />
+					<XIcon /> Dismiss
 				</button>
 			</ButtonStyled>
 		</template>
@@ -91,6 +91,12 @@ const NOTICE_TYPE: Record<string, 'info' | 'warning' | 'critical'> = {
 	critical: 'critical',
 }
 
+const NOTICE_TYPE_BTN: Record<string, 'blue' | 'orange' | 'red'> = {
+	info: 'blue',
+	warn: 'orange',
+	critical: 'red',
+}
+
 const heading = computed(() => NOTICE_HEADINGS[props.level] ?? messages.info)
 </script>
 <style scoped lang="scss">