Add colors for new loaders, reduce utility redundancy (#3820)

* Add colors to some newer loaders

* Make loader formatting consistent everywhere, remove redundant utilities

apps/frontend/src/pages/dashboard/notifications.vue

@@ -26,7 +26,7 @@
         v-if="notifTypes.length > 1"
         v-model="selectedType"
         :items="notifTypes"
-        :format-label="(x) => (x === 'all' ? 'All' : $formatProjectType(x).replace('_', ' ') + 's')"
+        :format-label="(x) => (x === 'all' ? 'All' : formatProjectType(x).replace('_', ' ') + 's')"
         :capitalize="false"
       />
       <p v-if="pending">Loading notifications...</p>
@@ -58,6 +58,7 @@
 <script setup>
 import { Button, Pagination, Chips } from "@modrinth/ui";
 import { HistoryIcon, CheckCheckIcon } from "@modrinth/assets";
+import { formatProjectType } from "@modrinth/utils";
 import {
   fetchExtraNotificationData,
   groupNotifications,

apps/frontend/src/pages/dashboard/projects.vue

@@ -239,7 +239,7 @@
             <div>
               <nuxt-link
                 tabindex="-1"
-                :to="`/${$getProjectTypeForUrl(project.project_type, project.loaders)}/${
+                :to="`/${getProjectTypeForUrl(project.project_type, project.loaders)}/${
                   project.slug ? project.slug : project.id
                 }`"
               >
@@ -261,7 +261,7 @@
 
                 <nuxt-link
                   class="hover-link wrap-as-needed"
-                  :to="`/${$getProjectTypeForUrl(project.project_type, project.loaders)}/${
+                  :to="`/${getProjectTypeForUrl(project.project_type, project.loaders)}/${
                     project.slug ? project.slug : project.id
                   }`"
                 >
@@ -275,7 +275,7 @@
             </div>
 
             <div>
-              {{ $formatProjectType($getProjectTypeForUrl(project.project_type, project.loaders)) }}
+              {{ formatProjectType(getProjectTypeForUrl(project.project_type, project.loaders)) }}
             </div>
 
             <div>
@@ -285,7 +285,7 @@
             <div>
               <ButtonStyled circular>
                 <nuxt-link
-                  :to="`/${$getProjectTypeForUrl(project.project_type, project.loaders)}/${
+                  :to="`/${getProjectTypeForUrl(project.project_type, project.loaders)}/${
                     project.slug ? project.slug : project.id
                   }/settings`"
                 >
@@ -321,9 +321,11 @@ import {
   ProjectStatusBadge,
   commonMessages,
 } from "@modrinth/ui";
+import { formatProjectType } from "@modrinth/utils";
 
 import Modal from "~/components/ui/Modal.vue";
 import ModalCreation from "~/components/ui/ModalCreation.vue";
+import { getProjectTypeForUrl } from "~/helpers/projects.js";
 
 export default defineNuxtComponent({
   components: {
@@ -395,6 +397,8 @@ export default defineNuxtComponent({
     this.DELETE_PROJECT = 1 << 7;
   },
   methods: {
+    getProjectTypeForUrl,
+    formatProjectType,
     updateDescending() {
       this.descending = !this.descending;
       this.projects = this.updateSort(this.projects, this.sortBy, this.descending);

apps/frontend/src/pages/dashboard/revenue/transfers.vue

@@ -76,7 +76,7 @@
             </span>
             <template v-if="payout.method">
               <span>⋅</span>
-              <span>{{ $formatWallet(payout.method) }} ({{ payout.method_address }})</span>
+              <span>{{ formatWallet(payout.method) }} ({{ payout.method_address }})</span>
             </template>
           </div>
         </div>
@@ -95,7 +95,7 @@
 </template>
 <script setup>
 import { XIcon, PayPalIcon, UnknownIcon } from "@modrinth/assets";
-import { capitalizeString } from "@modrinth/utils";
+import { capitalizeString, formatWallet } from "@modrinth/utils";
 import { Badge, Breadcrumbs, DropdownSelect } from "@modrinth/ui";
 import dayjs from "dayjs";
 import TremendousIcon from "~/assets/images/external/tremendous.svg?component";

apps/frontend/src/pages/dashboard/revenue/withdraw.vue

@@ -139,8 +139,8 @@
       <template v-if="knownErrors.length === 0 && amount">
         <Checkbox v-if="fees > 0" v-model="agreedFees" description="Consent to fee">
           I acknowledge that an estimated
-          {{ $formatMoney(fees) }} will be deducted from the amount I receive to cover
-          {{ $formatWallet(selectedMethod.type) }} processing fees.
+          {{ formatMoney(fees) }} will be deducted from the amount I receive to cover
+          {{ formatWallet(selectedMethod.type) }} processing fees.
         </Checkbox>
         <Checkbox v-model="agreedTransfer" description="Confirm transfer">
           <template v-if="selectedMethod.type === 'tremendous'">
@@ -149,7 +149,7 @@
           </template>
           <template v-else>
             I confirm that I am initiating a transfer to the following
-            {{ $formatWallet(selectedMethod.type) }} account: {{ withdrawAccount }}
+            {{ formatWallet(selectedMethod.type) }} account: {{ withdrawAccount }}
           </template>
         </Checkbox>
         <Checkbox v-model="agreedTerms" class="rewards-checkbox">
@@ -198,6 +198,7 @@ import {
 } from "@modrinth/assets";
 import { Chips, Checkbox, Breadcrumbs } from "@modrinth/ui";
 import { all } from "iso-3166-1";
+import { formatMoney, formatWallet } from "@modrinth/utils";
 import VenmoIcon from "~/assets/images/external/venmo.svg?component";
 
 const auth = await useAuth();
@@ -360,9 +361,7 @@ async function withdraw() {
       text:
         selectedMethod.value.type === "tremendous"
           ? "An email has been sent to your account with further instructions on how to redeem your payout!"
-          : `Payment has been sent to your ${data.$formatWallet(
-              selectedMethod.value.type,
-            )} account!`,
+          : `Payment has been sent to your ${formatWallet(selectedMethod.value.type)} account!`,
       type: "success",
     });
   } catch (err) {