From 350068706ce4f8e9194ca005260a512bfc01b385 Mon Sep 17 00:00:00 2001
From: Darko Gjorgjijoski <dg@darkog.com>
Date: Sat, 4 Apr 2026 02:18:00 +0200
Subject: [PATCH] Unify form styling across invoice, estimate, and recurring
 invoice pages

Apply consistent rounded-xl shadow border-line-light to customer
selector, date/number fields card, items table, totals card, editor,
tax popup, and view page sidebars. Wrap right-side basic fields in
card container matching the customer card.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../SelectTaxPopup.vue                        |  8 +++----
 .../scripts/admin/views/estimates/View.vue    |  2 +-
 .../create/EstimateCreateBasicFields.vue      |  2 +-
 .../scripts/admin/views/invoices/View.vue     |  2 +-
 .../create/InvoiceCreateBasicFields.vue       |  2 +-
 .../RecurringInvoiceCreateBasicFields.vue     |  1 +
 .../base/BaseCustomerSelectPopup.vue          | 22 ++++++++++---------
 .../base/base-editor/BaseEditor.vue           |  8 +++----
 8 files changed, 25 insertions(+), 22 deletions(-)

diff --git a/resources/scripts/admin/components/estimate-invoice-common/SelectTaxPopup.vue b/resources/scripts/admin/components/estimate-invoice-common/SelectTaxPopup.vue
index 632253b5..27d5a7a5 100644
--- a/resources/scripts/admin/components/estimate-invoice-common/SelectTaxPopup.vue
+++ b/resources/scripts/admin/components/estimate-invoice-common/SelectTaxPopup.vue
@@ -37,8 +37,8 @@
             <div
               class="
                 overflow-hidden
-                rounded-md
-                shadow-lg
+                rounded-xl
+                shadow
                 ring-1 ring-black/5
               "
             >
@@ -64,7 +64,7 @@
                     overflow-auto
                     list
                     max-h-36
-                    border-t border-line-default
+                    border-t border-line-light
                   "
                 >
                   <div
@@ -80,7 +80,7 @@
                     class="
                       px-6
                       py-4
-                      border-b border-line-default border-solid
+                      border-b border-line-light border-solid
                       cursor-pointer
                       hover:bg-surface-tertiary hover:cursor-pointer
                       last:border-b-0
diff --git a/resources/scripts/admin/views/estimates/View.vue b/resources/scripts/admin/views/estimates/View.vue
index 0fce06fa..c99a6381 100644
--- a/resources/scripts/admin/views/estimates/View.vue
+++ b/resources/scripts/admin/views/estimates/View.vue
@@ -266,7 +266,7 @@
         class="
           flex-1
           border border-gray-400 border-solid
-          rounded-md
+          rounded-xl
           bg-surface
           frame-style
         "
diff --git a/resources/scripts/admin/views/estimates/create/EstimateCreateBasicFields.vue b/resources/scripts/admin/views/estimates/create/EstimateCreateBasicFields.vue
index 40485425..255a89b5 100644
--- a/resources/scripts/admin/views/estimates/create/EstimateCreateBasicFields.vue
+++ b/resources/scripts/admin/views/estimates/create/EstimateCreateBasicFields.vue
@@ -8,7 +8,7 @@
       class="col-span-5 pr-0"
     />
 
-    <BaseInputGrid class="col-span-7">
+    <BaseInputGrid class="col-span-7 rounded-xl shadow border border-line-light bg-surface p-5">
       <BaseInputGroup
         :label="$t('reports.estimates.estimate_date')"
         :content-loading="isLoading"
diff --git a/resources/scripts/admin/views/invoices/View.vue b/resources/scripts/admin/views/invoices/View.vue
index 50a7f354..35264f94 100644
--- a/resources/scripts/admin/views/invoices/View.vue
+++ b/resources/scripts/admin/views/invoices/View.vue
@@ -508,7 +508,7 @@ onSearched = debounce(onSearched, 500)
           flex-1
           border border-gray-400 border-solid
           bg-surface
-          rounded-md
+          rounded-xl
           frame-style
         "
       />
diff --git a/resources/scripts/admin/views/invoices/create/InvoiceCreateBasicFields.vue b/resources/scripts/admin/views/invoices/create/InvoiceCreateBasicFields.vue
index a67b09de..b77c45f0 100644
--- a/resources/scripts/admin/views/invoices/create/InvoiceCreateBasicFields.vue
+++ b/resources/scripts/admin/views/invoices/create/InvoiceCreateBasicFields.vue
@@ -8,7 +8,7 @@
       class="col-span-12 lg:col-span-5 pr-0"
     />
 
