Make production warning banner less obstructive and more attention seeking#16106
Open
Make production warning banner less obstructive and more attention seeking#16106
Conversation
✅ Deploy Preview for care-ohc ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
…eking Co-authored-by: Jacobjeevan <40040905+Jacobjeevan@users.noreply.github.com>
Deploying care-preview with
|
| Latest commit: |
d6e5447
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://0cdc30ac.care-preview-a7w.pages.dev |
| Branch Preview URL: | https://claude-make-warning-banner-l.care-preview-a7w.pages.dev |
Claude
AI
changed the title
Contributor
There was a problem hiding this comment.
Pull request overview
Redesigns the “ProductionWarningBanner” from a full-width sticky bar to a fixed, centered floating badge with glow/pulse effects, and includes a minor formatting change in print CSS selectors.
Changes:
- Replace sticky top banner with fixed, centered pill-style badge + layered pulse/glow styling.
- Adjust pointer-events behavior to reduce interaction obstruction.
- Reformat a long
@media printselector inindex.cssfor readability.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 5 comments.
| File | Description |
|---|---|
| src/style/index.css | Reformats the single-print collapse selector across multiple lines (no functional intent apparent). |
| src/components/Common/ProductionWarningBanner.tsx | Implements the new floating badge UI with pulse/glow styling and pointer-events adjustments. |
You can also share your feedback on Copilot code review. Take the survey.
Comment on lines
+30
to
+33
| <AlertTriangleIcon className="h-4 w-4 shrink-0 animate-pulse" /> | ||
| <span className="text-xs font-bold uppercase tracking-wide"> | ||
| {t("production_warning_banner")} | ||
| </span> |
Comment on lines
+26
to
+34
| <div className="pointer-events-none fixed inset-x-0 top-4 z-50 flex justify-center"> | ||
| <div className="pointer-events-auto group relative animate-pulse"> | ||
| <div className="absolute -inset-1 rounded-full bg-red-500 opacity-75 blur-sm animate-pulse" /> | ||
| <div className="relative flex items-center gap-2 rounded-full bg-red-600 px-4 py-2 text-white shadow-lg ring-2 ring-red-400 transition-all hover:scale-105 hover:shadow-xl"> | ||
| <AlertTriangleIcon className="h-4 w-4 shrink-0 animate-pulse" /> | ||
| <span className="text-xs font-bold uppercase tracking-wide"> | ||
| {t("production_warning_banner")} | ||
| </span> | ||
| </div> |
| {t("production_warning_banner")} | ||
| </span> | ||
| <div className="pointer-events-none fixed inset-x-0 top-4 z-50 flex justify-center"> | ||
| <div className="pointer-events-auto group relative animate-pulse"> |
| </span> | ||
| <div className="pointer-events-none fixed inset-x-0 top-4 z-50 flex justify-center"> | ||
| <div className="pointer-events-auto group relative animate-pulse"> | ||
| <div className="absolute -inset-1 rounded-full bg-red-500 opacity-75 blur-sm animate-pulse" /> |
Comment on lines
+27
to
+30
| <div className="pointer-events-auto group relative animate-pulse"> | ||
| <div className="absolute -inset-1 rounded-full bg-red-500 opacity-75 blur-sm animate-pulse" /> | ||
| <div className="relative flex items-center gap-2 rounded-full bg-red-600 px-4 py-2 text-white shadow-lg ring-2 ring-red-400 transition-all hover:scale-105 hover:shadow-xl"> | ||
| <AlertTriangleIcon className="h-4 w-4 shrink-0 animate-pulse" /> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Proposed Changes
Redesigned the production warning banner from a full-width sticky bar to a floating centered badge with enhanced visual attention cues.
Design Changes:
sticky top-0full-width bar withfixedcentered floating badge using rounded-full pill shapepointer-events-noneon container,pointer-events-autoon badge to avoid blocking page interactionsAttention Enhancements:
ring-2 ring-red-400) for emphasisscale-105and enhanced shadowTagging: @ohcnetwork/care-fe-code-reviewers
Merge Checklist
Original prompt