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>
This commit is contained in:
Darko Gjorgjijoski
2026-04-04 02:18:00 +02:00
parent 88adfe0e50
commit 350068706c
8 changed files with 25 additions and 22 deletions

View File

@@ -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

View File

@@ -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;