eightequal/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

fix: notice btns not matching colour of notice + gap issue (#4823)

Browse Source 
* feat: improve notices

* fix: bottom gap for notices

* fix: lint

* fix: lint
This commit is contained in:
Calum H.
2025-12-09 09:14:59 +00:00
committed by GitHub
parent 4fbbc2b1cf
commit 251e89fe5a
2 changed files with 9 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/frontend/src/pages/hosting/manage/[id].vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div <div
v-if="filteredNotices.length > 0" 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 <ServerNotice
v-for="notice in filteredNotices" v-for="notice in filteredNotices"

10
packages/ui/src/components/base/ServerNotice.vue
View File

@@ -18,12 +18,12 @@
</template> </template>
</template> </template>
<template #actions> <template #actions>
<ButtonStyled v-if="dismissable" circular> <ButtonStyled v-if="dismissable" :color="NOTICE_TYPE_BTN[level]">
<button <button
v-tooltip="formatMessage(messages.dismiss)" v-tooltip="formatMessage(messages.dismiss)"
@click="() => (preview ? {} : emit('dismiss'))" @click="() => (preview ? {} : emit('dismiss'))"
> >
<XIcon /> <XIcon /> Dismiss
</button> </button>
</ButtonStyled> </ButtonStyled>
</template> </template>
@@ -91,6 +91,12 @@ const NOTICE_TYPE: Record<string, 'info' | 'warning' | 'critical'> = {
critical: '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) const heading = computed(() => NOTICE_HEADINGS[props.level] ?? messages.info)
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">