Refresh the app design system across core screens#127
Merged
Conversation
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (6)
✅ Files skipped from review due to trivial changes (3)
🚧 Files skipped from review as they are similar to previous changes (3)
📝 WalkthroughWalkthroughReplaces all hardcoded hex colors ( ChangesDesign System Token Migration
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint install failed: private package registry requires authentication. Disable ESLint in CodeRabbit settings or use public packages. 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[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (7)
src/app/learning-plans/[planId]/sessions/[sessionId]/edit.tsx (1)
304-304: ⚡ Quick winUse DAYOVA_DESIGN_SYSTEM for ActivityIndicator color.
Line 304 hardcodes
#00BAFFinstead of referencingDAYOVA_DESIGN_SYSTEM.colors.primary. For consistency with the token migration, color values should be sourced from the design system.♻️ Proposed fix to use design system constant
+import { DAYOVA_DESIGN_SYSTEM } from "~/lib/design-system"; // ... around line 304: -<ActivityIndicator color="`#00BAFF`" /> +<ActivityIndicator color={DAYOVA_DESIGN_SYSTEM.colors.primary} />🤖 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 `@src/app/learning-plans/`[planId]/sessions/[sessionId]/edit.tsx at line 304, The ActivityIndicator component on line 304 uses a hardcoded color value of `#00BAFF` instead of referencing the design system. Replace the hardcoded color prop value with DAYOVA_DESIGN_SYSTEM.colors.primary to maintain consistency with the design token migration and ensure all colors come from a centralized source.src/app/learning-plans/new.tsx (1)
460-461: ⚡ Quick winImport DAYOVA_DESIGN_SYSTEM and use constants for primary color references.
Lines 460–461, 503, 595–599, and 617–621 hardcode
#00BAFF(the primary color) instead of referencingDAYOVA_DESIGN_SYSTEM.colors.primary. This breaks the token abstraction goal and makes future theme changes harder to propagate. Import the design system and use the constant consistently across shadow colors, icon colors, and activity indicators.♻️ Proposed fix to use DAYOVA_DESIGN_SYSTEM constant
+import { DAYOVA_DESIGN_SYSTEM } from "~/lib/design-system"; // ... around lines 454–461 (icon container in ActionSurface): <View className="items-center justify-center" style={{ width: 48, height: 48, borderRadius: 24, - backgroundColor: "`#00BAFF`", - shadowColor: "`#00BAFF`", + backgroundColor: DAYOVA_DESIGN_SYSTEM.colors.primary, + shadowColor: DAYOVA_DESIGN_SYSTEM.colors.primary, shadowOpacity: 0.24, shadowRadius: 12, shadowOffset: { width: 0, height: 4 }, elevation: 3, }} > // ... around line 503 (Button shadow): style={{ - shadowColor: "`#00BAFF`", + shadowColor: DAYOVA_DESIGN_SYSTEM.colors.primary, shadowOpacity: 0.3, shadowRadius: 14, shadowOffset: { width: 0, height: 7 }, elevation: 5, }} // ... around lines 595–599 and 617–621 (ActivityIndicator and icon colors): icon={ isBusy ? ( - <ActivityIndicator color="`#00BAFF`" /> + <ActivityIndicator color={DAYOVA_DESIGN_SYSTEM.colors.primary} /> ) : ( <ScanImage size={24 * modalScale} - color="`#00BAFF`" + color={DAYOVA_DESIGN_SYSTEM.colors.primary} strokeWidth={1.8} /> ) } // ... similar for the Attachment icon: icon={ isBusy ? ( - <ActivityIndicator color="`#00BAFF`" /> + <ActivityIndicator color={DAYOVA_DESIGN_SYSTEM.colors.primary} /> ) : ( <Attachment size={24 * modalScale} - color="`#00BAFF`" + color={DAYOVA_DESIGN_SYSTEM.colors.primary} strokeWidth={1.8} /> ) }Also applies to: 503-503, 595-599, 617-621
🤖 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 `@src/app/learning-plans/new.tsx` around lines 460 - 461, Import DAYOVA_DESIGN_SYSTEM at the top of the file, then replace all hardcoded color references to `#00BAFF` with DAYOVA_DESIGN_SYSTEM.colors.primary. Specifically, update the backgroundColor and shadowColor properties around lines 460-461, the color reference at line 503, and the icon color and activity indicator color properties around lines 595-599 and 617-621 respectively. This ensures consistent use of the design system tokens for the primary color and makes future theme changes easier to propagate.src/features/learning-plans/learning-plan-ui.tsx (1)
106-106: ⚡ Quick winImport DAYOVA_DESIGN_SYSTEM and replace hardcoded icon colors and border colors with semantic constants.
This file hardcodes multiple icon and border colors (
#00BAFF,#697586,#1A1A1A) instead of usingDAYOVA_DESIGN_SYSTEMconstants. Specifically:
- Line 106: Attachment icon color
- Lines 257, 265, 274: CalendarDays/Clock icon colors
- Line 286: ChevronDown icon color
- Line 306: Phase option border color
This breaks the design token abstraction and makes the file inconsistent with
review.tsx, which correctly imports and usesDAYOVA_DESIGN_SYSTEM.colors.warning. All hardcoded hex values should be sourced from the design system for maintainability and future theme support.♻️ Proposed fix to use DAYOVA_DESIGN_SYSTEM constants
+import { DAYOVA_DESIGN_SYSTEM } from "~/lib/design-system"; export function MaterialCard({ name, size, onRemove, }: { name: string; size: number; onRemove: () => void; }) { return ( <Surface className="mb-3 flex-row items-center rounded-[24px] px-4 py-4" variant="soft" > <View className="h-11 w-11 items-center justify-center rounded-full bg-primary/12"> - <Attachment size={21} color="`#00BAFF`" strokeWidth={2.2} /> + <Attachment size={21} color={DAYOVA_DESIGN_SYSTEM.colors.primary} strokeWidth={2.2} /> </View> // ... in SessionEditForm, around line 257: -icon={<CalendarDays size={20} color="`#697586`" strokeWidth={2.1} />} +icon={<CalendarDays size={20} color={DAYOVA_DESIGN_SYSTEM.colors.path4} strokeWidth={2.1} />} // ... around lines 265 and 274: -icon={<Clock3 size={19} color="`#697586`" strokeWidth={2.1} />} +icon={<Clock3 size={19} color={DAYOVA_DESIGN_SYSTEM.colors.path4} strokeWidth={2.1} />} // ... around line 286: -icon={<ChevronDown size={20} color="`#1A1A1A`" strokeWidth={2.1} />} +icon={<ChevronDown size={20} color={DAYOVA_DESIGN_SYSTEM.colors.text} strokeWidth={2.1} />} // ... around line 306 (phase option border): className="h-12 justify-center rounded-[24px] bg-card px-5" style={{ borderWidth: phase === editPhase ? 1.5 : 1, borderColor: - phase === editPhase ? "`#00BAFF`" : "rgba(17,24,39,0.04)", + phase === editPhase ? DAYOVA_DESIGN_SYSTEM.colors.primary : "rgba(17,24,39,0.04)", }}Also applies to: 257-257, 265-265, 274-274, 286-286, 306-306
🤖 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 `@src/features/learning-plans/learning-plan-ui.tsx` at line 106, The file uses hardcoded hexadecimal color values instead of semantic design tokens, which breaks design abstraction and prevents future theme support. Import DAYOVA_DESIGN_SYSTEM at the top of the file and replace all hardcoded color values throughout the component with appropriate design system constants: replace the color prop `#00BAFF` in the Attachment icon component, the colors in the CalendarDays and Clock icon components at the referenced lines, the color in the ChevronDown icon component, and the border color in the Phase option element. Use the design system color constants that match the semantic purpose of each color (e.g., warning, secondary, etc.) to maintain consistency with the design system pattern already implemented in review.tsx.src/app/learning-plans/[planId]/review.tsx (1)
204-204: ⚡ Quick winUse DAYOVA_DESIGN_SYSTEM constants for shadow and icon colors.
Line 141 correctly uses
DAYOVA_DESIGN_SYSTEM.colors.warningfor semantic consistency. However, lines 204 and 220 hardcode hex values (#00BAFFand#34C759) that should reference design system constants instead, maintaining abstraction and enabling future theme changes.♻️ Proposed fix to use DAYOVA_DESIGN_SYSTEM constants
+import { DAYOVA_DESIGN_SYSTEM } from "~/lib/design-system"; // ... in the TouchableOpacity styling around line 204: style={{ - shadowColor: "`#00BAFF`", + shadowColor: DAYOVA_DESIGN_SYSTEM.colors.primary, shadowOpacity: 0.32, shadowRadius: 16, shadowOffset: { width: 0, height: 7 }, elevation: 5, opacity: isBusy || !snapshot?.sessions.length ? 0.55 : 1, }} // ... in the ActionModal icon around line 220: -icon={<Check size={48} color="`#34C759`" strokeWidth={1.2} />} +icon={<Check size={48} color={DAYOVA_DESIGN_SYSTEM.colors.success} strokeWidth={1.2} />}Also applies to: 220-220
🤖 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 `@src/app/learning-plans/`[planId]/review.tsx at line 204, The shadowColor property and icon color assignments in the review component use hardcoded hex values (`#00BAFF` and `#34C759`) instead of referencing DAYOVA_DESIGN_SYSTEM constants for semantic consistency. Replace these hardcoded hex color values with the appropriate DAYOVA_DESIGN_SYSTEM color constants (following the pattern of DAYOVA_DESIGN_SYSTEM.colors.warning used elsewhere in the file) to maintain design system abstraction and enable future theme changes without code modifications.src/app/learning-plans/[planId]/index.tsx (1)
93-97: ⚡ Quick winReplace hardcoded CTA icon/text colors with semantic tokens.
This segment still hardcodes
#1A1A1A/#FFFFFF, which breaks the token-only styling contract introduced in this PR.Proposed tokenized update
<Check size={16} - color={session.completed ? "`#1A1A1A`" : "`#FFFFFF`"} + color={ + session.completed + ? DAYOVA_DESIGN_SYSTEM.colors.foreground + : DAYOVA_DESIGN_SYSTEM.colors.background + } strokeWidth={2.2} /> <Text - className={`font-poppins font-semibold text-body-4 ${session.completed ? "text-foreground" : "text-white"}`} + className={`font-poppins font-semibold text-body-4 ${session.completed ? "text-foreground" : "text-background"}`} >🤖 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 `@src/app/learning-plans/`[planId]/index.tsx around lines 93 - 97, Replace the hardcoded color values `#1A1A1A` and `#FFFFFF` in the icon and text styling with semantic tokens to maintain consistency with the PR's token-only styling contract. In the section where the icon stroke color is set to `#1A1A1A` when session.completed is true and `#FFFFFF` when false, replace these hex values with appropriate semantic tokens. Similarly, ensure the text color styling in the className uses semantic tokens instead of hardcoded colors. Refer to the existing semantic token definitions in your design system to determine the correct token names for foreground and background colors.src/features/learning-plans/quiz-step.tsx (1)
105-112: ⚡ Quick winUse the design-system primary token for SVG fills instead of hardcoded hex.
#00BAFFis duplicated inline here; switching to the shared token keeps color updates centralized.Proposed tokenized update
+import { DAYOVA_DESIGN_SYSTEM } from "~/lib/design-system"; ... - <Path d={questionProgressPath} fill="`#00BAFF`" /> + <Path + d={questionProgressPath} + fill={DAYOVA_DESIGN_SYSTEM.colors.primary} + /> ... - fill="`#00BAFF`" + fill={DAYOVA_DESIGN_SYSTEM.colors.primary} />🤖 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 `@src/features/learning-plans/quiz-step.tsx` around lines 105 - 112, Replace the hardcoded hex color value `#00BAFF` with the design-system primary token in the SVG fill attributes. Update the fill property for both the Path component and the Circle component in this block to use the appropriate primary color token from your design system instead of the inline hex value. This ensures color consistency and allows centralized color updates across the codebase.tailwind.config.js (1)
169-176: ⚡ Quick winUse CSS radius tokens consistently in Tailwind borderRadius mapping.
Line 173–176 hardcode pixel values even though matching CSS variables already exist, which weakens token single-source-of-truth and can drift on future palette/shape updates.
♻️ Proposed refactor
borderRadius: { lg: "var(--radius)", md: "var(--radius-md)", sm: "var(--radius-sm)", - card: "32px", - button: "32px", - input: "28px", - tab: "28px", + card: "var(--card-radius)", + button: "var(--button-radius)", + input: "var(--input-radius)", + tab: "var(--input-radius)", },🤖 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 `@tailwind.config.js` around lines 169 - 176, The borderRadius configuration in tailwind.config.js has inconsistent token usage where properties like card, button, input, and tab are using hardcoded pixel values (32px and 28px) instead of CSS variables, while other properties like lg, md, and sm correctly reference var(--radius-*) tokens. Replace the hardcoded pixel values for card, button, input, and tab properties with their corresponding CSS variable references (var(--radius-card), var(--radius-button), var(--radius-input), var(--radius-tab)) to maintain consistency with the token-based design system and ensure single source of truth for these values.
🤖 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.
Inline comments:
In `@docs/styling.md`:
- Around line 83-90: The example in the "Prefer pairing size and color
explicitly on Text components" bullet point uses the non-semantic class text-14,
which contradicts the earlier established guidance that semantic classes like
text-body-1 through text-body-5 should be the preferred default for typography.
Replace the text-14 example in the line demonstrating pairing size and color on
Text components with a semantic typography class such as text-body-3 to maintain
consistent guidance throughout the styling documentation.
In `@src/app/`(app)/plans.tsx:
- Around line 101-107: The TouchableOpacity component wrapping the Bell icon
lacks an onPress handler, making it non-interactive despite appearing clickable.
Add an onPress prop to the TouchableOpacity element that handles the navigation
action (likely to a notifications screen or similar) that was previously
implemented. Ensure the handler is properly connected to your navigation logic
and that it performs the intended action when the bell is pressed.
---
Nitpick comments:
In `@src/app/learning-plans/`[planId]/index.tsx:
- Around line 93-97: Replace the hardcoded color values `#1A1A1A` and `#FFFFFF` in
the icon and text styling with semantic tokens to maintain consistency with the
PR's token-only styling contract. In the section where the icon stroke color is
set to `#1A1A1A` when session.completed is true and `#FFFFFF` when false, replace
these hex values with appropriate semantic tokens. Similarly, ensure the text
color styling in the className uses semantic tokens instead of hardcoded colors.
Refer to the existing semantic token definitions in your design system to
determine the correct token names for foreground and background colors.
In `@src/app/learning-plans/`[planId]/review.tsx:
- Line 204: The shadowColor property and icon color assignments in the review
component use hardcoded hex values (`#00BAFF` and `#34C759`) instead of referencing
DAYOVA_DESIGN_SYSTEM constants for semantic consistency. Replace these hardcoded
hex color values with the appropriate DAYOVA_DESIGN_SYSTEM color constants
(following the pattern of DAYOVA_DESIGN_SYSTEM.colors.warning used elsewhere in
the file) to maintain design system abstraction and enable future theme changes
without code modifications.
In `@src/app/learning-plans/`[planId]/sessions/[sessionId]/edit.tsx:
- Line 304: The ActivityIndicator component on line 304 uses a hardcoded color
value of `#00BAFF` instead of referencing the design system. Replace the hardcoded
color prop value with DAYOVA_DESIGN_SYSTEM.colors.primary to maintain
consistency with the design token migration and ensure all colors come from a
centralized source.
In `@src/app/learning-plans/new.tsx`:
- Around line 460-461: Import DAYOVA_DESIGN_SYSTEM at the top of the file, then
replace all hardcoded color references to `#00BAFF` with
DAYOVA_DESIGN_SYSTEM.colors.primary. Specifically, update the backgroundColor
and shadowColor properties around lines 460-461, the color reference at line
503, and the icon color and activity indicator color properties around lines
595-599 and 617-621 respectively. This ensures consistent use of the design
system tokens for the primary color and makes future theme changes easier to
propagate.
In `@src/features/learning-plans/learning-plan-ui.tsx`:
- Line 106: The file uses hardcoded hexadecimal color values instead of semantic
design tokens, which breaks design abstraction and prevents future theme
support. Import DAYOVA_DESIGN_SYSTEM at the top of the file and replace all
hardcoded color values throughout the component with appropriate design system
constants: replace the color prop `#00BAFF` in the Attachment icon component,
the colors in the CalendarDays and Clock icon components at the referenced
lines, the color in the ChevronDown icon component, and the border color in the
Phase option element. Use the design system color constants that match the
semantic purpose of each color (e.g., warning, secondary, etc.) to maintain
consistency with the design system pattern already implemented in review.tsx.
In `@src/features/learning-plans/quiz-step.tsx`:
- Around line 105-112: Replace the hardcoded hex color value `#00BAFF` with the
design-system primary token in the SVG fill attributes. Update the fill property
for both the Path component and the Circle component in this block to use the
appropriate primary color token from your design system instead of the inline
hex value. This ensures color consistency and allows centralized color updates
across the codebase.
In `@tailwind.config.js`:
- Around line 169-176: The borderRadius configuration in tailwind.config.js has
inconsistent token usage where properties like card, button, input, and tab are
using hardcoded pixel values (32px and 28px) instead of CSS variables, while
other properties like lg, md, and sm correctly reference var(--radius-*) tokens.
Replace the hardcoded pixel values for card, button, input, and tab properties
with their corresponding CSS variable references (var(--radius-card),
var(--radius-button), var(--radius-input), var(--radius-tab)) to maintain
consistency with the token-based design system and ensure single source of truth
for these values.
🪄 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: defaults
Review profile: CHILL
Plan: Pro
Run ID: 25e1a220-2956-40f6-9f11-e49d250ebb05
📒 Files selected for processing (50)
docs/contexts/design-system/CONTEXT.mddocs/styling.mdsrc/app/(app)/_layout.tsxsrc/app/(app)/home.tsxsrc/app/(app)/learning-plans.tsxsrc/app/(app)/plans.tsxsrc/app/(app)/settings.tsxsrc/app/(auth)/index.tsxsrc/app/(auth)/onboarding.tsxsrc/app/_layout.tsxsrc/app/entry/[id].tsxsrc/app/entry/new.tsxsrc/app/learning-plans/[planId]/analysis.tsxsrc/app/learning-plans/[planId]/generating.tsxsrc/app/learning-plans/[planId]/index.tsxsrc/app/learning-plans/[planId]/quiz/[questionIndex].tsxsrc/app/learning-plans/[planId]/review.tsxsrc/app/learning-plans/[planId]/sessions/[sessionId]/edit.tsxsrc/app/learning-plans/new.tsxsrc/app/learning-times/edit.tsxsrc/app/learning-times/index.tsxsrc/app/notification-settings.tsxsrc/app/notifications.tsxsrc/app/profile.tsxsrc/components/AuthScreen.tsxsrc/components/Mascot.tsxsrc/components/bottom-nav.tsxsrc/components/notification-button.tsxsrc/components/screen-header.tsxsrc/components/ui/action-modal.tsxsrc/components/ui/button.tsxsrc/components/ui/date-time-picker-sheet.tsxsrc/components/ui/field.tsxsrc/components/ui/input.tsxsrc/components/ui/list-row.tsxsrc/components/ui/screen.tsxsrc/components/ui/section-header.tsxsrc/components/ui/select-sheet.tsxsrc/components/ui/surface.tsxsrc/components/ui/switch.android.tsxsrc/components/ui/text-field.tsxsrc/components/ui/text.tsxsrc/components/ui/textarea.tsxsrc/features/learning-plans/learning-plan-ui.tsxsrc/features/learning-plans/quiz-step.tsxsrc/global.csssrc/lib/design-system.tssrc/lib/theme.tssrc/lib/utils.tstailwind.config.js
💤 Files with no reviewable changes (1)
- src/app/(app)/_layout.tsx
Member
|
Please also add the new gradient from figma |
Member
|
please center the icon |
Member
This is the state from the main branch |
Gamius00
self-requested a review
June 21, 2026 13:37
Gamius00
marked this pull request as draft
June 21, 2026 13:37
…ystem # Conflicts: # src/app/learning-plans/new.tsx # src/components/bottom-nav.tsx
FleetAdmiralJakob
marked this pull request as ready for review
June 22, 2026 16:42
![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: 6fa3c3978c
ℹ️ 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".
| --button-neutral: 0 0% 88.6%; | ||
| --button-neutral-foreground: 0 0% 10.2%; | ||
| --secondary: 316.1 100% 64.9%; | ||
| --button-neutral: 0 0% 10.2%; |
There was a problem hiding this comment.
With --button-neutral now resolving to black, neutral buttons are no longer compatible with existing callers that still force black content: src/app/learning-plans/[planId]/review.tsx:186-188 uses #1A1A1A/text-text, src/app/learning-plans/[planId]/sessions/[sessionId]/edit.tsx:221 uses text-text, and src/app/learning-times/edit.tsx:320 hard-codes a black trash icon. In those paths the label, spinner, or icon becomes black on a black neutral button, making core actions appear blank; update those callers to use the neutral foreground or keep this token light.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
tailwind.config.ts (1)
121-129:⚠️ Potential issue | 🟠 Major | ⚡ Quick winDefine a safe value for
path.7to avoid unresolved color tokens.Line 128 maps
path.7tohsl(var(--path-7)), but the providedsrc/global.csstoken snippet only defines--path-1…--path-6. Anybg-path-7/text-path-7usage will resolve to an invalid color until--path-7exists.Suggested patch
path: { - 7: "hsl(var(--path-7))", + 7: "hsl(var(--path-7, var(--path-6)))", },🤖 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 `@tailwind.config.ts` around lines 121 - 129, The path object in tailwind.config.ts currently maps path.7 to hsl(var(--path-7)), but this CSS variable is not defined in the provided global.css token definitions (which only include --path-1 through --path-6). Either remove the path.7 entry from the path object if it is unused, or replace the hsl(var(--path-7)) value with a safe fallback color value that will resolve to a valid color even when the CSS variable is unavailable.
🤖 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.
Inline comments:
In `@src/components/ui/button.tsx`:
- Around line 33-37: The destructive button variant is using neutral button
styling (bg-button-neutral and text-button-neutral-foreground) instead of
destructive styling, making destructive actions visually indistinguishable from
neutral actions. In the destructive variant definition around lines 33-37,
replace the neutral background and foreground classes with appropriate
destructive color classes that clearly indicate a destructive action. Apply the
same fix to the other occurrence of destructive styling around lines 81-82.
Ensure that destructive buttons use destructive-specific colors for both
background and text to maintain proper visual semantics.
---
Outside diff comments:
In `@tailwind.config.ts`:
- Around line 121-129: The path object in tailwind.config.ts currently maps
path.7 to hsl(var(--path-7)), but this CSS variable is not defined in the
provided global.css token definitions (which only include --path-1 through
--path-6). Either remove the path.7 entry from the path object if it is unused,
or replace the hsl(var(--path-7)) value with a safe fallback color value that
will resolve to a valid color even when the CSS variable is unavailable.
🪄 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: defaults
Review profile: CHILL
Plan: Pro
Run ID: af7f1eae-78b6-4e63-8cbd-3872c9c567ba
📒 Files selected for processing (21)
README.mdbiome.jsonccomponents.jsondocs/contexts/design-system/CONTEXT.mddocs/styling.mdsrc/app/(app)/home.tsxsrc/app/(app)/learning-plans.tsxsrc/app/(app)/plans.tsxsrc/app/learning-plans/[planId]/index.tsxsrc/app/learning-plans/new.tsxsrc/app/notifications.tsxsrc/components/Mascot.tsxsrc/components/bottom-nav.tsxsrc/components/ui/button.tsxsrc/components/ui/close-button.tsxsrc/features/learning-plans/learning-plan-ui.tsxsrc/features/learning-plans/quiz-step.tsxsrc/global.csssrc/lib/design-system.tssrc/lib/utils.tstailwind.config.ts
✅ Files skipped from review due to trivial changes (3)
- README.md
- src/components/Mascot.tsx
- docs/contexts/design-system/CONTEXT.md
🚧 Files skipped from review as they are similar to previous changes (13)
- src/global.css
- src/lib/utils.ts
- src/features/learning-plans/quiz-step.tsx
- src/app/(app)/learning-plans.tsx
- src/app/learning-plans/[planId]/index.tsx
- src/features/learning-plans/learning-plan-ui.tsx
- src/app/(app)/plans.tsx
- src/lib/design-system.ts
- docs/styling.md
- src/app/notifications.tsx
- src/components/bottom-nav.tsx
- src/app/learning-plans/new.tsx
- src/app/(app)/home.tsx
Comment on lines
33
to
37
| destructive: cn( | ||
| "bg-destructive shadow-black/5 shadow-sm active:bg-destructive/90 dark:bg-destructive/60", | ||
| "border-border border-hairline bg-button-neutral shadow-black/5 shadow-sm active:bg-button-neutral/90", | ||
| Platform.select({ | ||
| web: "hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40", | ||
| web: "hover:bg-button-neutral/90 focus-visible:ring-destructive/20", | ||
| }), |
There was a problem hiding this comment.
Restore destructive button semantics.
Line 34 and Lines 81-82 style destructive as neutral (bg-button-neutral + text-button-neutral-foreground), making destructive actions visually indistinguishable from neutral actions.
Suggested patch
destructive: cn(
- "border-border border-hairline bg-button-neutral shadow-black/5 shadow-sm active:bg-button-neutral/90",
+ "border-destructive/20 border-hairline bg-destructive shadow-destructive/20 shadow-sm active:bg-destructive/90",
Platform.select({
- web: "hover:bg-button-neutral/90 focus-visible:ring-destructive/20",
+ web: "hover:bg-destructive/90 focus-visible:ring-destructive/20",
}),
),
@@
- destructive: "text-button-neutral-foreground",
+ destructive: "text-destructive-foreground",Also applies to: 81-82
🤖 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 `@src/components/ui/button.tsx` around lines 33 - 37, The destructive button
variant is using neutral button styling (bg-button-neutral and
text-button-neutral-foreground) instead of destructive styling, making
destructive actions visually indistinguishable from neutral actions. In the
destructive variant definition around lines 33-37, replace the neutral
background and foreground classes with appropriate destructive color classes
that clearly indicate a destructive action. Apply the same fix to the other
occurrence of destructive styling around lines 81-82. Ensure that destructive
buttons use destructive-specific colors for both background and text to maintain
proper visual semantics.
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
2 participants
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.
Summary
Testing
Summary by CodeRabbit
Style
Documentation