Show invoice buttons depending of payment status. Fixes #54

resources/css/app.css

@@ -39,6 +39,9 @@ @theme inline {
     --color-destructive: var(--destructive);
     --color-destructive-foreground: var(--destructive-foreground);
 
+    --color-success: var(--success);
+    --color-success-foreground: var(--success-foreground);
+
     --color-border: var(--border);
     --color-input: var(--input);
     --color-ring: var(--ring);
@@ -66,17 +69,17 @@ @theme inline {
 
     --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;
+    /* https://typescale.com/ /*
+    /* Major Third */
+    --text-5xl: 3.815rem;
+    --text-4xl: 3.052rem;
     --text-3xl: 2.441rem;
+    --text-2xl: 1.953rem;
+    --text-xl: 1.563rem;
+    --text-lg: 1.25rem;
+    --text-base: 1rem;
+    --text-sm: 0.8rem;
+    --text-xs: 0.64rem;
 
     --shadow-arrow: 0 2px 1px rgb(0 0 0 / 0.1)
 }
@@ -108,6 +111,7 @@ @layer utilities {
         --font-sans: system-ui, sans-serif;
         font-size: 18px;
         background-color: var(--sidebar-background);
+        /* background: linear-gradient(45deg, var(--color-slate-100), var(--color-orange-100)); */
         letter-spacing: 0.006em;
     }
 }
@@ -130,6 +134,8 @@ :root {
     --accent-foreground: hsl(0 0% 9%);
     --destructive: var(--color-red-500);
     --destructive-foreground: hsl(0 0% 98%);
+    --success: var(--color-lime-400);
+    --success-foreground: var(--color-foreground);
     --border: hsl(0 0% 92.8%);
     --input: var(--color-zinc-100);
     --ring: hsl(0 0% 3.9%);
@@ -154,7 +160,8 @@ :root {
     --status-paid: var(--color-lime-500);
     --status-due: var(--color-amber-300);
     --status-reminded: var(--color-destructive);
-
+    --scrollbar-thumb: --alpha(black / 20%);
+    --scrollbar-track: transparent;
 }
 
 .dark {
@@ -171,10 +178,12 @@ .dark {
     --secondary-foreground: hsl(0 0% 98%);
     --muted: var(--color-neutral-700);
     --muted-foreground: var(--color-neutral-400);
-    --accent: var(--color-neutral-900);
+    --accent: oklch(25% 0 0);
     --accent-foreground: hsl(0 0% 98%);
     --destructive: var(--color-red-600);
     --destructive-foreground: var(--color-red-200);
+    --success: var(--color-lime-900);
+    --success-foreground: var(--color-lime-400);
     --border: var(--color-neutral-700);
     --input: var(--color-neutral-700);
     --ring: var(--color-neutral-500);
@@ -198,11 +207,13 @@ .dark {
     --status-paid: var(--color-lime-700);
     --status-due: var(--color-amber-900);
     --status-reminded: var(--color-destructive-foreground);
+    --scrollbar-thumb: --alpha(white / 35%);
 }
 
 @layer base {
     * {
         @apply border-border outline-ring/50;
+        scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
     }
 
     body {
@@ -222,4 +233,17 @@ @layer components {
     .is-mac .visible-mac {
         display: inherit !important;
     }
+}
+
+@layer utilities {
+
+    /* Remove default dialog close button */
+    [data-slot=dialog-content] button.ring-offset-background {
+        display: none;
+    }
+
+    /* Backdrop */
+    [data-slot=dialog-overlay] {
+        backdrop-filter: blur(var(--blur-sm));
+    }
 }