Improve clarity of ongoing revenue period notice (#3301)

* Improve clarity of ongoing revenue period notice

* get rid of semicolon

---------

Co-authored-by: Jai Agrawal <18202329+Geometrically@users.noreply.github.com>

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

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="experimental-styles-within">
     <section class="universal-card">
       <h2 class="text-2xl">Revenue</h2>
       <div class="grid-display">
@@ -24,8 +24,8 @@
             {{ $formatMoney(userBalance.pending) }}
           </div>
         </div>
-        <div class="grid-display__item available-soon">
+        <div class="grid-display__item">
-          <h3 class="label">
+          <h3 class="label m-0">
             Available soon
             <nuxt-link
               v-tooltip="`Click to read about how Modrinth handles your revenue.`"
@@ -35,16 +35,32 @@
               <UnknownIcon />
             </nuxt-link>
           </h3>
-          <ul class="available-soon-list">
+          <ul class="m-0 list-none p-0">
-            <li v-for="date in availableSoonDateKeys" :key="date" class="available-soon-item">
+            <li
-              <span class="amount">
+              v-for="date in availableSoonDateKeys"
-                {{ $formatMoney(availableSoonDates[date]) }}
+              :key="date"
-                <small
+              class="flex items-center justify-between border-0 border-solid border-b-divider p-0 [&:not(:last-child)]:mb-1 [&:not(:last-child)]:border-b-[1px] [&:not(:last-child)]:pb-1"
-                  v-if="availableSoonDateKeys.indexOf(date) === availableSoonDateKeys.length - 1"
-                  >†</small
             >
+              <span
+                v-tooltip="
+                  availableSoonDateKeys.indexOf(date) === availableSoonDateKeys.length - 1
+                    ? `Revenue period is ongoing. \nThis amount is not yet finalized.`
+                    : null
+                "
+                :class="{
+                  'cursor-help':
+                    availableSoonDateKeys.indexOf(date) === availableSoonDateKeys.length - 1,
+                }"
+                class="inline-flex items-center gap-1 font-bold"
+              >
+                {{ $formatMoney(availableSoonDates[date]) }}
+                <template
+                  v-if="availableSoonDateKeys.indexOf(date) === availableSoonDateKeys.length - 1"
+                >
+                  <InProgressIcon />
+                </template>
               </span>
-              <span class="date">
+              <span class="text-sm text-secondary">
                 {{ formatDate(dayjs(date)) }}
               </span>
             </li>
@@ -69,20 +85,11 @@
           View transfer history
         </NuxtLink>
       </div>
-      <p>
+      <p class="text-sm text-secondary">
-        <small>
+        By uploading projects to Modrinth and withdrawing money from your account, you agree to the
-          By uploading projects to Modrinth and withdrawing money from your account, you agree to
-          the
         <nuxt-link class="text-link" to="/legal/cmp">Rewards Program Terms</nuxt-link>. For more
         information on how the rewards system works, see our information page
         <nuxt-link class="text-link" to="/legal/cmp-info">here</nuxt-link>.
-        </small>
-      </p>
-      <p>
-        <small>
-          † Ongoing revenue period, subject to change. The finalized amount will be available to
-          view on the last day of the current month.
-        </small>
       </p>
     </section>
     <section class="universal-card">
@@ -135,6 +142,7 @@
 <script setup>
 import {
   HistoryIcon,
+  InProgressIcon,
   PayPalIcon,
   SaveIcon,
   TransferIcon,
@@ -221,43 +229,4 @@ strong {
 .grid-display {
   grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
 }
-
-.available-soon {
-  .label {
-    margin: 0;
-  }
-
-  &-list {
-    list-style-type: none;
-    padding: 0;
-    margin: 0;
-  }
-
-  &-item {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0.2rem 0 0;
-    border-bottom: 1px solid var(--color-divider);
-
-    .amount {
-      font-weight: 600;
-
-      small {
-        vertical-align: top;
-        margin: 0;
-        padding: 0;
-      }
-    }
-
-    .date {
-      color: var(--color-text-secondary);
-      font-size: 0.9em;
-    }
-
-    &:last-child {
-      border-bottom: none;
-    }
-  }
-}
 </style>

packages/assets/icons/in-progress.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+    <path d="M10 21.8c-1.3-.3-2.4-.7-3.5-1.5M17.6 3.7c1.1.7 2 1.6 2.7 2.7M2.2 10c.3-1.3.7-2.4 1.5-3.5M20.3 17.6c-.7 1.1-1.6 2-2.7 2.7M21.8 10.1c.2 1.3.2 2.5 0 3.8M6.5 3.6c1.1-.7 2.3-1.2 3.5-1.5M3.6 17.5c-.7-1.1-1.2-2.3-1.5-3.5"/>
+    <path d="M13.9 2.2c4.6.9 8.1 5 8.1 9.8s-3.4 8.9-8 9.8"/>
+    <path d="M12 6v6l4 2"/>
+  </g>
+</svg>

packages/assets/index.ts

@@ -93,6 +93,7 @@ import _HeartHandshakeIcon from './icons/heart-handshake.svg?component'
 import _HistoryIcon from './icons/history.svg?component'
 import _HomeIcon from './icons/home.svg?component'
 import _ImageIcon from './icons/image.svg?component'
+import _InProgressIcon from './icons/in-progress.svg?component'
 import _InfoIcon from './icons/info.svg?component'
 import _IssuesIcon from './icons/issues.svg?component'
 import _KeyIcon from './icons/key.svg?component'
@@ -290,6 +291,7 @@ export const HeartHandshakeIcon = _HeartHandshakeIcon
 export const HistoryIcon = _HistoryIcon
 export const HomeIcon = _HomeIcon
 export const ImageIcon = _ImageIcon
+export const InProgressIcon = _InProgressIcon
 export const InfoIcon = _InfoIcon
 export const IssuesIcon = _IssuesIcon
 export const KeyIcon = _KeyIcon