byGalax/ChatApp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(desktop): drop bright border on Settings SubSection cards

Browse Source 
The inner cards (Nachrichten-Ton / Klingelton / Audio-Gerät / Hotkeys /
…) looked like they had a stark white outline. The cause: --color-line
is a semi-transparent white token, and applying the `/60` alpha modifier
in `border-line/60` overrides the original alpha — so the inner border
ended up brighter than the outer Section's normal `border-line`.

Drop the border entirely. Background tint + caps heading is enough
grouping signal in a tab-pattern panel.
This commit is contained in:
byGalax
2026-05-16 15:33:36 +02:00
parent 0288d7a476
commit 767db72847
1 changed files with 5 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/desktop/src/pages/SettingsPage.tsx
+5 -1
View File
@@ -1310,9 +1310,13 @@ function Section({
// Sub-heading inside a Section — used to chunk dense sections like Voice into // Sub-heading inside a Section — used to chunk dense sections like Voice into
// smaller named groups (Audio-Gerät / Qualität / PTT / Hotkeys / E2EE). // smaller named groups (Audio-Gerät / Qualität / PTT / Hotkeys / E2EE).
// No border: `--color-line` is already a semi-transparent token, and applying
// the `/60` opacity modifier brightens it (Tailwind overrides the original
// alpha) which made the sub-cards look harsher than the outer Section. Plain
// background tint + caps heading carry the grouping signal on their own.
function SubSection({ title, children }: { title: string; children: React.ReactNode }) { function SubSection({ title, children }: { title: string; children: React.ReactNode }) {
return ( return (
<div className="space-y-2 rounded-xl border border-line/60 bg-surface-3/40 p-4"> <div className="space-y-2 rounded-xl bg-surface-3/50 p-4">
<h3 className="text-[11px] font-semibold uppercase tracking-[0.1em] text-fg-muted"> <h3 className="text-[11px] font-semibold uppercase tracking-[0.1em] text-fg-muted">
{title} {title}
</h3> </h3>