CMP Update Hotfixes (#729)

* Remove WIP for getting paid

* Fix beta badge border

* Update money formatting

* Add required "not affiliated with Mojang" notice

* Replace search video on home page

assets/styles/components.scss

@@ -920,7 +920,7 @@ h1 {
 
 .beta-badge {
   font-size: 0.7em;
-  padding: 0.25rem 0.5rem;
+  padding: 0.2rem 0.4rem;
   background-color: transparent;
   box-sizing: border-box;
   border: 2px solid var(--color-text);
@@ -934,7 +934,7 @@ h1 {
   .beta-badge {
     background-color: var(--color-button-text-active);
     box-sizing: border-box;
-    outline: none;
+    border-color: transparent;
     color: var(--color-raised-bg);
   }
 }

components/ui/ModalTransfer.vue

@@ -4,7 +4,7 @@
       <span
         >You are initiating a transfer of your revenue from Modrinth's Creator
         Monetization Program. How much of your
-        <strong>${{ balance }}</strong> balance would you like to
+        <strong>{{ $formatMoney(balance) }}</strong> balance would you like to
         transfer?</span
       >
       <div class="confirmation-input">
@@ -31,10 +31,11 @@
             to cover {{ $formatWallet(wallet) }} processing fees.</template
           >
           <template v-else
-            >I acknowledge that an estimated {{ calcProcessingFees() }} will be
+            >I acknowledge that an estimated
-            deducted from the amount I receive to cover
+            {{ $formatMoney(calcProcessingFees()) }} will be deducted from the
-            {{ $formatWallet(wallet) }} processing fees and that any excess will
+            amount I receive to cover {{ $formatWallet(wallet) }} processing
-            be returned to my Modrinth balance.</template
+            fees and that any excess will be returned to my Modrinth
+            balance.</template
           >
         </Checkbox>
         <Checkbox
@@ -52,10 +53,10 @@
           v-else-if="validInput && parseInput() < minWithdraw"
           class="invalid"
         >
-          The amount must be at least ${{ minWithdraw }}</span
+          The amount must be at least {{ $formatMoney(minWithdraw) }}</span
         >
         <span v-else-if="validInput && parseInput() > balance" class="invalid">
-          The amount must be no more than ${{ balance }}</span
+          The amount must be no more than {{ $formatMoney(balance) }}</span
         >
         <span v-else-if="amount.length > 0" class="invalid">
           {{ amount }} is not a valid amount</span
@@ -200,8 +201,8 @@ export default {
   }
 
   .button-group {
-    margin-left: auto;
+    margin-top: var(--spacing-card-md);
-    margin-top: 1.5rem;
+    justify-content: right;
   }
 
   strong {
@@ -215,7 +216,7 @@ export default {
 
   .confirm-text {
     margin-top: var(--spacing-card-sm);
-    min-height: 6rem;
+    min-height: 7rem;
     display: flex;
     flex-direction: column;
     gap: var(--spacing-card-sm);

layouts/default.vue

@@ -376,6 +376,10 @@
           Settings
         </nuxt-link>
       </div>
+      <div class="not-affiliated-notice">
+        NOT AN OFFICIAL MINECRAFT PRODUCT. NOT APPROVED BY OR ASSOCIATED WITH
+        MOJANG.
+      </div>
     </footer>
   </div>
 </template>
@@ -1024,8 +1028,6 @@ export default {
 
             .beta-badge {
               background-color: var(--color-brand-inverted);
-              box-sizing: border-box;
-              outline: none;
               color: var(--color-text-dark);
             }
           }
@@ -1081,9 +1083,10 @@ export default {
     text-align: center;
     display: grid;
     grid-template:
-      'logo-info logo-info logo-info' auto
+      'logo-info  logo-info  logo-info' auto
-      'links-1   links-2   links-3' auto
+      'links-1    links-2    links-3' auto
-      'buttons   buttons   buttons' auto
+      'buttons    buttons    buttons' auto
+      'notice     notice     notice' auto
       / 1fr 1fr 1fr;
 
     .logo-info {
@@ -1139,8 +1142,21 @@ export default {
       }
     }
 
+    .not-affiliated-notice {
+      grid-area: notice;
+      font-size: var(--font-size-xs);
+      text-align: center;
+      font-weight: 500;
+      margin-top: var(--spacing-card-md);
+    }
+
     @media screen and (min-width: 1024px) {
-      display: flex;
+      display: grid;
+      margin-inline: auto;
+      width: fit-content;
+      grid-template:
+        'logo-info  links-1 links-2 links-3 buttons' auto
+        'notice     notice  notice  notice  notice' auto;
       text-align: unset;
 
       .logo-info {
@@ -1160,6 +1176,10 @@ export default {
           margin-right: unset;
         }
       }
+
+      .not-affiliated-notice {
+        margin-top: 0;
+      }
     }
   }
 }

pages/dashboard/index.vue

@@ -49,8 +49,8 @@
         </div>
         <div class="metric">
           <div class="label">Total revenue</div>
-          <div class="value">${{ $formatNumber(payouts.all_time) }}</div>
+          <div class="value">{{ $formatMoney(payouts.all_time) }}</div>
-          <span>${{ $formatNumber(payouts.last_month) }} this month</span>
+          <span>{{ $formatMoney(payouts.last_month) }} this month</span>
           <!--          <NuxtLink class="goto-link" to="/dashboard/analytics"-->
           <!--            >View breakdown-->
           <!--            <ChevronRightIcon-->
@@ -61,7 +61,7 @@
         <div class="metric">
           <div class="label">Current balance</div>
           <div class="value">
-            ${{ $formatNumber($auth.user.payout_data.balance) }}
+            {{ $formatMoney($auth.user.payout_data.balance) }}
           </div>
           <NuxtLink
             v-if="$auth.user.payout_data.balance >= minWithdraw"

pages/dashboard/revenue.vue

@@ -14,7 +14,7 @@
       <div v-if="$auth.user.payout_data.balance >= minWithdraw">
         <p>
           You have
-          <strong>${{ $auth.user.payout_data.balance }}</strong>
+          <strong>{{ $formatMoney($auth.user.payout_data.balance) }}</strong>
           available to withdraw.
           <span v-if="!enrolled"
             >Enroll in the Creator Monetization Program to withdraw your
@@ -37,13 +37,13 @@
       </div>
       <p v-else-if="$auth.user.payout_data.balance > 0">
         You have made
-        <strong>${{ $auth.user.payout_data.balance }}</strong
+        <strong>{{ $formatMoney($auth.user.payout_data.balance) }}</strong
         >, however you have not yet met the minimum of ${{ minWithdraw }} to
         withdraw.
       </p>
       <p v-else>
         You have made
-        <strong>${{ $auth.user.payout_data.balance }}</strong
+        <strong>{{ $formatMoney($auth.user.payout_data.balance) }}</strong
         >, which is under the minimum of ${{ minWithdraw }} to withdraw.
       </p>
       <div v-if="!enrolled">

pages/index.vue

@@ -13,8 +13,8 @@
         <h3>
           Find enjoyable, quality content through our
           <a href="https://github.com/modrinth" target="_blank">open-source</a>
-          modding platform built for the community. Create stuff, get
+          modding platform built for the community. Create stuff, get paid, and
-          paid<sup>WIP</sup>, and deploy your project with our
+          deploy your project with our
           <a href="https://docs.modrinth.com" target="_blank"
             >fully documented</a
           >
@@ -42,21 +42,20 @@
     <div class="points card">
       <div class="point">
         <div class="image">
-          <video
+          <img
             v-if="$colorMode.value === 'light'"
-            autoplay
+            src="https://cdn.modrinth.com/homepage/search-light.webp"
-            loop
+            alt="Screenshot of Modrinth's 'search mods' page"
-            muted
-            src="https://cdn.modrinth.com/homepage/search.mp4"
-            playsinline
           />
-          <video
+          <img
+            v-else-if="$colorMode.value === 'oled'"
+            src="https://cdn.modrinth.com/homepage/search-oled.webp"
+            alt="Screenshot of Modrinth's 'search mods' page"
+          />
+          <img
             v-else
-            autoplay
+            src="https://cdn.modrinth.com/homepage/search-dark.webp"
-            loop
+            alt="Screenshot of Modrinth's 'search mods' page"
-            muted
-            src="https://cdn.modrinth.com/homepage/search-dark.mp4"
-            playsinline
           />
         </div>
         <div class="text-container">
@@ -387,9 +386,9 @@ export default {
           height: unset;
         }
 
-        img,
+        img {
-        video {
           border-radius: var(--size-rounded-lg);
+          box-shadow: var(--shadow-floating);
           width: 40rem;
         }
 
@@ -401,6 +400,7 @@ export default {
           font-family: monospace;
           font-size: 80%;
           line-height: 1.5rem;
+          box-shadow: var(--shadow-floating);
 
           .line-nums {
             display: flex;

plugins/shorthands.js

@@ -16,6 +16,7 @@ export default (ctx, inject) => {
     return obj
   })
   inject('formatNumber', formatNumber)
+  inject('formatMoney', (number) => '$' + formatNumber(number.toFixed(2)))
   inject('formatVersion', (versionsArray) =>
     formatVersions(versionsArray, ctx.store)
   )