fix: match inputs with figma styles#261
Conversation
Signed-off-by: Priscila Moneo <priscila_moneo@hotmail.com.ar>
📝 WalkthroughWalkthroughThis PR introduces a centralized MUI theme configuration module and applies border styling updates to the SearchInput component. The theme file defines customizations for outlined inputs and select dropdowns, a new SearchInput styling rule applies border colors via ChangesMUI Theme Customization and Styling
🎯 2 (Simple) | ⏱️ ~10 minutes Suggested Reviewers
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
| label={label} | ||
| labelId={`${name}-label`} | ||
| multiple | ||
| IconComponent={KeyboardArrowDownIcon} |
There was a problem hiding this comment.
was this a request ? I cannot see this anywhere on the ticket or the figma
There was a problem hiding this comment.
Yes, it is.
Ticket Request:
Figma Screenshot:
| name={name} | ||
| label={label} | ||
| labelId={`${name}-label`} | ||
| IconComponent={KeyboardArrowDownIcon} |
There was a problem hiding this comment.
if we are going to change all dropdown please use CustomTheme:
const theme = createTheme({ components: { MuiSelect: { defaultProps: { // Change the dropdown arrow icon globally IconComponent: KeyboardArrowDownIcon, }, }, }, });
Signed-off-by: Priscila Moneo <priscila_moneo@hotmail.com.ar>
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/components/mui/search-input.js`:
- Around line 87-89: SearchInput contains hardcoded MuiOutlinedInput
notchedOutline color overrides that conflict with the centralized theme; remove
the three style overrides using "& .MuiOutlinedInput-root
.MuiOutlinedInput-notchedOutline", "& .MuiOutlinedInput-root:hover
.MuiOutlinedInput-notchedOutline", and "& .MuiOutlinedInput-root.Mui-focused
.MuiOutlinedInput-notchedOutline" from the SearchInput styles and let the global
MuiOutlinedInput theme in theme.js control default/hover/focus borders, or if a
local variant is required read colors from the theme (e.g., theme.palette.*)
instead of hardcoded "rgba(...)" or "primary.main" so the component honors the
centralized contract.
🪄 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: a229d797-2481-4618-af81-c087054e1532
📒 Files selected for processing (3)
src/components/mui/search-input.jssrc/utils/theme.jswebpack.common.js
| "& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": { borderColor: "rgba(0, 0, 0, 0.23)" }, | ||
| "& .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline": { borderColor: "rgba(0, 0, 0, 0.23)" }, | ||
| "& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline": { borderColor: "primary.main" } |
There was a problem hiding this comment.
Border-state overrides conflict with the centralized theme contract.
At Line 87-89, SearchInput hardcodes notched-outline colors (rgba(...) and primary.main), but src/utils/theme.js already centralizes MuiOutlinedInput border colors for default/hover/focus (#000). This creates cross-component inconsistency and defeats the new theme abstraction.
Suggested fix
sx={{
"& .MuiOutlinedInput-root": {
height: "36px",
paddingX: 1
- },
- "& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": { borderColor: "rgba(0, 0, 0, 0.23)" },
- "& .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline": { borderColor: "rgba(0, 0, 0, 0.23)" },
- "& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline": { borderColor: "primary.main" }
+ }
}}📝 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.
| "& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": { borderColor: "rgba(0, 0, 0, 0.23)" }, | |
| "& .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline": { borderColor: "rgba(0, 0, 0, 0.23)" }, | |
| "& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline": { borderColor: "primary.main" } | |
| sx={{ | |
| "& .MuiOutlinedInput-root": { | |
| height: "36px", | |
| paddingX: 1 | |
| } | |
| }} |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/components/mui/search-input.js` around lines 87 - 89, SearchInput
contains hardcoded MuiOutlinedInput notchedOutline color overrides that conflict
with the centralized theme; remove the three style overrides using "&
.MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline", "&
.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline", and "&
.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline" from the
SearchInput styles and let the global MuiOutlinedInput theme in theme.js control
default/hover/focus borders, or if a local variant is required read colors from
the theme (e.g., theme.palette.*) instead of hardcoded "rgba(...)" or
"primary.main" so the component honors the centralized contract.
2 participants
ref: https://app.clickup.com/t/9014802374/86b8tt4df
Summary by CodeRabbit