Feature/dark mode#927
Merged
Merged
Conversation
Update dark-mode hover selectors and apply minor formatting/import tweaks. - Change dark-mode hover rules in CustomDaoSelector.css.ts and FeedFiltersModal.css.ts to use the combined selector 'html[data-theme-mode="dark"] &:hover' so hover styles apply correctly in dark theme. - Reorder imports in apps/subgraph/src/utils/parseDaoMetadata.ts (no behavior change). - Adjust imports and JSX formatting in apps/web/src/modules/home/Marquee.tsx (add darkWord/lightWord imports and multiline Image props for readability). - Move CSS import and collapse Stack props to a single line in apps/web/src/pages/bridge.tsx (formatting only).
Replace hard-coded border color values in packages/dao-ui/src/components/DaoCard/DaoCard.css.ts with theme.colors.border to ensure consistent theming across the component. The hover borderColor was updated accordingly; no other behavior changes.
|
@xSatori is attempting to deploy a commit to the Nouns Builder Team on Vercel. A member of the Team first needs to authorize it. |
Contributor
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughThis PR introduces comprehensive dark mode support via a centralized theme system with CSS variables, migrates icon identifiers from camelCase to kebab-case naming, and replaces hardcoded colors throughout the codebase with design-system theme tokens. It adds a theme provider, theme toggle UI, and updates styling across layouts, navigation, and UI components to be theme-aware. The icon system is also standardized with kebab-case keys and documentation guidelines. ChangesDark Mode & Theme System
Icon System Migration
Sequence Diagram(s)sequenceDiagram
participant User
participant Browser
participant _document as _document.tsx<br/>(Theme Init)
participant _app as _app.tsx<br/>(App Setup)
participant AppThemeProvider
participant Component as Navigation &<br/>Components
participant Storage as localStorage
User->>Browser: Load app
Browser->>_document: Execute inline script
_document->>Storage: Read THEME_STORAGE_KEY
Storage-->>_document: Return saved theme or null
_document->>_document: Determine theme from<br/>localStorage or<br/>prefers-color-scheme
_document->>Browser: Set documentElement<br/>dataset.themeMode &<br/>style.colorScheme
_document->>Browser: Apply body class<br/>(lightTheme or darkTheme)
Browser->>_app: App hydration begins
_app->>AppThemeProvider: Initialize with theme mode
AppThemeProvider->>AppThemeProvider: Read initial theme<br/>from documentElement
AppThemeProvider->>Component: Provide context<br/>(mode, toggleMode)
User->>Component: Click theme toggle
Component->>AppThemeProvider: Call toggleMode()
AppThemeProvider->>AppThemeProvider: Switch mode<br/>(light ↔ dark)
AppThemeProvider->>Browser: Apply documentElement<br/>attributes & body classes
AppThemeProvider->>Storage: Persist mode to<br/>localStorage
Browser-->>User: UI updates with<br/>new theme colors
sequenceDiagram
participant Dev as Developer/<br/>File System
participant Build as Build Pipeline
participant Registry as Icon Registry<br/>(icons.ts)
participant Component as UI Component
participant Icon as Icon Component
Dev->>Build: Reference icon by<br/>kebab-case ID<br/>(e.g., 'arrow-left')
Build->>Registry: Look up icon ID
Registry-->>Build: Return SVG asset
Build->>Component: Bundle icon into<br/>component
Component->>Icon: Pass id prop<br/>'arrow-left'
Icon->>Icon: Resolve from<br/>icons mapping
Icon->>Icon: Apply fill/color<br/>from props or<br/>theme tokens
Icon-->>Component: Render SVG with<br/>theme-aware fill
Component-->>Dev: Icon appears<br/>with correct<br/>styling
Estimated code review effort🎯 5 (Critical) | ⏱️ ~120 minutes This PR is substantial and touches nearly every part of the codebase with multiple independent concerns:
Review requires understanding theme initialization, CSS variable scoping, dark-mode selector semantics, icon mapping, ARIA patterns, and component-level changes across multiple domains (layouts, navigation, forms, dashboards, proposals, auctions). Possibly related PRs
Poem
✨ Finishing Touches🧪 Generate unit tests (beta)
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Nitpick comments (10)
packages/dao-ui/src/components/DaoCard/DaoCard.css.ts (1)
37-39: Consider removing redundant hover selector.The hover selector explicitly sets
borderColortotheme.colors.border, which is the same value as the base state (line 33). Unless this is needed for CSS specificity reasons, this selector appears redundant.♻️ Proposed refactor to remove redundant hover state
export const border = style({ border: `2px solid ${theme.colors.border}`, transition: 'all 0.15s ease-in-out', borderTop: 'none', - selectors: { - [`${card}:hover &`]: { - borderColor: theme.colors.border, - }, - }, })🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/dao-ui/src/components/DaoCard/DaoCard.css.ts` around lines 37 - 39, The hover selector [`${card}:hover &`] in DaoCard.css.ts redundantly sets borderColor to theme.colors.border which matches the base state on the same element; remove the entire hover rule (the block that sets borderColor) from the styles to avoid duplication, unless you require increased CSS specificity—in that case keep a comment explaining the specificity need or change the hover value to a distinct color; target the selector named card / the rule that sets borderColor to theme.colors.border when editing.packages/feed-ui/src/CustomDaoSelector.css.ts (2)
182-185: Dark override forsectionTitleis redundant.Base color and dark override are both
vars.color.text1, so this selector can be removed for clarity.🧹 Cleanup diff
export const sectionTitle = style({ fontSize: '14px', fontWeight: 600, color: vars.color.text1, - selectors: { - 'html[data-theme-mode="dark"] &': { - color: vars.color.text1, - }, - }, })🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/feed-ui/src/CustomDaoSelector.css.ts` around lines 182 - 185, The dark-mode selector override for sectionTitle is redundant because both the base style and the override use vars.color.text1; remove the 'html[data-theme-mode="dark"] &' block under the selectors for sectionTitle (the stanza that sets color: vars.color.text1) so only the base color remains, keeping the styleset concise and clear.
33-35: Consider replacing repeated hardcoded dark values with tokens.The current styles are valid, but these literals will be harder to keep aligned with system-wide palette changes.
♻️ Example tokenized direction
'html[data-theme-mode="dark"] &': { - backgroundColor: '#2a2b31', - borderColor: '#4a4d57', + backgroundColor: vars.color.background2, + borderColor: vars.color.border, color: vars.color.text1, }, @@ 'html[data-theme-mode="dark"] &': { - backgroundColor: '#2a2b31', + backgroundColor: vars.color.background2, }, 'html[data-theme-mode="dark"] &:hover': { - backgroundColor: '#3b3e47', + backgroundColor: vars.color.neutralHover, }, @@ 'html[data-theme-mode="dark"] &': { - backgroundColor: '#2a2b31', + backgroundColor: vars.color.background2, color: vars.color.text1, },Also applies to: 70-74, 141-142
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/feed-ui/src/CustomDaoSelector.css.ts` around lines 33 - 35, Replace the hardcoded dark hex literals (e.g., backgroundColor: '#2a2b31' and borderColor: '#4a4d57' and the other occurrences at the ranges you noted) with the design system tokens exposed in vars (for example use vars.color.* tokens such as vars.color.surfaceDark, vars.color.background, vars.color.borderMuted or the most appropriate existing token names) so the styles in CustomDaoSelector (the style objects that set backgroundColor/borderColor/color) follow the shared palette; update the same replacements for the other occurrences around lines 70-74 and 141-142 to use vars tokens consistently.packages/proposal-ui/src/components/ProposalVotes/VoterParticipation.css.ts (1)
18-21: Prefer semantic theme tokens over hardcoded dark colors.This dark override works, but hardcoded values make future theme tuning harder and can drift from token updates.
♻️ Proposed refactor
-import { atoms } from '@buildeross/zord' +import { atoms, vars } from '@buildeross/zord' import { globalStyle, style } from '@vanilla-extract/css' @@ globalStyle(`html[data-theme-mode='dark'] ${votePlacardReason} > *`, { - backgroundColor: '#5b5b61 !important', - color: '#ffffff !important', + backgroundColor: `${vars.color.background2} !important`, + color: `${vars.color.text1} !important`, })🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/proposal-ui/src/components/ProposalVotes/VoterParticipation.css.ts` around lines 18 - 21, The override uses hardcoded hex colors for the dark theme; replace those literals in the globalStyle targeting html[data-theme-mode='dark'] ${votePlacardReason} > * with your semantic theme tokens or CSS variables (e.g., the design-system/background and design-system/text-on-dark tokens or var(--token-...)) so the styles follow theme updates; keep the same selector (${votePlacardReason} > *) and preserve !important if needed for specificity, but reference the project’s established token names instead of '#5b5b61' and '#ffffff'.apps/web/src/modules/dashboard/CreateActions.css.ts (1)
4-24: Consider centralizing repeated dark hover color constants.
#67676dis now used as a semantic hover surface in multiple places; moving it to a shared theme token/constant would reduce future drift.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/web/src/modules/dashboard/CreateActions.css.ts` around lines 4 - 24, The local literal color constant darkButtonHover used in createPostButton (and duplicated elsewhere) should be replaced with a centralized theme token (e.g., add vars.color.hoverSurfaceDark or similar) and all references updated to use that token; remove the local const darkButtonHover, import the shared vars object where needed, and update createPostButton (and any other styles using '#67676d') to reference vars.color.hoverSurfaceDark (or your chosen token name) including keeping the "!important" suffix in the template string so the behavior doesn't change.apps/web/src/modules/home/Marquee.css.ts (1)
19-36: Consider reducing style duplication.The
*Darkvariants (UnlockDark,TheDark, etc.) have identical styles to their light counterparts. Since the visual difference comes from the SVG assets, you could simplify by reusing the same class:// Example: share the same style export const Unlock = style([baseStyles, getMobileStyle('130px')]) export const UnlockDark = Unlock // aliasHowever, keeping them separate provides flexibility if dark-mode-specific sizing adjustments are needed later.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/web/src/modules/home/Marquee.css.ts` around lines 19 - 36, Many of the dark-mode constants duplicate identical style arrays (e.g., UnlockDark, TheDark, PossibilitiesDark, OfDark, CollectiveDark, CreationDark) — replace each "*Dark" export with an alias to its light counterpart (e.g., set UnlockDark to reuse Unlock) to remove duplication while preserving the original identifiers; keep the original style-styled consts (Unlock, The, Possibilities, Of, Collective, Creation, etc.) and assign their corresponding Dark names to reference those same values so you retain flexibility to change them later if needed.apps/web/src/styles/bridge.css.ts (1)
4-4: Consider extracting shared dark mode colors.The
darkBridgeHovervalue'#67676d'matchesdarkSurfaceHoverinNav.styles.css.ts. Consider extracting dark mode colors to a shared constants file to ensure consistency and ease future maintenance.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/web/src/styles/bridge.css.ts` at line 4, The color '#67676d' is duplicated as darkBridgeHover and darkSurfaceHover; extract shared dark-mode color constants by creating a central export (e.g., DARK_COLORS or darkModeColors) and move the value into that constant, then import and replace uses of darkBridgeHover and darkSurfaceHover with the shared constant; update references in bridge.css.ts and Nav.styles.css.ts (and any other modules) to use the new exported symbol to ensure consistency and easier maintenance.apps/web/src/layouts/DefaultLayout/Nav.styles.css.ts (1)
194-207: Inconsistent hardcoded color value.Line 198 uses hardcoded
'#24262c'while other dark mode styles use the defined constants (darkSurface,darkSurfaceHover,darkSurfaceBorder). Consider using a constant for consistency:♻️ Suggested change
export const hiddenDaoButton = style({ background: color.background2, selectors: { 'html[data-theme-mode="dark"] &': { - background: '#24262c', + background: darkSurface, // or define a new constant if a different shade is intended }, '&:hover': { background: color.neutralHover, },🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/web/src/layouts/DefaultLayout/Nav.styles.css.ts` around lines 194 - 207, The dark-mode hover background for hiddenDaoButton currently uses a hardcoded '#24262c'; update hiddenDaoButton's selector 'html[data-theme-mode="dark"] &' to use the project constant (e.g., darkSurface) instead of the literal string so it matches other dark-mode styles (darkSurface, darkSurfaceHover, darkSurfaceBorder) and keeps theming consistent.apps/web/src/pages/_document.tsx (1)
69-70: Potential flash of light theme for dark mode users.The
<body>element starts with hardcoded${lightTheme}class. Even thoughthemeBodyClassScriptruns immediately to correct it, there may be a brief flash of unstyled/light-theme content before the script executes and removes the class.Consider removing
${lightTheme}from the initial body class and letting the script add the appropriate theme class:♻️ Suggested change
- <body className={`${root} ${baseTheme} ${lightTheme}`} style={{ margin: 0 }}> + <body className={`${root} ${baseTheme}`} style={{ margin: 0 }}>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/web/src/pages/_document.tsx` around lines 69 - 70, The body currently includes a hardcoded `${lightTheme}` class which can cause a brief flash of light theme; remove `${lightTheme}` from the initial <body> class (leave `${root}` and `${baseTheme}`) and let the client-side `themeBodyClassScript` add the correct theme class at load time; update any references around `root`, `baseTheme`, `lightTheme`, and `themeBodyClassScript` so server-rendered markup does not include `lightTheme` and the script is responsible for applying the appropriate theme class on the client.apps/web/src/layouts/HomeLayout/Footer.css.ts (1)
3-5: Consider moving new color literals to shared theme tokens.There are many new hard-coded hex values in this file. Converging these into shared theme tokens (or at least shared local constants beyond border/surface) will make dark-mode maintenance safer and keep visual consistency across surfaces.
♻️ Incremental cleanup (if token wiring is out of scope for this PR)
const darkFooterSurface = '#1f2024' const darkFooterSurfaceHover = '#34363d' const darkFooterBorder = '#4a4d57' +const darkFooterText = '#ffffff' // ... - color: '#ffffff', + color: darkFooterText, // ... - color: '#ffffff', + color: darkFooterText, // ... - color: '#ffffff', + color: darkFooterText,Also applies to: 10-11, 21-23, 29-29, 43-43, 56-58, 80-80, 118-118
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/web/src/layouts/HomeLayout/Footer.css.ts` around lines 3 - 5, Replace the hard-coded hex literals (e.g., darkFooterSurface, darkFooterSurfaceHover, darkFooterBorder and the other hex values noted at lines ~10-11, 21-23, etc.) with shared theme tokens: add corresponding color tokens in the central theme or a shared color constants module (e.g., theme.colors.footer.surfaceDark, footer.surfaceHoverDark, footer.borderDark) and import those tokens into Footer.css.ts; if wiring new theme tokens is out of scope, extract the literals into a shared local constants file (e.g., sharedFooterColors) and consume those constants from Footer.css.ts so all hex values are centralized and reusable across components.
🤖 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/modules/dashboard/SingleDaoSelector.css.ts`:
- Around line 35-47: The non-dark hover style is leaking dark colors into light
theme: remove the ':hover' backgroundColor: '#5b5b61' entry from the daoItem
style so the dark-only hover remains scoped under
globalStyle(`html[data-theme-mode='dark'] ${daoItem}:hover`) (or alternatively
add an explicit light-theme hover with the correct light color via a globalStyle
scoped to html[data-theme-mode='light'] ${daoItem}:hover); update the daoItem
definition to omit the dark hover and rely on the existing dark-scoped
globalStyle so dark colors live only in the dark-mode globalStyle.
In `@apps/web/src/styles/globals.css`:
- Line 71: The font-family declaration uses quoted generic and family names
which stylelint flags; update the font-family line in globals.css to remove
quotes around generic and system-family names and only quote the custom family
if necessary (e.g., change "font-family: 'ptRoot', 'Arial', 'Helvetica',
'sans-serif' !important;" to an unquoted list like ptRoot, Arial, Helvetica,
sans-serif !important). Locate the font-family declaration (the font-family: ...
line) and replace it with the corrected, unquoted generic-family names so
stylelint passes.
In `@apps/web/src/styles/profile.css.ts`:
- Around line 64-67: The dark-mode hover for profileDaoLink currently uses the
same color as its base dark state so there’s no visible feedback; update the CSS
rule for 'html[data-theme-mode="dark"] &:hover' in profileDaoLink to use a
distinct backgroundColor and borderColor (different from the base dark values
defined earlier) so hover is perceptible—locate the profileDaoLink style block
and change the hover colors to a slightly lighter or darker shade than the base
dark values to restore visual feedback.
In `@packages/ui/src/Artwork/Artwork.css.ts`:
- Around line 116-119: The rule that sets
globalStyle(`html[data-theme-mode='dark'] ${layerSelectStyle}:focus`, ...)
removes the keyboard focus indicator (outline: 'none'), breaking accessibility;
instead restore a visible, high-contrast focus style for dark mode by removing
the outline: 'none' and applying a replacement focus indicator (e.g., a 2px
solid outline or visible box-shadow using an accessible color) for the same
selector so keyboard users can see focus on elements styled by layerSelectStyle;
update the globalStyle invocation that targets html[data-theme-mode='dark']
${layerSelectStyle}:focus to apply the accessible focus styling rather than
removing it.
In `@packages/ui/src/Modal/Modal.css.ts`:
- Around line 30-34: The dark-mode selector 'html[data-theme-mode="dark"] &'
adds a 1px border only in dark theme which causes layout shift; fix by defining
a matching border in the base style (e.g., set border: 1px solid transparent or
equivalent) for the modal root so the dark selector only changes color, not
dimensions—update the base style where the modal container is defined and leave
the 'html[data-theme-mode="dark"] &' selector (and its background) to only
override the border color to `#4a4d57`.
---
Nitpick comments:
In `@apps/web/src/layouts/DefaultLayout/Nav.styles.css.ts`:
- Around line 194-207: The dark-mode hover background for hiddenDaoButton
currently uses a hardcoded '#24262c'; update hiddenDaoButton's selector
'html[data-theme-mode="dark"] &' to use the project constant (e.g., darkSurface)
instead of the literal string so it matches other dark-mode styles (darkSurface,
darkSurfaceHover, darkSurfaceBorder) and keeps theming consistent.
In `@apps/web/src/layouts/HomeLayout/Footer.css.ts`:
- Around line 3-5: Replace the hard-coded hex literals (e.g., darkFooterSurface,
darkFooterSurfaceHover, darkFooterBorder and the other hex values noted at lines
~10-11, 21-23, etc.) with shared theme tokens: add corresponding color tokens in
the central theme or a shared color constants module (e.g.,
theme.colors.footer.surfaceDark, footer.surfaceHoverDark, footer.borderDark) and
import those tokens into Footer.css.ts; if wiring new theme tokens is out of
scope, extract the literals into a shared local constants file (e.g.,
sharedFooterColors) and consume those constants from Footer.css.ts so all hex
values are centralized and reusable across components.
In `@apps/web/src/modules/dashboard/CreateActions.css.ts`:
- Around line 4-24: The local literal color constant darkButtonHover used in
createPostButton (and duplicated elsewhere) should be replaced with a
centralized theme token (e.g., add vars.color.hoverSurfaceDark or similar) and
all references updated to use that token; remove the local const
darkButtonHover, import the shared vars object where needed, and update
createPostButton (and any other styles using '#67676d') to reference
vars.color.hoverSurfaceDark (or your chosen token name) including keeping the
"!important" suffix in the template string so the behavior doesn't change.
In `@apps/web/src/modules/home/Marquee.css.ts`:
- Around line 19-36: Many of the dark-mode constants duplicate identical style
arrays (e.g., UnlockDark, TheDark, PossibilitiesDark, OfDark, CollectiveDark,
CreationDark) — replace each "*Dark" export with an alias to its light
counterpart (e.g., set UnlockDark to reuse Unlock) to remove duplication while
preserving the original identifiers; keep the original style-styled consts
(Unlock, The, Possibilities, Of, Collective, Creation, etc.) and assign their
corresponding Dark names to reference those same values so you retain
flexibility to change them later if needed.
In `@apps/web/src/pages/_document.tsx`:
- Around line 69-70: The body currently includes a hardcoded `${lightTheme}`
class which can cause a brief flash of light theme; remove `${lightTheme}` from
the initial <body> class (leave `${root}` and `${baseTheme}`) and let the
client-side `themeBodyClassScript` add the correct theme class at load time;
update any references around `root`, `baseTheme`, `lightTheme`, and
`themeBodyClassScript` so server-rendered markup does not include `lightTheme`
and the script is responsible for applying the appropriate theme class on the
client.
In `@apps/web/src/styles/bridge.css.ts`:
- Line 4: The color '#67676d' is duplicated as darkBridgeHover and
darkSurfaceHover; extract shared dark-mode color constants by creating a central
export (e.g., DARK_COLORS or darkModeColors) and move the value into that
constant, then import and replace uses of darkBridgeHover and darkSurfaceHover
with the shared constant; update references in bridge.css.ts and
Nav.styles.css.ts (and any other modules) to use the new exported symbol to
ensure consistency and easier maintenance.
In `@packages/dao-ui/src/components/DaoCard/DaoCard.css.ts`:
- Around line 37-39: The hover selector [`${card}:hover &`] in DaoCard.css.ts
redundantly sets borderColor to theme.colors.border which matches the base state
on the same element; remove the entire hover rule (the block that sets
borderColor) from the styles to avoid duplication, unless you require increased
CSS specificity—in that case keep a comment explaining the specificity need or
change the hover value to a distinct color; target the selector named card / the
rule that sets borderColor to theme.colors.border when editing.
In `@packages/feed-ui/src/CustomDaoSelector.css.ts`:
- Around line 182-185: The dark-mode selector override for sectionTitle is
redundant because both the base style and the override use vars.color.text1;
remove the 'html[data-theme-mode="dark"] &' block under the selectors for
sectionTitle (the stanza that sets color: vars.color.text1) so only the base
color remains, keeping the styleset concise and clear.
- Around line 33-35: Replace the hardcoded dark hex literals (e.g.,
backgroundColor: '#2a2b31' and borderColor: '#4a4d57' and the other occurrences
at the ranges you noted) with the design system tokens exposed in vars (for
example use vars.color.* tokens such as vars.color.surfaceDark,
vars.color.background, vars.color.borderMuted or the most appropriate existing
token names) so the styles in CustomDaoSelector (the style objects that set
backgroundColor/borderColor/color) follow the shared palette; update the same
replacements for the other occurrences around lines 70-74 and 141-142 to use
vars tokens consistently.
In `@packages/proposal-ui/src/components/ProposalVotes/VoterParticipation.css.ts`:
- Around line 18-21: The override uses hardcoded hex colors for the dark theme;
replace those literals in the globalStyle targeting html[data-theme-mode='dark']
${votePlacardReason} > * with your semantic theme tokens or CSS variables (e.g.,
the design-system/background and design-system/text-on-dark tokens or
var(--token-...)) so the styles follow theme updates; keep the same selector
(${votePlacardReason} > *) and preserve !important if needed for specificity,
but reference the project’s established token names instead of '#5b5b61' and
'#ffffff'.
🪄 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: 05837b89-4eae-4724-9a5c-a10a43308284
⛔ Files ignored due to path filters (6)
apps/web/public/home/collective-dark.svgis excluded by!**/*.svgapps/web/public/home/creation-dark.svgis excluded by!**/*.svgapps/web/public/home/of-dark.svgis excluded by!**/*.svgapps/web/public/home/possibilities-dark.svgis excluded by!**/*.svgapps/web/public/home/the-dark.svgis excluded by!**/*.svgapps/web/public/home/unlock-dark.svgis excluded by!**/*.svg
📒 Files selected for processing (36)
apps/subgraph/src/utils/parseDaoMetadata.tsapps/web/src/layouts/CreateDaoLayout/Nav.styles.css.tsapps/web/src/layouts/CreateDaoLayout/Nav.tsxapps/web/src/layouts/DefaultLayout/Nav.styles.css.tsapps/web/src/layouts/DefaultLayout/Nav.tsxapps/web/src/layouts/DefaultLayout/NavMenu/ChainMenu.tsxapps/web/src/layouts/DefaultLayout/NavMenu/NavMenu.tsxapps/web/src/layouts/DefaultLayout/NavMenu/ProfileMenu.tsxapps/web/src/layouts/DefaultLayout/NavMenu/ThemeToggle.tsxapps/web/src/layouts/HomeLayout/Footer.css.tsapps/web/src/layouts/HomeLayout/Footer.tsxapps/web/src/modules/dashboard/CreateActions.css.tsapps/web/src/modules/dashboard/CreateActions.tsxapps/web/src/modules/dashboard/SingleDaoSelector.css.tsapps/web/src/modules/dashboard/UserProfileCard.css.tsapps/web/src/modules/explore/ExploreToolbar.tsxapps/web/src/modules/explore/SearchInput.css.tsapps/web/src/modules/home/Marquee.css.tsapps/web/src/modules/home/Marquee.tsxapps/web/src/pages/_app.tsxapps/web/src/pages/_document.tsxapps/web/src/pages/about.tsxapps/web/src/pages/bridge.tsxapps/web/src/styles/bridge.css.tsapps/web/src/styles/globals.cssapps/web/src/styles/profile.css.tsapps/web/src/theme/AppThemeProvider.tsxapps/web/src/theme/theme.tspackages/dao-ui/src/components/DaoCard/DaoCard.css.tspackages/feed-ui/src/CustomDaoSelector.css.tspackages/feed-ui/src/FeedFiltersModal.css.tspackages/proposal-ui/src/components/ProposalVotes/VoterParticipation.css.tspackages/ui/src/Artwork/Artwork.css.tspackages/ui/src/Modal/Modal.css.tspackages/ui/src/Playground/LayerMenu.tsxpackages/zord/src/theme.css.ts
Comment on lines
+30
to
+34
| selectors: { | ||
| 'html[data-theme-mode="dark"] &': { | ||
| background: '#1f2024', | ||
| border: '1px solid #4a4d57', | ||
| }, |
Contributor
There was a problem hiding this comment.
Prevent theme-switch layout shift caused by dark-only border.
At Line 33, dark mode adds a border that doesn’t exist in the base style. This can subtly change modal box dimensions across themes.
Proposed fix
export const defaultAnimatedModalContent = style({
background: '#fff',
+ border: '1px solid transparent',
maxWidth: 'calc(100vw - 50px)',
height: 'auto',
maxHeight: '90vh',
zIndex: z.MODAL_CONTENT_LAYER,
selectors: {
'html[data-theme-mode="dark"] &': {
background: '#1f2024',
- border: '1px solid `#4a4d57`',
+ borderColor: '#4a4d57',
},
},🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/ui/src/Modal/Modal.css.ts` around lines 30 - 34, The dark-mode
selector 'html[data-theme-mode="dark"] &' adds a 1px border only in dark theme
which causes layout shift; fix by defining a matching border in the base style
(e.g., set border: 1px solid transparent or equivalent) for the modal root so
the dark selector only changes color, not dimensions—update the base style where
the modal container is defined and leave the 'html[data-theme-mode="dark"] &'
selector (and its background) to only override the border color to `#4a4d57`.
Contributor
There was a problem hiding this comment.
Actionable comments posted: 7
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
packages/create-dao-ui/src/components/CreateNavigation/NavSection.css.ts (1)
90-98:⚠️ Potential issue | 🟡 MinorMobile border treatment is inconsistent for the active last step.
flowCircleActiveapplies a mobile border override, butflowCircleActiveLastdoes not. On mobile this can make the last active circle render differently (Line 92 vs Line 85).🎯 Proposed fix
const flowCircleActiveLast = style({ backgroundColor: vars.color.background1, border: `2px solid ${vars.color.background1}`, + '@media': { + 'screen and (max-width: 768px)': { + border: `2px solid ${vars.color.background2}`, + }, + }, selectors: { '&:before': { content: 'none', }, }, })🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/create-dao-ui/src/components/CreateNavigation/NavSection.css.ts` around lines 90 - 98, The active-last circle style (flowCircleActiveLast) is missing the mobile border override that flowCircleActive uses, causing inconsistent rendering on small screens; update flowCircleActiveLast to include the same mobile-specific override as flowCircleActive (i.e., add the same selectors/@media rule or selector block that alters border on mobile) so the active last step renders identically to flowCircleActive on mobile.packages/ui/src/DropdownSelect/DropdownSelect.tsx (1)
391-402:⚠️ Potential issue | 🟠 MajorClosed inline options are still exposed to screen readers.
The inline listbox stays mounted with
role="listbox"and allrole="option"children even whenshowOptionsis false; only height/overflow hide it visually. That leaves a “closed” menu in the accessibility tree.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/ui/src/DropdownSelect/DropdownSelect.tsx` around lines 391 - 402, The inline listbox (the motion.div with id listboxId and role="listbox" that uses inlineVariants and renderOptions) remains mounted when positioning === 'inline' even if showOptions is false, exposing role="option" children to screen readers; change the JSX so the listbox and its option children are only rendered/mounted when showOptions is true (or alternatively remove the listbox role and option elements when closed, e.g., render nothing or render a non-interactive container with aria-hidden="true"), targeting the motion.div block that calls renderOptions(defaultDropdownSelectOptionStyle).
♻️ Duplicate comments (1)
packages/ui/src/Artwork/Artwork.css.ts (1)
116-119:⚠️ Potential issue | 🟠 MajorDon’t remove dark-mode focus indicator without replacement.
Line 118 removes focus visibility, which breaks keyboard navigability.
♿ Suggested fix
globalStyle(`html[data-theme-mode='dark'] ${layerSelectStyle}:focus`, { color: `${vars.color.text1} !important`, - outline: 'none', + outline: `2px solid ${vars.color.border}`, + outlineOffset: '2px', })🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/ui/src/Artwork/Artwork.css.ts` around lines 116 - 119, The dark-mode globalStyle rule currently removes the focus outline for elements matching layerSelectStyle, breaking keyboard accessibility; instead of setting outline: 'none' keep a visible focus indicator for keyboard users by replacing the rule to use :focus-visible (or include a focus-visible selector) and apply an accessible dark-theme focus style (e.g., a visible outline or box-shadow using vars.color.text1 or a high-contrast color) while keeping color: vars.color.text1; update the selector referenced in globalStyle and layerSelectStyle so keyboard focus shows a clear indicator rather than being removed.
🧹 Nitpick comments (7)
packages/dao-ui/src/components/ERC721RedeemMinterForm/ERC721RedeemMinterForm.tsx (1)
192-199: Optional: token-ize border radius for full design-token consistency.The background is correctly theme-aware now. Consider replacing the hardcoded
8pxradius with a radius token as well, so this block is fully token-driven like the rest of the dark-mode migration.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/dao-ui/src/components/ERC721RedeemMinterForm/ERC721RedeemMinterForm.tsx` around lines 192 - 199, Replace the hardcoded '8px' borderRadius in the Box at ERC721RedeemMinterForm with the design token used elsewhere (instead of '8px' use the project's radius token from vars, e.g. vars.radii.x2 or the appropriate vars.radius / vars.radii value), updating the style object inside the Box so the borderRadius is token-driven and matches the existing token naming convention alongside vars.color.warning.packages/ui/src/Uploading/Uploading.css.ts (1)
13-13: UsebackgroundColorin the mobile override for consistency.Line 13 uses
backgroundwhile the base rule usesbackgroundColor. Using the same property avoids unintentionally resetting other background sub-properties when styles are composed.Suggested diff
- background: vars.color.background1, + backgroundColor: vars.color.background1,🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/ui/src/Uploading/Uploading.css.ts` at line 13, In the mobile override inside Uploading.css.ts replace the CSS property "background: vars.color.background1" with "backgroundColor: vars.color.background1" so it matches the base rule's property and avoids resetting other background sub-properties; locate the mobile override block for the Uploading component and update that property (referencing the exact token vars.color.background1).packages/create-proposal-ui/src/components/TransactionForm/ReplaceArtwork/ReplaceArtworkForm.css.ts (1)
16-18: Add a keyboard-visible focus style alongside hover.This selector currently styles only
:hover. Adding:focus-visiblewill improve keyboard accessibility for the checkbox interaction.Proposed update
selectors: { '&:hover': { cursor: 'pointer', background: vars.color.text1 }, + '&:focus-visible': { + outline: `2px solid ${vars.color.text1}`, + outlineOffset: 2, + }, },🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/create-proposal-ui/src/components/TransactionForm/ReplaceArtwork/ReplaceArtworkForm.css.ts` around lines 16 - 18, The current style block for the checkbox uses only the '&:hover' selector (in ReplaceArtworkForm.css.ts) which lacks a keyboard-visible focus style; update the selectors object to also target '&:focus-visible' (or combine selectors like '&:hover, &:focus-visible') and apply the same properties (cursor: 'pointer', background: vars.color.text1) so keyboard users see the same focus ring/visual as hover when the checkbox receives focus.packages/feed-ui/src/Modals/VoteModalWrapper.tsx (1)
38-41: Consider centralizing this vote-label fragment to avoid drift.These updated
You voted <Text ...>blocks are now duplicated here and inpackages/proposal-ui/src/components/ProposalActions/VoteStatus/Vote.tsx. A tiny shared helper/component would reduce future divergence risk while keeping token usage consistent.Also applies to: 50-53
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/feed-ui/src/Modals/VoteModalWrapper.tsx` around lines 38 - 41, Duplicate "You voted <Text as='span' color='...'>...</Text>" fragments in VoteModalWrapper and ProposalActions/VoteStatus/Vote.tsx should be centralized into a single reusable component (e.g., VoteLabel or VoteStatusLabel). Create a small shared component that accepts voteType ('for'|'against'|'abstain') and token-aware styling props, export it from a common UI/shared package, then replace the inline fragments in VoteModalWrapper.tsx (the "You voted" block) and in Vote.tsx to use this new component so token usage and wording remain consistent.packages/proposal-ui/src/constants/transactionTypes.ts (1)
21-151: Consider a tiny helper to remove repeatedcolor-mixliterals.This block repeats the same string pattern many times; extracting a helper would make future tuning (e.g., 10% → 12%) one-line.
♻️ Optional refactor
+const mixBackdrop = (token: string) => `color-mix(in srgb, ${token} 10%, transparent)` export const TRANSACTION_TYPES: TransactionTypesPropsMap = { [TransactionType.SEND_TOKENS]: { @@ - iconBackdrop: `color-mix(in srgb, ${color.accent} 10%, transparent)`, + iconBackdrop: mixBackdrop(color.accent), @@ - iconBackdrop: `color-mix(in srgb, ${color.warning} 10%, transparent)`, + iconBackdrop: mixBackdrop(color.warning),🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/proposal-ui/src/constants/transactionTypes.ts` around lines 21 - 151, The file repeats the same color-mix template for iconBackdrop across many TransactionType entries; add a small helper (e.g., function iconBackdrop(colorVar: string, pct = '10%') that returns the template string `color-mix(in srgb, ${colorVar} ${pct}, transparent)` and replace literal uses of `color-mix(in srgb, ${...} 10%, transparent)` in the TransactionType map (examples: entries for SEND_NFT, MINT_GOVERNANCE_TOKENS, MILESTONE_PAYMENTS, RELEASE_ESCROW_MILESTONE, NOMINATE_DELEGATE, DROPOSAL, PAUSE_AUCTIONS, RESUME_AUCTIONS, REPLACE_ARTWORK, ADD_ARTWORK, MIGRATION, WALLET_CONNECT, PIN_TREASURY_ASSET, STREAM_TOKENS, AIRDROP_TOKENS, CREATOR_COIN, CONTENT_COIN) with calls to that helper so a single change to the percent or template updates all entries.packages/feed-ui/src/Feed.css.ts (1)
145-174: Consider extracting shared markdown style rules to avoid drift.These
code/pre/blockquoterules are now very similar across multiple packages; a shared helper would reduce maintenance overhead and keep token behavior synchronized.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/feed-ui/src/Feed.css.ts` around lines 145 - 174, The markdown styling for inline code, pre, and blockquote in Feed.css.ts (the globalStyle calls targeting `${feedItemTextContent} code`, `${feedItemTextContent} pre`, `${feedItemTextContent} pre code`, and `${feedItemTextContent} blockquote`) duplicates rules found in other packages; extract these shared declarations into a single helper (e.g., a function or exported object like createMarkdownStyles or sharedMarkdownStyles) that accepts the container selector (feedItemTextContent) and vars, replace the inline globalStyle calls with invocations of that helper, and update other packages to import and use the same helper so token/behavior stays synchronized across packages.packages/create-dao-ui/src/components/CreateNavigation/NavSection.css.ts (1)
29-98: Consider extracting shared circle token constants to reduce drift.There is repeated border/background token composition across circle styles; a small shared constant (or shared style) would make future theme updates safer.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/create-dao-ui/src/components/CreateNavigation/NavSection.css.ts` around lines 29 - 98, Extract the repeated background/border token compositions into shared constants or shared style objects and reuse them in flowFulfilledCircle, flowFulfilledCircleLast, flowCircle, flowCircleLast, flowCircleActive, and flowCircleActiveLast so theme updates are centralized; for example create a baseCircleTokens (using vars.color.background1 and vars.color.background2) plus modifiers for "active" and "mobile" and a small lastItem selector fragment, then spread/merge those shared tokens into each style definition instead of repeating the same backgroundColor/border strings and the '&:before' and '@media' blocks.
🤖 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/layouts/DefaultLayout/Nav.styles.css.ts`:
- Around line 322-331: The dark-mode primary CTA text is using the dark token
color.background1 inside the navPrimaryActionButton selector, making the “Create
a DAO” label hard to read; update the 'html[data-theme-mode="dark"] &' rule in
navPrimaryActionButton to use a light/foreground text token instead of
color.background1 (e.g., color.foreground1 or color.background — whichever token
your design system uses for readable light text on dark surfaces) and ensure the
hover rule still maintains sufficient contrast with darkSurfaceHover.
In `@apps/web/src/modules/explore/ExploreSortMenu.tsx`:
- Around line 33-39: The handler handleSortChange is updating query.orderBy but
the menu's controlled value is derived from query.sortKey, so the selected sort
never stays in sync with the URL; update the push payload to set the same key
the component reads (e.g., set query.sortKey to selection or set both
query.sortKey and query.orderBy) and ensure selectionToOrderBy(selection) still
computes orderBy, so modify the push call inside handleSortChange (and the
equivalent block at lines 46-56) to include query.sortKey: selection (or both
keys) so the UI and URL remain consistent.
In `@packages/proposal-ui/src/components/PropDates/PropDateForm.tsx`:
- Around line 260-280: The visible "Milestone (optional)" text isn't associated
with the DropdownSelect, so screen readers don't hear the label; update the
DropdownSelect usage in PropDateForm (the component rendering the label and
DropdownSelect) to pass an accessible label via the DropdownSelect prop (e.g.,
inputLabel or ariaLabel depending on DropdownSelect's API) so the interactive
trigger is linked to "Milestone (optional)"; keep the existing value/onChange
behavior (formik.setFieldValue('milestoneId', Number(nextValue))) and ensure the
prop text matches the rendered label so assistive tech announces it.
In `@packages/ui/src/DropdownSelect/DropdownSelect.tsx`:
- Around line 315-349: The trigger button currently only short-circuits handlers
so a disabled DropdownSelect remains focusable and announced as interactive;
update the button rendered by Box to pass the native disabled attribute
(disabled={disabled}) and remove or skip attaching interactive handlers
(onClick/onKeyDown/aria-expanded/aria-activedescendant) when disabled so it is
removed from the tab order and not announced as interactive; adjust usage around
triggerRef, handleTriggerKeyDown, openOptions, closeOptions and the aria props
(listboxId, inputLabelId, showOptions, activeIndex) so they are only applied
when !disabled.
In `@packages/ui/src/Fields/Select.tsx`:
- Around line 18-22: handleChange currently returns when no matching option is
found, so when DropdownSelect emits an empty string for the placeholder the
previous Formik value is left intact; update handleChange (the function using
optionsArray, selectedName, formik.setFieldValue and id) to detect selectedName
=== '' (or no method found) and explicitly clear the field via
formik.setFieldValue(id, '') or set a cleared structure, otherwise set the found
method as before. Ensure the placeholder branch runs before the optionsArray
lookup so placeholder selection reliably clears the Formik value.
- Around line 27-40: The label rendered in Select.tsx is no longer tied to a
form control because DropdownSelect isn't receiving the field label or the id,
so screen readers only see the selected value; update the DropdownSelect usage
to accept the input label and id by passing inputLabel={inputLabel} and id={id}
(or whatever prop names DropdownSelect expects for accessible labelling), and
ensure DropdownSelect forwards that id to the underlying input/button and
exposes aria-labelledby/aria-label appropriately so the <label htmlFor={id}>
actually references the control.
In `@packages/ui/src/Fields/styles.css.ts`:
- Around line 67-71: The focus rule currently sets borderColor to
vars.color.border which overrides error styling; update the '&:focus' rules (the
selectors shown at the diff locations and the similar blocks at lines
referenced) to preserve the error/negative border when the component is in its
error variant—i.e., detect the error state (the error modifier/class/variant
used in this file) and keep borderColor set to the negative/error token (not
vars.color.border) while focused so validation borders remain visible; apply the
same change for the other '&:focus' blocks referenced (around the 110-114 and
235-239 areas).
---
Outside diff comments:
In `@packages/create-dao-ui/src/components/CreateNavigation/NavSection.css.ts`:
- Around line 90-98: The active-last circle style (flowCircleActiveLast) is
missing the mobile border override that flowCircleActive uses, causing
inconsistent rendering on small screens; update flowCircleActiveLast to include
the same mobile-specific override as flowCircleActive (i.e., add the same
selectors/@media rule or selector block that alters border on mobile) so the
active last step renders identically to flowCircleActive on mobile.
In `@packages/ui/src/DropdownSelect/DropdownSelect.tsx`:
- Around line 391-402: The inline listbox (the motion.div with id listboxId and
role="listbox" that uses inlineVariants and renderOptions) remains mounted when
positioning === 'inline' even if showOptions is false, exposing role="option"
children to screen readers; change the JSX so the listbox and its option
children are only rendered/mounted when showOptions is true (or alternatively
remove the listbox role and option elements when closed, e.g., render nothing or
render a non-interactive container with aria-hidden="true"), targeting the
motion.div block that calls renderOptions(defaultDropdownSelectOptionStyle).
---
Duplicate comments:
In `@packages/ui/src/Artwork/Artwork.css.ts`:
- Around line 116-119: The dark-mode globalStyle rule currently removes the
focus outline for elements matching layerSelectStyle, breaking keyboard
accessibility; instead of setting outline: 'none' keep a visible focus indicator
for keyboard users by replacing the rule to use :focus-visible (or include a
focus-visible selector) and apply an accessible dark-theme focus style (e.g., a
visible outline or box-shadow using vars.color.text1 or a high-contrast color)
while keeping color: vars.color.text1; update the selector referenced in
globalStyle and layerSelectStyle so keyboard focus shows a clear indicator
rather than being removed.
---
Nitpick comments:
In `@packages/create-dao-ui/src/components/CreateNavigation/NavSection.css.ts`:
- Around line 29-98: Extract the repeated background/border token compositions
into shared constants or shared style objects and reuse them in
flowFulfilledCircle, flowFulfilledCircleLast, flowCircle, flowCircleLast,
flowCircleActive, and flowCircleActiveLast so theme updates are centralized; for
example create a baseCircleTokens (using vars.color.background1 and
vars.color.background2) plus modifiers for "active" and "mobile" and a small
lastItem selector fragment, then spread/merge those shared tokens into each
style definition instead of repeating the same backgroundColor/border strings
and the '&:before' and '@media' blocks.
In
`@packages/create-proposal-ui/src/components/TransactionForm/ReplaceArtwork/ReplaceArtworkForm.css.ts`:
- Around line 16-18: The current style block for the checkbox uses only the
'&:hover' selector (in ReplaceArtworkForm.css.ts) which lacks a keyboard-visible
focus style; update the selectors object to also target '&:focus-visible' (or
combine selectors like '&:hover, &:focus-visible') and apply the same properties
(cursor: 'pointer', background: vars.color.text1) so keyboard users see the same
focus ring/visual as hover when the checkbox receives focus.
In
`@packages/dao-ui/src/components/ERC721RedeemMinterForm/ERC721RedeemMinterForm.tsx`:
- Around line 192-199: Replace the hardcoded '8px' borderRadius in the Box at
ERC721RedeemMinterForm with the design token used elsewhere (instead of '8px'
use the project's radius token from vars, e.g. vars.radii.x2 or the appropriate
vars.radius / vars.radii value), updating the style object inside the Box so the
borderRadius is token-driven and matches the existing token naming convention
alongside vars.color.warning.
In `@packages/feed-ui/src/Feed.css.ts`:
- Around line 145-174: The markdown styling for inline code, pre, and blockquote
in Feed.css.ts (the globalStyle calls targeting `${feedItemTextContent} code`,
`${feedItemTextContent} pre`, `${feedItemTextContent} pre code`, and
`${feedItemTextContent} blockquote`) duplicates rules found in other packages;
extract these shared declarations into a single helper (e.g., a function or
exported object like createMarkdownStyles or sharedMarkdownStyles) that accepts
the container selector (feedItemTextContent) and vars, replace the inline
globalStyle calls with invocations of that helper, and update other packages to
import and use the same helper so token/behavior stays synchronized across
packages.
In `@packages/feed-ui/src/Modals/VoteModalWrapper.tsx`:
- Around line 38-41: Duplicate "You voted <Text as='span'
color='...'>...</Text>" fragments in VoteModalWrapper and
ProposalActions/VoteStatus/Vote.tsx should be centralized into a single reusable
component (e.g., VoteLabel or VoteStatusLabel). Create a small shared component
that accepts voteType ('for'|'against'|'abstain') and token-aware styling props,
export it from a common UI/shared package, then replace the inline fragments in
VoteModalWrapper.tsx (the "You voted" block) and in Vote.tsx to use this new
component so token usage and wording remain consistent.
In `@packages/proposal-ui/src/constants/transactionTypes.ts`:
- Around line 21-151: The file repeats the same color-mix template for
iconBackdrop across many TransactionType entries; add a small helper (e.g.,
function iconBackdrop(colorVar: string, pct = '10%') that returns the template
string `color-mix(in srgb, ${colorVar} ${pct}, transparent)` and replace literal
uses of `color-mix(in srgb, ${...} 10%, transparent)` in the TransactionType map
(examples: entries for SEND_NFT, MINT_GOVERNANCE_TOKENS, MILESTONE_PAYMENTS,
RELEASE_ESCROW_MILESTONE, NOMINATE_DELEGATE, DROPOSAL, PAUSE_AUCTIONS,
RESUME_AUCTIONS, REPLACE_ARTWORK, ADD_ARTWORK, MIGRATION, WALLET_CONNECT,
PIN_TREASURY_ASSET, STREAM_TOKENS, AIRDROP_TOKENS, CREATOR_COIN, CONTENT_COIN)
with calls to that helper so a single change to the percent or template updates
all entries.
In `@packages/ui/src/Uploading/Uploading.css.ts`:
- Line 13: In the mobile override inside Uploading.css.ts replace the CSS
property "background: vars.color.background1" with "backgroundColor:
vars.color.background1" so it matches the base rule's property and avoids
resetting other background sub-properties; locate the mobile override block for
the Uploading component and update that property (referencing the exact token
vars.color.background1).
🪄 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: a8830e02-ea1c-4524-9635-c53491223820
⛔ Files ignored due to path filters (2)
apps/web/public/filled.svgis excluded by!**/*.svgapps/web/public/outlined.svgis excluded by!**/*.svg
📒 Files selected for processing (80)
apps/web/src/layouts/DefaultLayout/Nav.styles.css.tsapps/web/src/layouts/DefaultLayout/NavMenu/ProfileMenu.tsxapps/web/src/layouts/HomeLayout/Footer.css.tsapps/web/src/modules/dashboard/CreateActions.css.tsapps/web/src/modules/dashboard/DaoFeed/DaoFeed.css.tsapps/web/src/modules/dashboard/SingleDaoSelector.css.tsapps/web/src/modules/dashboard/UserProfileCard.css.tsapps/web/src/modules/explore/ExploreSortMenu.tsxapps/web/src/modules/explore/ExploreToolbar.tsxapps/web/src/pages/_app.tsxapps/web/src/styles/bridge.css.tsapps/web/src/styles/profile.css.tspackages/auction-ui/src/components/AllBids/BidCard.tsxpackages/auction-ui/src/components/Auction.css.tspackages/auction-ui/src/components/AuctionChart/AuctionChart.css.tspackages/create-dao-ui/src/components/Artwork/ArtworkUpload.css.tspackages/create-dao-ui/src/components/ConfirmReset/ConfirmReset.css.tspackages/create-dao-ui/src/components/CreateNavigation/NavSection.css.tspackages/create-dao-ui/src/components/ReviewAndDeploy/ReviewAndDeploy.css.tspackages/create-dao-ui/src/components/ReviewAndDeploy/ReviewItem.css.tspackages/create-dao-ui/src/components/ReviewAndDeploy/ReviewSection.css.tspackages/create-proposal-ui/src/components/ArtworkUpload/ArtworkUpload.css.tspackages/create-proposal-ui/src/components/Queue/Queue.css.tspackages/create-proposal-ui/src/components/ReviewProposalForm/ReviewProposalForm.tsxpackages/create-proposal-ui/src/components/TransactionForm/AddArtwork/AddArtworkForm.css.tspackages/create-proposal-ui/src/components/TransactionForm/ContentCoin/ContentCoin.tsxpackages/create-proposal-ui/src/components/TransactionForm/CreatorCoin/CreatorCoin.tsxpackages/create-proposal-ui/src/components/TransactionForm/CustomTransaction/CustomTransaction.css.tspackages/create-proposal-ui/src/components/TransactionForm/CustomTransaction/forms/CustomTransactionForm.css.tspackages/create-proposal-ui/src/components/TransactionForm/ReplaceArtwork/ReplaceArtworkForm.css.tspackages/dao-ui/src/components/About/mdRender.css.tspackages/dao-ui/src/components/Activity/Activity.css.tspackages/dao-ui/src/components/DaoCard/DaoCard.css.tspackages/dao-ui/src/components/DaoCard/DaoCard.tsxpackages/dao-ui/src/components/ERC721RedeemMinterForm/ERC721RedeemMinterForm.tsxpackages/dao-ui/src/components/ERC721RedeemMinterForm/MintingForm.tsxpackages/dao-ui/src/components/Feed/Feed.css.tspackages/dao-ui/src/components/PreAuction/PreAuction.css.tspackages/dao-ui/src/components/PreAuction/PreAuction.tsxpackages/dao-ui/src/components/SectionHandler/SectionHandler.css.tspackages/feed-ui/src/CustomDaoSelector.css.tspackages/feed-ui/src/Feed.css.tspackages/feed-ui/src/FeedFiltersModal.css.tspackages/feed-ui/src/Modals/VoteModalWrapper.tsxpackages/proposal-ui/src/components/GovernorContractButton/GovernorContractButton.css.tspackages/proposal-ui/src/components/PropDates/PropDateForm.tsxpackages/proposal-ui/src/components/ProposalActions/ProposalActions.css.tspackages/proposal-ui/src/components/ProposalActions/SuccessfulProposalActions.tsxpackages/proposal-ui/src/components/ProposalActions/VetoAction.tsxpackages/proposal-ui/src/components/ProposalActions/VoteStatus/Pending.tsxpackages/proposal-ui/src/components/ProposalActions/VoteStatus/Vote.tsxpackages/proposal-ui/src/components/ProposalActions/VoteStatus/VoteModal.css.tspackages/proposal-ui/src/components/ProposalActions/VoteStatus/VoteModal.tsxpackages/proposal-ui/src/components/ProposalActions/VoteStatus/VoteStatus.tsxpackages/proposal-ui/src/components/ProposalDescription/ProposalDescription.css.tspackages/proposal-ui/src/components/ProposalStatus/ProposalStatus.helper.tspackages/proposal-ui/src/components/ProposalVotes/VotePlacard.tsxpackages/proposal-ui/src/components/ProposalVotes/VoterParticipation.css.tspackages/proposal-ui/src/constants/transactionTypes.tspackages/ui/src/Artwork/Artwork.css.tspackages/ui/src/CoinForm/ClankerCoinFormFields.tsxpackages/ui/src/CoinForm/CoinFormFields.tsxpackages/ui/src/ContractLink/ContractLink.tsxpackages/ui/src/DropMintWidget/DropMintWidget.css.tspackages/ui/src/DropdownSelect/DropdownSelect.tsxpackages/ui/src/Fields/Select.tsxpackages/ui/src/Fields/styles.css.tspackages/ui/src/MarkdownEditor/MarkdownEditor.tsxpackages/ui/src/Modal/Modal.css.tspackages/ui/src/Panel/Panel.css.tspackages/ui/src/Playground/LayerMenu.tsxpackages/ui/src/SingleImageUpload/SingleImageUpload.css.tspackages/ui/src/SingleMediaUpload/SingleMediaUpload.css.tspackages/ui/src/Toggle/Toggle.css.tspackages/ui/src/UpgradeCard/UpgradeCard.css.tspackages/ui/src/Uploading/Uploading.css.tspackages/ui/src/WalletProfilePreview/WalletProfilePreview.tsxpackages/zord/src/elements/Select.tsxpackages/zord/src/elements/index.tspackages/zord/src/theme.css.ts
💤 Files with no reviewable changes (2)
- packages/zord/src/elements/index.ts
- packages/zord/src/elements/Select.tsx
✅ Files skipped from review due to trivial changes (31)
- packages/proposal-ui/src/components/ProposalActions/VoteStatus/VoteStatus.tsx
- packages/create-dao-ui/src/components/ReviewAndDeploy/ReviewItem.css.ts
- packages/auction-ui/src/components/AuctionChart/AuctionChart.css.ts
- packages/ui/src/UpgradeCard/UpgradeCard.css.ts
- apps/web/src/modules/dashboard/DaoFeed/DaoFeed.css.ts
- packages/create-proposal-ui/src/components/ArtworkUpload/ArtworkUpload.css.ts
- packages/proposal-ui/src/components/ProposalActions/VoteStatus/Pending.tsx
- packages/ui/src/MarkdownEditor/MarkdownEditor.tsx
- packages/dao-ui/src/components/PreAuction/PreAuction.tsx
- packages/proposal-ui/src/components/GovernorContractButton/GovernorContractButton.css.ts
- packages/auction-ui/src/components/AllBids/BidCard.tsx
- packages/create-dao-ui/src/components/Artwork/ArtworkUpload.css.ts
- packages/ui/src/SingleMediaUpload/SingleMediaUpload.css.ts
- packages/create-proposal-ui/src/components/TransactionForm/CustomTransaction/CustomTransaction.css.ts
- packages/proposal-ui/src/components/ProposalActions/VetoAction.tsx
- packages/ui/src/WalletProfilePreview/WalletProfilePreview.tsx
- packages/ui/src/CoinForm/ClankerCoinFormFields.tsx
- packages/create-proposal-ui/src/components/Queue/Queue.css.ts
- packages/proposal-ui/src/components/ProposalActions/VoteStatus/VoteModal.tsx
- packages/dao-ui/src/components/Feed/Feed.css.ts
- apps/web/src/modules/explore/ExploreToolbar.tsx
- packages/create-proposal-ui/src/components/ReviewProposalForm/ReviewProposalForm.tsx
- packages/proposal-ui/src/components/ProposalVotes/VotePlacard.tsx
- packages/create-proposal-ui/src/components/TransactionForm/AddArtwork/AddArtworkForm.css.ts
- packages/proposal-ui/src/components/ProposalActions/VoteStatus/VoteModal.css.ts
- packages/ui/src/SingleImageUpload/SingleImageUpload.css.ts
- packages/ui/src/DropMintWidget/DropMintWidget.css.ts
- packages/dao-ui/src/components/SectionHandler/SectionHandler.css.ts
- packages/feed-ui/src/CustomDaoSelector.css.ts
- apps/web/src/modules/dashboard/CreateActions.css.ts
- packages/dao-ui/src/components/PreAuction/PreAuction.css.ts
🚧 Files skipped from review as they are similar to previous changes (12)
- packages/ui/src/Modal/Modal.css.ts
- apps/web/src/layouts/DefaultLayout/NavMenu/ProfileMenu.tsx
- apps/web/src/pages/_app.tsx
- apps/web/src/modules/dashboard/SingleDaoSelector.css.ts
- packages/proposal-ui/src/components/ProposalVotes/VoterParticipation.css.ts
- packages/feed-ui/src/FeedFiltersModal.css.ts
- apps/web/src/styles/bridge.css.ts
- apps/web/src/modules/dashboard/UserProfileCard.css.ts
- apps/web/src/styles/profile.css.ts
- packages/ui/src/Playground/LayerMenu.tsx
- packages/dao-ui/src/components/DaoCard/DaoCard.css.ts
- apps/web/src/layouts/HomeLayout/Footer.css.ts
This keeps select state/labels in sync, removes disabled dropdown interactivity, and addresses focus contrast and token drift across navigation, forms, and shared vote/transaction UI.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
There was a problem hiding this comment.
♻️ Duplicate comments (3)
packages/ui/src/DropdownSelect/DropdownSelect.tsx (1)
282-307:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winTreat
isLoadingas non-interactive in trigger behavior.When
isLoadingis true, the default trigger still allows click/keyboard interactions (onlydisabledis checked). That can cause repeated or conflicting selection changes while a pending state is shown.Suggested fix
export function DropdownSelect<T extends React.Key>({ id, value, onChange, options, inputLabel, ariaLabel, disabled = false, isLoading = false, @@ }: React.PropsWithChildren<DropdownSelectProps<T>>) { + const isDisabled = disabled || isLoading const [showOptions, setShowOptions] = useState(false) @@ - if (!options.length || disabled) return + if (!options.length || isDisabled) return @@ - disabled={disabled} + disabled={isDisabled} @@ - aria-haspopup={disabled ? undefined : 'listbox'} - aria-expanded={disabled ? undefined : showOptions} - aria-controls={disabled ? undefined : listboxId} + aria-haspopup={isDisabled ? undefined : 'listbox'} + aria-expanded={isDisabled ? undefined : showOptions} + aria-controls={isDisabled ? undefined : listboxId} @@ - !disabled && showOptions && activeIndex >= 0 + !isDisabled && showOptions && activeIndex >= 0 ? `${listboxId}-option-${activeIndex}` : undefined } - onKeyDown={disabled ? undefined : handleTriggerKeyDown} + onKeyDown={isDisabled ? undefined : handleTriggerKeyDown} onClick={ - disabled + isDisabled ? undefined : () => { @@ - cursor={disabled ? 'auto' : 'pointer'} + cursor={isDisabled ? 'auto' : 'pointer'} @@ - disabled={disabled} - aria-haspopup={disabled ? undefined : 'listbox'} - aria-expanded={disabled ? undefined : showOptions} - aria-controls={disabled ? undefined : listboxId} + disabled={isDisabled} + aria-haspopup={isDisabled ? undefined : 'listbox'} + aria-expanded={isDisabled ? undefined : showOptions} + aria-controls={isDisabled ? undefined : listboxId} @@ - !disabled && showOptions && activeIndex >= 0 + !isDisabled && showOptions && activeIndex >= 0 ? `${listboxId}-option-${activeIndex}` : undefined } - onKeyDown={disabled ? undefined : handleTriggerKeyDown} + onKeyDown={isDisabled ? undefined : handleTriggerKeyDown} onClick={ - disabled + isDisabled ? undefined : () => {Also applies to: 330-354, 387-405
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/ui/src/DropdownSelect/DropdownSelect.tsx` around lines 282 - 307, The trigger currently only checks disabled but must also treat isLoading as non-interactive: update the trigger prop logic (the JSX block using aria-haspopup/aria-expanded/aria-controls/aria-activedescendant/onKeyDown/onClick) to return undefined or no-op when isLoading is true (in addition to disabled), preventing handleTriggerKeyDown, openOptions, and closeOptions from running while isLoading; ensure aria attributes like aria-haspopup, aria-expanded, aria-controls, and aria-activedescendant also evaluate to undefined when isLoading is true so the component is inaccessible during loading (apply same change to the other trigger instances around the references to listboxId, activeIndex, inputLabelId, ariaLabel/inputLabel).apps/web/src/layouts/DefaultLayout/Nav.styles.css.ts (1)
127-135:⚠️ Potential issue | 🟠 Major | ⚡ Quick winFix the dark-mode label contrast on the disconnect button.
color.background1reads like a surface token, so on the red dark-mode background the label will be too dim. Switch this to a foreground token to keep the button legible.Suggested fix
'html[data-theme-mode="dark"] &': { background: color.negative, - color: color.background1, + color: color.text1, },🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/web/src/layouts/DefaultLayout/Nav.styles.css.ts` around lines 127 - 135, The dark-mode styles for the disconnect button use a surface token (color.background1 / vars.color.background1) which reduces label contrast; update the two selectors 'html[data-theme-mode="dark"] &' and 'html[data-theme-mode="dark"] &:hover' to use the foreground token instead—replace color.background1 with color.foreground1 and `${vars.color.background1}` with `${vars.color.foreground1}` so the label remains legible in dark mode.apps/web/src/styles/globals.css (1)
83-107:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winDrop the quoted font stack.
The button token changes look fine, but Line 87 still fails stylelint because the font-family names are quoted. Switching to an unquoted stack should clear the lint gate.
Proposed fix
- font-family: 'ptRoot', 'Arial', 'Helvetica', 'sans-serif' !important; + font-family: ptRoot, Arial, Helvetica, sans-serif !important;🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/web/src/styles/globals.css` around lines 83 - 107, Replace the quoted font stack in the CSS rule for the selectors "#connect-button-wrapper * div, `#connect-button-wrapper` * button": update the font-family declaration (currently using 'ptRoot', 'Arial', 'Helvetica', 'sans-serif' !important) to an unquoted stack (remove the single quotes around each family name as appropriate) so the font-family property adheres to stylelint rules while keeping the same fallback order and preserving the !important if still required.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Duplicate comments:
In `@apps/web/src/layouts/DefaultLayout/Nav.styles.css.ts`:
- Around line 127-135: The dark-mode styles for the disconnect button use a
surface token (color.background1 / vars.color.background1) which reduces label
contrast; update the two selectors 'html[data-theme-mode="dark"] &' and
'html[data-theme-mode="dark"] &:hover' to use the foreground token
instead—replace color.background1 with color.foreground1 and
`${vars.color.background1}` with `${vars.color.foreground1}` so the label
remains legible in dark mode.
In `@apps/web/src/styles/globals.css`:
- Around line 83-107: Replace the quoted font stack in the CSS rule for the
selectors "#connect-button-wrapper * div, `#connect-button-wrapper` * button":
update the font-family declaration (currently using 'ptRoot', 'Arial',
'Helvetica', 'sans-serif' !important) to an unquoted stack (remove the single
quotes around each family name as appropriate) so the font-family property
adheres to stylelint rules while keeping the same fallback order and preserving
the !important if still required.
In `@packages/ui/src/DropdownSelect/DropdownSelect.tsx`:
- Around line 282-307: The trigger currently only checks disabled but must also
treat isLoading as non-interactive: update the trigger prop logic (the JSX block
using
aria-haspopup/aria-expanded/aria-controls/aria-activedescendant/onKeyDown/onClick)
to return undefined or no-op when isLoading is true (in addition to disabled),
preventing handleTriggerKeyDown, openOptions, and closeOptions from running
while isLoading; ensure aria attributes like aria-haspopup, aria-expanded,
aria-controls, and aria-activedescendant also evaluate to undefined when
isLoading is true so the component is inaccessible during loading (apply same
change to the other trigger instances around the references to listboxId,
activeIndex, inputLabelId, ariaLabel/inputLabel).
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: c1ae52a0-0a4a-4847-af4d-7bbd8d5468cc
📒 Files selected for processing (26)
apps/web/src/layouts/DefaultLayout/Nav.styles.css.tsapps/web/src/layouts/DefaultLayout/NavMenu/ChainMenu.tsxapps/web/src/layouts/DefaultLayout/NavMenu/ProfileMenu.tsxapps/web/src/modules/explore/ExploreSortMenu.tsxapps/web/src/modules/explore/SearchInput.css.tsapps/web/src/pages/_app.tsxapps/web/src/styles/flatpickr-theme.cssapps/web/src/styles/globals.csspackages/create-dao-ui/src/components/CreateNavigation/NavSection.css.tspackages/create-proposal-ui/src/components/TransactionForm/ReplaceArtwork/ReplaceArtworkForm.css.tspackages/dao-ui/src/components/ERC721RedeemMinterForm/ERC721RedeemMinterForm.tsxpackages/feed-ui/src/Modals/VoteModalWrapper.tsxpackages/feed-ui/src/SearchInput.css.tspackages/proposal-ui/src/components/PropDates/PropDateForm.tsxpackages/proposal-ui/src/components/ProposalActions/VoteStatus/Vote.tsxpackages/proposal-ui/src/components/VoteLabel/VoteLabel.tsxpackages/proposal-ui/src/components/VoteLabel/index.tspackages/proposal-ui/src/components/index.tspackages/proposal-ui/src/constants/transactionTypes.tspackages/ui/src/Artwork/Artwork.css.tspackages/ui/src/DropdownSelect/DropdownSelect.css.tspackages/ui/src/DropdownSelect/DropdownSelect.tsxpackages/ui/src/Fields/Select.tsxpackages/ui/src/Fields/styles.css.tspackages/ui/src/Uploading/Uploading.css.tspackages/zord/src/elements/Button.css.ts
✅ Files skipped from review due to trivial changes (6)
- packages/proposal-ui/src/components/index.ts
- packages/proposal-ui/src/components/VoteLabel/index.ts
- apps/web/src/styles/flatpickr-theme.css
- packages/ui/src/DropdownSelect/DropdownSelect.css.ts
- packages/create-proposal-ui/src/components/TransactionForm/ReplaceArtwork/ReplaceArtworkForm.css.ts
- packages/ui/src/Uploading/Uploading.css.ts
🚧 Files skipped from review as they are similar to previous changes (7)
- packages/proposal-ui/src/components/ProposalActions/VoteStatus/Vote.tsx
- packages/dao-ui/src/components/ERC721RedeemMinterForm/ERC721RedeemMinterForm.tsx
- packages/feed-ui/src/Modals/VoteModalWrapper.tsx
- apps/web/src/pages/_app.tsx
- apps/web/src/layouts/DefaultLayout/NavMenu/ChainMenu.tsx
- packages/proposal-ui/src/components/PropDates/PropDateForm.tsx
- packages/proposal-ui/src/constants/transactionTypes.ts
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
apps/web/src/layouts/DefaultLayout/NavMenu/ProfileMenu.tsx (1)
252-298: ⚡ Quick winReduce duplication between
renderConnectedUserandrenderConnectedUserStatic.These two render blocks are nearly identical and can drift. Consider one shared renderer with a small mode flag for spacing/layout differences.
♻️ Refactor sketch
-const renderConnectedUser = () => ( ... ) -const renderConnectedUserStatic = () => ( ... ) +const renderConnectedUser = ({ mobile = false }: { mobile?: boolean } = {}) => ( + <> + <Flex + direction="column" + align="stretch" + gap="x2" + style={mobile ? { paddingBottom: '8px' } : undefined} + > + {/* shared content */} + </Flex> + <Box color="border" borderStyle="solid" borderWidth="thin" /> + </> +)🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/web/src/layouts/DefaultLayout/NavMenu/ProfileMenu.tsx` around lines 252 - 298, Extract the duplicated JSX in renderConnectedUser and renderConnectedUserStatic into a single shared renderer (e.g., renderConnectedUserCommon or a small Presentational component ConnectedUserRow) that accepts a mode flag/prop (e.g., isStatic or variant) to toggle the minor layout differences like paddingBottom, wrapping Link behavior, and any id differences (e.g., 'close-modal'). Move repeated pieces (Avatar, displayName, userBalance, CopyButton, Disconnect Button) into that shared renderer and preserve existing props/aria attributes (aria-label, target/rel on Link) while updating both original callers to use the new shared function/component.
🤖 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/layouts/DefaultLayout/Nav.styles.css.ts`:
- Around line 319-324: The hover state in the selectors block leaves the text
color as color.negative while setting background to vars.color.negative, causing
poor contrast; update the '&:hover' rule (in the same object that currently has
background: vars.color.negativeDisabled and color: color.negative) to explicitly
set a high-contrast text color for the hover state (for example replace or add
color: color.background or another existing high-contrast token) so hovered text
remains readable against vars.color.negative.
In `@packages/ui/src/Tooltip/Tooltip.tsx`:
- Around line 10-22: The tooltip trigger Box is keyboard-focusable but
icon-only, so add an explicit accessible name by adding an aria-label or
aria-labelledby to the Box (the element using onMouseOver/onFocus/setShowTooltip
and ref triggerRef) and mark the Icon as decorative (e.g., aria-hidden or
decorative prop) so screen readers announce a meaningful label rather than the
icon; update the Box to include a clear label (e.g., aria-label="Help" or a
prop-driven label) and ensure Icon id="question" is rendered decorative.
---
Nitpick comments:
In `@apps/web/src/layouts/DefaultLayout/NavMenu/ProfileMenu.tsx`:
- Around line 252-298: Extract the duplicated JSX in renderConnectedUser and
renderConnectedUserStatic into a single shared renderer (e.g.,
renderConnectedUserCommon or a small Presentational component ConnectedUserRow)
that accepts a mode flag/prop (e.g., isStatic or variant) to toggle the minor
layout differences like paddingBottom, wrapping Link behavior, and any id
differences (e.g., 'close-modal'). Move repeated pieces (Avatar, displayName,
userBalance, CopyButton, Disconnect Button) into that shared renderer and
preserve existing props/aria attributes (aria-label, target/rel on Link) while
updating both original callers to use the new shared function/component.
🪄 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: 2f0b6f9c-71df-4e94-9a4e-193cd24072f4
⛔ Files ignored due to path filters (118)
packages/zord/src/assets/airdrop-sablier.svgis excluded by!**/*.svgpackages/zord/src/assets/airdrop.svgis excluded by!**/*.svgpackages/zord/src/assets/arrow-left.svgis excluded by!**/*.svgpackages/zord/src/assets/arrow-right.svgis excluded by!**/*.svgpackages/zord/src/assets/brand/airdrop-sablier.svgis excluded by!**/*.svgpackages/zord/src/assets/brand/airdrop.svgis excluded by!**/*.svgpackages/zord/src/assets/brand/brush.svgis excluded by!**/*.svgpackages/zord/src/assets/brand/collection.svgis excluded by!**/*.svgpackages/zord/src/assets/brand/content-coin.svgis excluded by!**/*.svgpackages/zord/src/assets/brand/creator-coin.svgis excluded by!**/*.svgpackages/zord/src/assets/brand/erc20.svgis excluded by!**/*.svgpackages/zord/src/assets/brand/escrow.svgis excluded by!**/*.svgpackages/zord/src/assets/brand/eth.svgis excluded by!**/*.svgpackages/zord/src/assets/brand/handshake.svgis excluded by!**/*.svgpackages/zord/src/assets/brand/migrate.svgis excluded by!**/*.svgpackages/zord/src/assets/brand/nft.svgis excluded by!**/*.svgpackages/zord/src/assets/brand/pause-template.svgis excluded by!**/*.svgpackages/zord/src/assets/brand/resume-template.svgis excluded by!**/*.svgpackages/zord/src/assets/brand/sablier.svgis excluded by!**/*.svgpackages/zord/src/assets/brand/wallet-connect-outline.svgis excluded by!**/*.svgpackages/zord/src/assets/brand/wallet-connect.svgis excluded by!**/*.svgpackages/zord/src/assets/brand/x.svgis excluded by!**/*.svgpackages/zord/src/assets/brush.svgis excluded by!**/*.svgpackages/zord/src/assets/burger.svgis excluded by!**/*.svgpackages/zord/src/assets/check-in-circle.svgis excluded by!**/*.svgpackages/zord/src/assets/check.svgis excluded by!**/*.svgpackages/zord/src/assets/chevron-down.svgis excluded by!**/*.svgpackages/zord/src/assets/chevron-left.svgis excluded by!**/*.svgpackages/zord/src/assets/chevron-right.svgis excluded by!**/*.svgpackages/zord/src/assets/chevron-up.svgis excluded by!**/*.svgpackages/zord/src/assets/code.svgis excluded by!**/*.svgpackages/zord/src/assets/collection.svgis excluded by!**/*.svgpackages/zord/src/assets/copy.svgis excluded by!**/*.svgpackages/zord/src/assets/creator-coin.svgis excluded by!**/*.svgpackages/zord/src/assets/cross-16.svgis excluded by!**/*.svgpackages/zord/src/assets/cross.svgis excluded by!**/*.svgpackages/zord/src/assets/dash.svgis excluded by!**/*.svgpackages/zord/src/assets/discord.svgis excluded by!**/*.svgpackages/zord/src/assets/dots.svgis excluded by!**/*.svgpackages/zord/src/assets/download.svgis excluded by!**/*.svgpackages/zord/src/assets/escrow.svgis excluded by!**/*.svgpackages/zord/src/assets/eth.svgis excluded by!**/*.svgpackages/zord/src/assets/external-16.svgis excluded by!**/*.svgpackages/zord/src/assets/github.svgis excluded by!**/*.svgpackages/zord/src/assets/globe.svgis excluded by!**/*.svgpackages/zord/src/assets/handlebar-circle.svgis excluded by!**/*.svgpackages/zord/src/assets/heart-filled.svgis excluded by!**/*.svgpackages/zord/src/assets/heart.svgis excluded by!**/*.svgpackages/zord/src/assets/info-16.svgis excluded by!**/*.svgpackages/zord/src/assets/migrate.svgis excluded by!**/*.svgpackages/zord/src/assets/monochrome/arrow-left.svgis excluded by!**/*.svgpackages/zord/src/assets/monochrome/arrow-right.svgis excluded by!**/*.svgpackages/zord/src/assets/monochrome/arrow-top-right.svgis excluded by!**/*.svgpackages/zord/src/assets/monochrome/burger.svgis excluded by!**/*.svgpackages/zord/src/assets/monochrome/check-in-circle.svgis excluded by!**/*.svgpackages/zord/src/assets/monochrome/check.svgis excluded by!**/*.svgpackages/zord/src/assets/monochrome/chevron-down.svgis excluded by!**/*.svgpackages/zord/src/assets/monochrome/chevron-left.svgis excluded by!**/*.svgpackages/zord/src/assets/monochrome/chevron-right.svgis excluded by!**/*.svgpackages/zord/src/assets/monochrome/chevron-up.svgis excluded by!**/*.svgpackages/zord/src/assets/monochrome/code-brackets.svgis excluded by!**/*.svgpackages/zord/src/assets/monochrome/code.svgis excluded by!**/*.svgpackages/zord/src/assets/monochrome/copy.svgis excluded by!**/*.svgpackages/zord/src/assets/monochrome/cross-16.svgis excluded by!**/*.svgpackages/zord/src/assets/monochrome/cross.svgis excluded by!**/*.svgpackages/zord/src/assets/monochrome/dash.svgis excluded by!**/*.svgpackages/zord/src/assets/monochrome/discord.svgis excluded by!**/*.svgpackages/zord/src/assets/monochrome/dots.svgis excluded by!**/*.svgpackages/zord/src/assets/monochrome/download.svgis excluded by!**/*.svgpackages/zord/src/assets/monochrome/ellipsis.svgis excluded by!**/*.svgpackages/zord/src/assets/monochrome/external-16.svgis excluded by!**/*.svgpackages/zord/src/assets/monochrome/github.svgis excluded by!**/*.svgpackages/zord/src/assets/monochrome/globe.svgis excluded by!**/*.svgpackages/zord/src/assets/monochrome/handlebar-circle.svgis excluded by!**/*.svgpackages/zord/src/assets/monochrome/heart-filled.svgis excluded by!**/*.svgpackages/zord/src/assets/monochrome/heart.svgis excluded by!**/*.svgpackages/zord/src/assets/monochrome/move.svgis excluded by!**/*.svgpackages/zord/src/assets/monochrome/new-window.svgis excluded by!**/*.svgpackages/zord/src/assets/monochrome/noggles.svgis excluded by!**/*.svgpackages/zord/src/assets/monochrome/pause.svgis excluded by!**/*.svgpackages/zord/src/assets/monochrome/pencil.svgis excluded by!**/*.svgpackages/zord/src/assets/monochrome/pin.svgis excluded by!**/*.svgpackages/zord/src/assets/monochrome/play.svgis excluded by!**/*.svgpackages/zord/src/assets/monochrome/plus.svgis excluded by!**/*.svgpackages/zord/src/assets/monochrome/question.svgis excluded by!**/*.svgpackages/zord/src/assets/monochrome/queue.svgis excluded by!**/*.svgpackages/zord/src/assets/monochrome/refresh.svgis excluded by!**/*.svgpackages/zord/src/assets/monochrome/search.svgis excluded by!**/*.svgpackages/zord/src/assets/monochrome/share.svgis excluded by!**/*.svgpackages/zord/src/assets/monochrome/sliders.svgis excluded by!**/*.svgpackages/zord/src/assets/monochrome/spanner.svgis excluded by!**/*.svgpackages/zord/src/assets/monochrome/swap.svgis excluded by!**/*.svgpackages/zord/src/assets/monochrome/trash.svgis excluded by!**/*.svgpackages/zord/src/assets/monochrome/warning-16.svgis excluded by!**/*.svgpackages/zord/src/assets/monochrome/warning.svgis excluded by!**/*.svgpackages/zord/src/assets/move.svgis excluded by!**/*.svgpackages/zord/src/assets/new-window.svgis excluded by!**/*.svgpackages/zord/src/assets/noggles.svgis excluded by!**/*.svgpackages/zord/src/assets/pause-template.svgis excluded by!**/*.svgpackages/zord/src/assets/pause.svgis excluded by!**/*.svgpackages/zord/src/assets/pencil.svgis excluded by!**/*.svgpackages/zord/src/assets/pin.svgis excluded by!**/*.svgpackages/zord/src/assets/play.svgis excluded by!**/*.svgpackages/zord/src/assets/plus.svgis excluded by!**/*.svgpackages/zord/src/assets/question.svgis excluded by!**/*.svgpackages/zord/src/assets/refresh.svgis excluded by!**/*.svgpackages/zord/src/assets/resume-template.svgis excluded by!**/*.svgpackages/zord/src/assets/sablier.svgis excluded by!**/*.svgpackages/zord/src/assets/share.svgis excluded by!**/*.svgpackages/zord/src/assets/spanner.svgis excluded by!**/*.svgpackages/zord/src/assets/swap.svgis excluded by!**/*.svgpackages/zord/src/assets/trash.svgis excluded by!**/*.svgpackages/zord/src/assets/twitter.svgis excluded by!**/*.svgpackages/zord/src/assets/wallet-connect-outline.svgis excluded by!**/*.svgpackages/zord/src/assets/wallet-connect.svgis excluded by!**/*.svgpackages/zord/src/assets/warning-16.svgis excluded by!**/*.svgpackages/zord/src/assets/warning.svgis excluded by!**/*.svgpackages/zord/src/assets/x.svgis excluded by!**/*.svg
📒 Files selected for processing (75)
apps/web/src/components/HiddenDaoDisclosure.css.tsapps/web/src/components/HiddenDaoDisclosure.tsxapps/web/src/components/HoldersSection/HoldersList.css.tsapps/web/src/components/ProposalLink.tsxapps/web/src/layouts/DefaultLayout/Nav.styles.css.tsapps/web/src/layouts/DefaultLayout/NavMenu/ChainMenu.tsxapps/web/src/layouts/DefaultLayout/NavMenu/ProfileMenu.tsxapps/web/src/layouts/HomeLayout/Footer.css.tsapps/web/src/layouts/HomeLayout/Footer.tsxapps/web/src/modules/coin/CoinDetail/CoinInfo.tsxapps/web/src/modules/dashboard/DaoProposalCard.tsxapps/web/src/modules/dashboard/MobileCreateMenu.tsxapps/web/src/modules/drop/DropDetail/DropInfo.tsxapps/web/src/modules/home/FAQ.tsxapps/web/src/modules/home/Home.css.tsapps/web/src/modules/home/Homepage.css.tsapps/web/src/modules/playground/components/PlaygroundHeader.tsxapps/web/src/pages/_app.tsxapps/web/src/pages/profile/[user].tsxapps/web/src/styles/globals.cssapps/web/src/styles/profile.css.tsapps/web/src/styles/react-mde-theme.csspackages/auction-ui/src/components/AuctionChart/AuctionGraph.tsxpackages/auction-ui/src/components/AuctionTokenPicker.tsxpackages/create-dao-ui/src/components/AllocationForm/AllocationForm.tsxpackages/create-dao-ui/src/components/AuctionSettingsForm/AuctionSettingsForm.tsxpackages/create-dao-ui/src/components/FormNavButtons/FormNavButtons.tsxpackages/create-dao-ui/src/components/ReviewAndDeploy/ReviewSection.tsxpackages/create-proposal-ui/src/components/CreateProposalHeading/CreateProposalHeading.tsxpackages/create-proposal-ui/src/components/MobileProposalActionBar/MobileProposalActionBar.tsxpackages/create-proposal-ui/src/components/TransactionForm/ContentCoin/ContentCoinPreviewDisplay.css.tspackages/create-proposal-ui/src/components/TransactionForm/CreatorCoin/CreatorCoinPreviewDisplay.css.tspackages/create-proposal-ui/src/components/TransactionForm/MilestonePayments/MilestonePaymentsDetailsDisplay.css.tspackages/create-proposal-ui/src/components/TransactionForm/StreamTokens/StreamTokensDetailsDisplay.css.tspackages/create-proposal-ui/src/components/TransactionForm/WalletConnect/WalletConnect.tsxpackages/dao-ui/src/components/About/ExternalLinks.tsxpackages/dao-ui/src/components/About/Founder.tsxpackages/dao-ui/src/components/Activity/DelegateForm.tsxpackages/dao-ui/src/components/Cards/CreatorCoinSection.tsxpackages/dao-ui/src/styles/About.css.tspackages/proposal-ui/src/components/ProposalDescription/AirdropDetails/AirdropItem.tsxpackages/proposal-ui/src/components/ProposalDescription/CoinDetails/CoinItem.tsxpackages/proposal-ui/src/components/ProposalDescription/DropDetails/DropItem.tsxpackages/proposal-ui/src/components/ProposalDescription/MilestoneDetails/EscrowInstance.tsxpackages/proposal-ui/src/components/ProposalDescription/MilestoneDetails/MilestoneItem.tsxpackages/proposal-ui/src/components/ProposalDescription/StreamDetails/SenderDelegation.tsxpackages/proposal-ui/src/components/ProposalDescription/StreamDetails/StreamItem.tsxpackages/proposal-ui/src/components/ProposalDetailsGrid/ProposalDetailsGrid.tsxpackages/proposal-ui/src/components/ProposalDetailsGrid/Tile.css.tspackages/proposal-ui/src/components/ProposalDetailsGrid/Tile.tsxpackages/proposal-ui/src/components/ProposalHeader/ProposalHeader.tsxpackages/proposal-ui/src/components/ProposalNavigation/ProposalNavigation.tsxpackages/proposal-ui/src/components/ProposalStatus/ProposalStatus.helper.tspackages/proposal-ui/src/components/TransactionTypeIcon/TransactionTypeIcon.tsxpackages/proposal-ui/src/constants/transactionTypes.tspackages/ui/src/Accordion/AccordionItem.tsxpackages/ui/src/Artwork/LayerBox.tsxpackages/ui/src/Artwork/LayerOrdering.tsxpackages/ui/src/ContractLink/ContractLink.tsxpackages/ui/src/CopyButton/CopyButton.tsxpackages/ui/src/DaoLinksField/DaoLinksField.tsxpackages/ui/src/DropdownSelect/DropdownSelect.tsxpackages/ui/src/Graph/BaseGraph.tsxpackages/ui/src/Graph/StreamGraph.tsxpackages/ui/src/LaunchEconomicsPreview/LaunchEconomicsPreview.tsxpackages/ui/src/LikeButton/LikeButton.tsxpackages/ui/src/LikeButton/LikePopupContent.tsxpackages/ui/src/MarkdownDisplay/MarkdownDisplay.tsxpackages/ui/src/MarkdownEditor/MarkdownEditor.tsxpackages/ui/src/Modal/Modal.css.tspackages/ui/src/Pagination/Pagination.tsxpackages/ui/src/ShareButton/ShareButton.tsxpackages/ui/src/Tooltip/Tooltip.tsxpackages/zord/ICONS.mdpackages/zord/src/icons.ts
💤 Files with no reviewable changes (5)
- packages/create-proposal-ui/src/components/TransactionForm/CreatorCoin/CreatorCoinPreviewDisplay.css.ts
- packages/create-proposal-ui/src/components/TransactionForm/ContentCoin/ContentCoinPreviewDisplay.css.ts
- apps/web/src/pages/profile/[user].tsx
- packages/create-proposal-ui/src/components/TransactionForm/MilestonePayments/MilestonePaymentsDetailsDisplay.css.ts
- packages/create-proposal-ui/src/components/TransactionForm/StreamTokens/StreamTokensDetailsDisplay.css.ts
✅ Files skipped from review due to trivial changes (45)
- apps/web/src/modules/dashboard/MobileCreateMenu.tsx
- apps/web/src/modules/home/FAQ.tsx
- apps/web/src/modules/playground/components/PlaygroundHeader.tsx
- packages/proposal-ui/src/components/ProposalDescription/DropDetails/DropItem.tsx
- packages/ui/src/DaoLinksField/DaoLinksField.tsx
- packages/proposal-ui/src/components/ProposalHeader/ProposalHeader.tsx
- packages/dao-ui/src/components/Cards/CreatorCoinSection.tsx
- apps/web/src/modules/drop/DropDetail/DropInfo.tsx
- packages/proposal-ui/src/components/ProposalDescription/CoinDetails/CoinItem.tsx
- packages/proposal-ui/src/components/ProposalDescription/MilestoneDetails/MilestoneItem.tsx
- packages/proposal-ui/src/components/ProposalDescription/StreamDetails/SenderDelegation.tsx
- apps/web/src/components/HiddenDaoDisclosure.tsx
- packages/create-proposal-ui/src/components/MobileProposalActionBar/MobileProposalActionBar.tsx
- packages/ui/src/Artwork/LayerOrdering.tsx
- packages/create-proposal-ui/src/components/CreateProposalHeading/CreateProposalHeading.tsx
- packages/ui/src/CopyButton/CopyButton.tsx
- packages/dao-ui/src/styles/About.css.ts
- packages/dao-ui/src/components/About/Founder.tsx
- packages/ui/src/MarkdownDisplay/MarkdownDisplay.tsx
- apps/web/src/modules/dashboard/DaoProposalCard.tsx
- packages/ui/src/LikeButton/LikeButton.tsx
- apps/web/src/modules/coin/CoinDetail/CoinInfo.tsx
- packages/ui/src/LikeButton/LikePopupContent.tsx
- packages/proposal-ui/src/components/ProposalDescription/StreamDetails/StreamItem.tsx
- packages/ui/src/Accordion/AccordionItem.tsx
- apps/web/src/modules/home/Homepage.css.ts
- packages/create-dao-ui/src/components/AllocationForm/AllocationForm.tsx
- packages/ui/src/LaunchEconomicsPreview/LaunchEconomicsPreview.tsx
- packages/auction-ui/src/components/AuctionTokenPicker.tsx
- packages/ui/src/Graph/BaseGraph.tsx
- packages/proposal-ui/src/components/ProposalNavigation/ProposalNavigation.tsx
- packages/proposal-ui/src/components/ProposalDetailsGrid/Tile.css.ts
- packages/create-proposal-ui/src/components/TransactionForm/WalletConnect/WalletConnect.tsx
- packages/create-dao-ui/src/components/ReviewAndDeploy/ReviewSection.tsx
- packages/create-dao-ui/src/components/FormNavButtons/FormNavButtons.tsx
- packages/zord/ICONS.md
- packages/proposal-ui/src/components/ProposalDescription/MilestoneDetails/EscrowInstance.tsx
- packages/dao-ui/src/components/Activity/DelegateForm.tsx
- apps/web/src/styles/react-mde-theme.css
- apps/web/src/components/ProposalLink.tsx
- apps/web/src/components/HoldersSection/HoldersList.css.ts
- packages/create-dao-ui/src/components/AuctionSettingsForm/AuctionSettingsForm.tsx
- packages/ui/src/ShareButton/ShareButton.tsx
- packages/ui/src/Artwork/LayerBox.tsx
- packages/ui/src/DropdownSelect/DropdownSelect.tsx
🚧 Files skipped from review as they are similar to previous changes (4)
- apps/web/src/layouts/HomeLayout/Footer.tsx
- packages/ui/src/Modal/Modal.css.ts
- packages/ui/src/MarkdownEditor/MarkdownEditor.tsx
- packages/proposal-ui/src/components/ProposalStatus/ProposalStatus.helper.ts
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
apps/web/src/styles/about.css.ts (1)
19-19: 💤 Low valueMinor naming nit:
darkWordSelector— "Word" is misleading.The constant name
darkWordSelectorcontains "Word" which doesn't relate to its purpose (theme-mode detection for the "why" images). A clearer name likedarkThemeSelectorordarkModeSelectorwould better convey intent.✏️ Suggested rename
-const darkWordSelector = 'html[data-theme-mode="dark"] &' +const darkModeSelector = 'html[data-theme-mode="dark"] &' export const lightWhy = style({ display: 'block', selectors: { - [darkWordSelector]: { + [darkModeSelector]: { display: 'none', }, }, }) export const darkWhy = style({ display: 'none', selectors: { - [darkWordSelector]: { + [darkModeSelector]: { display: 'block', }, }, })🤖 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 `@apps/web/src/styles/about.css.ts` at line 19, Rename the misleading constant darkWordSelector to a clearer name like darkThemeSelector (or darkModeSelector) and update all references; specifically change the declaration const darkWordSelector = 'html[data-theme-mode="dark"] &' to const darkThemeSelector = 'html[data-theme-mode="dark"] &' and replace every use of darkWordSelector in the about.css.ts (and any imports/uses) with darkThemeSelector so the selector name reflects theme-mode detection for the "why" images.packages/ui/src/Tooltip/Tooltip.tsx (1)
7-9: ⚡ Quick winConsider widening
childrenfromstringtoReact.ReactNode.Restricting to
stringprevents callers from embedding links, formatted text, or other React elements in tooltip content, which is a common use case.♻️ Proposed refactor
-}: { - children: string - label?: string -}) => { +}: { + children: React.ReactNode + label?: string +}) => {Also add the import if not already present:
-import { useRef, useState } from 'react' +import { type ReactNode, useRef, useState } from 'react'And update the prop type:
- children: string + children: ReactNode🤖 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 `@packages/ui/src/Tooltip/Tooltip.tsx` around lines 7 - 9, The Tooltip component currently types its children prop as string which prevents passing JSX; update the prop type in Tooltip (where props are defined for the Tooltip function/component) to accept React.ReactNode instead of string and add/import React (or the React types) if not already imported so the type resolves; ensure any related usages of the Tooltip children still work and adjust downstream tests/types if necessary.
🤖 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 `@packages/ui/src/Tooltip/Tooltip.tsx`:
- Around line 18-19: Remove the redundant onMouseOver handler that duplicates
onMouseEnter in the Tooltip component: locate the JSX that attaches both
onMouseOver and onMouseEnter calling setShowTooltip(true) (e.g., inside
Tooltip's container/Box and the setShowTooltip state updater) and delete the
onMouseOver prop so only onMouseEnter remains to open the tooltip (avoids
bubbling from child Icon elements).
---
Nitpick comments:
In `@apps/web/src/styles/about.css.ts`:
- Line 19: Rename the misleading constant darkWordSelector to a clearer name
like darkThemeSelector (or darkModeSelector) and update all references;
specifically change the declaration const darkWordSelector =
'html[data-theme-mode="dark"] &' to const darkThemeSelector =
'html[data-theme-mode="dark"] &' and replace every use of darkWordSelector in
the about.css.ts (and any imports/uses) with darkThemeSelector so the selector
name reflects theme-mode detection for the "why" images.
In `@packages/ui/src/Tooltip/Tooltip.tsx`:
- Around line 7-9: The Tooltip component currently types its children prop as
string which prevents passing JSX; update the prop type in Tooltip (where props
are defined for the Tooltip function/component) to accept React.ReactNode
instead of string and add/import React (or the React types) if not already
imported so the type resolves; ensure any related usages of the Tooltip children
still work and adjust downstream tests/types if necessary.
🪄 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: 483a7d35-74a6-49c4-b6dc-46574d7b733f
⛔ Files ignored due to path filters (3)
apps/web/public/why-dark.svgis excluded by!**/*.svgpackages/zord/src/assets/brand/content-coin.svgis excluded by!**/*.svgpackages/zord/src/assets/monochrome/spanner.svgis excluded by!**/*.svg
📒 Files selected for processing (6)
apps/web/src/layouts/DefaultLayout/Nav.styles.css.tsapps/web/src/layouts/DefaultLayout/NavMenu/ProfileMenu.tsxapps/web/src/pages/about.tsxapps/web/src/styles/about.css.tspackages/ui/src/Tooltip/Tooltip.tsxpackages/utils/src/daoMetadata.ts
🚧 Files skipped from review as they are similar to previous changes (2)
- apps/web/src/pages/about.tsx
- apps/web/src/layouts/DefaultLayout/NavMenu/ProfileMenu.tsx
Comment on lines
18
to
+19
| onMouseOver={() => setShowTooltip(true)} | ||
| onMouseEnter={() => setShowTooltip(true)} |
Contributor
There was a problem hiding this comment.
Remove the redundant onMouseOver handler.
Both onMouseOver (line 18) and onMouseEnter (line 19) call setShowTooltip(true). onMouseOver bubbles from child elements, so it fires redundantly whenever the cursor moves over the Icon inside the Box. onMouseEnter is the correct, non-bubbling replacement and is already present — onMouseOver should be dropped.
🐛 Proposed fix
<Box
cursor="pointer"
- onMouseOver={() => setShowTooltip(true)}
onMouseEnter={() => setShowTooltip(true)}
onMouseLeave={() => setShowTooltip(false)}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| onMouseOver={() => setShowTooltip(true)} | |
| onMouseEnter={() => setShowTooltip(true)} | |
| <Box | |
| cursor="pointer" | |
| onMouseEnter={() => setShowTooltip(true)} | |
| onMouseLeave={() => setShowTooltip(false)} |
🤖 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 `@packages/ui/src/Tooltip/Tooltip.tsx` around lines 18 - 19, Remove the
redundant onMouseOver handler that duplicates onMouseEnter in the Tooltip
component: locate the JSX that attaches both onMouseOver and onMouseEnter
calling setShowTooltip(true) (e.g., inside Tooltip's container/Box and the
setShowTooltip state updater) and delete the onMouseOver prop so only
onMouseEnter remains to open the tooltip (avoids bubbling from child Icon
elements).
dan13ram
force-pushed
the
feature/dark-mode
branch
from
a93a0c1 to
22d5dc8
Compare
dan13ram
force-pushed
the
feature/dark-mode
branch
from
22d5dc8 to
73e79a4
Compare
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
3 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.
Description
This branch implements and polishes dark mode support across the app.
Changes include:
Motivation & context
Dark mode was requested in the UX enhancement discussions in January. This change implements dark mode and makes it visually coherent across the main app flows.
See: #830
Code review
Notes for review:
Type of change
Checklist
Summary by CodeRabbit
New Features
Bug Fixes
Style