fix(web): remove gradient text and side-stripe ban violations#43
fix(web): remove gradient text and side-stripe ban violations#43HusseinBaraja merged 9 commits intomainfrom
Conversation
- Replace bg-clip-text gradient on 'في اليمن' with solid secondary color - Remove side-stripe border on inventory status card, use flat bg tint
- Hero chat timestamps: text-gray-400 → text-primary/35 - Flow subtitle: text-gray-500 → text-primary/50 - Scrollbar: hard-coded grays → oklch tinted toward brand hue (160°)
- Hero scroll indicator: animate-bounce → float-subtle - Hero chat messages: back.out(1.5) → power3.out - Problem chaos bubbles: back.out(1.7) → power4.out - Layout nav links: back.out(2) → power3.out
- Title: CSCB → رضا — خدمة عملاء ذكية عبر واتساب - Add Arabic meta description for SEO
- Show pain point cards on mobile (was hidden sm:grid → grid) - Add :focus-visible ring using brand secondary color - Guard TrustSection ambient animations with prefers-reduced-motion
|
Warning Rate limit exceeded
Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 5 minutes and 42 seconds. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Repository UI Review profile: ASSERTIVE Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughUpdated landing-page UI: HTML metadata changed to Arabic; multiple components had animation easings and small style tweaks; TrustSection gained reduced-motion handling and visual simplifications; CSS updated for scrollbar and focus-visible styles; tests now mock and assert reduced-motion behavior. Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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 |
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/web/src/components/sections/TrustSection.tsx`:
- Around line 51-68: The component only gates GSAP rotations using
prefersReducedMotion/ambientGlow and ambientGlowReverse but leaves other
infinite animations running (the flow packets, pipeline node pings, Zap icon
pulse, and emerald dot pulse). Stop these by either adding a global CSS
media-query that disables the listed animations for prefers-reduced-motion
(targeting classes like animate-[flowPacket_1.6s_infinite_linear], animate-ping,
animate-[pulse_2s_infinite], and animate-pulse) or by toggling a
“reduced-motion” class from the component (use the existing prefersReducedMotion
variable) and conditionally removing/avoiding those classes on elements
(packets, pipeline nodes, Zap icon, emerald dot) so all continuous animations
respect the user preference.
In `@apps/web/src/index.css`:
- Around line 34-56: The :focus-visible rule is duplicated inside both `@media`
(prefers-reduced-motion: no-preference) and `@media` (prefers-reduced-motion:
reduce) but is identical to the global :focus-visible in the base layer; remove
the redundant :focus-visible blocks from both media queries and keep the single
:focus-visible declaration outside them (ensure the scroll-behavior rules for
html, body remain inside the relevant media queries and that only the duplicated
focus-ring declarations are deleted).
- Around line 27-31: Remove the forced corner rounding from the global
:focus-visible rule by deleting the "border-radius: 4px" declaration so outlines
can inherit each element's own rounding (e.g., classes like rounded-full,
rounded-2xl, rounded-[40px] will remain intact); also remove the duplicated
:focus-visible rules inside both `@media` (prefers-reduced-motion: ...) blocks
since they are identical dead code to the base rule and are unnecessary.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: b35ec84d-72bd-4876-86bc-7f558767f112
📒 Files selected for processing (7)
apps/web/index.htmlapps/web/src/components/layout/Layout.tsxapps/web/src/components/sections/FlowSection.tsxapps/web/src/components/sections/HeroSection.tsxapps/web/src/components/sections/ProblemSection.tsxapps/web/src/components/sections/TrustSection.tsxapps/web/src/index.css
📜 Review details
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use the
@cs/*path aliases fromtsconfig.base.jsonfor cross-package imports
Files:
apps/web/src/components/sections/FlowSection.tsxapps/web/src/components/layout/Layout.tsxapps/web/src/components/sections/TrustSection.tsxapps/web/src/components/sections/HeroSection.tsxapps/web/src/components/sections/ProblemSection.tsx
🔇 Additional comments (9)
apps/web/index.html (1)
7-8: Localized title and description look correct and aligned with page language.Good update for Arabic SEO/context; both tags are clear, consistent with RTL/Arabic setup, and non-breaking.
apps/web/src/components/sections/FlowSection.tsx (1)
222-224: Looks good — subtitle color update is clean and scoped.This styling change is consistent with the polish objective and does not introduce behavioral risk.
apps/web/src/components/layout/Layout.tsx (1)
47-55: LGTM — easing swap is safe.
power3.outis a valid GSAP easing and the rest of the tween (duration/stagger/delay) is unchanged, so the pop-in keeps its timing while just losing the overshoot. No functional concerns.apps/web/src/components/sections/HeroSection.tsx (2)
44-55: LGTM — chat message easing change.
power3.outis valid and the overshoot removal aligns with the broader PR motion cleanup.
229-237: LGTM — scroll indicator animation swap.
float-subtleis defined inapps/web/src/index.css(lines 88-91 keyframes, 120-122 class) with the expected 4s ease-in-out infinite loop, so the class reference resolves correctly.apps/web/src/components/sections/ProblemSection.tsx (2)
59-72: LGTM — chaos bubble easing change.
power4.outis valid and removes the prior overshoot while keeping the staggered random rotation/translation. No behavior regression.
109-128: LGTM — pain cards now animate on mobile as intended.Dropping
hiddenensures the.pain-cardGSAPfromtween (registered at lines 75-85) now actually reveals on small viewports since.pain-cards-containeris present in the DOM at mount and its ScrollTrigger will fire. This matches the PR's "show certain cards on mobile" goal.apps/web/src/components/sections/TrustSection.tsx (2)
180-189: LGTM — solid secondary color replaces gradient clip.Matches the PR's stated goal of removing the
bg-clip-textgradient on "في اليمن." in favor of a flattext-secondary. No a11y or RTL concerns introduced.
259-266: LGTM — flat tint replaces side-stripe.Swapping the absolutely-positioned side stripe for a simple
bg-emerald-500/5tint with a matching border keeps the visual affordance while simplifying the DOM and avoiding the "ban violation" called out in the PR description.
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
…ries. Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
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)
apps/web/src/index.css (1)
33-43:⚠️ Potential issue | 🔴 CriticalCritical: literal backticks around
@mediabreak both media-query blocks.Lines 33 and 39 contain
`@media`with backtick characters wrapping the at-rule. This is invalid CSS — Biome reportsunexpected character \``, and Stylelint parses them as a bogus type selector ``@media`` (selector-type-no-unknown). Neither rule applies at runtime:scroll-behavior: smoothfor users without motion preferences andscroll-behavior: auto` for reduced-motion are both silently dropped, so the intended smooth-scroll behavior on the landing page is gone.🔧 Proposed fix
-`@media` (prefers-reduced-motion: no-preference) { +@media (prefers-reduced-motion: no-preference) { html, body { scroll-behavior: smooth; } } -`@media` (prefers-reduced-motion: reduce) { +@media (prefers-reduced-motion: reduce) { html, body { scroll-behavior: auto; } }🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/web/src/index.css` around lines 33 - 43, The CSS media-query blocks are written with literal backticks around `@media`, making selectors invalid and dropping scroll-behavior rules; remove the backticks so the at-rule reads `@media` (prefers-reduced-motion: no-preference) { html, body { scroll-behavior: smooth; } } and `@media` (prefers-reduced-motion: reduce) { html, body { scroll-behavior: auto; } } — locate the two blocks containing `@media` and replace the backtick-wrapped token with the correct `@media` at-rule so the scroll-behavior declarations on html and body take effect.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Outside diff comments:
In `@apps/web/src/index.css`:
- Around line 33-43: The CSS media-query blocks are written with literal
backticks around `@media`, making selectors invalid and dropping scroll-behavior
rules; remove the backticks so the at-rule reads `@media` (prefers-reduced-motion:
no-preference) { html, body { scroll-behavior: smooth; } } and `@media`
(prefers-reduced-motion: reduce) { html, body { scroll-behavior: auto; } } —
locate the two blocks containing `@media` and replace the backtick-wrapped token
with the correct `@media` at-rule so the scroll-behavior declarations on html and
body take effect.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 4a49925e-f992-4832-847e-1fc723041df8
📒 Files selected for processing (3)
apps/web/src/components/sections/TrustSection.tsxapps/web/src/components/sections/TrustSection.vitest.tsxapps/web/src/index.css
📜 Review details
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use the
@cs/*path aliases fromtsconfig.base.jsonfor cross-package imports
Files:
apps/web/src/components/sections/TrustSection.vitest.tsxapps/web/src/components/sections/TrustSection.tsx
🪛 Biome (2.4.12)
apps/web/src/index.css
[error] 33-33: unexpected character ```
(parse)
[error] 33-33: unexpected character ```
(parse)
[error] 39-39: unexpected character ```
(parse)
[error] 39-39: unexpected character ```
(parse)
🪛 Stylelint (17.9.0)
apps/web/src/index.css
[error] 33-33: Unknown type selector "@media" (selector-type-no-unknown)
(selector-type-no-unknown)
[error] 39-39: Unknown type selector "@media" (selector-type-no-unknown)
(selector-type-no-unknown)
🔇 Additional comments (5)
apps/web/src/components/sections/TrustSection.vitest.tsx (2)
52-84: LGTM — reduced-motion test is well-scoped.The mock is configured before the dynamic import of
TrustSection, souseGSAPreads the stubbedmatchMediaat render time. The dual assertions (nogsapTofor either ambient glow + noanimate-*classes on all four trust sub-elements) cleanly cover the runtime guard inTrustSection.tsxL53-81. Nice coverage.
24-36: The current Object.defineProperty approach for mocking matchMedia is correct and aligns with Vitest best practices.The suggestion to use
vi.stubGlobalis not recommended for matchMedia. According to Vitest documentation and common practices,Object.definePropertyis the preferred pattern for matchMedia mocking becausevi.stubGlobalmay be too late if the mocked property is accessed during module evaluation. The current implementation correctly handles this by setting up the mock inbeforeEachbefore dynamically importingTrustSection.apps/web/src/components/sections/TrustSection.tsx (3)
51-81: LGTM — reduced-motion gate now covers the loud, continuous animations.
matchMediais read via optional chaining with a safe fallback, class stripping happens insideuseGSAP(i.e., in a layout effect, before paint, so no flash-of-animation), and the selector list correctly targets all four infinite-loop elements in the markup (trust-flow-packet× 2,trust-pipeline-ping× 2,trust-zap-pulse,trust-availability-pulse). Ambient rotations are correctly skipped under reduced motion.One caveat worth knowing: there's no listener for motion-preference changes mid-session, so the decision is latched at mount. Acceptable for a landing page, but worth keeping in mind if the section ever gains client-side re-mount scenarios.
196-196: LGTM — gradient-text ban resolved.Replacing the
bg-clip-textgradient with a solidtext-secondaryspan satisfies the PR objective; the warm gold on the light alabaster background clears WCAG AA at this font weight/size. No accessibility regression.
272-279: LGTM — side-stripe removed, flat tint applied.
bg-emerald-500/5+border border-emerald-500/15matches the PR objective of a flat background tint without the previous inline absolute side-stripe.relative overflow-hiddenare now only carrying their weight for rounded-corner clipping, which is fine.
1 participant
Summary by CodeRabbit
New Features
Style
Tests