From 9c8e4ae558d4970eb5dd9c1e7afe3afcd489b439 Mon Sep 17 00:00:00 2001
From: Darko Gjorgjijoski <dg@darkog.com>
Date: Sat, 4 Apr 2026 03:30:00 +0200
Subject: [PATCH] Add glass UI with backdrop blur and fix primary button colors

Apply glassmorphism to sidebar, cards, tables, modals, dropdowns,
and dialogs with semi-transparent backgrounds, backdrop-blur, and
white/15 borders. Add subtle gradient body background for the blur
to work against. Add dedicated btn-primary color tokens so primary
buttons stay bold in dark mode instead of using the brightened text
palette. Use shadow-sm to avoid heavy halos in light mode.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 resources/css/invoiceshelf.css                    | 15 +++++++++++++++
 resources/css/themes.css                          |  8 ++++++++
 .../admin/layouts/partials/TheSiteSidebar.vue     |  4 ++--
 resources/scripts/components/base/BaseButton.vue  |  2 +-
 resources/scripts/components/base/BaseCard.vue    |  2 +-
 resources/scripts/components/base/BaseDialog.vue  |  4 ++--
 .../scripts/components/base/BaseDropdown.vue      |  2 +-
 resources/scripts/components/base/BaseModal.vue   |  4 ++--
 .../components/base/base-table/BaseTable.vue      |  6 +++---
 resources/views/app.blade.php                     |  2 +-
 10 files changed, 36 insertions(+), 13 deletions(-)

diff --git a/resources/css/invoiceshelf.css b/resources/css/invoiceshelf.css
index c50c145b..07673579 100644
--- a/resources/css/invoiceshelf.css
+++ b/resources/css/invoiceshelf.css
@@ -41,6 +41,8 @@
   --color-hover-strong: var(--color-hover-strong);
   --color-header-from: var(--color-header-from);
   --color-header-to: var(--color-header-to);
+  --color-btn-primary: var(--color-btn-primary);
+  --color-btn-primary-hover: var(--color-btn-primary-hover);
 
   /* Status badge text */
   --color-status-yellow: var(--color-status-yellow);
@@ -63,6 +65,19 @@
   --font-base: Poppins, sans-serif;
 }
 
+/* Glass UI background gradient */
+@utility bg-glass-gradient {
+  background-image: linear-gradient(
+    135deg,
+    var(--color-surface-tertiary) 0%,
+    color-mix(in srgb, var(--color-primary-500) 8%, var(--color-surface-tertiary)) 30%,
+    var(--color-surface-tertiary) 50%,
+    color-mix(in srgb, var(--color-primary-400) 6%, var(--color-surface-tertiary)) 70%,
+    var(--color-surface-tertiary) 100%
+  );
+  background-attachment: fixed;
+}
+
 @utility bg-multiselect-caret {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='h-5 w-5' viewBox='0 0 20 20' fill='currentColor'%3E%3Cpath fill-rule='evenodd' d='M10 3a1 1 0 01.707.293l3 3a1 1 0 01-1.414 1.414L10 5.414 7.707 7.707a1 1 0 01-1.414-1.414l3-3A1 1 0 0110 3zm-3.707 9.293a1 1 0 011.414 0L10 14.586l2.293-2.293a1 1 0 011.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
 }
diff --git a/resources/css/themes.css b/resources/css/themes.css
index d322e3ae..c246c01b 100644
--- a/resources/css/themes.css
+++ b/resources/css/themes.css
@@ -36,6 +36,10 @@
     --color-header-from: rgb(74, 61, 255);
     --color-header-to: rgb(118, 117, 255);
 
+    /* Button colors (fixed, always bold) */
+    --color-btn-primary: rgb(74, 61, 255);
+    --color-btn-primary-hover: rgb(51, 22, 255);
+
     /* Status badge text */
     --color-status-yellow: rgb(113, 63, 18);
     --color-status-green: rgb(20, 83, 45);
@@ -93,6 +97,10 @@
     --color-header-from: rgb(51, 22, 255);
     --color-header-to: rgb(74, 61, 255);
 
+    /* Button colors (slightly brighter in dark for contrast) */
+    --color-btn-primary: rgb(88, 75, 255);
+    --color-btn-primary-hover: rgb(74, 61, 255);
+
     /* Primary adjustments for dark mode */
     --color-primary-50: rgba(167, 170, 255, 0.15);
     --color-primary-100: rgba(167, 170, 255, 0.25);
diff --git a/resources/scripts/admin/layouts/partials/TheSiteSidebar.vue b/resources/scripts/admin/layouts/partials/TheSiteSidebar.vue
index 55c200e6..b334e494 100644
--- a/resources/scripts/admin/layouts/partials/TheSiteSidebar.vue
+++ b/resources/scripts/admin/layouts/partials/TheSiteSidebar.vue
@@ -124,8 +124,8 @@
       h-screen
       pb-32
       overflow-y-auto
