jerry/buzz
1
0
Fork 0
mirror of https://github.com/block/buzz.git synced 2026-11-13 12:51:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(desktop): add subtle top/bottom fade on theme scroll area

Browse Source 
- Add gradient fades at top and bottom of the theme grid container
- Use h-3 (12px) for a subtle fade effect, not too aggressive
This commit is contained in:
klopez4212
2026-07-06 14:09:00 +01:00
parent 570bc4febd
commit 6767b3f08f
1 changed files with 56 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
desktop/src/features/settings/ui/SettingsPanels.tsx
View File

@@ -436,43 +436,63 @@ function ThemeSettingsCard() {
</div>
{/* Theme grid — constrained to ~3 rows, scrolls internally */}
<div className="mb-6 max-h-[430px] overflow-y-auto rounded-lg">
<div className="flex flex-wrap gap-4 p-1">
{selectedMode === "system" &&
pairedLight.map((lightName) => {
const darkName = getThemePair(lightName);
if (!darkName) return null;
return (
<PairedThemeTile
darkVars={getVars(darkName)}
isActive={isPairActive(lightName)}
key={lightName}
lightName={lightName}
lightVars={getVars(lightName)}
onSelect={() => handleSelectTheme(lightName)}
<div className="relative mb-6">
{/* Top fade */}
<div
aria-hidden="true"
className="pointer-events-none absolute inset-x-0 top-0 z-10 h-3"
style={{
background:
"linear-gradient(to bottom, hsl(var(--background)), hsl(var(--background) / 0))",
}}
/>
{/* Bottom fade */}
<div
aria-hidden="true"
className="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-3"
style={{
background:
"linear-gradient(to top, hsl(var(--background)), hsl(var(--background) / 0))",
}}
/>
<div className="max-h-[430px] overflow-y-auto rounded-lg">
<div className="flex flex-wrap gap-4 p-1">
{selectedMode === "system" &&
pairedLight.map((lightName) => {
const darkName = getThemePair(lightName);
if (!darkName) return null;
return (
<PairedThemeTile
darkVars={getVars(darkName)}
isActive={isPairActive(lightName)}
key={lightName}
lightName={lightName}
lightVars={getVars(lightName)}
onSelect={() => handleSelectTheme(lightName)}
/>
);
})}
{selectedMode === "light" &&
allLightThemes.map((name) => (
<SingleThemeTile
isActive={selectedThemeName === name}
key={name}
name={name}
onSelect={() => handleSelectTheme(name)}
vars={getVars(name)}
/>
);
})}
{selectedMode === "light" &&
allLightThemes.map((name) => (
<SingleThemeTile
isActive={selectedThemeName === name}
key={name}
name={name}
onSelect={() => handleSelectTheme(name)}
vars={getVars(name)}
/>
))}
{selectedMode === "dark" &&
allDarkThemes.map((name) => (
<SingleThemeTile
isActive={selectedThemeName === name}
key={name}
name={name}
onSelect={() => handleSelectTheme(name)}
vars={getVars(name)}
/>
))}
))}
{selectedMode === "dark" &&
allDarkThemes.map((name) => (
<SingleThemeTile
isActive={selectedThemeName === name}
key={name}
name={name}
onSelect={() => handleSelectTheme(name)}
vars={getVars(name)}
/>
))}
</div>
</div>
</div>