Improve badges and work on a more unified color scheme for random colors (#756)

assets/images/utils/archive.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <rect x="2" y="4" width="20" height="5" rx="2"></rect>
+  <path d="M4 9v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9"></path>
+  <path d="M10 13h4"></path>
+
+</svg>

assets/images/utils/box.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path>
+  <polyline points="3.29 7 12 12 20.71 7"></polyline>
+  <line x1="12" y1="22" x2="12" y2="12"></line>
+
+</svg>

assets/styles/components.scss

@@ -27,35 +27,6 @@
   }
 }
 
-.badge {
-  max-height: 1rem;
-  border-radius: 1rem;
-  font-size: var(--font-size-xs);
-  font-weight: bold;
-  letter-spacing: 0.02rem;
-  padding: 0.25rem 0.5rem;
-
-  &.gray {
-    background-color: var(--color-badge-gray-bg);
-    color: var(--color-badge-gray-text);
-  }
-
-  &.red {
-    background-color: var(--color-badge-red-bg);
-    color: var(--color-badge-red-text);
-  }
-
-  &.green {
-    background-color: var(--color-badge-green-bg);
-    color: var(--color-badge-green-text);
-  }
-
-  &.yellow {
-    background-color: var(--color-badge-yellow-bg);
-    color: var(--color-badge-yellow-text);
-  }
-}
-
 .text-link {
   color: var(--color-link);
   text-decoration: underline;
@@ -532,7 +503,7 @@ tr.button-transparent {
 }
 
 .danger-button {
-  --background-color: var(--color-badge-red-bg);
+  --background-color: var(--color-special-red);
   --text-color: var(--color-brand-inverted);
 }
 
@@ -554,7 +525,7 @@ tr.button-transparent {
 }
 
 .known-error .multiselect__tags {
-  border-color: var(--color-badge-red-bg) !important;
+  border-color: var(--color-special-red) !important;
   background-color: var(--color-warning-bg) !important;
 
   &::placeholder {
@@ -898,7 +869,7 @@ tr.button-transparent {
 .text-input-wrapper.known-error,
 input.known-error,
 textarea.known-error {
-  outline: 2px solid var(--color-badge-red-bg);
+  outline: 2px solid var(--color-special-red);
   background-color: var(--color-warning-bg) !important;
 
   &::placeholder {
@@ -907,7 +878,7 @@ textarea.known-error {
 }
 
 .known-errors {
-  color: var(--color-badge-red-bg);
+  color: var(--color-special-red);
 
   ul {
     margin: 0;
@@ -1017,7 +988,7 @@ h1 {
       font-weight: bold;
 
       .required {
-        color: var(--color-badge-red-bg);
+        color: var(--color-special-red);
       }
     }
     .label__description {

assets/styles/global.scss

@@ -19,7 +19,8 @@ html {
   --color-text-inverted: var(--color-bg);
   --color-bg-inverted: var(--color-text);
 
-  --color-brand: #00af5c;
+  --color-brand-green: #00af5c;
+  --color-brand: var(--color-brand-green);
   --color-brand-highlight: rgba(0, 175, 92, 0.25);
   --color-brand-shadow: rgba(0, 175, 92, 0.7);
   --color-brand-inverted: #ffffff;
@@ -56,14 +57,12 @@ html {
   --color-link-hover: #1a76e7;
   --color-link-active: #146fd7;
 
-  --color-badge-gray-text: #646161;
+  --color-special-red: #cb2245;
-  --color-badge-gray-bg: #c8c1c1;
+  --color-special-orange: #e08325;
-  --color-badge-red-text: #6e1931;
+  --color-special-green: var(--color-brand-green);
-  --color-badge-red-bg: #db3162;
+  --color-special-blue: #1f68c0;
-  --color-badge-green-text: #184e38;
+  --color-special-purple: #8e32F3;
-  --color-badge-green-bg: #24a54e;
+  --color-special-gray: #595B61;
-  --color-badge-yellow-text: #755920;
-  --color-badge-yellow-bg: #f7bb43;
 
   --color-warning-bg: hsl(355, 70%, 88%);
   --color-warning-text: hsl(342, 70%, 35%);
@@ -107,7 +106,15 @@ html {
   --color-text-inverted: var(--color-bg);
   --color-bg-inverted: var(--color-text);
 
-  --color-brand: #1bd96a;
+  --color-special-red: #ff496e;
+  --color-special-orange: #ffa347;
+  --color-special-green: var(--color-brand-green);
+  --color-special-blue: #4F9CFF;
+  --color-special-purple: #C78AFF;
+  --color-special-gray: #9FA4B3;
+
+  --color-brand-green: #1bd96a;
+  --color-brand: var(--color-brand-green);
   --color-brand-highlight: rgba(27, 217, 106, 0.25);
   --color-brand-shadow: rgba(27, 217, 106, 0.7);
   --color-brand-inverted: #000;
@@ -141,15 +148,6 @@ html {
   --color-link-hover: #92c0f5;
   --color-link-active: #b5d5fd;
 
-  --color-badge-gray-bg: #646161;
-  --color-badge-gray-text: #c8c1c1;
-  --color-badge-red-text: #bd1a48;
-  --color-badge-red-bg: #db3162;
-  --color-badge-green-text: #1ebb7b;
-  --color-badge-green-bg: #24a54e;
-  --color-badge-yellow-text: #dba22d;
-  --color-badge-yellow-bg: #f7bb43;
-
   --color-warning-bg: hsl(355, 70%, 20%);
   --color-warning-text: hsl(342, 70%, 75%);
 

components/ui/Badge.vue

@@ -1,12 +1,55 @@
 <template>
-  <span :class="'version-badge ' + color">
+  <span :class="'version-badge ' + color + ' type--' + type">
-    <span class="circle" /> {{ type }}
+    <template v-if="color"
+      ><span class="circle" /> {{ $capitalizeString(type) }}</template
+    >
+    <template v-else-if="type === 'admin'"
+      ><ModrinthIcon /> Modrinth Team</template
+    >
+    <template v-else-if="type === 'moderator'"
+      ><ModeratorIcon /> Moderator</template
+    >
+    <template v-else-if="type === 'creator'"><CreatorIcon /> Creator</template>
+    <template v-else-if="type === 'approved'"><ListIcon /> Listed</template>
+    <template v-else-if="type === 'unlisted'"><EyeOffIcon /> Unlisted</template>
+    <template v-else-if="type === 'draft'"><DraftIcon /> Draft</template>
+    <template v-else-if="type === 'archived'"
+      ><ArchiveIcon /> Archived</template
+    >
+    <template v-else-if="type === 'rejected'"><CrossIcon /> Rejected</template>
+    <template v-else-if="type === 'processing'"
+      ><ProcessingIcon /> Under review</template
+    >
+    <template v-else
+      ><span class="circle" /> {{ $capitalizeString(type) }}</template
+    >
   </span>
 </template>
 
 <script>
+import ModrinthIcon from '~/assets/images/logo.svg?inline'
+import ModeratorIcon from '~/assets/images/sidebar/admin.svg?inline'
+import CreatorIcon from '~/assets/images/utils/box.svg?inline'
+import ListIcon from '~/assets/images/utils/list.svg?inline'
+import EyeOffIcon from '~/assets/images/utils/eye-off.svg?inline'
+import DraftIcon from '~/assets/images/utils/file-text.svg?inline'
+import CrossIcon from '~/assets/images/utils/x.svg?inline'
+import ArchiveIcon from '~/assets/images/utils/archive.svg?inline'
+import ProcessingIcon from '~/assets/images/utils/updated.svg?inline'
+
 export default {
   name: 'Badge',
+  components: {
+    ModrinthIcon,
+    ListIcon,
+    DraftIcon,
+    EyeOffIcon,
+    ModeratorIcon,
+    CreatorIcon,
+    CrossIcon,
+    ArchiveIcon,
+    ProcessingIcon,
+  },
   props: {
     type: {
       type: String,
@@ -14,7 +57,7 @@ export default {
     },
     color: {
       type: String,
-      required: true,
+      default: '',
     },
   },
 }
@@ -25,7 +68,9 @@ export default {
   display: flex;
   align-items: center;
   font-weight: bold;
-  text-transform: capitalize;
+  width: fit-content;
+  --badge-color: var(--color-special-gray);
+  color: var(--badge-color);
 
   .circle {
     width: 0.5rem;
@@ -33,46 +78,42 @@ export default {
     border-radius: 50%;
     display: inline-block;
     margin-right: 0.25rem;
+    background-color: var(--badge-color);
   }
 
-  &.custom-circle {
+  svg {
-    @media screen and (min-width: 560px) {
+    margin-right: 0.25rem;
-      .circle {
-        margin-left: auto;
-      }
-    }
   }
 
+  &.type--rejected,
   &.red {
-    color: var(--color-badge-red-text);
+    --badge-color: var(--color-special-red);
-
-    .circle {
-      background-color: var(--color-badge-red-bg);
-    }
   }
 
+  &.type--moderator,
+  &.type--processing,
+  &.orange {
+    --badge-color: var(--color-special-orange);
+  }
+
+  &.type--admin,
   &.green {
-    color: var(--color-badge-green-text);
+    --badge-color: var(--color-special-green);
-
-    .circle {
-      background-color: var(--color-brand);
-    }
   }
 
-  &.yellow {
+  &.type--creator,
-    color: var(--color-badge-yellow-text);
+  &.type--approved,
+  &.blue {
+    color: var(--color-special-blue);
+  }
 
-    .circle {
+  &.type--unlisted,
-      background-color: var(--color-badge-yellow-bg);
+  &.purple {
-    }
+    color: var(--color-special-purple);
   }
 
   &.gray {
-    color: var(--color-badge-gray-text);
+    --badge-color: var(--color-special-gray);
-
-    .circle {
-      background-color: var(--color-badge-gray-bg);
-    }
   }
 }
 </style>

components/ui/FileInput.vue

@@ -99,11 +99,11 @@ input {
 }
 
 .known-error label {
-  border-color: var(--color-badge-red-bg) !important;
+  border-color: var(--color-special-red) !important;
   background-color: var(--color-warning-bg) !important;
 
   span {
-    border-color: var(--color-badge-red-bg);
+    border-color: var(--color-special-red);
   }
 
   &::placeholder {

components/ui/ModalTransfer.vue

@@ -211,7 +211,7 @@ export default {
   }
 
   .invalid {
-    color: var(--color-badge-red-bg);
+    color: var(--color-special-red);
   }
 
   .confirm-text {

components/ui/ProjectCard.vue

@@ -134,22 +134,7 @@
         </div>
       </div>
       <div v-if="status" class="status">
-        <Badge
+        <Badge :type="status" />
-          v-if="status === 'approved'"
-          color="green custom-circle"
-          :type="status"
-        />
-        <Badge
-          v-else-if="status === 'processing' || status === 'archived'"
-          color="yellow custom-circle"
-          :type="status"
-        />
-        <Badge
-          v-else-if="status === 'rejected'"
-          color="red custom-circle"
-          :type="status"
-        />
-        <Badge v-else color="gray custom-circle" :type="status" />
       </div>
       <div class="buttons">
         <slot />
@@ -402,6 +387,8 @@ export default {
     }
 
     .status {
+      display: flex;
+      justify-content: right;
       margin-bottom: 0.5rem;
     }
 

layouts/default.vue

@@ -622,14 +622,6 @@ export default {
           width: auto;
         }
 
-        .badge {
-          margin-left: 0.25rem;
-          display: none;
-          @media screen and (min-width: 430px) {
-            display: unset;
-          }
-        }
-
         button {
           background: none;
           border: none;

pages/_type/_id.vue

@@ -179,24 +179,7 @@
           <div class="status-info"></div>
           <p>
             Your project is currently:
-            <VersionBadge
+            <Badge :type="project.status" />
-              v-if="project.status === 'approved'"
-              color="green"
-              :type="project.status"
-            />
-            <VersionBadge
-              v-else-if="
-                project.status === 'processing' || project.status === 'archived'
-              "
-              color="yellow"
-              :type="project.status"
-            />
-            <VersionBadge
-              v-else-if="project.status === 'rejected'"
-              color="red"
-              :type="project.status"
-            />
-            <VersionBadge v-else color="gray" :type="project.status" />
           </p>
           <div class="message">
             <p v-if="project.status === 'rejected'">
@@ -435,17 +418,17 @@
                   }}
                   {{ $formatVersion(version.game_versions) }}
                 </div>
-                <VersionBadge
+                <Badge
                   v-if="version.version_type === 'release'"
                   type="release"
                   color="green"
                 />
-                <VersionBadge
+                <Badge
                   v-else-if="version.version_type === 'beta'"
                   type="beta"
-                  color="yellow"
+                  color="orange"
                 />
-                <VersionBadge
+                <Badge
                   v-else-if="version.version_type === 'alpha'"
                   type="alpha"
                   color="red"
@@ -778,17 +761,17 @@
                   }}
                   {{ $formatVersion(version.game_versions) }}
                 </div>
-                <VersionBadge
+                <Badge
                   v-if="version.version_type === 'release'"
                   type="release"
                   color="green"
                 />
-                <VersionBadge
+                <Badge
                   v-else-if="version.version_type === 'beta'"
                   type="beta"
-                  color="yellow"
+                  color="orange"
                 />
-                <VersionBadge
+                <Badge
                   v-else-if="version.version_type === 'alpha'"
                   type="alpha"
                   color="red"
@@ -892,7 +875,7 @@ import OpenCollectiveIcon from '~/assets/images/external/opencollective.svg?inli
 import UnknownIcon from '~/assets/images/utils/unknown-donation.svg?inline'
 import ChevronRightIcon from '~/assets/images/utils/chevron-right.svg?inline'
 import Advertisement from '~/components/ads/Advertisement'
-import VersionBadge from '~/components/ui/Badge'
+import Badge from '~/components/ui/Badge'
 import Categories from '~/components/ui/search/Categories'
 import ModalReport from '~/components/ui/ModalReport'
 import NavRow from '~/components/ui/NavRow'
@@ -904,7 +887,7 @@ export default {
     Avatar,
     CopyCode,
     NavRow,
-    VersionBadge,
+    Badge,
     Advertisement,
     ModalReport,
     IssuesIcon,

pages/_type/_id/changelog.vue

@@ -182,18 +182,18 @@ export default {
   padding-left: 1.8rem;
 
   .changelog-bar {
-    --color: var(--color-badge-green-bg);
+    --color: var(--color-special-green);
 
     &.alpha {
-      --color: var(--color-badge-red-bg);
+      --color: var(--color-special-red);
     }
 
     &.release {
-      --color: var(--color-badge-green-bg);
+      --color: var(--color-special-green);
     }
 
     &.beta {
-      --color: var(--color-badge-yellow-bg);
+      --color: var(--color-special-orange);
     }
 
     left: 0;

pages/_type/_id/edit.vue

@@ -952,7 +952,7 @@ section.donations {
 }
 
 .required {
-  color: var(--color-badge-red-bg);
+  color: var(--color-special-red);
 }
 
 .vertical-input {

pages/_type/_id/settings.vue

@@ -95,7 +95,7 @@
         </div>
         <div class="side-buttons">
           <Badge v-if="member.accepted" type="accepted" color="green" />
-          <Badge v-else type="pending" color="yellow" />
+          <Badge v-else type="pending" color="orange" />
           <button
             class="dropdown-icon"
             @click="

pages/_type/_id/version.vue

@@ -234,7 +234,7 @@
                 v-else-if="version.version_type === 'beta'"
                 class="value"
                 type="beta"
-                color="yellow"
+                color="orange"
               />
               <VersionBadge
                 v-else-if="version.version_type === 'alpha'"
@@ -1125,7 +1125,7 @@ export default {
 }
 
 .required {
-  color: var(--color-badge-red-bg);
+  color: var(--color-special-red);
 }
 
 .version-header {

pages/_type/_id/versions.vue

@@ -55,7 +55,7 @@
           <VersionBadge
             v-else-if="version.version_type === 'beta'"
             type="beta"
-            color="yellow"
+            color="orange"
           />
           <VersionBadge
             v-else-if="version.version_type === 'alpha'"

pages/index.vue

@@ -359,13 +359,13 @@ export default {
 
             &.completed {
               svg {
-                color: var(--color-brand);
+                color: var(--color-special-green);
               }
             }
 
             &.in-progress {
               svg {
-                color: var(--color-badge-yellow-bg);
+                color: var(--color-special-orange);
               }
             }
 
@@ -373,7 +373,7 @@ export default {
               p {
                 user-select: none;
                 color: transparent;
-                text-shadow: 0 0 12px var(--color-badge-yellow-bg);
+                text-shadow: 0 0 12px var(--color-special-orange);
               }
             }
           }

pages/moderation.vue

@@ -9,26 +9,7 @@
         </p>
         <div class="status">
           <span>New project status: </span>
-          <Badge
+          <Badge :type="currentProject.newStatus" />
-            v-if="currentProject.newStatus === 'approved'"
-            color="green"
-            :type="currentProject.newStatus"
-          />
-          <Badge
-            v-else-if="
-              currentProject.newStatus === 'processing' ||
-              currentProject.newStatus === 'unlisted' ||
-              currentProject.newStatus === 'archived'
-            "
-            color="yellow"
-            :type="currentProject.newStatus"
-          />
-          <Badge
-            v-else-if="currentProject.newStatus === 'rejected'"
-            color="red"
-            :type="currentProject.newStatus"
-          />
-          <Badge v-else color="gray" :type="currentProject.newStatus" />
         </div>
         <input
           v-model="currentProject.moderation_message"
@@ -155,7 +136,7 @@
                 class="markdown-body"
                 v-html="$xss($md.render(item.body))"
               />
-              <Badge :type="`Marked as ${item.report_type}`" color="yellow" />
+              <Badge :type="`Marked as ${item.report_type}`" color="orange" />
             </div>
             <div class="actions">
               <button class="iconified-button" @click="deleteReport(index)">

pages/user/_id.vue

@@ -92,13 +92,11 @@
           </template>
           <template v-else>
             <div class="sidebar__item">
-              <Badge v-if="user.role === 'admin'" type="admin" color="red" />
               <Badge
-                v-else-if="user.role === 'moderator'"
+                v-if="user.role === 'admin' || user.role === 'moderator'"
-                type="moderator"
+                :type="user.role"
-                color="yellow"
               />
-              <Badge v-else type="developer" color="green" />
+              <Badge v-else-if="projects.length > 0" type="creator" />
             </div>
             <span v-if="user.bio" class="sidebar__item bio">{{
               user.bio

plugins/shorthands.js

@@ -17,6 +17,7 @@ export default (ctx, inject) => {
     return obj
   })
   inject('formatNumber', formatNumber)
+  inject('capitalizeString', capitalizeString)
   inject('formatMoney', (number) => '$' + formatNumber(number.toFixed(2)))
   inject('formatVersion', (versionsArray) =>
     formatVersions(versionsArray, ctx.store)
@@ -199,18 +200,22 @@ export const formatBytes = (bytes, decimals = 2) => {
   return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
 }
 
+export const capitalizeString = (name) => {
+  return name.charAt(0).toUpperCase() + name.slice(1)
+}
+
 export const formatWallet = (name) => {
   if (name === 'paypal') {
     return 'PayPal'
   }
-  return name.charAt(0).toUpperCase() + name.slice(1)
+  return capitalizeString(name)
 }
 
 export const formatProjectType = (name) => {
   if (name === 'resourcepack') {
     return 'Resource Pack'
   }
-  return name.charAt(0).toUpperCase() + name.slice(1)
+  return capitalizeString(name)
 }
 
 export const formatCategory = (name) => {
@@ -235,11 +240,11 @@ export const formatCategory = (name) => {
   } else if (name === 'kitchen-sink') {
     return 'Kitchen Sink'
   }
-  return name.charAt(0).toUpperCase() + name.slice(1)
+  return capitalizeString(name)
 }
 
 export const formatCategoryHeader = (name) => {
-  return name.charAt(0).toUpperCase() + name.slice(1)
+  return capitalizeString(name)
 }
 
 export const formatVersions = (versionArray, store) => {