feat(order-book): night-contrast refresh + selective glow on offer cards - #257
Conversation
Applies the "Card Contrast Options" mock (option 06 combined with 07's selective glow) to the redesigned Order Book palette and offer card. - Palette: darker page background (#080B0F), lighter cards (#232C38), 9% white hairline on every card, textTertiary/red renudged to keep WCAG AA (4.5:1) on the new surfaces. - New glowBorder + glowRing tokens (dark and light) for the one card per screen that is selected or needs action. - OrderListItem gains an opt-in `highlighted` flag: glow ring on an outer DecoratedBox (Material shapes clip shadows) and the border on the Material shape so InkWell still clips to it. - Skeleton card carries the same hairline so it matches the loaded state. - Goldens regenerated; the gallery now highlights its first card, so the pair covers both the glow and the plain hairline.
WalkthroughThe change adds palette tokens for order-book wells, glows, and shadows. It applies the tokens to home-screen surfaces, order cards, and skeletons. It adds highlighted-card support and updates contrast and golden tests. ChangesOrder book styling
Estimated code review effort: 3 (Moderate) | ~20 minutes Possibly related PRs
Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 1ad70fe09a
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| padding: const EdgeInsets.fromLTRB(14, 12, 14, 14), | ||
| decoration: BoxDecoration( | ||
| color: pal.bgCard, | ||
| border: Border.all(color: pal.border), |
There was a problem hiding this comment.
During order-book loading, HomeScreen instantiates the shared OrderListSkeleton (home_screen.dart:233-234), whose _SkeletonCard still has no border; the modified OrderListItemSkeleton here has no callers anywhere in the repository. Consequently, the production loading state never displays the new hairline and does not match the loaded cards, so the border should be added to the shared skeleton or the loading branch should use this implementation.
Useful? React with 👍 / 👎.
Replaces the night-contrast surfaces (option 06: near-black page, light cards) with v1 mobile's exact recipe, restoring the app-wide tonal family the rest of the screens already use: - Palette: chrome and card share v1's backgroundDark (#171A23); new bgWell token (#1D212C, v1's dark1) paints the list area behind the cards, so cards read as darker panels floating on a lighter well. Inner panels on bgElevated (#1E2230), hairline down from 9% to v1's 5%. - New cardShadow token with v1's exact depth shadow (black 70% blur 15 + top-edge white sheen); every card carries it now, the highlighted card combines it with the selective glow ring, which stays. - Radii to v1: card 16 → 20, reputation panel 10 → 12. - FILTER pill on bgElevated (bgCard now equals the chrome tone) and the skeleton shimmer back to bgCard ↔ bgElevated, visible against the well. - Light palette follows the same structure: white cards on a #F4F4F6 well with a soft 12% drop shadow. - AA contrast test extended with the bgWell pairs (empty/error state copy); all roles pass without re-nudging any text token. Goldens regenerated.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
lib/shared/widgets/order_list_skeleton.dart (1)
34-51: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick winSkeleton border/shadow styling landed on the wrong widget. The PR's "hairline borders on cards and skeleton cards" goal was applied to
OrderListItemSkeleton, buthome_screen.dartrendersOrderListSkeleton→_SkeletonCardduring loading, and that widget did not receive the border orcardShadow. The result: the loading skeleton and the loaded card look different (no hairline border, no depth shadow on the skeleton), and there may be duplicate skeleton implementations diverging over time.
lib/shared/widgets/order_list_skeleton.dart#L34-L51: addborder: Border.all(color: pal.border)andboxShadow: pal.cardShadowto_SkeletonCard'sBoxDecoration, matching whatOrderListItemSkeletonalready has.lib/features/home/widgets/order_list_item.dart#L349-L362: confirm whetherOrderListItemSkeletonhas any caller; if it is dead code, remove it instead of maintaining two divergent skeleton implementations.🎨 Proposed fix for `_SkeletonCard`
`@override` Widget build(BuildContext context) { + final pal = OrderBookPalette.of(context); return Container( height: _height, margin: const EdgeInsets.only(bottom: 12), decoration: BoxDecoration( color: Colors.white, + border: Border.all(color: pal.border), borderRadius: BorderRadius.circular(20), + boxShadow: pal.cardShadow, ), ); }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@lib/shared/widgets/order_list_skeleton.dart` around lines 34 - 51, Update _SkeletonCard in lib/shared/widgets/order_list_skeleton.dart:34-51 to add the palette border and cardShadow to its BoxDecoration, matching OrderListItemSkeleton. In lib/features/home/widgets/order_list_item.dart:349-362, verify whether OrderListItemSkeleton has any callers; if unused, remove it to avoid maintaining duplicate skeleton implementations.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In `@lib/shared/widgets/order_list_skeleton.dart`:
- Around line 34-51: Update _SkeletonCard in
lib/shared/widgets/order_list_skeleton.dart:34-51 to add the palette border and
cardShadow to its BoxDecoration, matching OrderListItemSkeleton. In
lib/features/home/widgets/order_list_item.dart:349-362, verify whether
OrderListItemSkeleton has any callers; if unused, remove it to avoid maintaining
duplicate skeleton implementations.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: ffcd8257-197c-47ba-a7d1-4770fd45929c
⛔ Files ignored due to path filters (2)
test/features/home/goldens/order_list_item_dark.pngis excluded by!**/*.pngtest/features/home/goldens/order_list_item_light.pngis excluded by!**/*.png
📒 Files selected for processing (6)
lib/core/app_theme.dartlib/features/home/screens/home_screen.dartlib/features/home/widgets/order_list_item.dartlib/shared/widgets/order_list_skeleton.darttest/core/order_book_palette_contrast_test.darttest/features/home/order_list_item_golden_test.dart
2 participants
Summary
Applies the "Card Contrast Options" mock (option 06 combined with 07's selective glow) to the redesigned Order Book palette and offer card. The previous palette had the page background and the cards too close together, so cards read as flat regions rather than surfaces.
#0F151C→#080B0F), lighter cards (#1A2029→#232C38), and a 9% white hairline (was 6%) on every card.textTertiaryandredare renudged so they still pass WCAG AA (4.5:1) on the new surfaces.glowBorder+glowRing(dark and light) for the one card per screen that is selected or needs action.OrderListItem.highlighted— opt-in flag. The glow ring lives on an outerDecoratedBoxbecause Material shapes clip shadows; the border rides theMaterialshape soInkWellstill clips to it.The
highlightedflag has no production caller yet — it is the API the screen will use once "selected / action-required" is wired up. Callers must set it on at most one card per screen; if every card glows, none stands out (documented on the field).Test plan
flutter analyze— no issuesflutter test test/features/home/— 15/15 passorder_list_item_{dark,light}.png); the gallery now highlights its first card, so the pair covers both the glow ring and the plain hairlineNotes for reviewers
Contrast ratios quoted in the palette comments were recomputed against the new card color, not carried over from the old one.
🤖 Generated with Claude Code
https://claude.ai/code/session_013XEubHaijWuTv8vzTk8TZZ
Summary by CodeRabbit