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

refactor: migrate to common eslint+prettier configs (#4168)

Browse Source 
* refactor: migrate to common eslint+prettier configs

* fix: prettier frontend

* feat: config changes

* fix: lint issues

* fix: lint

* fix: type imports

* fix: cyclical import issue

* fix: lockfile

* fix: missing dep

* fix: switch to tabs

* fix: continue switch to tabs

* fix: rustfmt parity

* fix: moderation lint issue

* fix: lint issues

* fix: ui intl

* fix: lint issues

* Revert "fix: rustfmt parity"

This reverts commit cb99d2376c321d813d4b7fc7e2a213bb30a54711.

* feat: revert last rs
This commit is contained in:
Cal H.
2025-08-14 21:48:38 +01:00
committed by GitHub
parent 82697278dc
commit 2aabcf36ee
702 changed files with 101360 additions and 102020 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
apps/frontend/src/components/ui/MessageBanner.vue
View File

@@ -1,58 +1,58 @@
<template>
<div class="message-banner">
<div class="message-banner__content" :class="cardClassByType" :aria-label="ariaLabelByType">
<slot></slot>
</div>
</div>
<div class="message-banner">
<div class="message-banner__content" :class="cardClassByType" :aria-label="ariaLabelByType">
<slot></slot>
</div>
</div>
</template>
<script lang="ts" setup>
type MessageType = "information" | "warning";
type MessageType = 'information' | 'warning'
const props = withDefaults(defineProps<{ messageType?: MessageType }>(), {
messageType: "information",
});
const cardClassByType = computed(() => `message-banner__content_${props.messageType}`);
const ariaLabelByType = computed(() => `Banner with ${props.messageType} message`);
messageType: 'information',
})
const cardClassByType = computed(() => `message-banner__content_${props.messageType}`)
const ariaLabelByType = computed(() => `Banner with ${props.messageType} message`)
</script>
<style lang="css" scoped>
.message-banner {
position: relative;
min-height: var(--font-size-2xl);
position: relative;
min-height: var(--font-size-2xl);
background: var(--color-raised-bg);
border-radius: var(--size-rounded-card);
overflow: hidden;
outline: 2px solid transparent;
outline-offset: -2px;
background: var(--color-raised-bg);
border-radius: var(--size-rounded-card);
overflow: hidden;
outline: 2px solid transparent;
outline-offset: -2px;
margin-bottom: var(--spacing-card-md);
margin-bottom: var(--spacing-card-md);
box-shadow: var(--shadow-card);
box-shadow: var(--shadow-card);
line-height: 1.5;
min-height: 0;
line-height: 1.5;
min-height: 0;
}
:slotted(a) {
/* Uses active color to increase contrast */
color: var(--color-link-active);
text-decoration: underline;
/* Uses active color to increase contrast */
color: var(--color-link-active);
text-decoration: underline;
}
.message-banner__content {
padding: var(--spacing-card-md) var(--spacing-card-lg);
padding: var(--spacing-card-md) var(--spacing-card-lg);
}
.message-banner__content_warning {
border-left: 0.5rem solid var(--color-warning-banner-side);
background-color: var(--color-warning-banner-bg);
color: var(--color-warning-banner-text);
border-left: 0.5rem solid var(--color-warning-banner-side);
background-color: var(--color-warning-banner-bg);
color: var(--color-warning-banner-text);
}
.message-banner__content_information {
border-left: 0.5rem solid var(--color-info-banner-side);
background-color: var(--color-info-banner-bg);
color: var(--color-info-banner-text);
border-left: 0.5rem solid var(--color-info-banner-side);
background-color: var(--color-info-banner-bg);
color: var(--color-info-banner-text);
}
</style>