danvics/openreader
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

style(ui): update modal gradient backgrounds and adjust settings header layout

Browse source 
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.
This commit is contained in:
Richard R 2026-05-14 12:14:55 -06:00
parent c3fb3af3d3
commit fef3775ad4
2 changed files with 10 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/components/SettingsModal.tsx
View file

@ -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"> <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 */} {/* Header */}
<div className="flex items-center justify-between px-6 py-4 border-b border-offbase"> <div className="flex items-center justify-between px-5 py-3 border-b border-offbase">
<DialogTitle as="h3" className="text-lg font-semibold leading-6 text-foreground"> <div className="flex items-baseline gap-4">
Settings <DialogTitle as="h3" className="text-lg font-semibold leading-6 text-foreground">
</DialogTitle> Settings
<div className="flex items-center gap-4"> </DialogTitle>
<Button <Button
onClick={() => setIsChangelogOpen(true)} 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'} {displayVersion ? `v${displayVersion} · Changelog` : 'Changelog'}
</Button> </Button>
</div>
<div className="flex items-center">
{authEnabled && ( {authEnabled && (
<Button <Button
onClick={() => showPrivacyModal({ authEnabled })} onClick={() => showPrivacyModal({ authEnabled })}
@ -646,7 +648,7 @@ export function SettingsModal({ className = '' }: { className?: string }) {
{/* Content */} {/* Content */}
<div className={`flex-1 min-w-0 p-3 overflow-y-auto ${ <div className={`flex-1 min-w-0 p-3 overflow-y-auto ${
activeSection === 'admin' 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 */} {/* API Section */}

2
src/components/documents/DocumentSettings.tsx
View file

@ -157,7 +157,7 @@ export function DocumentSettings({ isOpen, setIsOpen, epub, html }: {
ariaLabel="Document settings" ariaLabel="Document settings"
title="Reader Settings" title="Reader Settings"
subtitle="Tune layout, preloading, and playback." 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]" panelClassName="w-full sm:w-[30rem]"
> >
<div className="space-y-4"> <div className="space-y-4">