Checkpoint: glass theme look

This commit is contained in:
Avi 2026-08-24 19:44:31 -05:00
commit 0cab88364b

View file

@ -1,4 +1,63 @@
# Checkpoint — Glass theme fix (2026-08-24)
# Checkpoint — Glass theme look (2026-08-24)
A stopping point you can return to if this session is closed. Everything below was
verified green at the moment this file was written.
## Where things are
- Project: `/home/avi/Projects/Nostr_Keynctr`
- Git repo: `master` @ `ecb666b` ("Glass theme: real frosted-glass look").
Before it: `bfe14f0` (glass fix — broken Default impl), `1aae81c`
(checkpoint), `db2d22f` (glass added), `a01f258` (system removed).
- Working tree: clean apart from this checkpoint update. `concept3.svg` deleted
and `KeynectrAppIconPossibility02.jpeg` untracked remain as the user had them.
## What was completed
1. **Glass now looks like glass (`ecb666b`).** The first pass was only a flat
dark palette; the user said "it looks nothing like glass". Redone as real
glassmorphism, scoped 100% to `html[data-theme='glass']`:
- Aurora backdrop on `<body>` (cyan/violet/blue radial glows over
`#0a0d13`); `.app-shell`/`.main` made transparent so it shows through.
- Translucent surfaces (`--surface` etc. as rgba) + `backdrop-filter:
blur(18px) saturate(160%)` on cards, sidebar, modals, empty states,
profile cards, compose preview.
- Hairline light borders, softened translucent accent tints, frosted modal
scrim (blur 6px), inputs at low-alpha white, sidebar logo inverted like
dark/neon.
2. Earlier this session (`bfe14f0`, see next checkpoint): root cause of "glass
does nothing" was a repo that hadn't compiled since `a01f258`.
## Commits added most recently
- `ecb666b` Glass theme: real frosted-glass look
## Verification commands run (all green)
Rust (repo root): `cargo test` 113 passed; `cargo fmt --check` clean.
Frontend (`frontend/`): `npm test` 92 passed; typecheck, lint,
format:check clean; `npm run build` rebuilt `dist/` (so plain `npm start`
serves the new look).
## How to use / reproduce
```bash
cd ~/Projects/Nostr_Keynctr/frontend && npm start
```
Settings → Appearance → Theme → **Glass**: frosted translucent panels over a
glowing deep-blue backdrop with cyan accents.
## Notes & next steps
- Blur strength lives in the `backdrop-filter` rules and glow colors in the
`html[data-theme='glass'] body` gradient — both near the top of
`frontend/src/styles.css`.
- Electron GPU/Wayland warnings on this laptop are environmental noise.
---
# Older checkpoint — Glass theme fix (2026-08-24)
A stopping point you can return to if this session is closed. Everything below was
verified green at the moment this file was written.