Skip to content

Clean editorial reskin (warm/orange) — Behavioral Observation - #15

Open
hsalaman1 wants to merge 2 commits into
mainfrom
agent/professional-interface
Open

Clean editorial reskin (warm/orange) — Behavioral Observation#15
hsalaman1 wants to merge 2 commits into
mainfrom
agent/professional-interface

Conversation

@hsalaman1

Copy link
Copy Markdown
Owner

Finishes the visual reskin so the app matches the approved clean, editorial "Claude-style" mockup in the warm/orange palette. Priority was a clean, restrained interface (not literal pixel-matching) — the mockup expresses that look with different colors.

What changed (UI only — no functional changes)

  • Observation Note + Narrative log: now warm flat cards (were bg-white), rendered as two separate cards instead of one double-wrapped card.
  • Narrative: orange Add button (was blue), uppercase muted table headers, warm rows/footer, orange focus rings.
  • Duration timers: variant-driven exact semantic colors (Crisis #e2534f / On Task #12a150 / Off Task #3b82f6); active state is a clean static colored ring + solid colored STOP button (replaced Tailwind-default pulse rings).
  • Tokens: added --coral-soft / --on-coral + semantic tint vars; removed unused pulse-ring keyframes and dead Tailwind color config.

Preserved

Timers + mutual exclusion, all 5 tabs, Quick Tally counting/collapse/persistence, voice dictation, Word/PDF/CSV/print exports, mobile hamburger + sticky timer dock + collapsible Observation Details, Electron multi-window.

Verification

  • npm run build ✓ (only the pre-existing large-bundle warning)
  • Playwright at 1440×900 / 820×1180 / 390×844 with state driven (hot tallies, running timer, event scores, narrative rows) — clean, no console errors.

🤖 Generated with Claude Code

hsalaman1 and others added 2 commits July 16, 2026 10:03
Finish the editorial reskin so the app reads as a clean "Claude-style"
interface in the warm/orange palette (per approved mockup):

- Observation Note + Narrative log now render as warm flat cards
  (were bg-white) — two separate cards, not one double-wrapped card
- Narrative: orange Add button (was blue), uppercase muted table
  headers, warm rows/footer, orange focus rings
- Duration timers: variant-driven exact semantic colors
  (Crisis #e2534f / On Task #12a150 / Off Task #3b82f6); active state
  is a clean static colored ring + solid colored STOP button
- index.css: add --coral-soft/--on-coral + semantic tint tokens;
  remove unused pulse-ring keyframes
- Remove dead Tailwind color config from EventTracker

No functional changes: timers, tabs, Quick Tally persistence, exports,
dictation, and mobile dock/hamburger/collapsibles all preserved.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@vercel

vercel Bot commented Jul 16, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
behavioral-observation-app Ready Ready Preview Jul 16, 2026 5:48pm

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant