Extract Message banner component (#1105)

assets/styles/components.scss

@@ -186,29 +186,6 @@
     z-index: 2;
   }
 
-  &:where(&.warning, &.information) {
-    padding: 1.5rem;
-    line-height: 1.5;
-    min-height: 0;
-    a {
-      /* Uses active color to increase contrast */
-      color: var(--color-link-active);
-      text-decoration: underline;
-    }
-  }
-
-  &.warning {
-    border-left: 0.5rem solid var(--color-warning-banner-side);
-    background-color: var(--color-warning-banner-bg);
-    color: var(--color-warning-banner-text);
-  }
-
-  &.information {
-    border-left: 0.5rem solid var(--color-info-banner-side);
-    background-color: var(--color-info-banner-bg);
-    color: var(--color-info-banner-text);
-  }
-
   &.moderation-card {
     background-color: var(--color-warning-banner-bg);
   }
@@ -1255,29 +1232,6 @@ tr.button-transparent {
     grid-gap: 0.5rem;
     z-index: 2;
   }
-
-  &:where(&.warning, &.information) {
-    padding: 1.5rem;
-    line-height: 1.5;
-    min-height: 0;
-    a {
-      /* Uses active color to increase contrast */
-      color: var(--color-link-active);
-      text-decoration: underline;
-    }
-  }
-
-  &.warning {
-    border-left: 0.5rem solid var(--color-warning-banner-side);
-    background-color: var(--color-warning-banner-bg);
-    color: var(--color-warning-banner-text);
-  }
-
-  &.information {
-    border-left: 0.5rem solid var(--color-info-banner-side);
-    background-color: var(--color-info-banner-bg);
-    color: var(--color-info-banner-text);
-  }
 }
 
 .card-divider {

components/ui/MessageBanner.vue

@@ -0,0 +1,57 @@
+<template>
+  <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'
+const props = withDefaults(defineProps<{ messageType?: MessageType }>(), {
+  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);
+
+  background: var(--color-raised-bg);
+  border-radius: var(--size-rounded-card);
+  overflow: hidden;
+  outline: 2px solid transparent;
+
+  margin-bottom: var(--spacing-card-md);
+
+  box-shadow: var(--shadow-card);
+
+  line-height: 1.5;
+  min-height: 0;
+}
+
+:slotted(a) {
+  /* 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);
+}
+
+.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);
+}
+
+.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);
+}
+</style>

pages/[type]/[id].vue

@@ -365,26 +365,22 @@
           :auth="auth"
           :tags="tags"
         />
-        <div v-else-if="project.status === 'withheld'" class="card warning" aria-label="Warning">
+        <MessageBanner v-else-if="project.status === 'withheld'" message-type="warning">
           {{ project.title }} has been removed from search by Modrinth's moderators. Please use
           {{ project.title }} at your own risk.
-        </div>
+        </MessageBanner>
-        <div v-if="project.status === 'archived'" class="card warning" aria-label="Warning">
+        <MessageBanner v-if="project.status === 'archived'" message-type="warning">
           {{ project.title }} has been archived. {{ project.title }} will not receive any further
           updates unless the author decides to unarchive the project.
-        </div>
+        </MessageBanner>
-        <div
+        <MessageBanner v-if="project.project_type === 'modpack'" message-type="information">
-          v-if="project.project_type === 'modpack'"
-          class="card information"
-          aria-label="Information"
-        >
           To install {{ project.title }}, download
           <nuxt-link to="/app">the Modrinth App</nuxt-link>. For instructions with other launchers,
           please see
           <a href="https://docs.modrinth.com/docs/modpacks/playing_modpacks/" :target="$external()"
             >our documentation</a
           >.
-        </div>
+        </MessageBanner>
         <Promotion v-if="tags.approvedStatuses.includes(project.status)" />
         <div class="navigation-card">
           <NavRow
@@ -725,6 +721,7 @@ import Avatar from '~/components/ui/Avatar.vue'
 import NavStack from '~/components/ui/NavStack.vue'
 import NavStackItem from '~/components/ui/NavStackItem.vue'
 import ProjectMemberHeader from '~/components/ui/ProjectMemberHeader.vue'
+import MessageBanner from '~/components/ui/MessageBanner.vue'
 import SettingsIcon from '~/assets/images/utils/settings.svg'
 import UsersIcon from '~/assets/images/utils/users.svg'
 import CategoriesIcon from '~/assets/images/utils/tags.svg'