-      bg-surface
-      border-r border-line-default border-solid
+      bg-surface/80 backdrop-blur-xl
+      border-r border-white/10
       xl:w-64
       md:fixed md:flex md:flex-col md:inset-y-0
       pt-16
diff --git a/resources/scripts/components/base/BaseButton.vue b/resources/scripts/components/base/BaseButton.vue
index ce1756f3..061e353a 100644
--- a/resources/scripts/components/base/BaseButton.vue
+++ b/resources/scripts/components/base/BaseButton.vue
@@ -81,7 +81,7 @@ const placeHolderSize = computed(() => {
 
 const variantClass = computed(() => {
   return {
-    'border-transparent shadow-xs text-white bg-primary-600 hover:bg-primary-700 focus:ring-primary-500':
+    'border-transparent shadow-xs text-white bg-btn-primary hover:bg-btn-primary-hover focus:ring-primary-500':
       props.variant === 'primary',
     'border-transparent text-primary-700 bg-primary-100 hover:bg-primary-200 focus:ring-primary-500':
       props.variant === 'secondary',
diff --git a/resources/scripts/components/base/BaseCard.vue b/resources/scripts/components/base/BaseCard.vue
index 5776eb49..76ba8c92 100644
--- a/resources/scripts/components/base/BaseCard.vue
+++ b/resources/scripts/components/base/BaseCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-surface rounded-xl shadow border border-line-light">
+  <div class="bg-surface/70 backdrop-blur-lg rounded-xl shadow-sm border border-white/15">
     <div
       v-if="hasHeaderSlot"
       class="px-5 py-4 text-heading border-b border-line-light border-solid"
diff --git a/resources/scripts/components/base/BaseDialog.vue b/resources/scripts/components/base/BaseDialog.vue
index 5d56fb88..40aaee82 100644
--- a/resources/scripts/components/base/BaseDialog.vue
+++ b/resources/scripts/components/base/BaseDialog.vue
@@ -59,8 +59,8 @@
               text-left
               align-bottom
               transition-all
-              bg-surface
-              rounded-lg
+              bg-surface/80 backdrop-blur-2xl
+              rounded-xl border border-white/15
               shadow-xl
               sm:my-8 sm:align-middle sm:w-full sm:p-6
               relative
diff --git a/resources/scripts/components/base/BaseDropdown.vue b/resources/scripts/components/base/BaseDropdown.vue
index 94281fa6..e3c703d0 100644
--- a/resources/scripts/components/base/BaseDropdown.vue
+++ b/resources/scripts/components/base/BaseDropdown.vue
@@ -69,7 +69,7 @@ const props = defineProps({
 })
 
 const containerClasses = computed(() => {
-  const baseClass = `origin-top-right rounded-md shadow-lg bg-surface ring-1 ring-black/5 divide-y divide-line-light focus:outline-hidden`
+  const baseClass = `origin-top-right rounded-xl shadow-xl bg-surface/80 backdrop-blur-xl border border-white/15 divide-y divide-line-light focus:outline-hidden`
   return `${baseClass} ${props.containerClass}`
 })
 
diff --git a/resources/scripts/components/base/BaseModal.vue b/resources/scripts/components/base/BaseModal.vue
index 4ec0aad6..2aa6ffa5 100644
--- a/resources/scripts/components/base/BaseModal.vue
+++ b/resources/scripts/components/base/BaseModal.vue
@@ -51,8 +51,8 @@
             <div
               :class="`inline-block
               align-middle
-              bg-surface
-              rounded-lg
+              bg-surface/80 backdrop-blur-2xl
+              rounded-xl border border-white/15
               text-left
               overflow-hidden
               relative
diff --git a/resources/scripts/components/base/base-table/BaseTable.vue b/resources/scripts/components/base/base-table/BaseTable.vue
index bda401da..d33d91f0 100644
--- a/resources/scripts/components/base/base-table/BaseTable.vue
+++ b/resources/scripts/components/base/base-table/BaseTable.vue
@@ -6,9 +6,9 @@
           class="
             relative
             overflow-hidden
-            bg-surface
-            border border-line-light
-            shadow
+            bg-surface/70 backdrop-blur-lg
+            border border-white/15
+            shadow-sm
             rounded-xl
           "
         >
diff --git a/resources/views/app.blade.php b/resources/views/app.blade.php
index 5306a30a..6dc9b47b 100644
--- a/resources/views/app.blade.php
+++ b/resources/views/app.blade.php
@@ -34,7 +34,7 @@
 </head>
 
 <body
-    class="h-full overflow-hidden bg-surface-tertiary font-base
+    class="h-full overflow-hidden bg-surface-tertiary bg-glass-gradient font-base
     @if(isset($current_theme)) theme-{{ $current_theme }} @else theme-{{get_app_setting('admin_portal_theme') ?? 'invoiceshelf'}} @endif ">
 
     <!-- Module Scripts -->