feat: add message component

src/components/misc/keyboard-shortcuts/index.vue

@@ -4,13 +4,11 @@
 			<template v-for="(s, i) in shortcuts" :key="i">
 				<h3>{{ $t(s.title) }}</h3>
 
-				<div class="message is-primary">
-					<div class="message-body">
-						{{
-							s.available($route) ? $t('keyboardShortcuts.currentPageOnly') : $t('keyboardShortcuts.allPages')
-						}}
-					</div>
-				</div>
+				<message>
+					{{
+						s.available($route) ? $t('keyboardShortcuts.currentPageOnly') : $t('keyboardShortcuts.allPages')
+					}}
+				</message>
 
 				<dl class="shortcut-list">
 					<template v-for="(sc, si) in s.shortcuts" :key="si">
@@ -30,11 +28,15 @@
 <script>
 import {KEYBOARD_SHORTCUTS_ACTIVE} from '@/store/mutation-types'
 import Shortcut from '@/components/misc/shortcut.vue'
+import Message from '@/components/misc/message'
 import {KEYBOARD_SHORTCUTS} from './shortcuts'
 
 export default {
 	name: 'keyboard-shortcuts',
-	components: {Shortcut},
+	components: {
+		Message, 
+		Shortcut,
+	},
 	data() {
 		return {
 			shortcuts: KEYBOARD_SHORTCUTS,

src/components/misc/message.vue

@@ -0,0 +1,21 @@
+<template>
+	<div class="message">
+		<slot/>
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'message',
+}
+</script>
+
+<style lang="scss" scoped>
+.message {
+	padding: .75rem 1rem;
+	border: 1px solid var(--primary);
+	background: hsla(var(--primary-hsl), .05);
+	margin: .5rem 0;
+	border-radius: $radius;
+}
+</style>

src/components/misc/no-auth-wrapper.vue

@@ -2,14 +2,9 @@
 	<div class="no-auth-wrapper">
 		<div class="noauth-container">
 			<Logo class="logo" width="400" height="117" />
-			<div class="message is-info" v-if="motd !== ''">
-				<div class="message-header">
-					<p>{{ $t('misc.info') }}</p>
-				</div>
-				<div class="message-body">
-					{{ motd }}
-				</div>
-			</div>
+			<message v-if="motd !== ''">
+				{{ motd }}
+			</message>
 			<slot/>
 		</div>
 	</div>
@@ -17,6 +12,7 @@
 
 <script setup>
 import Logo from '@/components/home/Logo.vue'
+import message from '@/components/misc/message'
 import {useStore} from 'vuex'
 import {computed} from 'vue'
 

src/components/modal/modal.vue

@@ -193,10 +193,6 @@ export default {
 			align-items: center;
 
 		}
-
-		.message-body {
-			padding: .5rem .75rem;
-		}
 	}
 }
 

src/styles/global.scss

@@ -48,7 +48,7 @@
 // @import "bulma-css-variables/sass/components/level"; // not used
 @import "bulma-css-variables/sass/components/media"; 
 @import "bulma-css-variables/sass/components/menu";
-@import "bulma-css-variables/sass/components/message";
+//@import "bulma-css-variables/sass/components/message";
 @import "bulma-css-variables/sass/components/modal";
 @import "bulma-css-variables/sass/components/navbar";
 @import "bulma-css-variables/sass/components/pagination";