feat: Enhance Status Column with Colors for Better Readability

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

@@ -15,6 +15,7 @@
   import { CurrencyTypes } from "@requestnetwork/types";
   import { getPaymentNetworkExtension } from "@requestnetwork/payment-detection";
   // Components
+  import StatusLabel from "@requestnetwork/shared-components/status-label.svelte";
   import Accordion from "@requestnetwork/shared-components/accordion.svelte";
   import Button from "@requestnetwork/shared-components/button.svelte";
   import Tooltip from "@requestnetwork/shared-components/tooltip.svelte";
@@ -371,9 +372,7 @@
   </div>
   <h2 class="invoice-number">
     Invoice #{request?.contentData?.invoiceNumber || "-"}
-    <p class={`invoice-status ${isPaid ? "bg-green" : "bg-zinc"}`}>
-      {status}
-    </p>
+    <StatusLabel status={checkStatus(request)} />
     <Tooltip text="Download PDF">
       <Download
         onClick={async () => {
@@ -650,21 +649,6 @@
     height: 13px;
   }
 
-  .invoice-status {
-    padding-left: 0.5rem;
-    padding-right: 0.5rem;
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-    font-size: 14px;
-    font-weight: 500;
-    line-height: 1;
-    text-align: center;
-    border-radius: 8px;
-    color: #ffffff;
-    width: fit-content;
-    margin: 0;
-  }
-
   .invoice-address {
     display: flex;
     flex-direction: column;

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

@@ -9,6 +9,7 @@
   import Dropdown from "@requestnetwork/shared-components/dropdown.svelte";
   import Input from "@requestnetwork/shared-components/input.svelte";
   import PoweredBy from "@requestnetwork/shared-components/powered-by.svelte";
+  import StatusLabel from "@requestnetwork/shared-components/status-label.svelte";
   import Toaster from "@requestnetwork/shared-components/sonner.svelte";
   import Tooltip from "@requestnetwork/shared-components/tooltip.svelte";
   import TxType from "@requestnetwork/shared-components/tx-type.svelte";
@@ -32,7 +33,6 @@
   import type { IConfig } from "@requestnetwork/shared-types";
   import type { RequestNetwork } from "@requestnetwork/request-client.js";
   // Utils
-  import { checkStatus } from "@requestnetwork/shared-utils/checkStatus";
   import { config as defaultConfig } from "@requestnetwork/shared-utils/config";
   import { initializeCurrencyManager } from "@requestnetwork/shared-utils/initCurrencyManager";
   import { checkStatus } from "@requestnetwork/shared-utils/checkStatus";
@@ -648,7 +648,7 @@
                     type={signer === request.payer?.value ? "OUT" : "IN"}
                   />
                 </td>
-                <td> {checkStatus(request)}</td>
+                <td><StatusLabel status={checkStatus(request)} /></td>
                 <td>
                   {#if request.paymentCurrencies.length > 0}
                     <Network network={request.paymentCurrencies[0]?.network} />

shared/components/status-label.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+  import { capitalize } from "../utils/capitalize";
+
+  export let status: string;
+
+  let statusClass = "";
+
+  $: {
+    switch (status.toLowerCase()) {
+      case "paid":
+        statusClass = "status-paid";
+        break;
+      case "partially paid":
+        statusClass = "status-partially-paid";
+        break;
+      case "accepted":
+        statusClass = "status-accepted";
+        break;
+      case "awaiting payment":
+        statusClass = "status-created";
+        break;
+      case "canceled":
+        statusClass = "status-canceled";
+        break;
+      case "rejected":
+        statusClass = "status-rejected";
+        break;
+      case "overdue":
+        statusClass = "status-overdue";
+        break;
+      case "pending":
+        statusClass = "status-pending";
+        break;
+      default:
+        statusClass = "status-created";
+    }
+  }
+</script>
+
+<div class={`status-indicator ${statusClass}`}>
+  {capitalize(status)}
+</div>
+
+<style>
+  .status-indicator {
+    text-align: center;
+    padding: 6px 12px;
+    text-align: center;
+    width: fit-content;
+    border-radius: 8px;
+    font-weight: 500;
+  }
+
+  .status-paid {
+    color: #328965;
+    background-color: rgba(88, 225, 165, 0.15);
+  }
+
+  .status-partially-paid {
+    color: #328965;
+    background: linear-gradient(
+      135deg,
+      rgba(88, 225, 165, 0.2) 25%,
+      white 25%,
+      white 50%,
+      rgba(88, 225, 165, 0.2) 50%,
+      rgba(88, 225, 165, 0.2) 75%,
+      white 75%,
+      white 100%
+    );
+    background-size: 20px 20px;
+  }
+
+  .status-accepted {
+    color: #006ebe;
+    background-color: rgba(90, 186, 255, 0.15);
+  }
+
+  .status-created {
+    color: #c99101;
+    background-color: rgba(255, 197, 49, 0.15);
+  }
+
+  .status-canceled {
+    color: #212121;
+    background-color: rgba(37, 37, 37, 0.15);
+  }
+
+  .status-rejected {
+    color: #d9601c;
+    background-color: rgba(255, 135, 67, 0.15);
+  }
+
+  .status-overdue {
+    color: #d91c1c;
+    background-color: rgba(255, 49, 49, 0.15);
+  }
+
+  .status-pending {
+    color: #7b7b7b;
+    background-color: rgba(224, 224, 224, 0.15);
+  }
+</style>