From fef3775ad4c25be54fde7f9fb8338dbfe6bd33a2 Mon Sep 17 00:00:00 2001
From: Richard R <me@richardr.dev>
Date: Thu, 14 May 2026 12:14:55 -0600
Subject: [PATCH] style(ui): update modal gradient backgrounds and adjust
 settings header layout

Refine radial gradient backgrounds in Settings and DocumentSettings modals to use
CSS color-mix with accent variable for improved theming. Adjust Settings modal
header spacing and layout for better alignment and consistency.
---
 src/components/SettingsModal.tsx              | 16 +++++++++-------
 src/components/documents/DocumentSettings.tsx |  2 +-
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/SettingsModal.tsx b/src/components/SettingsModal.tsx
index c5cd2cf..4e2a18b 100644
--- a/src/components/SettingsModal.tsx
+++ b/src/components/SettingsModal.tsx
@@ -567,17 +567,19 @@ export function SettingsModal({ className = '' }: { className?: string }) {
               >
                 <DialogPanel data-testid="settings-modal" className="relative w-full max-w-4xl transform rounded-xl bg-base text-left align-middle shadow-xl transition-all overflow-hidden border border-offbase">
                   {/* Header */}
-                  <div className="flex items-center justify-between px-6 py-4 border-b border-offbase">
-                    <DialogTitle as="h3" className="text-lg font-semibold leading-6 text-foreground">
-                      Settings
-                    </DialogTitle>
-                    <div className="flex items-center gap-4">
+                  <div className="flex items-center justify-between px-5 py-3 border-b border-offbase">
+                    <div className="flex items-baseline gap-4">
+                      <DialogTitle as="h3" className="text-lg font-semibold leading-6 text-foreground">
+                        Settings
+                      </DialogTitle>
                       <Button
                         onClick={() => setIsChangelogOpen(true)}
-                        className="text-sm font-medium text-muted hover:text-accent transition-colors"
+                        className="text-sm font-medium leading-6 text-muted hover:text-accent transition-colors"
                       >
                         {displayVersion ? `v${displayVersion} · Changelog` : 'Changelog'}
                       </Button>
+                    </div>
+                    <div className="flex items-center">
                       {authEnabled && (
                         <Button
                           onClick={() => showPrivacyModal({ authEnabled })}
@@ -646,7 +648,7 @@ export function SettingsModal({ className = '' }: { className?: string }) {
                     {/* Content */}
                     <div className={`flex-1 min-w-0 p-3 overflow-y-auto ${
                       activeSection === 'admin'
-                        ? 'bg-[radial-gradient(circle_at_top_right,rgba(239,68,68,0.08),transparent_35%)]'
+                        ? 'bg-[radial-gradient(circle_at_top_right,color-mix(in_srgb,var(--accent),transparent_92%),transparent_35%)]'
                         : ''
                     }`}>
                       {/* API Section */}
diff --git a/src/components/documents/DocumentSettings.tsx b/src/components/documents/DocumentSettings.tsx
index af213ae..c586d0a 100644
--- a/src/components/documents/DocumentSettings.tsx
+++ b/src/components/documents/DocumentSettings.tsx
@@ -157,7 +157,7 @@ export function DocumentSettings({ isOpen, setIsOpen, epub, html }: {
       ariaLabel="Document settings"
       title="Reader Settings"
       subtitle="Tune layout, preloading, and playback."
-      bodyClassName="flex-1 overflow-y-auto px-4 py-4 bg-[radial-gradient(circle_at_top_right,rgba(239,68,68,0.08),transparent_35%)]"
+      bodyClassName="flex-1 overflow-y-auto px-4 py-4 bg-[radial-gradient(circle_at_top_right,color-mix(in_srgb,var(--accent),transparent_92%),transparent_35%)]"
       panelClassName="w-full sm:w-[30rem]"
     >
       <div className="space-y-4">