Skip to content

Commit bd924c9

Browse files
authored
feat: Enhance Status Column with Colors for Better Readability (#219)
1 parent f15f7e8 commit bd924c9

File tree

3 files changed

+107
-20
lines changed

3 files changed

+107
-20
lines changed

packages/invoice-dashboard/src/lib/dashboard/invoice-view.svelte

Lines changed: 2 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
import { CurrencyTypes } from "@requestnetwork/types";
1616
import { getPaymentNetworkExtension } from "@requestnetwork/payment-detection";
1717
// Components
18+
import StatusLabel from "@requestnetwork/shared-components/status-label.svelte";
1819
import Accordion from "@requestnetwork/shared-components/accordion.svelte";
1920
import Button from "@requestnetwork/shared-components/button.svelte";
2021
import Tooltip from "@requestnetwork/shared-components/tooltip.svelte";
@@ -371,9 +372,7 @@
371372
</div>
372373
<h2 class="invoice-number">
373374
Invoice #{request?.contentData?.invoiceNumber || "-"}
374-
<p class={`invoice-status ${isPaid ? "bg-green" : "bg-zinc"}`}>
375-
{status}
376-
</p>
375+
<StatusLabel status={checkStatus(request)} />
377376
<Tooltip text="Download PDF">
378377
<Download
379378
onClick={async () => {
@@ -650,21 +649,6 @@
650649
height: 13px;
651650
}
652651
653-
.invoice-status {
654-
padding-left: 0.5rem;
655-
padding-right: 0.5rem;
656-
padding-top: 0.5rem;
657-
padding-bottom: 0.5rem;
658-
font-size: 14px;
659-
font-weight: 500;
660-
line-height: 1;
661-
text-align: center;
662-
border-radius: 8px;
663-
color: #ffffff;
664-
width: fit-content;
665-
margin: 0;
666-
}
667-
668652
.invoice-address {
669653
display: flex;
670654
flex-direction: column;

packages/invoice-dashboard/src/lib/view-requests.svelte

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99
import Dropdown from "@requestnetwork/shared-components/dropdown.svelte";
1010
import Input from "@requestnetwork/shared-components/input.svelte";
1111
import PoweredBy from "@requestnetwork/shared-components/powered-by.svelte";
12+
import StatusLabel from "@requestnetwork/shared-components/status-label.svelte";
1213
import Toaster from "@requestnetwork/shared-components/sonner.svelte";
1314
import Tooltip from "@requestnetwork/shared-components/tooltip.svelte";
1415
import TxType from "@requestnetwork/shared-components/tx-type.svelte";
@@ -32,7 +33,6 @@
3233
import type { IConfig } from "@requestnetwork/shared-types";
3334
import type { RequestNetwork } from "@requestnetwork/request-client.js";
3435
// Utils
35-
import { checkStatus } from "@requestnetwork/shared-utils/checkStatus";
3636
import { config as defaultConfig } from "@requestnetwork/shared-utils/config";
3737
import { initializeCurrencyManager } from "@requestnetwork/shared-utils/initCurrencyManager";
3838
import { checkStatus } from "@requestnetwork/shared-utils/checkStatus";
@@ -648,7 +648,7 @@
648648
type={signer === request.payer?.value ? "OUT" : "IN"}
649649
/>
650650
</td>
651-
<td> {checkStatus(request)}</td>
651+
<td><StatusLabel status={checkStatus(request)} /></td>
652652
<td>
653653
{#if request.paymentCurrencies.length > 0}
654654
<Network network={request.paymentCurrencies[0]?.network} />
Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
<script lang="ts">
2+
import { capitalize } from "../utils/capitalize";
3+
4+
export let status: string;
5+
6+
let statusClass = "";
7+
8+
$: {
9+
switch (status.toLowerCase()) {
10+
case "paid":
11+
statusClass = "status-paid";
12+
break;
13+
case "partially paid":
14+
statusClass = "status-partially-paid";
15+
break;
16+
case "accepted":
17+
statusClass = "status-accepted";
18+
break;
19+
case "awaiting payment":
20+
statusClass = "status-created";
21+
break;
22+
case "canceled":
23+
statusClass = "status-canceled";
24+
break;
25+
case "rejected":
26+
statusClass = "status-rejected";
27+
break;
28+
case "overdue":
29+
statusClass = "status-overdue";
30+
break;
31+
case "pending":
32+
statusClass = "status-pending";
33+
break;
34+
default:
35+
statusClass = "status-created";
36+
}
37+
}
38+
</script>
39+
40+
<div class={`status-indicator ${statusClass}`}>
41+
{capitalize(status)}
42+
</div>
43+
44+
<style>
45+
.status-indicator {
46+
text-align: center;
47+
padding: 6px 12px;
48+
text-align: center;
49+
width: fit-content;
50+
border-radius: 8px;
51+
font-weight: 500;
52+
}
53+
54+
.status-paid {
55+
color: #328965;
56+
background-color: rgba(88, 225, 165, 0.15);
57+
}
58+
59+
.status-partially-paid {
60+
color: #328965;
61+
background: linear-gradient(
62+
135deg,
63+
rgba(88, 225, 165, 0.2) 25%,
64+
white 25%,
65+
white 50%,
66+
rgba(88, 225, 165, 0.2) 50%,
67+
rgba(88, 225, 165, 0.2) 75%,
68+
white 75%,
69+
white 100%
70+
);
71+
background-size: 20px 20px;
72+
}
73+
74+
.status-accepted {
75+
color: #006ebe;
76+
background-color: rgba(90, 186, 255, 0.15);
77+
}
78+
79+
.status-created {
80+
color: #c99101;
81+
background-color: rgba(255, 197, 49, 0.15);
82+
}
83+
84+
.status-canceled {
85+
color: #212121;
86+
background-color: rgba(37, 37, 37, 0.15);
87+
}
88+
89+
.status-rejected {
90+
color: #d9601c;
91+
background-color: rgba(255, 135, 67, 0.15);
92+
}
93+
94+
.status-overdue {
95+
color: #d91c1c;
96+
background-color: rgba(255, 49, 49, 0.15);
97+
}
98+
99+
.status-pending {
100+
color: #7b7b7b;
101+
background-color: rgba(224, 224, 224, 0.15);
102+
}
103+
</style>

0 commit comments

Comments
 (0)