Standardized how we use the Message component.

frontend/components/Markdown.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script setup>
-import {useStorage} from "@vueuse/core"
+import {useStorage} from '@vueuse/core'
 import {marked} from 'marked'
 import {baseUrl} from 'marked-base-url'
 
@@ -23,8 +23,21 @@ onMounted(() => fetch(`${api_url.value}${props.file}`).then(response => response
     renderer: {
       text: (text) => {
         // -- replace github [!] with icon
-        text = text.replace(/\[!IMPORTANT\]/g, '<i class="fas fa-exclamation-triangle has-text-danger"></i>')
-        text = text.replace(/\[!NOTE\]/g, '<i class="fas fa-exclamation-circle has-text-info"></i>')
+        text = text.replace(/\[!IMPORTANT\]/g, `
+        <span class="is-block title is-4">
+            <span class="icon-text">
+                <span class="icon"><i class="fas fa-exclamation-triangle has-text-danger"></i></span>
+                <span>Important</span>
+            </span>
+        </span>`)
+
+        text = text.replace(/\[!NOTE\]/g, `
+        <span class="is-block title is-4">
+            <span class="icon-text">
+                <span class="icon"><i class="fas fa-info-circle has-text-info-50"></i></span>
+                <span>Note</span>
+            </span>
+        </span>`)
         return text
       }
     },