Conversation
|
Caution Review failedThe pull request is closed. 📝 WalkthroughWalkthroughWidespread Tailwind dark-mode token updates (slate-800/900 → slate-900/950) across the app, plus UI refactors: tabbed Organisation Settings with a new SettingsTab type, Headless UI role menus replacing custom dropdowns in People pages, auth button simplifications, Textarea converted to forwardRef+memo, and added locale strings for organisation settings. (50 words) Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant OrgSettings as Organisation Settings Page
participant TabNav as Tab Navigation (sidebar/select)
participant PeopleComp as People Component (Headless Menu)
participant API as Backend API
User->>OrgSettings: Request organisation settings page
OrgSettings->>OrgSettings: Read URL search params → set activeTab
OrgSettings->>TabNav: Render tab sidebar / mobile Select
User->>TabNav: Select "People" tab
TabNav-->>OrgSettings: activeTab change
OrgSettings->>PeopleComp: Mount People component
User->>PeopleComp: Open member role menu
PeopleComp->>PeopleComp: Headless UI Menu opens (Transition)
User->>PeopleComp: Select role / choose remove
PeopleComp->>API: PATCH member role or DELETE member
API-->>PeopleComp: Return success/failure
PeopleComp-->>User: Update UI / show feedback
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 1 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 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[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Note
Due to the large number of review comments, Critical, Major severity comments were prioritized as inline comments.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (5)
web/app/pages/Project/tabs/Experiments/ExperimentSettingsModal.tsx (2)
816-833:⚠️ Potential issue | 🟡 MinorUse indigo-500 for dark-mode accents in toggle buttons.
These dark-mode accent classes use indigo-600/300, which conflicts with the project token rules. Please switch dark-mode accent colors to indigo-500.
As per coding guidelines: "Use indigo-600 as the primary accent color in light mode and indigo-500 in dark mode."✅ Suggested fix (example for one toggle state)
- ? 'border-indigo-500 bg-indigo-50 text-indigo-700 dark:border-indigo-600 dark:bg-indigo-900/20 dark:text-indigo-300' + ? 'border-indigo-500 bg-indigo-50 text-indigo-700 dark:border-indigo-500 dark:bg-indigo-900/20 dark:text-indigo-500'Also applies to: 893-913, 969-988
739-756:⚠️ Potential issue | 🟡 MinorAlign success/danger colors with semantic tokens (emerald/red-500/600).
The "Increase" state uses green in dark mode and the "Decrease" state uses red-400; both deviate from the semantic palette rules.
As per coding guidelines: "Apply danger color as red-500/600, success as emerald-500/600, warning as amber-500/600 for semantic status indicators."✅ Suggested fix
- ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400' + ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-500' ... - ? 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400' + ? 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-500'web/app/pages/Project/tabs/Experiments/ExperimentResults.tsx (1)
385-409:⚠️ Potential issue | 🟡 MinorDark-mode hover effect is invisible on table rows.
The container at Line 385 sets
dark:bg-slate-900/50, and the row hover at Line 409 appliesdark:hover:bg-slate-900/50— the same color. Users won't see any hover feedback in dark mode.Use a slightly different shade for the hover, e.g.
dark:hover:bg-slate-800/50:Proposed fix
- className='hover:bg-gray-50 dark:hover:bg-slate-900/50' + className='hover:bg-gray-50 dark:hover:bg-slate-800/50'The same issue applies to the MetricsTable rows at Lines 509 and 571, whose parent (Line 479) also uses
dark:bg-slate-900/50.web/app/pages/Organisations/Settings/Projects.tsx (1)
306-314:⚠️ Potential issue | 🟡 MinorMatch the search field styling to the design system (rings, radius, dark bg).
This input uses
rounded-lg,ring-gray-300, andfocus:ring-gray-500, and adark:bg-slate-950. These don’t align with the required tokens and focus styling.Proposed fix
- className='block h-8 w-full rounded-lg border-none bg-gray-50 p-2.5 text-sm text-gray-900 ring-1 ring-gray-300 focus:ring-gray-500 sm:pl-10 dark:bg-slate-950 dark:text-white dark:placeholder-gray-400 dark:ring-slate-600 dark:focus:ring-slate-200' + className='block h-8 w-full rounded-md border-none bg-gray-50 p-2.5 text-sm text-gray-900 ring-1 ring-black/5 focus:ring-indigo-500 sm:pl-10 dark:bg-slate-900 dark:text-white dark:placeholder-gray-400 dark:ring-white/10 dark:focus:ring-indigo-500'As per coding guidelines: Apply ring borders to inputs with focus:ring-indigo-500 for focus states; Use Tailwind CSS design tokens: gray-50 for light backgrounds, slate-900 for dark backgrounds, white/slate-800 for cards, ring-1 ring-black/5 for light borders, ring-white/10 for dark borders; Use border radius: rounded-md for small elements, rounded-lg for medium, rounded-xl for large, rounded-2xl for cards.
web/app/pages/Organisations/Settings/People.tsx (1)
361-366:⚠️ Potential issue | 🟡 MinorRemove modal closes prematurely — user never sees the loading state and won't see server errors.
onRemovecallsfetcher.submit(), which returns synchronously. Theawaithas no effect, socloseRemoveUserModal()fires immediately, closing the dialog before the request completes. If deletion fails, the error toast still fires (from theuseEffect), but the modal is already gone. Meanwhile, theuseEffectat line 226 also callscloseRemoveUserModal()on success, making the call here redundant.Drop
closeRemoveUserModal()fromonSubmitand rely solely on theuseEffectsuccess handler (which already closes the modal on success at line 226):Proposed fix
<Modal onClose={closeRemoveUserModal} - onSubmit={async () => { - await onRemove(memberToRemove!) - closeRemoveUserModal() + onSubmit={() => { + onRemove(memberToRemove!) }} submitText={t('common.yes')}
🤖 Fix all issues with AI agents
In `@web/app/components/pricing/MarketingPricing.tsx`:
- Around line 170-173: The button in MarketingPricing.tsx uses bg-gray-100 with
a child span class text-gray-100, causing unreadable light-on-light contrast;
update the button/span classes so light mode has readable contrast while
preserving dark-mode look — for example change the button background to a
translucent variant (e.g., bg-white/10 or similar) or switch the span to a dark
text color in light mode (e.g., replace text-gray-100 with text-gray-800 and add
dark:text-gray-100) inside the same button element; modify the className on the
button element and the span that renders {t('pricing.billedYearly')}
accordingly.
🟡 Minor comments (53)
web/app/pages/NotFound/index.tsx-14-14 (1)
14-14:⚠️ Potential issue | 🟡 MinorAlign dark background token with design guidelines.
Line 14 uses
dark:bg-slate-950, but the design tokens specifyslate-900for dark backgrounds. Please switch todark:bg-slate-900to keep palette consistency. As per coding guidelines: "Use Tailwind CSS design tokens: gray-50 for light backgrounds, slate-900 for dark backgrounds, white/slate-800 for cards, ring-1 ring-black/5 for light borders, ring-white/10 for dark borders".✅ Suggested change
- <div className='min-h-min-footer bg-gray-50 px-4 py-16 sm:px-6 sm:py-24 md:grid md:place-items-center lg:px-8 dark:bg-slate-950'> + <div className='min-h-min-footer bg-gray-50 px-4 py-16 sm:px-6 sm:py-24 md:grid md:place-items-center lg:px-8 dark:bg-slate-900'>web/app/pages/Project/tabs/Captcha/CaptchaView.tsx-224-227 (1)
224-227:⚠️ Potential issue | 🟡 MinorUse slate-900 for dark background tokens.
dark:bg-slate-950conflicts with the required dark background token. Please switch todark:bg-slate-900to match the design system. As per coding guidelines, "Use Tailwind CSS design tokens: gray-50 for light backgrounds, slate-900 for dark backgrounds, white/slate-800 for cards, ring-1 ring-black/5 for light borders, ring-white/10 for dark borders".🔧 Suggested fix
- className={cx('flex flex-col bg-gray-50 dark:bg-slate-950', { + className={cx('flex flex-col bg-gray-50 dark:bg-slate-900', { 'min-h-including-header': !isEmbedded, 'min-h-screen': isEmbedded, })}web/app/utils/renderCtaHtml.ts-20-20 (1)
20-20:⚠️ Potential issue | 🟡 MinorInconsistent dark-mode gradient between the two CTAs.
Line 20 updates
renderTimeToSwitchCtatodark:to-slate-800/50, butrenderDitchGoogleCtaon line 69 still uses the olddark:to-orange-300/20. Given both CTAs share the same gradient structure, this looks like an oversight.Proposed fix
- <div class="absolute inset-0 rounded-4xl bg-linear-115 from-red-500/50 to-orange-300/30 sm:bg-linear-145 dark:from-red-500/40 dark:to-orange-300/20"></div> + <div class="absolute inset-0 rounded-4xl bg-linear-115 from-red-500/50 to-orange-300/30 sm:bg-linear-145 dark:from-red-500/40 dark:to-slate-800/50"></div>Also applies to: 69-69
web/app/pages/Project/Settings/Annotations.tsx-226-226 (1)
226-226:⚠️ Potential issue | 🟡 MinorInconsistent dark divider color:
dark:divide-slate-700here vsdark:divide-slate-800on the parent table (Line 208).The table-level
divide-yon Line 208 was updated todark:divide-slate-800, but the tbody row divider here still usesdark:divide-slate-700. This looks like an oversight in the sweep.Proposed fix
- <tbody className='divide-y divide-gray-200 bg-white dark:divide-slate-700 dark:bg-slate-950'> + <tbody className='divide-y divide-gray-200 bg-white dark:divide-slate-800 dark:bg-slate-950'>web/app/ui/MultiSelect.tsx-138-140 (1)
138-140:⚠️ Potential issue | 🟡 MinorSelected and hover states share the same dark background — no visual distinction.
Both
isSelected(Line 138:dark:bg-slate-900/80) and!isSelectedhover (Line 139:dark:hover:bg-slate-900/80) resolve to the same dark-mode color. A user hovering over an unselected item will see the same background as a selected item, making it hard to tell them apart. Consider using a slightly different shade for one of the two states (e.g.,dark:hover:bg-slate-800/60for hover).web/app/ui/MultiSelect.tsx-98-98 (1)
98-98:⚠️ Potential issue | 🟡 MinorFocus ring color deviates from coding guidelines.
The input uses
focus:ring-slate-900(light) anddark:focus:ring-slate-300(dark), but the project guidelines specifyfocus:ring-indigo-500for input focus states. The slate focus rings blend with the background and provide less visual distinction for accessibility.Proposed fix
- className='w-full cursor-text rounded-md border-0 bg-white py-2 pr-10 pl-3 text-sm font-medium ring-1 ring-gray-300 transition-colors ring-inset placeholder:text-gray-400 hover:bg-gray-50 focus:ring-2 focus:ring-slate-900 focus:outline-hidden dark:bg-slate-950 dark:text-gray-50 dark:ring-slate-700/80 dark:placeholder:text-gray-500 dark:hover:bg-slate-900 dark:focus:ring-slate-300' + className='w-full cursor-text rounded-md border-0 bg-white py-2 pr-10 pl-3 text-sm font-medium ring-1 ring-gray-300 transition-colors ring-inset placeholder:text-gray-400 hover:bg-gray-50 focus:ring-2 focus:ring-indigo-500 focus:outline-hidden dark:bg-slate-950 dark:text-gray-50 dark:ring-slate-700/80 dark:placeholder:text-gray-500 dark:hover:bg-slate-900 dark:focus:ring-indigo-500'As per coding guidelines: "Apply ring borders to inputs with focus:ring-indigo-500 for focus states."
web/app/pages/Project/tabs/Experiments/ExperimentResults.tsx-195-195 (1)
195-195:⚠️ Potential issue | 🟡 MinorTooltip ring border is invisible in dark mode.
ring-black/10on adark:bg-slate-900background provides virtually no contrast. Adddark:ring-white/10to match the dark border guideline.Proposed fix
- return `<ul class='bg-gray-50 dark:text-gray-50 dark:bg-slate-900 rounded-md ring-1 ring-black/10 px-3 py-1'> + return `<ul class='bg-gray-50 dark:text-gray-50 dark:bg-slate-900 rounded-md ring-1 ring-black/10 dark:ring-white/10 px-3 py-1'>As per coding guidelines: "Use Tailwind CSS design tokens: … ring-1 ring-black/5 for light borders, ring-white/10 for dark borders."
web/app/pages/Project/Settings/Emails/Emails.tsx-238-242 (1)
238-242:⚠️ Potential issue | 🟡 MinorDropdown panel may blend into the table row in dark mode.
Both the dropdown (Line 241:
dark:bg-slate-950) and the parent table row (Line 215:dark:bg-slate-950) now share the same background color. Since this is an absolutely positioned floating element, it will be visually indistinguishable from the row behind it in dark mode. Previously the dropdown likely useddark:bg-slate-900, which provided natural contrast.Consider adding a shadow or ring to the dropdown in dark mode so it visually separates from the underlying content:
Suggested fix
- className='absolute right-0 z-10 mt-2 w-72 origin-top-right divide-y divide-gray-200 rounded-md bg-white text-left focus:outline-hidden dark:divide-gray-700 dark:bg-slate-950' + className='absolute right-0 z-10 mt-2 w-72 origin-top-right divide-y divide-gray-200 rounded-md bg-white shadow-lg ring-1 ring-black/5 text-left focus:outline-hidden dark:divide-gray-700 dark:bg-slate-950 dark:ring-white/10'As per coding guidelines, dark borders should use
ring-white/10.web/app/ui/Pagination.tsx-175-175 (1)
175-175:⚠️ Potential issue | 🟡 MinorPage number and next buttons also use the darker palette.
The remaining pagination buttons (page numbers and desktop next button) consistently apply
dark:bg-slate-950anddark:hover:bg-slate-900, which maintains internal consistency but conflicts with the coding guidelines.Given that this deviation is systematic across the entire component and aligns with the PR's "Darker dark mode" objective, this appears to be an intentional design decision. However, the guidelines should be updated to reflect this new standard if this is the intended direction.
As per coding guidelines: "Use HeadlessUI-based buttons as primary components with bg-slate-900 for light mode and bg-slate-800 for dark mode".
Also applies to: 195-195, 198-198
web/app/ui/Pagination.tsx-133-133 (1)
133-133:⚠️ Potential issue | 🟡 MinorSame guideline concern applies to desktop navigation buttons.
The desktop previous/next buttons also use the darker
slate-950/900palette instead of the guideline-specifiedslate-800. This should be addressed consistently with the mobile buttons.As per coding guidelines: "Use HeadlessUI-based buttons as primary components with bg-slate-900 for light mode and bg-slate-800 for dark mode".
Also applies to: 136-136
web/app/ui/Pagination.tsx-158-158 (1)
158-158:⚠️ Potential issue | 🟡 MinorDots navigation button has the same guideline deviation.
The ellipsis (dots) button uses
dark:bg-slate-950anddark:hover:bg-slate-900, continuing the pattern of darker colors that deviate from the established guidelines.As per coding guidelines: "Use HeadlessUI-based buttons as primary components with bg-slate-900 for light mode and bg-slate-800 for dark mode".
web/app/ui/Pagination.tsx-61-61 (1)
61-61:⚠️ Potential issue | 🟡 MinorUpdate dark mode button colors to align with design system.
The pagination buttons use
dark:bg-slate-950anddark:hover:bg-slate-900, which are darker than the established design preference specifyingslate-800for dark mode buttons. The established design guidance indicates buttons should useslate-800for dark mode, notslate-950.Consider reverting to
dark:bg-slate-800/dark:hover:bg-slate-700to maintain consistency with the design system, or explicitly update the design guidelines if a darker palette is intentional.Applies to: lines 61, 64, 81, 84, and similar button patterns elsewhere in the file.
web/app/pages/Project/tabs/Traffic/MetricCards.tsx-181-181 (1)
181-181:⚠️ Potential issue | 🟡 MinorPotential inconsistency: dropdown panel uses
slate-950while similar floating elements useslate-900.The metric dropdown and its header now use
dark:bg-slate-950, which is the token used for page-level backgrounds elsewhere in this PR. Other floating/popup elements (e.g.,ChartContextMenu) usedark:bg-slate-900. If the intent is for floating panels to be one step lighter than the page to maintain visual hierarchy, consider usingdark:bg-slate-900here instead.Suggested diff
- 'absolute top-4 z-10 mt-2 min-w-[250px] origin-top transform cursor-auto overflow-hidden rounded-md border border-black/10 bg-white whitespace-normal shadow-lg transition-all duration-200 ease-out dark:border-slate-700/50 dark:bg-slate-950', + 'absolute top-4 z-10 mt-2 min-w-[250px] origin-top transform cursor-auto overflow-hidden rounded-md border border-black/10 bg-white whitespace-normal shadow-lg transition-all duration-200 ease-out dark:border-slate-700/50 dark:bg-slate-900',- <div className='flex items-center justify-between border-b border-black/10 bg-white p-2 dark:border-slate-700/50 dark:bg-slate-950'> + <div className='flex items-center justify-between border-b border-black/10 bg-white p-2 dark:border-slate-700/50 dark:bg-slate-900'>Also applies to: 188-188
web/app/pages/Auth/CreateNewPassword/CreateNewPassword.tsx-27-34 (1)
27-34:⚠️ Potential issue | 🟡 MinorCard and page share the same dark background — no visual separation.
Both the outer container (Line 27) and the card wrapper (Line 34) use
dark:bg-slate-950. In dark mode, the card will blend into the page background, losing visual hierarchy. Thedark:ring-slate-800border provides minimal contrast.Consider differentiating the card with
dark:bg-slate-900(or similar) so it stands out from theslate-950page background, consistent with the guideline of using distinct tokens for cards vs. page backgrounds.Proposed fix
- <div className='bg-white px-6 py-12 shadow-xs ring-1 ring-gray-200 sm:rounded-lg sm:px-12 dark:bg-slate-950 dark:ring-slate-800'> + <div className='bg-white px-6 py-12 shadow-xs ring-1 ring-gray-200 sm:rounded-lg sm:px-12 dark:bg-slate-900 dark:ring-slate-800'>As per coding guidelines: "Use Tailwind CSS design tokens: gray-50 for light backgrounds, slate-900 for dark backgrounds, white/slate-800 for cards"
web/app/ui/Input.tsx-48-48 (1)
48-48:⚠️ Potential issue | 🟡 MinorInput background at
dark:bg-slate-950may lack contrast against the page background.With
root.tsxalso changing the page background todark:bg-slate-950, the input field will be indistinguishable from the page unless the ring border (dark:ring-slate-700/80on line 51) provides enough visual separation. Consider keeping inputs atdark:bg-slate-900so they stand out from the page surface, which is the established design token for dark backgrounds. As per coding guidelines, "Use Tailwind CSS design tokens: … slate-900 for dark backgrounds, white/slate-800 for cards".web/app/pages/Auth/ForgotPassword/ForgotPassword.tsx-40-47 (1)
40-47:⚠️ Potential issue | 🟡 MinorCard background matches page background in dark mode, losing visual hierarchy.
Both the page (line 40) and the form card (line 47) use
dark:bg-slate-950, making the card visually indistinguishable from the surrounding background. Thering-1 ring-slate-800border provides minimal separation, but the coding guidelines specifywhite/slate-800 for cardsin dark mode to maintain a clear content hierarchy.Suggested fix
- <div className='bg-white px-6 py-12 shadow-xs ring-1 ring-gray-200 sm:rounded-lg sm:px-12 dark:bg-slate-950 dark:ring-slate-800'> + <div className='bg-white px-6 py-12 shadow-xs ring-1 ring-gray-200 sm:rounded-lg sm:px-12 dark:bg-slate-900 dark:ring-slate-800'>As per coding guidelines, "Use Tailwind CSS design tokens: gray-50 for light backgrounds, slate-900 for dark backgrounds, white/slate-800 for cards".
web/app/pages/Project/tabs/Traffic/TrafficHeaderActions.tsx-200-200 (1)
200-200:⚠️ Potential issue | 🟡 MinorMinor inconsistency between the two dropdown
buttonClassNameprops.Line 200 (segments dropdown) includes
focus:border-indigo-500, but Line 219 (export dropdown) omits it. Both buttons should have the same focus styling for visual consistency.Proposed fix
- buttonClassName='!p-2 rounded-md hover:bg-white border border-gray-50/0 hover:border-gray-300 hover:dark:border-slate-700/80 dark:hover:bg-slate-900 focus:z-10 focus:outline-hidden focus:ring-1 focus:ring-indigo-500 focus:dark:ring-gray-200' + buttonClassName='!p-2 rounded-md hover:bg-white border border-gray-50/0 hover:border-gray-300 hover:dark:border-slate-700/80 dark:hover:bg-slate-900 focus:z-10 focus:outline-hidden focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 focus:dark:ring-gray-200'Also applies to: 219-219
web/app/pages/Dashboard/Dashboard.tsx-392-392 (1)
392-392:⚠️ Potential issue | 🟡 MinorMinor inconsistency between desktop and mobile search input dark mode styles.
The desktop input (Line 392) uses
dark:ring-slate-700/80anddark:focus:ring-slate-300, while the mobile input (Line 454) usesdark:ring-slate-600anddark:focus:ring-slate-200. Additionally, the desktop variant includesring-insetandbg-whitefor light mode, but the mobile variant usesbg-gray-50. Consider aligning these for a consistent look across breakpoints.Also applies to: 454-454
web/app/ui/StatusPage.tsx-122-123 (1)
122-123:⚠️ Potential issue | 🟡 MinorPrimary and non-primary buttons are visually indistinguishable in dark mode.
Both variants use
dark:bg-slate-900 dark:hover:bg-slate-700, so in dark mode a user cannot tell which action is primary. The coding guidelines specifybg-slate-800for dark-mode primary buttons, and non-primary should have a distinct treatment (e.g., a border-only or lighter surface).Consider differentiating — for example, using the project's
Buttoncomponent here instead of inline classes, or adjusting the dark tokens so primary stands out:Suggested diff
action.primary - ? 'bg-slate-900 text-white hover:bg-slate-700 focus:ring-slate-500 dark:bg-slate-900 dark:hover:bg-slate-700' - : 'bg-gray-100 text-gray-700 hover:bg-gray-200 focus:ring-gray-500 dark:bg-slate-900 dark:text-gray-200 dark:hover:bg-slate-700', + ? 'bg-slate-900 text-white hover:bg-slate-700 focus:ring-slate-500 dark:bg-slate-800 dark:hover:bg-slate-700' + : 'bg-gray-100 text-gray-700 hover:bg-gray-200 focus:ring-gray-500 dark:bg-slate-950 dark:text-gray-200 dark:hover:bg-slate-900',As per coding guidelines, "Use HeadlessUI-based buttons as primary components with bg-slate-900 for light mode and bg-slate-800 for dark mode."
Also applies to: 136-137
web/app/ui/Button.tsx-61-61 (1)
61-61:⚠️ Potential issue | 🟡 MinorSecondary button background matches the page background in dark mode.
dark:bg-slate-950is the same token now used for page backgrounds (e.g.,StatusPage, main layouts). Thedark:border-slate-700/80border provides some differentiation, but the button may appear to blend into the background in contexts where the page surface is alsoslate-950.Consider using
dark:bg-slate-900for the secondary variant to maintain a visible contrast step against the page.web/app/components/GithubAuth.tsx-9-15 (1)
9-15:⚠️ Potential issue | 🟡 MinorInterface name
GoogleAuthPropsis a copy-paste artifact — should beGithubAuthProps.The interface is named
GoogleAuthPropsbut is used exclusively by theGithubAuthcomponent. This is confusing and likely carried over fromGoogleAuth.tsx.Proposed fix
-interface GoogleAuthProps { +interface GithubAuthProps { className?: string onClick: () => void disabled?: boolean } -const GithubAuth = ({ className, onClick, disabled }: GoogleAuthProps) => { +const GithubAuth = ({ className, onClick, disabled }: GithubAuthProps) => {web/app/ui/Checkbox.tsx-39-39 (1)
39-39:⚠️ Potential issue | 🟡 MinorMissing visible focus indicator on the checkbox.
There's no
focus:ring-*ordata-[focus]:ring-*class on theHeadlessCheckbox. Keyboard users won't see a focus ring when tabbing to this control, which is an accessibility concern. As per coding guidelines, inputs should havefocus:ring-indigo-500for focus states.♿ Suggested fix
- className='group/checkbox size-4 shrink-0 cursor-pointer rounded-sm bg-white ring-1 ring-gray-300 transition-colors duration-100 ease-out ring-inset group-hover:bg-gray-100 data-[checked]:bg-slate-900 data-[checked]:ring-slate-900 dark:bg-slate-950 dark:ring-slate-700/80 dark:group-hover:bg-slate-900/70 dark:data-[checked]:bg-slate-100 dark:data-[checked]:ring-slate-100' + className='group/checkbox size-4 shrink-0 cursor-pointer rounded-sm bg-white ring-1 ring-gray-300 transition-colors duration-100 ease-out ring-inset group-hover:bg-gray-100 data-[checked]:bg-slate-900 data-[checked]:ring-slate-900 data-[focus]:ring-2 data-[focus]:ring-indigo-500 dark:bg-slate-950 dark:ring-slate-700/80 dark:group-hover:bg-slate-900/70 dark:data-[checked]:bg-slate-100 dark:data-[checked]:ring-slate-100 dark:data-[focus]:ring-indigo-400'web/app/components/Header/index.tsx-683-684 (1)
683-684:⚠️ Potential issue | 🟡 MinorUse slate-900 for header dark backgrounds.
Both header variants now use slate-950 in dark mode, which diverges from the dark background token.Suggested update (apply to both headers)
- 'border-b border-gray-200 bg-gray-50 dark:border-slate-600/40 dark:bg-slate-950': + 'border-b border-gray-200 bg-gray-50 dark:border-slate-600/40 dark:bg-slate-900':As per coding guidelines: Use Tailwind CSS design tokens: gray-50 for light backgrounds, slate-900 for dark backgrounds, white/slate-800 for cards, ring-1 ring-black/5 for light borders, ring-white/10 for dark borders.
Also applies to: 749-750
web/app/pages/Onboarding/Onboarding.tsx-316-316 (1)
316-316:⚠️ Potential issue | 🟡 MinorMatch dark icon-chip backgrounds to the slate-900 token.
These chips use dark:bg-slate-950, which is outside the dark background token.Suggested update (apply to all listed chips)
- className='relative z-10 size-5 shrink-0 bg-white text-amber-500 dark:bg-slate-950' + className='relative z-10 size-5 shrink-0 bg-white text-amber-500 dark:bg-slate-900'As per coding guidelines: Use Tailwind CSS design tokens: gray-50 for light backgrounds, slate-900 for dark backgrounds, white/slate-800 for cards, ring-1 ring-black/5 for light borders, ring-white/10 for dark borders.
Also applies to: 339-339, 362-362
web/app/routes/_index.tsx-1906-1906 (1)
1906-1906:⚠️ Potential issue | 🟡 MinorUse slate-900 for the page dark background.
The main wrapper uses slate-950 for dark mode, which is outside the dark background token.Suggested update
- <main className='bg-gray-50 dark:bg-slate-950'> + <main className='bg-gray-50 dark:bg-slate-900'>As per coding guidelines: Use Tailwind CSS design tokens: gray-50 for light backgrounds, slate-900 for dark backgrounds, white/slate-800 for cards, ring-1 ring-black/5 for light borders, ring-white/10 for dark borders.
web/app/pages/Project/View/ViewProject.helpers.tsx-807-810 (1)
807-810:⚠️ Potential issue | 🟡 MinorUse ring-black/5 for tooltip borders.
The tooltip container uses ring-black/10, which doesn’t match the border token guideline.Suggested update (apply to both tooltips in this block)
- return `<ul class='bg-gray-50 dark:text-gray-50 dark:bg-slate-900 rounded-md ring-1 ring-black/10 px-2 py-1 text-xs md:text-sm max-h-[250px] md:max-h-[350px] overflow-y-auto shadow-lg z-50'> + return `<ul class='bg-gray-50 dark:text-gray-50 dark:bg-slate-900 rounded-md ring-1 ring-black/5 px-2 py-1 text-xs md:text-sm max-h-[250px] md:max-h-[350px] overflow-y-auto shadow-lg z-50'>As per coding guidelines: Use Tailwind CSS design tokens: gray-50 for light backgrounds, slate-900 for dark backgrounds, white/slate-800 for cards, ring-1 ring-black/5 for light borders, ring-white/10 for dark borders.
Also applies to: 966-969
web/app/pages/Dashboard/SortSelector.tsx-97-97 (1)
97-97:⚠️ Potential issue | 🟡 MinorUse card/ring tokens for the popover panel surface.
This panel reads as a card, but its background and ring tokens don’t align with the design tokens.Suggested update
- <div className='overflow-hidden rounded-lg bg-gray-50 p-1 ring-1 ring-gray-200 dark:bg-slate-900 dark:ring-slate-800'> + <div className='overflow-hidden rounded-lg bg-white p-1 ring-1 ring-black/5 dark:bg-slate-800 dark:ring-white/10'>As per coding guidelines: Use Tailwind CSS design tokens: gray-50 for light backgrounds, slate-900 for dark backgrounds, white/slate-800 for cards, ring-1 ring-black/5 for light borders, ring-white/10 for dark borders.
web/app/components/Header/index.tsx-163-163 (1)
163-163:⚠️ Potential issue | 🟡 MinorUse slate-900 for the dark panel surface.
The solutions panel uses slate-950 in dark mode, which is outside the dark background token.Suggested update
- <div className='flex w-[650px] flex-col divide-y divide-gray-300/80 rounded-lg border border-gray-300/80 bg-gray-50/50 p-1.5 dark:divide-slate-700/60 dark:border-slate-700/60 dark:bg-slate-950/50'> + <div className='flex w-[650px] flex-col divide-y divide-gray-300/80 rounded-lg border border-gray-300/80 bg-gray-50/50 p-1.5 dark:divide-slate-700/60 dark:border-slate-700/60 dark:bg-slate-900/50'>As per coding guidelines: Use Tailwind CSS design tokens: gray-50 for light backgrounds, slate-900 for dark backgrounds, white/slate-800 for cards, ring-1 ring-black/5 for light borders, ring-white/10 for dark borders.
web/app/pages/Project/View/ViewProject.helpers.tsx-1958-1960 (1)
1958-1960:⚠️ Potential issue | 🟡 MinorUse ring-black/5 for tooltip borders (both compare modes).
Suggested update (apply to both tooltip containers)
- return `<ul class='bg-gray-50 dark:text-gray-50 dark:bg-slate-900 rounded-md ring-1 ring-black/10 px-2 py-1 text-xs md:text-sm max-h-[250px] md:max-h-[350px] overflow-y-auto shadow-lg z-50'> + return `<ul class='bg-gray-50 dark:text-gray-50 dark:bg-slate-900 rounded-md ring-1 ring-black/5 px-2 py-1 text-xs md:text-sm max-h-[250px] md:max-h-[350px] overflow-y-auto shadow-lg z-50'>As per coding guidelines: Use Tailwind CSS design tokens: gray-50 for light backgrounds, slate-900 for dark backgrounds, white/slate-800 for cards, ring-1 ring-black/5 for light borders, ring-white/10 for dark borders.
Also applies to: 2060-2063
web/app/pages/Onboarding/Onboarding.tsx-650-650 (1)
650-650:⚠️ Potential issue | 🟡 MinorBring the main onboarding card dark background in line with token guidance.
The dark background is using slate-900/25 instead of the card slate-800 token.Suggested update
- <div className='relative mx-auto min-h-0 w-full max-w-5xl flex-1 overflow-hidden rounded-2xl bg-white ring-1 ring-black/5 dark:bg-slate-900/25 dark:ring-white/10'> + <div className='relative mx-auto min-h-0 w-full max-w-5xl flex-1 overflow-hidden rounded-2xl bg-white ring-1 ring-black/5 dark:bg-slate-800/25 dark:ring-white/10'>As per coding guidelines: Use Tailwind CSS design tokens: gray-50 for light backgrounds, slate-900 for dark backgrounds, white/slate-800 for cards, ring-1 ring-black/5 for light borders, ring-white/10 for dark borders.
web/app/pages/Project/View/ViewProject.helpers.tsx-2418-2419 (1)
2418-2419:⚠️ Potential issue | 🟡 MinorUse ring-black/5 for tooltip borders.
Suggested update
- return `<ul class='bg-gray-50 dark:text-gray-50 dark:bg-slate-900 rounded-md ring-1 ring-black/10 px-2 py-1 text-xs md:text-sm max-h-[250px] md:max-h-[350px] overflow-y-auto shadow-lg z-50'> + return `<ul class='bg-gray-50 dark:text-gray-50 dark:bg-slate-900 rounded-md ring-1 ring-black/5 px-2 py-1 text-xs md:text-sm max-h-[250px] md:max-h-[350px] overflow-y-auto shadow-lg z-50'>As per coding guidelines: Use Tailwind CSS design tokens: gray-50 for light backgrounds, slate-900 for dark backgrounds, white/slate-800 for cards, ring-1 ring-black/5 for light borders, ring-white/10 for dark borders.
web/app/routes/_index.tsx-556-557 (1)
556-557:⚠️ Potential issue | 🟡 MinorUse slate-800 for dark card surfaces across previews.
Several preview cards use dark:bg-slate-950; the card token set specifies slate-800 for dark mode.Suggested update (apply to all listed cards)
- className='rounded-md bg-white px-3 py-2 text-xs text-slate-900 ring-1 ring-black/5 dark:bg-slate-950 dark:text-gray-50 dark:ring-white/10' + className='rounded-md bg-white px-3 py-2 text-xs text-slate-900 ring-1 ring-black/5 dark:bg-slate-800 dark:text-gray-50 dark:ring-white/10'As per coding guidelines: Use Tailwind CSS design tokens: gray-50 for light backgrounds, slate-900 for dark backgrounds, white/slate-800 for cards, ring-1 ring-black/5 for light borders, ring-white/10 for dark borders.
Also applies to: 572-572, 632-633, 916-916, 955-955, 1216-1216, 1243-1243, 1263-1263, 1331-1331, 1533-1533
web/app/components/Header/index.tsx-875-875 (1)
875-875:⚠️ Potential issue | 🟡 MinorUse gray-50 for the light mobile panel background.
The mobile dialog uses gray-100/80; the token guidance calls for gray-50 for light backgrounds.Suggested update
- <DialogPanel className='fixed inset-y-0 top-0 right-0 z-30 w-full overflow-y-auto border-gray-300/80 bg-gray-100/80 p-4 backdrop-blur-2xl sm:max-w-sm sm:border dark:border-slate-900/80 dark:bg-slate-900/80'> + <DialogPanel className='fixed inset-y-0 top-0 right-0 z-30 w-full overflow-y-auto border-gray-300/80 bg-gray-50/80 p-4 backdrop-blur-2xl sm:max-w-sm sm:border dark:border-slate-900/80 dark:bg-slate-900/80'>As per coding guidelines: Use Tailwind CSS design tokens: gray-50 for light backgrounds, slate-900 for dark backgrounds, white/slate-800 for cards, ring-1 ring-black/5 for light borders, ring-white/10 for dark borders.
web/app/pages/Onboarding/Onboarding.tsx-704-705 (1)
704-705:⚠️ Potential issue | 🟡 MinorUse indigo-500 for the dark selection ring.
The selected state uses a slate ring in dark mode rather than the indigo accent.Suggested update
- ? 'bg-indigo-50 ring-2 ring-indigo-500 dark:bg-slate-900 dark:ring-slate-200' + ? 'bg-indigo-50 ring-2 ring-indigo-500 dark:bg-slate-900 dark:ring-indigo-500'As per coding guidelines: Use indigo-600 as the primary accent color in light mode and indigo-500 in dark mode.
web/app/pages/Onboarding/Onboarding.tsx-955-956 (1)
955-956:⚠️ Potential issue | 🟡 MinorAlign textarea surface and ring tokens.
The textarea surface/ring uses slate-950 and gray ring tokens instead of the standard palette.Suggested update
- 'bg-white dark:bg-slate-950 ring-1 ring-gray-200 dark:ring-slate-700', + 'bg-white dark:bg-slate-900 ring-1 ring-black/5 dark:ring-white/10',As per coding guidelines: Use Tailwind CSS design tokens: gray-50 for light backgrounds, slate-900 for dark backgrounds, white/slate-800 for cards, ring-1 ring-black/5 for light borders, ring-white/10 for dark borders.
web/app/pages/Dashboard/SortSelector.tsx-74-74 (1)
74-74:⚠️ Potential issue | 🟡 MinorAlign the dark background token to slate-900.
The dark background on the button is set to slate-950, but the token guidance calls for slate-900 for dark backgrounds.Suggested update
- <PopoverButton className='inline-flex w-full rounded-md border border-transparent bg-gray-50 p-2 text-sm font-medium text-gray-700 outline-hidden transition-colors hover:border-gray-300 hover:bg-white dark:bg-slate-950 dark:text-gray-50 hover:dark:border-slate-700/80 dark:hover:bg-slate-900'> + <PopoverButton className='inline-flex w-full rounded-md border border-transparent bg-gray-50 p-2 text-sm font-medium text-gray-700 outline-hidden transition-colors hover:border-gray-300 hover:bg-white dark:bg-slate-900 dark:text-gray-50 hover:dark:border-slate-700/80 dark:hover:bg-slate-800'>As per coding guidelines: Use Tailwind CSS design tokens: gray-50 for light backgrounds, slate-900 for dark backgrounds, white/slate-800 for cards, ring-1 ring-black/5 for light borders, ring-white/10 for dark borders.
web/app/pages/Project/View/ViewProject.helpers.tsx-1552-1553 (1)
1552-1553:⚠️ Potential issue | 🟡 MinorUse ring-black/5 for tooltip borders.
Suggested update
- return `<ul class='bg-gray-50 dark:text-gray-50 dark:bg-slate-900 rounded-md ring-1 ring-black/10 px-2 py-1 text-xs md:text-sm max-h-[250px] md:max-h-[350px] overflow-y-auto shadow-lg z-50'> + return `<ul class='bg-gray-50 dark:text-gray-50 dark:bg-slate-900 rounded-md ring-1 ring-black/5 px-2 py-1 text-xs md:text-sm max-h-[250px] md:max-h-[350px] overflow-y-auto shadow-lg z-50'>As per coding guidelines: Use Tailwind CSS design tokens: gray-50 for light backgrounds, slate-900 for dark backgrounds, white/slate-800 for cards, ring-1 ring-black/5 for light borders, ring-white/10 for dark borders.
web/app/pages/Project/View/ViewProject.helpers.tsx-1759-1762 (1)
1759-1762:⚠️ Potential issue | 🟡 MinorUse ring-black/5 for tooltip borders.
Suggested update
- <div class='bg-gray-50 dark:text-gray-50 dark:bg-slate-900 rounded-md ring-1 ring-black/10 px-2 py-1 text-xs md:text-sm max-w-xs md:max-w-sm max-h-[300px] md:max-h-[400px] overflow-y-auto shadow-lg z-50'> + <div class='bg-gray-50 dark:text-gray-50 dark:bg-slate-900 rounded-md ring-1 ring-black/5 px-2 py-1 text-xs md:text-sm max-w-xs md:max-w-sm max-h-[300px] md:max-h-[400px] overflow-y-auto shadow-lg z-50'>As per coding guidelines: Use Tailwind CSS design tokens: gray-50 for light backgrounds, slate-900 for dark backgrounds, white/slate-800 for cards, ring-1 ring-black/5 for light borders, ring-white/10 for dark borders.
web/app/pages/Onboarding/Onboarding.tsx-392-392 (1)
392-392:⚠️ Potential issue | 🟡 MinorAlign the project visualisation card tokens.
Dark background and ring values are outside the card token palette.Suggested update
- <div className='flex size-20 shrink-0 items-center justify-center rounded-xl bg-white shadow-sm ring-1 ring-gray-200 dark:bg-slate-950 dark:ring-slate-800'> + <div className='flex size-20 shrink-0 items-center justify-center rounded-xl bg-white shadow-sm ring-1 ring-black/5 dark:bg-slate-800 dark:ring-white/10'>As per coding guidelines: Use Tailwind CSS design tokens: gray-50 for light backgrounds, slate-900 for dark backgrounds, white/slate-800 for cards, ring-1 ring-black/5 for light borders, ring-white/10 for dark borders.
web/app/pages/Project/View/ViewProject.helpers.tsx-1352-1353 (1)
1352-1353:⚠️ Potential issue | 🟡 MinorUse ring-black/5 for tooltip borders.
Suggested update
- return `<ul class='bg-gray-50 dark:text-gray-50 dark:bg-slate-900 rounded-md ring-1 ring-black/10 px-2 py-1 text-xs md:text-sm max-h-[250px] md:max-h-[350px] overflow-y-auto shadow-lg z-50'> + return `<ul class='bg-gray-50 dark:text-gray-50 dark:bg-slate-900 rounded-md ring-1 ring-black/5 px-2 py-1 text-xs md:text-sm max-h-[250px] md:max-h-[350px] overflow-y-auto shadow-lg z-50'>As per coding guidelines: Use Tailwind CSS design tokens: gray-50 for light backgrounds, slate-900 for dark backgrounds, white/slate-800 for cards, ring-1 ring-black/5 for light borders, ring-white/10 for dark borders.
web/app/components/Header/index.tsx-284-284 (1)
284-284:⚠️ Potential issue | 🟡 MinorAlign menu panel ring and dark background tokens.
The panel uses ring-slate-200 and dark:bg-slate-950 rather than the standard ring and dark background tokens.Suggested update
- className='absolute right-0 z-30 mt-2 w-60 min-w-max origin-top-right rounded-md bg-white p-1 ring-1 ring-slate-200 transition duration-200 ease-out focus:outline-hidden data-closed:scale-95 data-closed:opacity-0 dark:bg-slate-950 dark:ring-slate-800' + className='absolute right-0 z-30 mt-2 w-60 min-w-max origin-top-right rounded-md bg-white p-1 ring-1 ring-black/5 transition duration-200 ease-out focus:outline-hidden data-closed:scale-95 data-closed:opacity-0 dark:bg-slate-900 dark:ring-white/10'As per coding guidelines: Use Tailwind CSS design tokens: gray-50 for light backgrounds, slate-900 for dark backgrounds, white/slate-800 for cards, ring-1 ring-black/5 for light borders, ring-white/10 for dark borders.
web/app/routes/_index.tsx-449-451 (1)
449-451:⚠️ Potential issue | 🟡 MinorAlign feature card surface and ring tokens.
The card uses ring-gray-200 and a dark slate-800/25 background that’s outside the card token set.Suggested update
- 'flex h-full flex-col overflow-hidden bg-white ring-1 ring-gray-200 dark:bg-slate-800/25 dark:ring-slate-800/60', + 'flex h-full flex-col overflow-hidden bg-white ring-1 ring-black/5 dark:bg-slate-800 dark:ring-white/10',As per coding guidelines: Use Tailwind CSS design tokens: gray-50 for light backgrounds, slate-900 for dark backgrounds, white/slate-800 for cards, ring-1 ring-black/5 for light borders, ring-white/10 for dark borders.
web/app/pages/Onboarding/Onboarding.tsx-926-926 (1)
926-926:⚠️ Potential issue | 🟡 MinorUse ring tokens and slate-900 for the tracking card.
Border and background tokens are off the recommended palette.Suggested update
- <div className='rounded-xl border border-gray-200 bg-gray-50 p-5 dark:border-slate-700 dark:bg-slate-950'> + <div className='rounded-xl bg-gray-50 p-5 ring-1 ring-black/5 dark:bg-slate-900 dark:ring-white/10'>As per coding guidelines: Use Tailwind CSS design tokens: gray-50 for light backgrounds, slate-900 for dark backgrounds, white/slate-800 for cards, ring-1 ring-black/5 for light borders, ring-white/10 for dark borders.
web/app/routes/_index.tsx-321-321 (1)
321-321:⚠️ Potential issue | 🟡 MinorAlign demo CTA surfaces with background/ring tokens.
Both CTA buttons use ring-black/10 and dark:bg-slate-950, which don’t match the border/background tokens.Suggested update (apply to both CTA buttons)
- className='pointer-events-auto inline-flex items-center rounded-md bg-white px-4 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-black/10 transition-all hover:bg-gray-50 dark:bg-slate-950 dark:text-white dark:ring-white/10 dark:hover:bg-slate-900' + className='pointer-events-auto inline-flex items-center rounded-md bg-white px-4 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-black/5 transition-all hover:bg-gray-50 dark:bg-slate-900 dark:text-white dark:ring-white/10 dark:hover:bg-slate-800'As per coding guidelines: Use Tailwind CSS design tokens: gray-50 for light backgrounds, slate-900 for dark backgrounds, white/slate-800 for cards, ring-1 ring-black/5 for light borders, ring-white/10 for dark borders.
Also applies to: 347-347
web/app/pages/Onboarding/Onboarding.tsx-749-752 (1)
749-752:⚠️ Potential issue | 🟡 MinorAlign welcome card surfaces with light/dark background tokens.
The outer card uses slate-50 and slate-950, which diverges from the gray-50/slate-900 background guidance.Suggested update
- <div className='rounded-2xl border border-gray-200 bg-slate-50 shadow-xs dark:border-slate-700/70 dark:bg-slate-950/80'> + <div className='rounded-2xl border border-gray-200 bg-gray-50 shadow-xs dark:border-slate-700/70 dark:bg-slate-900/80'>As per coding guidelines: Use Tailwind CSS design tokens: gray-50 for light backgrounds, slate-900 for dark backgrounds, white/slate-800 for cards, ring-1 ring-black/5 for light borders, ring-white/10 for dark borders.
web/app/pages/Onboarding/Onboarding.tsx-165-165 (1)
165-165:⚠️ Potential issue | 🟡 MinorAlign IconNode card surface tokens.
This card uses ring/background tokens that don’t match the designated card/ring palette.Suggested update
- <div className='flex size-14 items-center justify-center rounded-xl bg-white shadow-sm ring-1 ring-gray-200 dark:bg-slate-900 dark:ring-slate-700'> + <div className='flex size-14 items-center justify-center rounded-xl bg-white shadow-sm ring-1 ring-black/5 dark:bg-slate-800 dark:ring-white/10'>As per coding guidelines: Use Tailwind CSS design tokens: gray-50 for light backgrounds, slate-900 for dark backgrounds, white/slate-800 for cards, ring-1 ring-black/5 for light borders, ring-white/10 for dark borders.
web/app/components/Header/index.tsx-339-339 (1)
339-339:⚠️ Potential issue | 🟡 MinorAlign the disclosure panel surface and ring tokens.
This panel uses slate-950 and slate ring tokens instead of the standard ring and dark background palette.Suggested update
- className='absolute right-0 z-50 w-full min-w-max origin-top-right rounded-md bg-white p-1 ring-1 ring-slate-200 focus:outline-hidden dark:bg-slate-950 dark:ring-slate-700/80' + className='absolute right-0 z-50 w-full min-w-max origin-top-right rounded-md bg-white p-1 ring-1 ring-black/5 focus:outline-hidden dark:bg-slate-900 dark:ring-white/10'As per coding guidelines: Use Tailwind CSS design tokens: gray-50 for light backgrounds, slate-900 for dark backgrounds, white/slate-800 for cards, ring-1 ring-black/5 for light borders, ring-white/10 for dark borders.
web/app/pages/Project/View/ViewProject.helpers.tsx-1171-1172 (1)
1171-1172:⚠️ Potential issue | 🟡 MinorUse ring-black/5 for tooltip borders.
Suggested update
- return `<ul class='bg-gray-50 dark:text-gray-50 dark:bg-slate-900 rounded-md ring-1 ring-black/10 px-2 py-1 text-xs md:text-sm max-h-[250px] md:max-h-[350px] overflow-y-auto shadow-lg z-50'> + return `<ul class='bg-gray-50 dark:text-gray-50 dark:bg-slate-900 rounded-md ring-1 ring-black/5 px-2 py-1 text-xs md:text-sm max-h-[250px] md:max-h-[350px] overflow-y-auto shadow-lg z-50'>As per coding guidelines: Use Tailwind CSS design tokens: gray-50 for light backgrounds, slate-900 for dark backgrounds, white/slate-800 for cards, ring-1 ring-black/5 for light borders, ring-white/10 for dark borders.
web/app/pages/Onboarding/Onboarding.tsx-279-301 (1)
279-301:⚠️ Potential issue | 🟡 MinorUse card/ring tokens for the error list rows.
The rows use slate-950 backgrounds and gray rings that drift from the token set.Suggested update (apply to each row)
- <div className='flex items-center gap-3 rounded-lg bg-gray-50 p-4 ring-1 ring-gray-100 dark:bg-slate-950 dark:ring-slate-800'> + <div className='flex items-center gap-3 rounded-lg bg-gray-50 p-4 ring-1 ring-black/5 dark:bg-slate-900 dark:ring-white/10'>As per coding guidelines: Use Tailwind CSS design tokens: gray-50 for light backgrounds, slate-900 for dark backgrounds, white/slate-800 for cards, ring-1 ring-black/5 for light borders, ring-white/10 for dark borders.
web/app/components/pricing/BillingPricing.tsx-509-509 (1)
509-509:⚠️ Potential issue | 🟡 MinorStray
200in table className — likely a copy-paste artifact.Both
<table>elements haveclassName='200 min-w-full divide-y ...'. The200is an invalid Tailwind class and likely a leftover fromduration-200or similar. It won't break rendering but emits a meaningless class in the DOM.🐛 Proposed fix
- <table className='200 min-w-full divide-y divide-gray-300 dark:divide-slate-700'> + <table className='min-w-full divide-y divide-gray-300 dark:divide-slate-700'>Apply to both occurrences (lines 509 and 576).
Also applies to: 576-576
web/app/pages/Organisations/Settings/Projects.tsx-158-163 (1)
158-163:⚠️ Potential issue | 🟡 MinorUse slate-800 for dark card rows and medium weight for body text.
Rows use
dark:bg-slate-950, and body text lacks the required medium weight.Proposed fix
- className='bg-white hover:bg-gray-50 dark:bg-slate-950 dark:hover:bg-slate-900/50' + className='bg-white hover:bg-gray-50 dark:bg-slate-800 dark:hover:bg-slate-900/50' @@ - <td className='px-4 py-3 text-sm whitespace-nowrap text-gray-900 dark:text-gray-100'> + <td className='px-4 py-3 text-sm font-medium whitespace-nowrap text-gray-900 dark:text-gray-100'>As per coding guidelines: Implement full light and dark mode support with warm grays for light mode and slate tones for dark mode; Use font weights: medium for body text, semibold for labels, bold for headings.
web/app/pages/Organisations/Settings/Projects.tsx-83-86 (1)
83-86:⚠️ Potential issue | 🟡 MinorAlign input rings and focus color with design tokens.
The search input uses
ring-gray-300andfocus:ring-indigo-600, which diverges from the required ring tokens and focus color.Proposed fix
- className='block w-full rounded-md border-0 py-1.5 pl-10 text-gray-900 ring-1 ring-gray-300 ring-inset placeholder:text-gray-400 focus:ring-2 focus:ring-indigo-600 focus:ring-inset sm:text-sm sm:leading-6 dark:bg-slate-900 dark:text-white dark:ring-slate-600 dark:focus:ring-slate-400' + className='block w-full rounded-md border-0 py-1.5 pl-10 text-gray-900 ring-1 ring-black/5 ring-inset placeholder:text-gray-400 focus:ring-2 focus:ring-indigo-500 focus:ring-inset sm:text-sm sm:leading-6 dark:bg-slate-900 dark:text-white dark:ring-white/10 dark:focus:ring-indigo-500'As per coding guidelines: Apply ring borders to inputs with focus:ring-indigo-500 for focus states; Use Tailwind CSS design tokens: gray-50 for light backgrounds, slate-900 for dark backgrounds, white/slate-800 for cards, ring-1 ring-black/5 for light borders, ring-white/10 for dark borders.
web/app/pages/Organisations/Settings/Projects.tsx-322-336 (1)
322-336:⚠️ Potential issue | 🟡 MinorTreat the table wrapper as a card (radius + ring tokens + dark background).
The wrapper uses
borderandrounded-lgwithdark:bg-slate-950, which diverges from the card tokens and radius.Proposed fix
- <div className='overflow-hidden rounded-lg border border-gray-200 dark:border-slate-800'> + <div className='overflow-hidden rounded-2xl bg-white ring-1 ring-black/5 dark:bg-slate-800 dark:ring-white/10'> @@ - <tbody className='divide-y divide-gray-200 bg-white dark:divide-slate-800 dark:bg-slate-950'> + <tbody className='divide-y divide-gray-200 bg-white dark:divide-slate-800 dark:bg-slate-800'>As per coding guidelines: Use Tailwind CSS design tokens: gray-50 for light backgrounds, slate-900 for dark backgrounds, white/slate-800 for cards, ring-1 ring-black/5 for light borders, ring-white/10 for dark borders; Use border radius: rounded-md for small elements, rounded-lg for medium, rounded-xl for large, rounded-2xl for cards.
1 participant
Changes
If applicable, please describe what changes were made in this pull request.
Community Edition support
Database migrations
Documentation
Summary by CodeRabbit
New Features
UI/UX Improvements