-    <BaseInputGrid class="col-span-12 lg:col-span-7">
+    <BaseInputGrid class="col-span-12 lg:col-span-7 rounded-xl shadow border border-line-light bg-surface p-5">
       <BaseInputGroup
         :label="$t('invoices.invoice_date')"
         :content-loading="isLoading"
diff --git a/resources/scripts/admin/views/recurring-invoices/create/RecurringInvoiceCreateBasicFields.vue b/resources/scripts/admin/views/recurring-invoices/create/RecurringInvoiceCreateBasicFields.vue
index bf95f706..b57b183b 100644
--- a/resources/scripts/admin/views/recurring-invoices/create/RecurringInvoiceCreateBasicFields.vue
+++ b/resources/scripts/admin/views/recurring-invoices/create/RecurringInvoiceCreateBasicFields.vue
@@ -36,6 +36,7 @@
       gap-4
       mt-8
       lg:gap-6 lg:mt-0 lg:grid-cols-2
+      rounded-xl shadow border border-line-light bg-surface p-5
     "
   >
     <BaseInputGroup
diff --git a/resources/scripts/components/base/BaseCustomerSelectPopup.vue b/resources/scripts/components/base/BaseCustomerSelectPopup.vue
index 4fe37052..7c766bd7 100644
--- a/resources/scripts/components/base/BaseCustomerSelectPopup.vue
+++ b/resources/scripts/components/base/BaseCustomerSelectPopup.vue
@@ -17,9 +17,10 @@
         flex flex-col
         p-4
         bg-surface
-        border border-line-default border-solid
+        border border-line-light border-solid
         min-h-[170px]
-        rounded-md
+        rounded-xl
+        shadow
       "
       @click.stop
     >
@@ -169,7 +170,7 @@
       </div>
     </div>
 
-    <Popover v-else v-slot="{ open }" class="relative flex flex-col rounded-md">
+    <Popover v-else v-slot="{ open }" class="relative flex flex-col rounded-xl">
       <PopoverButton
         :class="{
           '': open,
@@ -177,7 +178,7 @@
             valid.$error,
           'focus:ring-2 focus:ring-primary-400': !valid.$error,
         }"
-        class="w-full outline-hidden rounded-md"
+        class="w-full outline-hidden rounded-xl"
       >
         <div
           class="
@@ -188,8 +189,9 @@
             p-0
             py-16
             bg-surface
-            border border-line-default border-solid
-            rounded-md
+            border border-line-light border-solid
+            rounded-xl
+            shadow
             min-h-[170px]
           "
         >
@@ -241,8 +243,8 @@
             static
             class="
               overflow-hidden
-              rounded-md
-              shadow-lg
+              rounded-xl
+              shadow
               ring-1 ring-black/5
               bg-surface
             "
@@ -263,7 +265,7 @@
                   flex flex-col
                   overflow-auto
                   list
-                  border-t border-line-default
+                  border-t border-line-light
                 "
               >
                 <li
@@ -274,7 +276,7 @@
                     flex
                     px-6
                     py-2
-                    border-b border-line-default border-solid
+                    border-b border-line-light border-solid
                     cursor-pointer
                     hover:cursor-pointer hover:bg-hover-strong
                     focus:outline-hidden focus:bg-surface-tertiary
diff --git a/resources/scripts/components/base/base-editor/BaseEditor.vue b/resources/scripts/components/base/base-editor/BaseEditor.vue
index 856ae75d..e8311670 100644
--- a/resources/scripts/components/base/base-editor/BaseEditor.vue
+++ b/resources/scripts/components/base/base-editor/BaseEditor.vue
@@ -8,10 +8,10 @@
   </BaseContentPlaceholders>
   <div
     v-else
-    class="box-border w-full text-sm leading-8 text-left bg-surface border border-line-default rounded-md min-h-[200px] overflow-hidden"
+    class="box-border w-full text-sm leading-8 text-left bg-surface border border-line-light rounded-xl shadow min-h-[200px] overflow-hidden"
   >
     <div v-if="editor" class="editor-content">
-      <div class="flex justify-end p-2 border-b border-line-default md:hidden">
+      <div class="flex justify-end p-2 border-b border-line-light md:hidden">
         <BaseDropdown width-class="w-48">
           <template #activator>
             <div
@@ -40,7 +40,7 @@
           </div>
         </BaseDropdown>
       </div>
-      <div class="hidden p-2 border-b border-line-default md:flex">
+      <div class="hidden p-2 border-b border-line-light md:flex">
         <div class="flex flex-wrap space-x-1">
           <button
               v-for="button in editorButtons"
@@ -180,7 +180,7 @@ export default {
   min-height: 200px;
   padding: 8px 12px;
   outline: none;
-  @apply rounded-md rounded-tl-none rounded-tr-none border border-transparent;
+  @apply rounded-xl rounded-tl-none rounded-tr-none border border-transparent;
 
   h1 {
     font-size: 2em;