From 8a9ad466a71b7fda9a7a0aab01cd00187689cc3f Mon Sep 17 00:00:00 2001 From: sstefdev Date: Mon, 2 Dec 2024 17:05:06 +0100 Subject: [PATCH 1/2] feat: added new design changes --- .../src/lib/invoice/form-view.svelte | 74 ++++++++++++++----- .../src/lib/invoice/form.svelte | 23 ++---- shared/components/labels.svelte | 3 - 3 files changed, 60 insertions(+), 40 deletions(-) diff --git a/packages/create-invoice-form/src/lib/invoice/form-view.svelte b/packages/create-invoice-form/src/lib/invoice/form-view.svelte index fdb1d84a..b69e052b 100644 --- a/packages/create-invoice-form/src/lib/invoice/form-view.svelte +++ b/packages/create-invoice-form/src/lib/invoice/form-view.svelte @@ -100,7 +100,7 @@ } -
+
@@ -139,7 +139,7 @@

From - {formData.creatorId} + {formData.creatorId}

{#each sellerInfo as { value, isEmail, isCompany }} @@ -157,7 +157,9 @@

Billed to - {formData.payerAddress} + + {formData.payerAddress} +

{#each buyerInfo as { value, isEmail, isCompany }} @@ -165,7 +167,12 @@ {#if isEmail} {value} {:else} - {value} + + {value} + {/if}

{/each} @@ -173,18 +180,24 @@

Payment Chain - {currency?.network - ? currency.network.charAt(0).toUpperCase() + - currency.network.slice(1).toLowerCase() - : ""} + + {currency?.network + ? currency.network.charAt(0).toUpperCase() + + currency.network.slice(1).toLowerCase() + : ""} +

Invoice Currency - {invoiceCurrency ? invoiceCurrency.symbol : ""} + + {invoiceCurrency ? invoiceCurrency.symbol : ""} +

Settlement Currency - {currency ? `${currency.symbol} (${currency.network})` : ""} + + {currency ? `${currency.symbol} (${currency.network})` : ""} +

@@ -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,6 +413,8 @@ .invoice-table-wrapper { position: relative; overflow-x: auto; + box-shadow: 0 4px 4px rgba(0, 0, 0, 0.06); + border-radius: 8px; } .invoice-table { @@ -397,32 +422,40 @@ 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; + } diff --git a/packages/create-invoice-form/src/lib/invoice/form.svelte b/packages/create-invoice-form/src/lib/invoice/form.svelte index 0c6e78cd..7d2d3f43 100644 --- a/packages/create-invoice-form/src/lib/invoice/form.svelte +++ b/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} /> @@ -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; diff --git a/shared/components/labels.svelte b/shared/components/labels.svelte index 83a174b0..2db3eb25 100644 --- a/shared/components/labels.svelte +++ b/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 { From c202d8c69a0ffda66820853d1199a191225af70e Mon Sep 17 00:00:00 2001 From: sstefdev Date: Fri, 6 Dec 2024 12:25:41 +0100 Subject: [PATCH 2/2] fix: revert to textarea for memo --- packages/create-invoice-form/src/lib/invoice/form.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/create-invoice-form/src/lib/invoice/form.svelte b/packages/create-invoice-form/src/lib/invoice/form.svelte index 7d2d3f43..24211fd4 100644 --- a/packages/create-invoice-form/src/lib/invoice/form.svelte +++ b/packages/create-invoice-form/src/lib/invoice/form.svelte @@ -588,7 +588,7 @@ max={200} id="note" {handleInput} - type="text" + type="textarea" label="Memo" value={formData.note} />