From 153d77359f8c58b02599f94d63bdf5d105154128 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Emma=20Cypress=20=E2=9A=98?= <emmaffle@modrinth.com>
Date: Fri, 1 Jul 2022 15:20:35 +0000
Subject: [PATCH] Add more banners and warnings for some statuses & other fixes
 (#558)

* Add more banners and warnings for some statuses & other fixes

* Remove unused css
---
 assets/styles/components.scss |  5 ++--
 assets/styles/global.scss     |  8 ++++++
 pages/_type/_id.vue           | 50 ++++++++++++++++++++++++++++++++---
 pages/_type/_id/version.vue   | 20 ++++++++++++++
 pages/create/project.vue      | 22 ++++++++++++++-
 pages/search.vue              |  6 ++++-
 6 files changed, 103 insertions(+), 8 deletions(-)

diff --git a/assets/styles/components.scss b/assets/styles/components.scss
index b9890ce05..413ec3dab 100644
--- a/assets/styles/components.scss
+++ b/assets/styles/components.scss
@@ -810,10 +810,11 @@ label {
   // box-shadow: var(--shadow-card);
 
   &.warning {
+    border-left: 0.5rem solid var(--color-banner-side);
     padding: 1.5rem;
     line-height: 1.5;
-    background-color: var(--color-warning-bg);
-    color: var(--color-warning-text);
+    background-color: var(--color-banner-bg);
+    color: var(--color-banner-text);
     min-height: 0;
 
     a {
diff --git a/assets/styles/global.scss b/assets/styles/global.scss
index 28293c4f1..491a0697c 100644
--- a/assets/styles/global.scss
+++ b/assets/styles/global.scss
@@ -76,6 +76,10 @@ html {
   --color-warning-text: hsl(358, 57%, 20%);
   --color-warning-bg: hsl(358, 57%, 80%);
 
+  --color-banner-text: hsl(0, 11%, 16%);
+  --color-banner-bg: hsl(356, 59%, 77%);
+  --color-banner-side: hsl(357, 78%, 40%);
+
   --color-block-quote: var(--color-tooltip-bg);
   --color-header-underline: var(--color-tooltip-text);
   --color-hr: var(--color-text);
@@ -157,6 +161,10 @@ html {
   --color-warning-text: hsl(358, 57%, 85%);
   --color-warning-bg: hsl(358, 57%, 25%);
 
+  --color-banner-text: hsl(0, 100%, 96%);
+  --color-banner-bg: hsl(356, 18%, 18%);
+  --color-banner-side: hsl(357, 78%, 40%);
+
   --color-block-quote: var(--color-code-bg);
   --color-header-underline: var(--color-tooltip-text);
   --color-hr: var(--color-text);
diff --git a/pages/_type/_id.vue b/pages/_type/_id.vue
index 5d8999ed1..94797d760 100644
--- a/pages/_type/_id.vue
+++ b/pages/_type/_id.vue
@@ -183,6 +183,10 @@
             your team. If your project is ready for review, click the button
             below to make your mod public!
           </p>
+          <p v-if="project.status === 'abandoned'">
+            Modrinth's moderators have marked your project as abandoned. If you
+            wish to remove this status, please resubmit!
+          </p>
           <p v-if="project.moderator_message">
             {{ project.moderator_message.message }}
           </p>
@@ -195,7 +199,11 @@
         </div>
         <div class="buttons">
           <button
-            v-if="project.status === 'rejected'"
+            v-if="
+              project.status === 'rejected' ||
+              project.status === 'unlisted' ||
+              project.status === 'abandoned'
+            "
             class="iconified-button brand-button-colors"
             @click="submitForReview"
           >
@@ -478,8 +486,42 @@
       />
       <div class="content">
         <div class="project-main">
-          <div v-if="project.project_type === 'modpack'" class="card warning">
-            To install this modpack, visit
+          <div
+            v-if="project.status === 'unlisted'"
+            class="card warning"
+            aria-label="Warning"
+          >
+            {{ project.title }} is not viewable in search — either because the
+            author has marked it as such or because it has been found to be in
+            violation of one of
+            <nuxt-link to="/legal/rules">Modrinth's project rules</nuxt-link>.
+            Modrinth makes no guarantees as to whether {{ project.title }} is
+            safe for use in a multiplayer context.
+          </div>
+          <div
+            v-if="project.status === 'archived'"
+            class="card warning"
+            aria-label="Warning"
+          >
+            {{ project.title }} has been archived by the project author.
+            {{ project.title }} will not receive any further updates unless the
+            author decides to unarchive the project.
+          </div>
+          <div
+            v-if="project.status === 'abandoned'"
+            class="card warning"
+            aria-label="Warning"
+          >
+            {{ project.title }} has been marked as abandoned by Modrinth's
+            moderators. {{ project.title }} will not receive any further updates
+            unless the author decides to return.
+          </div>
+          <div
+            v-if="project.project_type === 'modpack'"
+            class="card warning"
+            aria-label="Warning"
+          >
+            To install {{ project.title }}, visit
             <a
               href="https://docs.modrinth.com/docs/modpacks/playing_modpacks/"
               target="_blank"
@@ -487,7 +529,7 @@
             >
             which provides instructions on using
             <a href="https://atlauncher.com/about" target="_blank">ATLauncher</a
-            >, <a href="https://multimc.org/" target="_blank">MultiMC</a> and
+            >, <a href="https://multimc.org/" target="_blank">MultiMC</a>, and
             <a href="https://polymc.org/" target="_blank">PolyMC</a>.
           </div>
           <div class="card styled-tabs">
diff --git a/pages/_type/_id/version.vue b/pages/_type/_id/version.vue
index 9de1595f8..31aa4c033 100644
--- a/pages/_type/_id/version.vue
+++ b/pages/_type/_id/version.vue
@@ -554,6 +554,26 @@
         <span v-if="mode === 'edit' || mode === 'create'">
           You may upload multiple files, but this should only be used for cases
           like sources or Javadocs.
+          <p
+            v-if="project.project_type.toLowerCase() === 'modpack'"
+            aria-label="Warning"
+          >
+            Modpack support is currently in alpha, and you may encounter issues.
+            Our documentation includes instructions on
+            <a
+              href="https://docs.modrinth.com/docs/modpacks/creating_modpacks/"
+              target="_blank"
+              class="text-link"
+              >creating modpacks</a
+            >. Join us on
+            <a
+              href="https://discord.gg/EUHuJHt"
+              target="_blank"
+              class="text-link"
+              >Discord</a
+            >
+            for support.
+          </p>
         </span>
       </section>
     </div>
diff --git a/pages/create/project.vue b/pages/create/project.vue
index 9f05d0bd1..9950a6a29 100644
--- a/pages/create/project.vue
+++ b/pages/create/project.vue
@@ -549,6 +549,26 @@
               You may upload multiple files, but this should only be used for
               cases like sources or Javadocs.
             </span>
+            <p
+              v-if="projectType.toLowerCase() === 'modpack'"
+              aria-label="Warning"
+            >
+              Modpack support is currently in alpha, and you may encounter
+              issues. Our documentation includes instructions on
+              <a
+                href="https://docs.modrinth.com/docs/modpacks/creating_modpacks/"
+                target="_blank"
+                class="text-link"
+                >creating modpacks</a
+              >. Join us on
+              <a
+                href="https://discord.gg/EUHuJHt"
+                target="_blank"
+                class="text-link"
+                >Discord</a
+              >
+              for support.
+            </p>
             <StatelessFileInput
               :class="{
                 'known-error':
@@ -1270,7 +1290,7 @@ export default {
               item: `gallery-${index}`,
               featured: false,
               title: x.title,
-              description: x.description,
+              description: x.description || null,
             }
           }),
         })
diff --git a/pages/search.vue b/pages/search.vue
index 33f89c640..0d94b19af 100644
--- a/pages/search.vue
+++ b/pages/search.vue
@@ -159,7 +159,11 @@
       </section>
     </aside>
     <section class="normal-page__content">
-      <div v-if="projectType === 'modpack'" class="card warning">
+      <div
+        v-if="projectType === 'modpack'"
+        class="card warning"
+        aria-label="Warning"
+      >
         Modpack support is currently in alpha, and you may encounter issues. Our
         documentation includes instructions on
         <a