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

components/ui/Badge.vue

@@ -1,12 +1,55 @@
 <template>
-  <span :class="'version-badge ' + color">
-    <span class="circle" /> {{ type }}
+  <span :class="'version-badge ' + color + ' type--' + 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 {
-    @media screen and (min-width: 560px) {
-      .circle {
-        margin-left: auto;
-      }
-    }
+  svg {
+    margin-right: 0.25rem;
   }
 
+  &.type--rejected,
   &.red {
-    color: var(--color-badge-red-text);
-
-    .circle {
-      background-color: var(--color-badge-red-bg);
-    }
+    --badge-color: var(--color-special-red);
   }
 
+  &.type--moderator,
+  &.type--processing,
+  &.orange {
+    --badge-color: var(--color-special-orange);
+  }
+
+  &.type--admin,
   &.green {
-    color: var(--color-badge-green-text);
-
-    .circle {
-      background-color: var(--color-brand);
-    }
+    --badge-color: var(--color-special-green);
   }
 
-  &.yellow {
-    color: var(--color-badge-yellow-text);
+  &.type--creator,
+  &.type--approved,
+  &.blue {
+    color: var(--color-special-blue);
+  }
 
-    .circle {
-      background-color: var(--color-badge-yellow-bg);
-    }
+  &.type--unlisted,
+  &.purple {
+    color: var(--color-special-purple);
   }
 
   &.gray {
-    color: var(--color-badge-gray-text);
-
-    .circle {
-      background-color: var(--color-badge-gray-bg);
-    }
+    --badge-color: var(--color-special-gray);
   }
 }
 </style>