[ayushtr-aws]

Summary

Adds a compact, always-visible banner immediately below the app header on the soccer-app homepage with the exact text: Fresh Jira preview test: Sep 17.

• soccer-app/src/App.tsx: new .preview-banner element rendered between <header className="app-header"> and <div className="app-layout">, with role="status".
• soccer-app/src/App.css: banner styling using the existing CSS custom-property design tokens (--accent-bright background, white text, --header-border bottom border) for good contrast in both light and dark themes; .app-layout height adjusted from calc(100vh - 73px) to calc(100vh - 73px - 36px) so the banner does not push content and stays visible without scrolling on desktop; a mobile tweak in the existing @media (max-width: 768px) block reduces font size/padding, and the banner wraps rather than overflowing on narrow viewports.

Issue: TG-24 — end-to-end test of a fresh Jira ticket through ABCA → GitHub PR → AWS Amplify PR preview → screenshot feedback. Leave this PR open for preview verification.

Build and test results

Dependencies were not present in the container (tsc/oxlint not found), so npm install was run inside soccer-app first.

• mise run build (tsc -b && vite build) — PASS. Output: ✓ 20 modules transformed, dist/assets/index-*.css 10.66 kB, dist/assets/index-*.js 213.89 kB, ✓ built in 117ms. No TypeScript errors.
• mise run lint (oxlint) — PASS, no diagnostics reported.
• No test runner is configured in this repo (no test script, no Vitest/Jest), so no unit tests were run. Manual verification instead: grepped the production bundle and confirmed the exact string Fresh Jira preview test: Sep 17 is present once in soccer-app/dist/assets/index-*.js.

Decisions made

• Placed the banner as a sibling of .app-header (not inside it), matching the "immediately below the header" wording and keeping header flex layout untouched.
• Reused existing theme variables rather than hard-coding colours, following the repo's CSS-custom-property theming convention; the accent blue with white text gives strong contrast under both the default dark theme and light mode.
• Subtracted a fixed 36px (the banner's min-height) from the desktop .app-layout height, consistent with the existing hard-coded 73px header offset in this file, so the viewport does not gain a scrollbar and the banner is visible without scrolling.
• Kept the change to two files with no new components or dependencies.

Agent notes

What went well

• The change was small and localized; the existing App.css structure (sectioned comments, design tokens in index.css) made it obvious where to put the new styles.
• Build and lint passed first try after installing dependencies.

What was difficult

• The container had node_modules missing despite setup reporting success, so the first mise run build / mise run lint failed with tsc: not found / oxlint: not found. Running npm install in soccer-app fixed both.
• The layout uses a hard-coded height: calc(100vh - 73px) for .app-layout tied to the header's rendered height. Inserting anything between header and layout requires updating that magic number, otherwise the page overflows the viewport. Worth noting for anyone adding chrome around the header in future.

Repo conventions discovered

• Monorepo-ish layout: root mise.toml defines build / lint / dev tasks that shell into soccer-app.
• React 19 + TypeScript + Vite; lint is oxlint (no ESLint config); no test framework at all.
• Theming is entirely CSS custom properties on :root and :root.dark-mode in src/index.css; dark mode is the default and is toggled by adding a class to <html> from App.tsx.
• Commit history uses conventional commits with a scope (e.g. feat(ui): make dark mode the default theme).

Suggestions for future tasks

• Replace the hard-coded 73px/36px viewport-height math with a flex-based layout (.app is already display: flex; flex-direction: column, so .app-layout { flex: 1; min-height: 0 } would remove the magic numbers entirely).
• Adding Vitest + React Testing Library would let UI changes like this be asserted rather than verified by grepping the bundle.
• Assume npm install may be needed in soccer-app before running mise run build/lint.

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of the project license.

[aws-amplify-us-east-1]

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-43.d1prbufb0nhsx2.amplifyapp.com

[ayushtr-aws]

🖼️ Preview screenshot

From preview link — captured automatically by ABCA after the deploy finished.