Massively improved moderator message visibility (#754)

Co-authored-by: Prospector <prospectordev@gmail.com>

components/ui/ProjectCard.vue

@@ -12,8 +12,16 @@
             <h2 class="title">
               <nuxt-link
                 :to="`/${$getProjectTypeForUrl(type, categories)}/${id}`"
-                >{{ name }}</nuxt-link
               >
+                <IssuesIcon
+                  v-if="hasModMessage"
+                  v-tooltip="
+                    'Project has a message from the moderators. View the project to see more.'
+                  "
+                  aria-label="Project has a message from the moderators. View the project to see more."
+                />
+                {{ name }}
+              </nuxt-link>
             </h2>
             <p v-if="author" class="author">
               by
@@ -155,6 +163,7 @@ import Categories from '~/components/ui/search/Categories'
 import Badge from '~/components/ui/Badge'
 
 import InfoIcon from '~/assets/images/utils/info.svg?inline'
+import IssuesIcon from '~/assets/images/utils/issues.svg?inline'
 import CalendarIcon from '~/assets/images/utils/calendar.svg?inline'
 import EditIcon from '~/assets/images/utils/updated.svg?inline'
 import DownloadIcon from '~/assets/images/utils/download.svg?inline'
@@ -168,6 +177,7 @@ export default {
     Categories,
     Badge,
     InfoIcon,
+    IssuesIcon,
     CalendarIcon,
     EditIcon,
     DownloadIcon,
@@ -227,6 +237,10 @@ export default {
       type: String,
       default: null,
     },
+    hasModMessage: {
+      type: Boolean,
+      default: false,
+    },
     serverSide: {
       type: String,
       required: false,
@@ -301,6 +315,13 @@ export default {
           color: var(--color-text-dark);
           font-size: var(--font-size-xl);
           word-wrap: break-word;
+
+          svg {
+            width: auto;
+            color: var(--color-badge-yellow-text);
+            height: 1.5rem;
+            margin-bottom: -0.25rem;
+          }
         }
 
         .author {

pages/_type/_id.vue

@@ -199,28 +199,53 @@
             <VersionBadge v-else color="gray" :type="project.status" />
           </p>
           <div class="message">
+            <p v-if="project.status === 'rejected'">
+              Your project has been rejected by Modrinth's staff. In most cases,
+              you can resubmit for review after addressing the staff's message,
+              which is below. Do not resubmit until you've addressed the message
+              from the moderators!
+            </p>
             <p v-if="project.status === 'processing'">
               Your project is currently not viewable by people who are not part
               of your team. Please wait for our moderators to manually review
               your project to see if it abides by our
-              <nuxt-link to="/legal/rules">content rules!</nuxt-link>
+              <nuxt-link class="text-link" to="/legal/rules"
+                >content rules!
+              </nuxt-link>
             </p>
             <p v-if="project.status === 'draft'">
               Your project is currently not viewable by people who are not part
-              of your team. If your project is ready for review, click the
+              of your team. If you would like to publish your project, click the
-              button below to make your mod public!
+              button below to send your project in for review.
             </p>
-            <p v-if="project.moderator_message">
+            <div v-if="project.moderator_message">
-              {{ project.moderator_message.message }}
+              <hr class="card-divider" />
-            </p>
+              <div v-if="project.moderator_message.body">
-            <div
+                <h3 class="card-header">
-              v-if="project.moderator_message && project.moderator_message.body"
+                  Message from the Modrinth moderators:
-              v-highlightjs
+                </h3>
-              class="markdown-body"
+                <p
-              v-html="$xss($md.render(project.moderator_message.body))"
+                  v-if="project.moderator_message.message"
-            ></div>
+                  class="mod-message__title"
+                >
+                  {{ project.moderator_message.message }}
+                </p>
+                <div
+                  v-highlightjs
+                  class="markdown-body"
+                  v-html="$xss($md.render(project.moderator_message.body))"
+                />
+              </div>
+              <div v-else>
+                <h3 class="card-header">
+                  Message from the Modrinth moderators:
+                </h3>
+                <p>{{ project.moderator_message.message }}</p>
+              </div>
+              <hr class="card-divider" />
+            </div>
           </div>
-          <div class="buttons">
+          <div class="buttons status-buttons">
             <button
               v-if="
                 project.status === 'rejected' ||
@@ -243,7 +268,7 @@
             </button>
             <button
               v-if="project.status === 'approved'"
-              class="clear-mod-message iconified-button"
+              class="iconified-button"
               @click="clearMessage"
             >
               <ClearIcon />
@@ -261,10 +286,6 @@
               </li>
             </ul>
           </div>
-          <p v-if="project.status === 'rejected'">
-            Do not resubmit for review until you've addressed the moderator
-            message!
-          </p>
         </div>
         <div class="extra-info-desktop card">
           <template
@@ -460,9 +481,14 @@
             <div class="info">
               <div class="key">License</div>
               <div class="value uppercase">
-                <a class="text-link" :href="project.license.url || null">{{
+                <a
-                  project.license.id
+                  v-if="project.license.url"
-                }}</a>
+                  class="text-link"
+                  :href="project.license.url"
+                >
+                  {{ project.license.id }}
+                </a>
+                <span v-else>{{ project.license.id }}</span>
               </div>
             </div>
             <div
@@ -798,9 +824,14 @@
             <div class="info">
               <div class="key">License</div>
               <div class="value uppercase">
-                <a class="text-link" :href="project.license.url || null">{{
+                <a
-                  project.license.id
+                  v-if="project.license.url"
-                }}</a>
+                  class="text-link"
+                  :href="project.license.url"
+                >
+                  {{ project.license.id }}
+                </a>
+                <span v-else>{{ project.license.id }}</span>
               </div>
             </div>
             <div
@@ -1403,7 +1434,13 @@ export default {
   }
 }
 
-.clear-mod-message {
+.status-buttons {
   margin-top: var(--spacing-card-sm);
 }
+
+.mod-message__title {
+  font-weight: bold;
+  margin-bottom: var(--spacing-card-xs);
+  font-size: 1.125rem;
+}
 </style>

pages/user/_id.vue

@@ -197,11 +197,13 @@
             :client-side="project.client_side"
             :server-side="project.server_side"
             :status="
-              $auth.user &&
+              ($auth.user && $auth.user.id === user.id) ||
-              ($auth.user.role === 'admin' || $auth.user.role === 'moderator')
+              $auth.user.role === 'admin' ||
+              $auth.user.role === 'moderator'
                 ? project.status
                 : null
             "
+            :has-mod-message="project.moderator_message"
             :type="project.project_type"
           >
             <nuxt-link