Skip to content

UI: dark terminal theme#3

Open
Tomeriko96 wants to merge 7 commits into
mainfrom
ui/dark-terminal-theme
Open

UI: dark terminal theme#3
Tomeriko96 wants to merge 7 commits into
mainfrom
ui/dark-terminal-theme

Conversation

@Tomeriko96

@Tomeriko96 Tomeriko96 commented Jun 16, 2026

Copy link
Copy Markdown
Contributor

Summary

  • Replaces the light, minimal design with a dark monospace terminal aesthetic
  • All changes are purely CSS (index.css + App.css) — zero logic or markup touched
  • Uses teal accent (#00d4a8) on a deep navy background (#080c14)
  • Monospace font stack, uppercase labels, wide letter-spacing, sharp 2px corners
  • Corner-bracket decorations and neon glow effects on interactive elements
  • Adds Invert selection button to the toolbar
  • Adds Playwright e2e tests with annotated screenshots and demo GIF recording

Before / After

Before After
Before After

Demo

Demo

Annotated screenshot (Playwright e2e)

Annotated screenshot

Test plan

  • Upload zone hover state shows corner-bracket glow
  • All existing tests still pass (make test)
  • Playwright e2e annotated screenshot generates (make e2e)
  • Demo GIF regenerates (make demo-gif, requires make frontend running)
  • No console errors on load

Tomeriko96 and others added 7 commits June 16, 2026 11:03
Replace the light, minimal design with a dark monospace theme:
- Deep navy/black background (#080c14) with teal accent (#00d4a8)
- Monospace font stack throughout (JetBrains Mono / Fira Code fallback)
- Uppercase typography with wide letter-spacing
- Corner-bracket decorations on the upload zone
- Glowing neon effects on buttons, header underline, and spinner
- Sharp 2px border-radius replacing rounded corners

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Adds "Invert selection" button to the toolbar
- Playwright test mocks /api/file and takes an annotated screenshot
  of the new button (red circle + label injected into the DOM before
  screenshotting — no image-processing library needed)
- CI gains an e2e job that uploads screenshots as a downloadable artifact
- make e2e runs the suite locally

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- scripts/record-demo.mjs records the app flow (upload → invert → restore)
  using Playwright video recording and converts to GIF with ffmpeg-static
  (no system ffmpeg or root access required)
- make demo-gif runs the script locally
- e2e/screenshots/demo.gif committed for use in PR / README

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
vitest was picking up app/e2e/annotated.spec.ts and failing because
@playwright/test's test() is incompatible with the vitest runner.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
These were intermediate artifacts from debugging the Playwright setup.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- scripts/record-demo.mjs records the app flow (upload → invert → restore)
  using Playwright video recording and converts to GIF with ffmpeg-static
  (no system ffmpeg or root access required)
- make demo-gif runs the script locally
- e2e/screenshots/demo.gif committed for use in PR / README

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
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