From 72b44567b8449ff809c70a1361881b582adc3f40 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Wed, 24 Nov 2021 22:23:38 +0100
Subject: [PATCH] feat: add message component

---
 .../misc/keyboard-shortcuts/index.vue         | 18 +++++++++-------
 src/components/misc/message.vue               | 21 +++++++++++++++++++
 src/components/misc/no-auth-wrapper.vue       | 12 ++++-------
 src/components/modal/modal.vue                |  4 ----
 src/styles/global.scss                        |  2 +-
 5 files changed, 36 insertions(+), 21 deletions(-)
 create mode 100644 src/components/misc/message.vue

diff --git a/src/components/misc/keyboard-shortcuts/index.vue b/src/components/misc/keyboard-shortcuts/index.vue
index a1b7be304..3164dade1 100644
--- a/src/components/misc/keyboard-shortcuts/index.vue
+++ b/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,
diff --git a/src/components/misc/message.vue b/src/components/misc/message.vue
new file mode 100644
index 000000000..81bd5a8e7
--- /dev/null
+++ b/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>
diff --git a/src/components/misc/no-auth-wrapper.vue b/src/components/misc/no-auth-wrapper.vue
index 22832fe94..10b9f95b1 100644
--- a/src/components/misc/no-auth-wrapper.vue
+++ b/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'
 
diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index 76fcac454..4a835f343 100644
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@@ -193,10 +193,6 @@ export default {
 			align-items: center;
 
 		}
-
-		.message-body {
-			padding: .5rem .75rem;
-		}
 	}
 }
 
diff --git a/src/styles/global.scss b/src/styles/global.scss
index b19c21908..d683759d6 100644
--- a/src/styles/global.scss
+++ b/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";