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

@@ -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"

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