feat: added new design changes

Author: sstefdev

packages/create-invoice-form/src/lib/invoice/form-view.svelte

@@ -100,7 +100,7 @@
   }
 </script>
 
-<div style="display: flex; flex-direction: column; gap: 30px;">
+<div class="invoice-form-container">
   <div class="invoice-form-wrapper">
     <div class="invoice-header">
       <div class="invoice-header-left">
@@ -139,7 +139,7 @@
     <div class="invoice-section">
       <p class="invoice-section-title">
         <span>From</span>
-        {formData.creatorId}
+        <span class="invoice-section-title-content">{formData.creatorId}</span>
       </p>
       <div class={`invoice-info`}>
         {#each sellerInfo as { value, isEmail, isCompany }}
@@ -157,34 +157,47 @@
     <div class="invoice-section">
       <p class="invoice-section-title">
         <span>Billed to</span>
-        {formData.payerAddress}
+        <span class="invoice-section-title-content">
+          {formData.payerAddress}
+        </span>
       </p>
       <div class={`invoice-info`}>
         {#each buyerInfo as { value, isEmail, isCompany }}
           <p>
             {#if isEmail}
               <a href="mailto:{value}">{value}</a>
             {:else}
-              <span class:company={isCompany}>{value}</span>
+              <span
+                class:company={isCompany}
+                class="invoice-section-title-content"
+              >
+                {value}
+              </span>
             {/if}
           </p>
         {/each}
       </div>
     </div>
     <p class="invoice-section-title">
       <span>Payment Chain</span>
-      {currency?.network
-        ? currency.network.charAt(0).toUpperCase() +
-          currency.network.slice(1).toLowerCase()
-        : ""}
+      <span class="invoice-section-title-content">
+        {currency?.network
+          ? currency.network.charAt(0).toUpperCase() +
+            currency.network.slice(1).toLowerCase()
+          : ""}
+      </span>
     </p>
     <p class="invoice-section-title">
       <span>Invoice Currency</span>
-      {invoiceCurrency ? invoiceCurrency.symbol : ""}
+      <span class="invoice-section-title-content">
+        {invoiceCurrency ? invoiceCurrency.symbol : ""}
+      </span>
     </p>
     <p class="invoice-section-title">
       <span>Settlement Currency</span>
-      {currency ? `${currency.symbol} (${currency.network})` : ""}
+      <span class="invoice-section-title-content">
+        {currency ? `${currency.symbol} (${currency.network})` : ""}
+      </span>
     </p>
     <div class="invoice-table-wrapper">
       <table class="invoice-table">
@@ -275,6 +288,16 @@
     border-collapse: collapse;
     border-spacing: 0;
   }
+
+  .invoice-form-container {
+    display: flex;
+    flex-direction: column;
+    gap: 30px;
+    border-top: 6px solid var(--mainColor);
+    border-radius: 8px;
+    overflow: hidden;
+  }
+
   .invoice-form-wrapper {
     height: fit-content;
     background-color: white;
@@ -390,39 +413,49 @@
   .invoice-table-wrapper {
     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;
+    color: #6b7280;
+    border-radius: 8px;
+    overflow: hidden;
+    border-collapse: collapse;
+    border-spacing: 0;
   }
 
   .invoice-table-header {
-    font-size: 12px;
     line-height: 20px;
     text-transform: uppercase;
-    background-color: #e4e4e7;
+    background-color: #f6f6f7;
+    color: black;
+    border: none;
+    border-collapse: collapse;
   }
 
   .invoice-table-header tr {
     text-align: left;
-    white-space: nowrap;
+    font-size: 14px;
   }
 
   .invoice-table-header tr th {
-    padding: 12px 8px;
+    padding: 12px 16px;
+    font-size: 11px;
+    white-space: nowrap;
+    border: none;
+    border-spacing: 0;
+    background-color: #f6f6f7;
   }
 
   .invoice-table-header-tr:first-child {
     padding: 12px 8px 12px 8px;
   }
 
-  .invoice-table-body-row {
-    border-bottom: 1px solid black;
-  }
-
   .invoice-table-body-row th {
     padding: 8px 0px 8px 8px;
     font-weight: 500;
@@ -450,7 +483,6 @@
   .invoice-summary-item {
     display: flex;
     gap: 20px;
-    border-bottom: 1px solid black;
   }
 
   .invoice-summary-item-spaced {
@@ -530,4 +562,8 @@
     height: 1px;
     background-color: var(--mainColor);
   }
+
+  .invoice-section-title-content {
+    color: #6e7480;
+  }
 </style>

packages/create-invoice-form/src/lib/invoice/form.svelte

@@ -588,8 +588,8 @@
         max={200}
         id="note"
         {handleInput}
-        type="textarea"
-        placeholder="Memo"
+        type="text"
+        label="Memo"
         value={formData.note}
       />
       <Labels {config} bind:formData />
@@ -626,6 +626,7 @@
     box-shadow: 0 4px 4px rgba(0, 0, 0, 0.06);
     gap: 20px;
     box-sizing: border-box;
+    min-width: 700px;
   }
 
   .invoice-form-container {
@@ -792,8 +793,8 @@
 
   .invoice-form-label-wrapper {
     display: flex;
-    align-items: center;
-    gap: 16px;
+    flex-direction: column;
+    gap: 8px;
     height: fit-content;
     width: 100%;
   }
@@ -803,25 +804,11 @@
     font-size: 12px;
   }
 
-  :global(.invoice-form-label-wrapper .input-wrapper) {
-    flex: 1;
-  }
-
   :global(.invoice-form-label-wrapper svg, .invoice-form-label-wrapper path) {
     color: white;
     fill: white;
   }
 
-  :global(.invoice-form-label-wrapper .input-wrapper .textarea-input) {
-    width: 100%;
-    height: 107px;
-  }
-
-  :global(.invoice-form-label-wrapper .labels-wrapper) {
-    flex: 1;
-    margin-right: 8px;
-  }
-
   :global(.invoice-form-table-body-add-item button) {
     padding: 6px 14px !important;
     width: fit-content !important;

shared/components/labels.svelte

@@ -75,10 +75,8 @@
   .labels-wrapper {
     display: flex;
     flex-direction: column;
-    width: 700px;
     justify-content: end;
     gap: 10px;
-    min-height: 104px;
   }
 
   .labels-container {
@@ -109,7 +107,6 @@
     border: 1px solid #d1d5db;
     border-radius: 4px;
     padding: 4px 8px;
-    width: 100%;
   }
 
   .label-input:hover {