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>
This commit is contained in:
Prospector
GitHub
parent
3140dab99d
commit
b3a664e0d4
@ -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">
|
||||
<h3 class="label">
|
||||
<div class="grid-display__item">
|
||||
<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">
|
||||
<li v-for="date in availableSoonDateKeys" :key="date" class="available-soon-item">
|
||||
<span class="amount">
|
||||
{{ $formatMoney(availableSoonDates[date]) }}
|
||||
<small
|
||||
v-if="availableSoonDateKeys.indexOf(date) === availableSoonDateKeys.length - 1"
|
||||
>†</small
|
||||
<ul class="m-0 list-none p-0">
|
||||
<li
|
||||
v-for="date in availableSoonDateKeys"
|
||||
:key="date"
|
||||
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"
|
||||
>
|
||||
<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>
|
||||
<small>
|
||||
By uploading projects to Modrinth and withdrawing money from your account, you agree to
|
||||
the
|
||||
<p class="text-sm text-secondary">
|
||||
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>
|
||||
|
||||
7
packages/assets/icons/in-progress.svg
Normal file
7
packages/assets/icons/in-progress.svg
Normal file
@ -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>
|
||||
|
After Width: | Height: | Size: 498 B |
@ -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
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user