From b81c6d71f498eef06e45d1abe61006b7c8b2b1e2 Mon Sep 17 00:00:00 2001
From: Daniel Stock <daniel.stock@tooloop.de>
Date: Tue, 11 Nov 2025 11:49:38 +0100
Subject: [PATCH] Overall design work

---
 resources/css/app.css                         | 36 +++++++---
 resources/js/components/AppSidebar.vue        |  2 +-
 .../js/components/documents/DocumentTable.vue | 72 ++++++++++---------
 resources/js/components/ui/button/index.ts    |  2 +-
 .../components/ui/send-mail-dialog/index.ts   |  1 +
 .../js/components/ui/sidebar/Sidebar.vue      |  6 +-
 .../components/ui/sidebar/SidebarProvider.vue |  5 +-
 resources/js/components/ui/sidebar/utils.ts   |  4 +-
 .../js/components/ui/status-badge/index.ts    | 23 +++---
 resources/js/layouts/app/AppSidebarLayout.vue |  2 +-
 resources/js/pages/Customers.vue              |  4 +-
 resources/js/pages/Invoices.vue               | 11 +--
 12 files changed, 101 insertions(+), 67 deletions(-)
 create mode 100644 resources/js/components/ui/send-mail-dialog/index.ts

diff --git a/resources/css/app.css b/resources/css/app.css
index 0a3b171..90f00a7 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -64,7 +64,19 @@ @theme inline {
     --color-status-due: var(--status-due);
     --color-status-reminded: var(--status-reminded);
 
-    --text-xs: 0.694rem;
+    --color-main: var(--main-background);
+
+    /*
+    https://typescale.com/
+    Major Third
+    */
+    --text-xs: 0.64rem;
+    --text-sm: 0.8rem;
+    --text-base: 1rem;
+    --text-lg: 1.125rem;
+    --text-xl: 1.563rem;
+    --text-2xl: 1.953rem;
+    --text-3xl: 2.441rem;
 
     --shadow-arrow: 0 2px 1px rgb(0 0 0 / 0.1)
 }
