From e225bc9f66132b75e6f674664d903d4be4ee014a Mon Sep 17 00:00:00 2001
From: "Calum H." <hendersoncal117@gmail.com>
Date: Fri, 16 May 2025 11:12:34 +0100
Subject: [PATCH] feat: standardized page banners (#3610)

* feat: standardized site banners

* fix: lint issues

* fix: deduplicate SCSS with variant map

* feat: color shades + reduced scss

* feat: fix theming

* chore: Remove shades-generator.ts

* fix: lint issues

---------

Co-authored-by: Prospector <6166773+Prospector@users.noreply.github.com>
---
 apps/frontend/src/assets/styles/global.scss   |  24 +++
 apps/frontend/src/layouts/default.vue         | 201 ++++++++----------
 apps/frontend/src/locales/en-US/index.json    |  19 +-
 ...{tailwind.config.js => tailwind.config.ts} |  23 +-
 packages/ui/src/components/index.ts           |   1 +
 .../ui/src/components/nav/PagewideBanner.vue  |  82 +++++++
 6 files changed, 224 insertions(+), 126 deletions(-)
 rename apps/frontend/{tailwind.config.js => tailwind.config.ts} (89%)
 create mode 100644 packages/ui/src/components/nav/PagewideBanner.vue

diff --git a/apps/frontend/src/assets/styles/global.scss b/apps/frontend/src/assets/styles/global.scss
index b0dcdc0ce..b52b738ed 100644
--- a/apps/frontend/src/assets/styles/global.scss
+++ b/apps/frontend/src/assets/styles/global.scss
@@ -162,6 +162,18 @@ html {
   --landing-green-label-bg: rgba(0, 216, 69, 0.15);
 
   --landing-raw-bg: #fff;
+
+  --banner-error-bg: #fee2e2;
+  --banner-error-text: #991b1b;
+  --banner-error-border: #ef4444;
+
+  --banner-warning-bg: #ffedd5;
+  --banner-warning-text: #713f12;
+  --banner-warning-border: #f97316;
+
+  --banner-info-bg: #dbeafe;
+  --banner-info-text: #1e3a8a;
+  --banner-info-border: #3b82f6;
 }
 
 .dark,
@@ -286,6 +298,18 @@ html {
 
   --hover-filter: brightness(120%);
   --active-filter: brightness(140%);
+
+  --banner-error-bg: #4c1515;
+  --banner-error-text: #fee2e2;
+  --banner-error-border: #7f1d1d;
+
+  --banner-warning-bg: #4a2a0a;
+  --banner-warning-text: #ffe6c0;
+  --banner-warning-border: #b54708;
+
+  --banner-info-bg: #1e2a44;
+  --banner-info-text: #dbeafe;
+  --banner-info-border: #2563eb;
 }
 
 .oled-mode {
diff --git a/apps/frontend/src/layouts/default.vue b/apps/frontend/src/layouts/default.vue
index 2b5aa7ff3..e33542af0 100644
--- a/apps/frontend/src/layouts/default.vue
+++ b/apps/frontend/src/layouts/default.vue
@@ -27,76 +27,90 @@
     </div>
   </div>
   <div ref="main_page" class="layout" :class="{ 'expanded-mobile-nav': isBrowseMenuOpen }">
-    <div
+    <PagewideBanner
       v-if="auth.user && !auth.user.email_verified && route.path !== '/auth/verify-email'"
-      class="email-nag"
+      variant="warning"
     >
-      <template v-if="auth.user.email">
-        <span>{{ formatMessage(verifyEmailBannerMessages.title) }}</span>
-        <button class="btn" @click="resendVerifyEmail">
+      <template #title>
+        <span>
+          {{
+            auth?.user?.email
+              ? formatMessage(verifyEmailBannerMessages.title)
+              : formatMessage(addEmailBannerMessages.title)
+          }}
+        </span>
+      </template>
+      <template #description>
+        <span>
+          {{
+            auth?.user?.email
+              ? formatMessage(verifyEmailBannerMessages.description)
+              : formatMessage(addEmailBannerMessages.description)
+          }}
+        </span>
+      </template>
+      <template #actions>
+        <button v-if="auth?.user?.email" class="btn" @click="resendVerifyEmail">
           {{ formatMessage(verifyEmailBannerMessages.action) }}
         </button>
-      </template>
-      <template v-else>
-        <span>{{ formatMessage(addEmailBannerMessages.title) }}</span>
-        <nuxt-link class="btn" to="/settings/account">
+        <nuxt-link v-else class="btn" to="/settings/account">
           <SettingsIcon aria-hidden="true" />
           {{ formatMessage(addEmailBannerMessages.action) }}
         </nuxt-link>
       </template>
-    </div>
-    <div
+    </PagewideBanner>
+    <PagewideBanner
       v-if="
-        user &&
-        user.subscriptions &&
         user.subscriptions.some((x) => x.status === 'payment-failed') &&
         route.path !== '/settings/billing'
       "
-      class="email-nag"
+      variant="error"
     >
-      <span>{{ formatMessage(subscriptionPaymentFailedBannerMessages.title) }}</span>
-      <nuxt-link class="btn" to="/settings/billing">
-        <SettingsIcon aria-hidden="true" />
-        {{ formatMessage(subscriptionPaymentFailedBannerMessages.action) }}
-      </nuxt-link>
-    </div>
-    <div
+      <template #title>
+        <span>{{ formatMessage(subscriptionPaymentFailedBannerMessages.title) }}</span>
+      </template>
+      <template #description>
+        <span>{{ formatMessage(subscriptionPaymentFailedBannerMessages.description) }}</span>
+      </template>
+      <template #actions>
+        <nuxt-link class="btn" to="/settings/billing">
+          <SettingsIcon aria-hidden="true" />
+          {{ formatMessage(subscriptionPaymentFailedBannerMessages.action) }}
+        </nuxt-link>
+      </template>
+    </PagewideBanner>
+    <PagewideBanner
       v-if="
         config.public.apiBaseUrl.startsWith('https://staging-api.modrinth.com') &&
         !cosmetics.hideStagingBanner
       "
-      class="site-banner site-banner--warning [&>*]:z-[6]"
+      variant="warning"
     >
-      <div class="site-banner__title">
-        <IssuesIcon aria-hidden="true" />
+      <template #title>
         <span>{{ formatMessage(stagingBannerMessages.title) }}</span>
-      </div>
-      <div class="site-banner__description">
+      </template>
+      <template #description>
         {{ formatMessage(stagingBannerMessages.description) }}
-      </div>
-      <div class="site-banner__actions">
-        <Button transparent icon-only :action="hideStagingBanner" aria-label="Close banner"
-          ><XIcon aria-hidden="true"
-        /></Button>
-      </div>
-    </div>
-    <div
-      v-if="generatedStateErrors && generatedStateErrors.length > 0"
-      class="site-banner site-banner--warning [&>*]:z-[6]"
-    >
-      <div class="site-banner__title">
-        <IssuesIcon aria-hidden="true" />
+      </template>
+      <template #actions_right>
+        <Button transparent icon-only aria-label="Close" @click="hideStagingBanner">
+          <XIcon aria-hidden="true" />
+        </Button>
+      </template>
+    </PagewideBanner>
+    <PagewideBanner v-if="generatedStateErrors?.length" variant="error">
+      <template #title>
         <span>{{ formatMessage(failedToBuildBannerMessages.title) }}</span>
-      </div>
-      <div class="site-banner__description">
+      </template>
+      <template #description>
         {{
           formatMessage(failedToBuildBannerMessages.description, {
             errors: generatedStateErrors,
             url: config.public.apiBaseUrl,
           })
         }}
-      </div>
-    </div>
+      </template>
+    </PagewideBanner>
     <header
       class="experimental-styles-within desktop-only relative z-[5] mx-auto grid max-w-[1280px] grid-cols-[1fr_auto] items-center gap-2 px-6 py-4 lg:grid-cols-[auto_1fr_auto]"
     >
@@ -692,7 +706,14 @@ import {
   GitHubIcon,
   ScaleIcon,
 } from "@modrinth/assets";
-import { Button, ButtonStyled, OverflowMenu, Avatar, commonMessages } from "@modrinth/ui";
+import {
+  Button,
+  ButtonStyled,
+  OverflowMenu,
+  PagewideBanner,
+  Avatar,
+  commonMessages,
+} from "@modrinth/ui";
 import { isAdmin, isStaff } from "@modrinth/utils";
 import { errors as generatedStateErrors } from "~/generated/state.json";
 
@@ -720,8 +741,13 @@ const basePopoutId = useId();
 
 const verifyEmailBannerMessages = defineMessages({
   title: {
-    id: "layout.banner.verify-email.title",
-    defaultMessage: "For security purposes, please verify your email address on Modrinth.",
+    id: "layout.banner.account-action",
+    defaultMessage: "Account action required",
+  },
+  description: {
+    id: "layout.banner.verify-email.description",
+    defaultMessage:
+      "For security reasons, Modrinth needs you to verify the email address associated with your account.",
   },
   action: {
     id: "layout.banner.verify-email.action",
@@ -731,8 +757,13 @@ const verifyEmailBannerMessages = defineMessages({
 
 const addEmailBannerMessages = defineMessages({
   title: {
-    id: "layout.banner.add-email.title",
-    defaultMessage: "For security purposes, please enter your email on Modrinth.",
+    id: "layout.banner.account-action",
+    defaultMessage: "Account action required",
+  },
+  description: {
+    id: "layout.banner.add-email.description",
+    defaultMessage:
+      "For security reasons, Modrinth needs you to register an email address to your account.",
   },
   action: {
     id: "layout.banner.add-email.button",
@@ -743,8 +774,12 @@ const addEmailBannerMessages = defineMessages({
 const subscriptionPaymentFailedBannerMessages = defineMessages({
   title: {
     id: "layout.banner.subscription-payment-failed.title",
+    defaultMessage: "Billing action required.",
+  },
+  description: {
+    id: "layout.banner.subscription-payment-failed.description",
     defaultMessage:
-      "Your subscription failed to renew. Please update your payment method to prevent losing access.",
+      "One or more subscriptions failed to renew. Please update your payment method to prevent losing access!",
   },
   action: {
     id: "layout.banner.subscription-payment-failed.button",
@@ -755,7 +790,7 @@ const subscriptionPaymentFailedBannerMessages = defineMessages({
 const stagingBannerMessages = defineMessages({
   title: {
     id: "layout.banner.staging.title",
-    defaultMessage: "You’re viewing Modrinth’s staging environment.",
+    defaultMessage: "You’re viewing Modrinth’s staging environment",
   },
   description: {
     id: "layout.banner.staging.description",
@@ -1347,72 +1382,6 @@ const footerLinks = [
   }
 }
 
-.email-nag {
-  z-index: 6;
-  position: relative;
-  background-color: var(--color-raised-bg);
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 1rem;
-  padding: 0.5rem 1rem;
-}
-
-.site-banner--warning {
-  // On some pages, there's gradient backgrounds that seep underneath
-  // the banner, so we need to add a solid color underlay.
-  background-color: black;
-  border-bottom: 2px solid var(--color-red);
-  display: grid;
-  gap: 0.5rem;
-  grid-template: "title actions" "description actions";
-  padding-block: var(--gap-xl);
-  padding-inline: max(calc((100% - 80rem) / 2 + var(--gap-md)), var(--gap-xl));
-  z-index: 4;
-  position: relative;
-
-  &::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background-color: var(--color-red-bg);
-    z-index: 5;
-  }
-
-  .site-banner__title {
-    grid-area: title;
-    display: flex;
-    gap: 0.5rem;
-    align-items: center;
-    font-weight: bold;
-    font-size: var(--font-size-md);
-    color: var(--color-contrast);
-
-    svg {
-      color: var(--color-red);
-      width: 1.5rem;
-      height: 1.5rem;
-      flex-shrink: 0;
-    }
-  }
-
-  .site-banner__description {
-    grid-area: description;
-  }
-
-  .site-banner__actions {
-    grid-area: actions;
-  }
-
-  a {
-    color: var(--color-red);
-  }
-}
-
 @media (max-width: 1200px) {
   .app-btn {
     display: none;
diff --git a/apps/frontend/src/locales/en-US/index.json b/apps/frontend/src/locales/en-US/index.json
index 4e3662765..5e1ecbe68 100644
--- a/apps/frontend/src/locales/en-US/index.json
+++ b/apps/frontend/src/locales/en-US/index.json
@@ -344,35 +344,38 @@
   "layout.avatar.alt": {
     "message": "Your avatar"
   },
+  "layout.banner.account-action": {
+    "message": "Account action required"
+  },
   "layout.banner.add-email.button": {
     "message": "Visit account settings"
   },
-  "layout.banner.add-email.title": {
-    "message": "For security purposes, please enter your email on Modrinth."
-  },
   "layout.banner.build-fail.description": {
     "message": "This deploy of Modrinth's frontend failed to generate state from the API. This may be due to an outage or an error in configuration. Rebuild when the API is available. Error codes: {errors}; Current API URL is: {url}"
   },
   "layout.banner.build-fail.title": {
-    "message": "Error generating state from API when building."
+    "message": "Error generating state from API when building"
   },
   "layout.banner.staging.description": {
     "message": "The staging environment is completely separate from the production Modrinth database. This is used for testing and debugging purposes, and may be running in-development versions of the Modrinth backend or frontend newer than the production instance."
   },
   "layout.banner.staging.title": {
-    "message": "You’re viewing Modrinth’s staging environment."
+    "message": "You’re viewing Modrinth’s staging environment"
   },
   "layout.banner.subscription-payment-failed.button": {
     "message": "Update billing info"
   },
   "layout.banner.subscription-payment-failed.title": {
-    "message": "Your subscription failed to renew. Please update your payment method to prevent losing access."
+    "message": "Billing action required"
+  },
+  "layout.banner.subscription-payment-failed.description": {
+    "message": "One or more subscriptions failed to renew. Please update your payment method to prevent losing access!"
   },
   "layout.banner.verify-email.action": {
     "message": "Re-send verification email"
   },
-  "layout.banner.verify-email.title": {
-    "message": "For security purposes, please verify your email address on Modrinth."
+  "layout.banner.verify-email.description": {
+    "message": "For security reasons, Modrinth needs you to verify the email address associated with your account."
   },
   "layout.footer.about": {
     "message": "About"
diff --git a/apps/frontend/tailwind.config.js b/apps/frontend/tailwind.config.ts
similarity index 89%
rename from apps/frontend/tailwind.config.js
rename to apps/frontend/tailwind.config.ts
index 6efbe1fb0..9c9a51676 100644
--- a/apps/frontend/tailwind.config.js
+++ b/apps/frontend/tailwind.config.ts
@@ -1,5 +1,6 @@
-/** @type {import('tailwindcss').Config} */
-const config = {
+import type { Config } from "tailwindcss";
+
+const config: Config = {
   content: [
     "./src/components/**/*.{js,vue,ts}",
     "./src/layouts/**/*.vue",
@@ -36,6 +37,23 @@ const config = {
           purple: "var(--color-purple-bg)",
           raised: "var(--color-raised-bg)",
         },
+        banners: {
+          error: {
+            bg: "var(--banner-error-bg)",
+            text: "var(--banner-error-text)",
+            border: "var(--banner-error-border)",
+          },
+          warning: {
+            bg: "var(--banner-warning-bg)",
+            text: "var(--banner-warning-text)",
+            border: "var(--banner-warning-border)",
+          },
+          info: {
+            bg: "var(--banner-info-bg)",
+            text: "var(--banner-info-text)",
+            border: "var(--banner-info-border)",
+          },
+        },
         highlight: {
           DEFAULT: "var(--color-brand-highlight)",
           red: "var(--color-red-highlight)",
@@ -126,6 +144,7 @@ const config = {
       backgroundImage: {
         mazeBg: "var(--landing-maze-bg)",
         mazeGradientBg: "var(--landing-maze-gradient-bg)",
+        // @ts-ignore
         landing: {
           mazeOuterBg: "var(--landing-maze-outer-bg)",
           colorHeading: "var(--landing-color-heading)",
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 901b482c6..899a89320 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -71,6 +71,7 @@ export { default as Breadcrumbs } from './nav/Breadcrumbs.vue'
 export { default as NavItem } from './nav/NavItem.vue'
 export { default as NavRow } from './nav/NavRow.vue'
 export { default as NavStack } from './nav/NavStack.vue'
+export { default as PagewideBanner } from './nav/PagewideBanner.vue'
 
 // Project
 export { default as NewProjectCard } from './project/NewProjectCard.vue'
diff --git a/packages/ui/src/components/nav/PagewideBanner.vue b/packages/ui/src/components/nav/PagewideBanner.vue
new file mode 100644
index 000000000..caafdf1fa
--- /dev/null
+++ b/packages/ui/src/components/nav/PagewideBanner.vue
@@ -0,0 +1,82 @@
+<template>
+  <div
+    :class="['banner-grid relative border-b-2 border-solid border-0', containerClasses[variant]]"
+  >
+    <div
+      :class="[
+        'grid-area-[title] flex items-center gap-2 font-bold text-[var(--font-size-md)]',
+        iconClasses[variant],
+      ]"
+    >
+      <IssuesIcon
+        v-if="variant === 'warning' || variant === 'error'"
+        aria-hidden="true"
+        class="w-6 h-6 flex-shrink-0"
+      />
+      <InfoIcon v-if="variant === 'info'" aria-hidden="true" class="w-6 h-6 flex-shrink-0" />
+      <slot name="title" />
+    </div>
+
+    <div class="grid-area-[description] flex flex-col gap-[var(--gap-md)]">
+      <slot name="description" />
+    </div>
+
+    <div v-if="$slots.actions" class="grid-area-[actions]">
+      <slot name="actions" />
+    </div>
+
+    <div v-if="$slots.actions_right" class="grid-area-[actions_right]">
+      <slot name="actions_right" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { InfoIcon, IssuesIcon } from '@modrinth/assets'
+
+defineProps<{
+  variant: 'error' | 'warning' | 'info'
+}>()
+
+const containerClasses = {
+  error: 'bg-banners-error-bg text-banners-error-text border-banners-error-border',
+  warning: 'bg-banners-warning-bg text-banners-warning-text border-banners-warning-border',
+  info: 'bg-banners-info-bg text-banners-info-text border-banners-info-border',
+}
+
+const iconClasses = {
+  error: 'text-brand-red',
+  warning: 'text-brand-orange',
+  info: 'text-brand-blue',
+}
+</script>
+
+<style scoped>
+.banner-grid {
+  display: grid;
+  gap: 0.5rem;
+  grid-template-areas:
+    'title         actions_right'
+    'description   actions_right'
+    'actions       actions_right';
+  padding-block: var(--gap-xl);
+  padding-inline: max(calc((100% - 80rem) / 2 + var(--gap-md)), var(--gap-xl));
+}
+
+.grid-area-\[title\] {
+  grid-area: title;
+}
+.grid-area-\[description\] {
+  grid-area: description;
+}
+.grid-area-\[actions\] {
+  grid-area: actions;
+}
+.grid-area-\[actions_right\] {
+  grid-area: actions_right;
+}
+
+.banner-grid a {
+  @apply underline text-current;
+}
+</style>