feat: Update Invoice View Table Design with Top-Side Border

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

@@ -1,17 +1,23 @@
 <script lang="ts">
+  import type { IConfig } from "@requestnetwork/shared-types";
   import Close from "@requestnetwork/shared-icons/close.svelte";
 
   export let active = false;
   export let onClose: () => void;
-
+  export let config: IConfig;
   let drawerElement: HTMLElement;
 </script>
 
 <div
   class={`drawer-overlay ${active ? "active-overlay" : "hidden"}`}
   on:click|stopPropagation={onClose}
 ></div>
-<div bind:this={drawerElement} class={`drawer ${active ? "active" : "hidden"}`}>
+<div
+  bind:this={drawerElement}
+  class={`drawer ${active ? "active" : "hidden"}`}
+  style="--mainColor: {config.colors.main}; --secondaryColor: {config.colors
+    .secondary};"
+>
   <div class="innerDrawer">
     <button class="close" on:click={onClose} aria-label="Close drawer">
       <Close />
@@ -54,7 +60,6 @@
     overflow-y: auto;
     overflow-x: hidden;
     transform: translateX(0);
-    padding-right: 20px;
   }
 
   @media only screen and (max-width: 880px) {
@@ -68,7 +73,6 @@
 
   .innerDrawer {
     position: relative;
-    width: 100%;
     height: 100%;
     padding: 1rem;
     overflow: hidden;
@@ -78,6 +82,7 @@
     box-shadow:
       0 10px 15px -3px rgb(0 0 0 / 0.1),
       0 4px 6px -4px rgb(0 0 0 / 0.1);
+    border-top: 6px solid var(--mainColor);
   }
 
   .close {
@@ -122,4 +127,21 @@
     visibility: hidden;
     transform: translateX(100%);
   }
+
+  .drawer::-webkit-scrollbar {
+    width: 8px;
+  }
+
+  .drawer::-webkit-scrollbar-track {
+    padding-top: 20px;
+    background-color: white;
+    border-top-right-radius: 0.375rem;
+    border-bottom-right-radius: 0.375rem;
+  }
+
+  .drawer::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    padding-top: 20px;
+    background-color: #888;
+  }
 </style>

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

@@ -712,50 +712,61 @@
   .table-container {
     position: relative;
     overflow-x: auto;
+    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.06);
+    border-radius: 8px;
   }
 
   .invoice-table {
     width: 100%;
+    font-size: 14px;
+    line-height: 20px;
     text-align: left;
-    font-size: 0.875rem;
+    color: #6b7280;
+    border-radius: 8px;
+    overflow: hidden;
+    border-collapse: collapse;
+    border-spacing: 0;
   }
 
   .table-header {
+    line-height: 20px;
     text-transform: uppercase;
-    background-color: #e0e0e0;
+    background-color: #f6f6f7;
+    color: black;
+    border: none;
+    border-collapse: collapse;
   }
 
-  .table-row {
+  .table-header tr {
     text-align: left;
+    font-size: 14px;
   }
 
-  .table-header-cell {
-    padding: 0.75rem 0.5rem;
-  }
-
-  @media only screen and (max-width: 880px) {
-    .table-header-cell {
-      white-space: nowrap;
-    }
+  .table-header tr th {
+    padding: 12px 16px;
+    font-size: 11px;
+    white-space: nowrap;
+    border: none;
+    border-spacing: 0;
+    background-color: #f6f6f7;
   }
 
-  .table-header-cell.description {
-    padding-left: 0.5rem;
+  .table-row th,
+  .table-row td {
+    padding: 12px 16px;
   }
 
-  .item-row {
-    border-bottom: 1px solid black;
+  .table-row th p {
+    margin: 0;
   }
 
   .item-description {
-    padding-left: 0.5rem;
-    font-weight: 500;
-    white-space: nowrap;
+    width: 250px !important;
+    font-weight: normal;
   }
 
   .truncate {
-    display: block;
-    width: 150px;
+    width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;

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

@@ -692,6 +692,7 @@
         </tbody>
       </table>
       <Drawer
+        config={activeConfig}
         active={activeRequest !== undefined}
         onClose={handleRemoveSelectedRequest}
       >