@@ -105,15 +117,16 @@ :root {
     --foreground: hsl(0 0% 3.9%);
     --card: hsl(0 0% 100%);
     --card-foreground: hsl(0 0% 3.9%);
-    --popover: hsl(0 0% 100%);
     --popover-foreground: hsl(0 0% 3.9%);
+    --popover: var(--color-background);
+    --popover-foreground: var(--color-gray-900);
     --primary: var(--color-orange-200);
     --primary-foreground: var(--color-orange-600);
     --secondary: hsl(0 0% 92.1%);
     --secondary-foreground: hsl(0 0% 9%);
-    --muted: var(--color-slate-50);
-    --muted-foreground: var(--color-slate-400);
-    --accent: var(--color-slate-50);
+    --muted: var(--color-gray-50);
+    --muted-foreground: var(--color-gray-400);
+    --accent: var(--color-gray-50);
     --accent-foreground: hsl(0 0% 9%);
     --destructive: var(--color-red-500);
     --destructive-foreground: hsl(0 0% 98%);
@@ -121,25 +134,27 @@ :root {
     --input: var(--color-zinc-100);
     --ring: hsl(0 0% 3.9%);
     --chart-1: hsl(12 76% 61%);
-    --chart-2: hsl(173 58% 39%);
+    --chart-2: hsl(313, 58%, 39%);
     --chart-3: hsl(197 37% 24%);
     --chart-4: hsl(43 74% 66%);
     --chart-5: hsl(27 87% 67%);
     --radius: 0.5rem;
-    --sidebar-background: var(--color-slate-300);
+    --main-background: transparent;
+    --sidebar-background: var(--color-slate-100);
     --sidebar-foreground: hsl(240 5.3% 26.1%);
     --sidebar-primary: hsl(0 0% 10%);
     --sidebar-primary-foreground: hsl(0 0% 98%);
-    --sidebar-accent: var(--color-slate-100);
+    --sidebar-accent: var(--color-white);
     --sidebar-accent-foreground: hsl(0 0% 30%);
-    --sidebar-border: var(--color-slate-300);
+    --sidebar-border: var(--color-gray-300);
     --sidebar-ring: hsl(217.2 91.2% 59.8%);
     --sidebar: hsl(0 0% 98%);
-    --status-draft: var(--color-slate-100);
+    --status-draft: var(--color-gray-100);
     --status-sent: var(--color-sky-400);
     --status-paid: var(--color-lime-500);
     --status-due: var(--color-amber-300);
     --status-reminded: var(--color-destructive);
+
 }
 
 .dark {
@@ -168,6 +183,7 @@ .dark {
     --chart-3: hsl(30 80% 55%);
     --chart-4: hsl(280 65% 60%);
     --chart-5: hsl(340 75% 55%);
+    --main-background: transparent;
     --sidebar-background: var(--color-neutral-700);
     --sidebar-foreground: hsl(0 0% 95.9%);
     --sidebar-primary: hsl(360, 100%, 100%);
diff --git a/resources/js/components/AppSidebar.vue b/resources/js/components/AppSidebar.vue
index 6e5df03..0da6abe 100644
--- a/resources/js/components/AppSidebar.vue
+++ b/resources/js/components/AppSidebar.vue
@@ -83,7 +83,7 @@ const footerNavItems: NavItem[] = [
 </script>
 
 <template>
-    <Sidebar collapsible="icon" variant="inset">
+    <Sidebar collapsible="icon" variant="sidebar">
 
         <SidebarHeader>
             <Link :href="dashboard()" class="flex row items-center mt-6">
diff --git a/resources/js/components/documents/DocumentTable.vue b/resources/js/components/documents/DocumentTable.vue
index abe36c2..9856b66 100644
--- a/resources/js/components/documents/DocumentTable.vue
+++ b/resources/js/components/documents/DocumentTable.vue
@@ -3,7 +3,7 @@
 import { computed } from 'vue'
 import { type Invoice } from '@/types'
 import { toLocalDate, toCurrency, toFixedRounded } from '@/lib/utils'
-import { StatusBadge, statusBadgeLabels, statusBadgeTextColor, castToStatusVariant } from '@/components/ui/status-badge'
+import { StatusBadge, statusBadgeLabels, statusTextStyle, castToStatusVariant } from '@/components/ui/status-badge'
 import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from '@/components/ui/table'
 
 
@@ -104,27 +104,27 @@ const calcTaxes = (amount: number) => {
 
 
 <template>
-    <Table class="relative document-table">
+    <Table class="relative document-table bg-none">
         <TableHeader>
             <TableRow class="hover:bg-transparent border-none">
-                <TableHead class="sticky top-0 w-1/100 lg:w-1/100 hidden md:table-cell">Nr.</TableHead>
-                <TableHead class="sticky top-0 w-1/100 lg:w-1/20 text-center">Status</TableHead>
-                <TableHead class="sticky top-0 w-1/100 lg:w-1/20 lg:px-5 text-right hidden md:table-cell">Gestellt
+                <TableHead class="w-1/100 lg:w-1/100 hidden md:table-cell lg:pl-4 lg:pr-5">Nr.</TableHead>
+                <TableHead class="w-1/100 lg:w-1/20 text-center">Status</TableHead>
+                <TableHead class="w-1/100 lg:w-1/20 lg:px-5 text-right hidden md:table-cell">Gestellt
                 </TableHead>
-                <TableHead class="sticky top-0 w-1/5 text-right lg:hidden">Rechnung</TableHead>
-                <TableHead class="sticky top-0 w-1/5 hidden lg:table-cell">Kunde</TableHead>
-                <TableHead colspan="2" class="sticky top-0 w-1/3 hidden lg:table-cell">Betreff</TableHead>
-                <TableHead class="sticky top-0 w-1/20 text-right">Netto</TableHead>
-                <TableHead class="sticky top-0 w-1/20 text-right hidden lg:table-cell">Ust.</TableHead>
-                <TableHead class="sticky top-0 w-1/20 text-right hidden lg:table-cell">Brutto</TableHead>
+                <TableHead class="w-1/5 text-right lg:hidden">Rechnung</TableHead>
+                <TableHead class="w-1/5 hidden lg:table-cell">Kunde</TableHead>
+                <TableHead colspan="2" class="w-1/3 hidden lg:table-cell">Betreff</TableHead>
+                <TableHead class="w-1/20 text-right">Netto</TableHead>
+                <TableHead class="w-1/20 text-right hidden lg:table-cell">Ust.</TableHead>
+                <TableHead class="w-1/20 text-right hidden lg:table-cell lg:pr-4">Brutto</TableHead>
             </TableRow>
         </TableHeader>
-        
+
         <TableBody class="overflow-clip rounded-lg">
-            <TableRow v-for="invoice in invoices" :key="invoice.nr" @dblclick="onItemClicked(invoice)"
+            <TableRow v-for="invoice in invoices" :key="invoice.nr" @click="onItemClicked(invoice)"
                 class="select-none md:select-auto cursor-default bg-background"
-                :style="'color:' + statusBadgeTextColor(invoice.paymentStatus)">
-                <TableCell class="w-1/100 hidden md:table-cell lg:pr-5 tabular-nums">{{ invoice.nr }}
+                :class="statusTextStyle(invoice.paymentStatus)">
+                <TableCell class="w-1/100 hidden md:table-cell lg:pl-4 lg:pr-5 tabular-nums">{{ invoice.nr }}
                 </TableCell>
                 <TableCell class="w-1/100 text-center">
                     <StatusBadge :variant="castToStatusVariant(invoice.paymentStatus)">{{
@@ -149,15 +149,14 @@ const calcTaxes = (amount: number) => {
                 </TableCell>
                 <TableCell class="text-right tabular-nums hidden lg:table-cell">{{
                     toCurrency(calcTaxes(invoice.totalAmount)) }}</TableCell>
-                <TableCell class="text-right tabular-nums hidden lg:table-cell">{{
+                <TableCell class="text-right tabular-nums hidden lg:pr-4 lg:table-cell">{{
                     toCurrency(invoice.totalAmount + calcTaxes(invoice.totalAmount)) }}</TableCell>
             </TableRow>
         </TableBody>
 
-        <TableFooter>
+        <TableFooter class="border-none bg-transparent">
             <!-- Summe -->
-            <TableRow
-                class="border-none bg-slate-100 dark:bg-neutral-900/60 hover:bg-slate-100 dark:hover:bg-neutral-900/60">
+            <TableRow class="border-none hover:bg-transparent">
                 <TableCell colspan="2" class="hidden lg:table-cell"></TableCell>
                 <TableCell colspan="2" class="hidden md:table-cell"></TableCell>
                 <TableCell colspan="1"></TableCell>
@@ -165,12 +164,11 @@ const calcTaxes = (amount: number) => {
                 <TableCell class="py-4 text-right tabular-nums">{{ toCurrency(totalAmount) }}</TableCell>
                 <TableCell class="py-4 text-right tabular-nums hidden lg:table-cell">{{ toCurrency(totalTax) }}
                 </TableCell>
-                <TableCell class="py-4 text-right tabular-nums hidden lg:table-cell font-bold">{{
+                <TableCell class="py-4 lg:pr-4 text-right tabular-nums hidden lg:table-cell font-bold">{{
                     toCurrency(totalGross) }}</TableCell>
             </TableRow>
             <!-- Bezahlt -->
-            <TableRow v-if="!(totalDue == 0 && totalNotIssued == 0)"
-                class="border-none bg-slate-100 dark:bg-neutral-900/60 hover:bg-slate-100 dark:hover:bg-neutral-900/60">
+            <TableRow v-if="!(totalDue == 0 && totalNotIssued == 0)" class="border-none hover:bg-transparent">
                 <TableCell colspan="2" class="hidden lg:table-cell"></TableCell>
                 <TableCell colspan="2" class="hidden md:table-cell"></TableCell>
                 <TableCell colspan="1"></TableCell>
@@ -178,12 +176,11 @@ const calcTaxes = (amount: number) => {
                 <TableCell class="py-4 text-right tabular-nums">{{ toCurrency(totalPaid) }}</TableCell>
                 <TableCell class=" text-right tabular-nums hidden lg:table-cell">{{ toCurrency(totalTaxPaid) }}
                 </TableCell>
-                <TableCell class=" text-right tabular-nums hidden lg:table-cell font-bold">{{ toCurrency(totalGrossPaid)
+                <TableCell class="lg:pr-4 text-right tabular-nums hidden lg:table-cell font-bold">{{ toCurrency(totalGrossPaid)
                 }}</TableCell>
             </TableRow>
 
-            <TableRow v-if="totalDue > 0"
-                class="border-none bg-slate-100 dark:bg-neutral-900/60 hover:bg-slate-100 dark:hover:bg-neutral-900/60 text-destructive">
+            <TableRow v-if="totalDue > 0" class="border-none text-destructive hover:bg-transparent">
                 <TableCell colspan="2" class="hidden lg:table-cell"></TableCell>
                 <TableCell colspan="2" class="hidden md:table-cell"></TableCell>
                 <TableCell colspan="1"></TableCell>
@@ -191,12 +188,11 @@ const calcTaxes = (amount: number) => {
                 <TableCell class="py-4 text-right tabular-nums">{{ toCurrency(totalDue) }}</TableCell>
                 <TableCell class="text-right tabular-nums hidden lg:table-cell">{{ toCurrency(totalTaxDue) }}
                 </TableCell>
-                <TableCell class="text-right tabular-nums hidden lg:table-cell font-bold">{{ toCurrency(totalGrossDue)
+                <TableCell class="lg:pr-4 text-right tabular-nums hidden lg:table-cell font-bold">{{ toCurrency(totalGrossDue)
                     }}</TableCell>
             </TableRow>
 
-            <TableRow v-if="totalNotIssued > 0"
-                class="border-none bg-slate-100 dark:bg-neutral-900/60 hover:bg-slate-100 dark:hover:bg-neutral-900/60 text-muted-foreground">
+            <TableRow v-if="totalNotIssued > 0" class="border-none text-muted-foreground hover:bg-transparent">
                 <TableCell colspan="2" class="hidden lg:table-cell"></TableCell>
                 <TableCell colspan="2" class="hidden md:table-cell"></TableCell>
                 <TableCell colspan="1"></TableCell>
@@ -204,7 +200,7 @@ const calcTaxes = (amount: number) => {
                 <TableCell class="py-4 text-right tabular-nums">{{ toCurrency(totalNotIssued) }}</TableCell>
                 <TableCell class="text-right tabular-nums hidden lg:table-cell">{{ toCurrency(totalTaxNotIssued) }}
                 </TableCell>
-                <TableCell class="text-right tabular-nums hidden lg:table-cell font-bold">{{
+                <TableCell class="lg:pr-4 text-right tabular-nums hidden lg:table-cell font-bold">{{
                     toCurrency(totalGrossNotIssued) }}</TableCell>
             </TableRow>
 
@@ -216,9 +212,21 @@ const calcTaxes = (amount: number) => {
 .document-table {
     font-size: 0.833rem;
 }
-.document-table th,
+
+.document-table th {
+
+}
 .document-table td {
-    padding-top: 0.694em !important;
-    padding-bottom: 0.694em !important;
+    padding-top: 1em !important;
+    padding-bottom: 1em !important;
+}
+
+.document-table tfoot tr:first-child td {
+    padding-top: 2em !important;
+}
+
+.document-table tfoot td {
+    padding-top: 0.64em !important;
+    padding-bottom: 0.64em !important;
 }
 </style>
\ No newline at end of file
diff --git a/resources/js/components/ui/button/index.ts b/resources/js/components/ui/button/index.ts
index 4fe8348..d2d4d2d 100644
--- a/resources/js/components/ui/button/index.ts
+++ b/resources/js/components/ui/button/index.ts
@@ -12,7 +12,7 @@ export const buttonVariants = cva(
         action:
           'bg-blue-600 border-b-1 border-t-1 border-t-blue-400 border-b-blue-800 active:bg-blue-700 hover:bg-blue-500 text-white',
         destructive:
-          'bg-destructive dark:bg-red-700 text-white border-b-1 border-t-1 border-t-red-200 border-b-red-700 dark:border-t-red-400 dark:border-b-red-800 hover:bg-red-600 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40',
+          'bg-destructive dark:bg-red-700 text-white border-b-1 border-t-1 border-t-red-200 border-b-red-700 dark:border-t-red-400 dark:border-b-red-800 hover:bg-red-600 hover:bg-red-600 active:bg-red-500 active:inset-shadow-red-950 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40',
         outline:
           'border bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
         secondary:
diff --git a/resources/js/components/ui/send-mail-dialog/index.ts b/resources/js/components/ui/send-mail-dialog/index.ts
new file mode 100644
index 0000000..32bab4e
--- /dev/null
+++ b/resources/js/components/ui/send-mail-dialog/index.ts
@@ -0,0 +1 @@
+export { default as SendMailDialog } from "./SendMailDialog.vue"
\ No newline at end of file
diff --git a/resources/js/components/ui/sidebar/Sidebar.vue b/resources/js/components/ui/sidebar/Sidebar.vue
index 5a40f09..06a74d7 100644
--- a/resources/js/components/ui/sidebar/Sidebar.vue
+++ b/resources/js/components/ui/sidebar/Sidebar.vue
@@ -63,7 +63,7 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
     <!-- This is what handles the sidebar gap on desktop  -->
     <div
       :class="cn(
-        'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
+        'relative w-(--sidebar-width) bg-transparent transition-[width] duration-100 ease-linear',
         'group-data-[collapsible=offcanvas]:w-0',
         'group-data-[side=right]:rotate-180',
         variant === 'floating' || variant === 'inset'
@@ -73,14 +73,14 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
     />
     <div
       :class="cn(
-        'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
+        'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-100 ease-linear md:flex',
         side === 'left'
           ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
           : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
         // Adjust the padding for floating and inset variants.
         variant === 'floating' || variant === 'inset'
           ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
-          : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
+          : 'p-4 pr-2 group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-0 group-data-[side=right]:border-0',
         props.class,
       )"
       v-bind="$attrs"
diff --git a/resources/js/components/ui/sidebar/SidebarProvider.vue b/resources/js/components/ui/sidebar/SidebarProvider.vue
index a4ba362..85e4198 100644
--- a/resources/js/components/ui/sidebar/SidebarProvider.vue
+++ b/resources/js/components/ui/sidebar/SidebarProvider.vue
@@ -66,6 +66,9 @@ provideSidebarContext({
 
 <template>
   <TooltipProvider :delay-duration="0">
+    <!-- :class="cn('group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full', props.class)" -->
+    <!-- :class="cn('group/sidebar-wrapper has-data-[variant=inset]:bg-linear-45 from-orange-200 to-orange-300 flex min-h-svh w-full', props.class)" -->
+    <!-- linear-[45deg,rgb(235,217,178)_0%,_rgb(237,183,83)_100%] -->
     <div
       data-slot="sidebar-wrapper"
       :style="{
@@ -74,7 +77,7 @@ provideSidebarContext({
       }"
       :class="cn('group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full', props.class)"
       v-bind="$attrs"
-    >
+      >
       <slot />
     </div>
   </TooltipProvider>
diff --git a/resources/js/components/ui/sidebar/utils.ts b/resources/js/components/ui/sidebar/utils.ts
index 6edb140..ee8f5b8 100644
--- a/resources/js/components/ui/sidebar/utils.ts
+++ b/resources/js/components/ui/sidebar/utils.ts
@@ -3,9 +3,9 @@ import { createContext } from 'reka-ui'
 
 export const SIDEBAR_COOKIE_NAME = 'sidebar_state'
 export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
-export const SIDEBAR_WIDTH = '16rem'
+export const SIDEBAR_WIDTH = '14rem'
 export const SIDEBAR_WIDTH_MOBILE = '18rem'
-export const SIDEBAR_WIDTH_ICON = '3rem'
+export const SIDEBAR_WIDTH_ICON = '4rem'
 export const SIDEBAR_KEYBOARD_SHORTCUT = 'b'
 
 export const [useSidebar, provideSidebarContext] = createContext<{
diff --git a/resources/js/components/ui/status-badge/index.ts b/resources/js/components/ui/status-badge/index.ts
index b68612b..175a2e1 100644
--- a/resources/js/components/ui/status-badge/index.ts
+++ b/resources/js/components/ui/status-badge/index.ts
@@ -4,22 +4,22 @@ import { cva } from "class-variance-authority"
 export { default as StatusBadge } from "./StatusBadge.vue"
 
 export const statusBadgeVariants = cva(
-  "shadow inline-flex items-center justify-center aspect-1/1 p-1 lg:aspect-auto lg:px-2 lg:py-0.5 rounded-full lg:rounded-md border text-xs font-medium lg:w-full whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  "inline-flex items-center justify-center bg-gray-50 dark:bg-neutral-700 border-1 aspect-1/1 p-1 lg:aspect-auto lg:px-2 lg:py-0.5 rounded-full lg:rounded-sm text-xs lg:w-full whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
   {
     variants: {
       variant: {
         draft:
-          "text-foreground bg-slate-100 dark:bg-zinc-500 [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+          "border-dashed text-muted-foreground dark:bg-transparent",
         issued:
-          "border-transparent bg-sky-400 dark:bg-sky-700 [a&]:hover:bg-primary/90",
+          "bg-transparent border-sky-200 text-sky-600 dark:bg-sky-800 dark:text-sky-300 dark:border-0",
         paid:
-          "border-transparent bg-lime-500 dark:bg-lime-700 text-lime-950 dark:text-lime-200 [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
+          "border-none bg-lime-400 dark:bg-lime-900 dark:text-lime-400",
         due:
-          "border-transparent bg-amber-300 text-amber-900 [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
+          "font-bold border-none bg-amber-300 text-amber-800 dark:bg-amber-900 dark:text-amber-500",
         reminded:
-          "border-transparent bg-destructive text-destructive-foreground [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
+          "font-bold border-none bg-red-500 text-red-100 dark:bg-red-900 dark:text-red-200 dark:font-normal",
         cancelled:
-          "text-foreground bg-slate-400 dark:bg-zinc-700 [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+          "bg-background text-foreground",
 
       },
       size: {
@@ -45,7 +45,12 @@ export const statusBadgeLabels: { [key: string]: string } = {
   cancelled: 'Storniert'
 }
 
-export function statusBadgeTextColor(status: string): string {
+export function statusTextStyle(status: string): string {
+  if (status === 'draft') return 'text-muted-foreground'
+  if (status === 'due') return 'text-amber-600'
+  if (status === 'reminded') return 'text-red-600 dark:text-red-400'
+  if (status === 'cancelled') return 'line-through text-muted-foreground decoration-gray-300'
+
   return (['due', 'reminded'].includes(status)) ?
     'var(--color-destructive)' :
     ''
@@ -61,5 +66,5 @@ export const castToStatusVariant = (status: string): StatusBadgeVariants['varian
     'cancelled': 'cancelled',
   };
 
-  return statusMapping[status] || 'draft'; // 'draft' als Standardwert
+  return statusMapping[status] || 'draft';
 };
\ No newline at end of file
diff --git a/resources/js/layouts/app/AppSidebarLayout.vue b/resources/js/layouts/app/AppSidebarLayout.vue
index 21ebb76..4c1d821 100644
--- a/resources/js/layouts/app/AppSidebarLayout.vue
+++ b/resources/js/layouts/app/AppSidebarLayout.vue
@@ -17,7 +17,7 @@ withDefaults(defineProps<Props>(), {
 <template>
     <AppShell variant="sidebar">
         <AppSidebar />
-        <AppContent variant="sidebar" class="overflow-x-hidden bg-slate-100 dark:bg-neutral-900/40">
+        <AppContent variant="sidebar" class="overflow-x-hidden bg-main">
             <AppSidebarHeader :breadcrumbs="breadcrumbs" />
             <slot />
         </AppContent>
diff --git a/resources/js/pages/Customers.vue b/resources/js/pages/Customers.vue
index 0094b40..5a485d2 100644
--- a/resources/js/pages/Customers.vue
+++ b/resources/js/pages/Customers.vue
@@ -170,8 +170,8 @@ const call = (number: string, event: Event) => {
             <div class="columns-xs gap-6">
 
                 <Card v-for="customer in filteredCustomers" :key="customer.id"
-                    class="relative mb-6 break-inside-avoid hover:border-slate-300 dark:hover:border-neutral-600 overflow-clip"
-                    @click="" @dblclick="showDetail(customer)">
+                    class="relative mb-6 break-inside-avoid hover:border-slate-300 dark:hover:bg-neutral-800/90 dark:hover:border-neutral-600 overflow-clip"
+                    @click="showDetail(customer)">
 
                     <CardHeader v-if="customer.logo" class="z-0">
                         <img :src="'storage/uploads/' + customer.logo" alt="Logo {{ customer.companyName }}"
diff --git a/resources/js/pages/Invoices.vue b/resources/js/pages/Invoices.vue
index 22622f8..391c401 100644
--- a/resources/js/pages/Invoices.vue
+++ b/resources/js/pages/Invoices.vue
@@ -197,12 +197,12 @@ const deleteInvoice = async (id: number) => {
 
     <Head title="Rechnungen" />
 
+    <!-- Function Header -->
     <AppLayout :breadcrumbs="breadcrumbs">
 
         <div
-            class="flex h-full flex-1 flex-col gap-4 overflow-x-auto p-4 lg:p-8 print:bg-transparent print:p-0 print:m-0">
+            class="flex h-full flex-1 flex-col gap-4 overflow-x-auto p-4 lg:p-8 lg:pl-4 print:bg-transparent print:p-0 print:m-0">
 
-            <!-- Function Header -->
             <div id="function-header" class="flex row justify-between items-center mb-4 gap-4">
 
                 <!-- Year select -->
@@ -212,7 +212,7 @@ const deleteInvoice = async (id: number) => {
                         <ChevronLeft />
                     </Button>
                     <Select :size="'sm'" v-model="selectedYearIndex" v-if="years.length > 1">
-                        <SelectTrigger class="bg-background hover:bg-accent">
+                        <SelectTrigger class="   hover:bg-accent">
                             <SelectValue placeholder="Jahr" />
                         </SelectTrigger>
                         <SelectContent>
@@ -247,8 +247,8 @@ const deleteInvoice = async (id: number) => {
                 </div>
 
                 <!-- <Button size="sm" @click="testToast" class="mr-2">
-                    Toast
-                </Button> -->
+                Toast
+            </Button> -->
 
                 <!-- New button -->
                 <TooltipProvider>
@@ -272,6 +272,7 @@ const deleteInvoice = async (id: number) => {
 
             </div>
 
+
             <!-- Invoice Table -->
             <DocumentTable :invoices="filteredInvoices" :onItemClicked="showDetail" />