Update add calendar modal, update menu list style#521
Update add calendar modal, update menu list style#521lenhanphung wants to merge 1 commit intomainfrom
Conversation
WalkthroughThis PR updates visual styling and layout across multiple calendar components. Changes include restructuring CalendarSearch.tsx layout to use vertical flexing, adding new styling rules for menu items and dividers in CustomCalendar.styl, applying explicit icon styling to back buttons in ResponsiveDialog.tsx and SettingsPage.tsx, and updating Menubar.tsx with SettingsOutlinedIcon and styled LogoutIcon alongside avatar size increases and typography adjustments. All modifications are presentation-only with no impact on business logic or control flow. Possibly related PRs
Suggested labels
Suggested reviewers
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@src/components/Calendar/CustomCalendar.styl`:
- Around line 367-377: The global selectors
li.MuiButtonBase-root.MuiMenuItem-root and
hr.MuiDivider-root.MuiDivider-fullWidth in CustomCalendar.styl are leaking
styles across the app; scope them by nesting under a Calendar-specific parent
class used by the component (e.g., .customCalendar or the root class on
Calendar.tsx) so they only apply inside the calendar component. Update
CustomCalendar.styl to wrap those rules under that parent selector (e.g.,
.customCalendar li.MuiButtonBase-root.MuiMenuItem-root and .customCalendar
hr.MuiDivider-root.MuiDivider-fullWidth) or increase selector specificity with
the component’s root class to restrict the styles to the Calendar component.
🧹 Nitpick comments (3)
src/features/Settings/SettingsPage.tsx (1)
281-281: Consider extracting the shared icon style into a constant.The exact same
sx={{ color: "#605D62", fontSize: 30 }}is applied toArrowBackIconhere and inResponsiveDialog.tsx(line 190). A shared constant (e.g.,backIconSx) would keep the two in sync and make future theme adjustments a single-point change.src/components/Menubar/Menubar.tsx (2)
351-368: Prefer theme tokens over hardcoded color/font values.
color: "#424244"andfontFamily: "Inter"bypass the MUI theme, which makes future theme changes (e.g., dark mode, rebranding) miss these elements. Consider usingtheme.palette.text.primary/theme.palette.text.secondaryandtheme.typography.fontFamily(or a Typography variant) instead.
371-388: Duplicated iconsxbetween Settings and Logout menu items.Both
SettingsOutlinedIconandLogoutIconshare the exact samesxobject. A shared constant would reduce repetition:const menuIconSx = { mr: 2, color: "rgba(28, 27, 31, 0.48)", fontSize: 20 };
| li.MuiButtonBase-root.MuiMenuItem-root | ||
| padding 8px 16px | ||
| font-size 14px | ||
| color #243B55 | ||
| min-width 120px | ||
|
|
||
| &:hover | ||
| background #f6f6f7 | ||
|
|
||
| hr.MuiDivider-root.MuiDivider-fullWidth | ||
| margin 0 No newline at end of file |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# First, verify the file exists and check the exact code at lines 367-377
fd CustomCalendar.stylRepository: linagora/twake-calendar-frontend
Length of output: 119
🏁 Script executed:
# Check the content around lines 367-377
cat -n src/components/Calendar/CustomCalendar.styl | sed -n '360,380p'Repository: linagora/twake-calendar-frontend
Length of output: 563
🏁 Script executed:
# Check where CustomCalendar.styl is imported
rg "CustomCalendar" --type=ts --type=tsx -A2 -B2Repository: linagora/twake-calendar-frontend
Length of output: 103
🏁 Script executed:
# Count MenuItem usage across the codebase
rg "MenuItem" --type=tsx --type=ts | wc -lRepository: linagora/twake-calendar-frontend
Length of output: 122
🏁 Script executed:
# Check if there are any scoping wrappers in CustomCalendar component itself
rg -A5 "CustomCalendar" src/components/Calendar/CustomCalendar.tsx 2>/dev/null | head -30Repository: linagora/twake-calendar-frontend
Length of output: 58
🏁 Script executed:
# Check imports of CustomCalendar.styl without file type
rg "CustomCalendar.styl" -A2 -B2Repository: linagora/twake-calendar-frontend
Length of output: 523
🏁 Script executed:
# Check imports of CustomCalendar component
rg "CustomCalendar" --max-count=20 | grep -E "import|from"Repository: linagora/twake-calendar-frontend
Length of output: 144
🏁 Script executed:
# Check MenuItem usage across the codebase
rg "MenuItem" | head -20Repository: linagora/twake-calendar-frontend
Length of output: 1509
🏁 Script executed:
# Get the structure of CustomCalendar.tsx to understand the component context
fd CustomCalendar.tsx -x wc -l {} \; && fd CustomCalendar.tsx -x head -50 {}Repository: linagora/twake-calendar-frontend
Length of output: 58
🏁 Script executed:
# Check where Calendar.tsx (which imports CustomCalendar.styl) is used
rg "import.*Calendar" --max-count=10 | grep -v node_modulesRepository: linagora/twake-calendar-frontend
Length of output: 22973
🏁 Script executed:
# Check the full context of CustomCalendar.styl to verify there's no parent scoping wrapper
head -50 src/components/Calendar/CustomCalendar.stylRepository: linagora/twake-calendar-frontend
Length of output: 1103
🏁 Script executed:
# Check if there are any CSS scoping mechanisms in Calendar.tsx itself
rg -A10 "import.*CustomCalendar.styl" src/components/Calendar/Calendar.tsxRepository: linagora/twake-calendar-frontend
Length of output: 567
These selectors are unscoped and apply globally to all MUI MenuItems and Dividers in the application.
li.MuiButtonBase-root.MuiMenuItem-root and hr.MuiDivider-root.MuiDivider-fullWidth at lines 367–377 are not nested under any parent class. Since CustomCalendar.styl is imported in Calendar.tsx (which loads via CalendarLayout in App.tsx), these rules override styling for all menu items and dividers application-wide — including Menubar dropdowns, SettingsPage options, EventRepeat menus, and any future menus. This creates unpredictable visual regressions in other parts of the app.
Scope these rules under a parent selector specific to the component or context they target.
Example: scope under a parent class
-li.MuiButtonBase-root.MuiMenuItem-root
- padding 8px 16px
- font-size 14px
- color `#243B55`
- min-width 120px
-
- &:hover
- background `#f6f6f7`
-
-hr.MuiDivider-root.MuiDivider-fullWidth
- margin 0
+.custom-calendar-menu
+ li.MuiButtonBase-root.MuiMenuItem-root
+ padding 8px 16px
+ font-size 14px
+ color `#243B55`
+ min-width 120px
+
+ &:hover
+ background `#f6f6f7`
+
+ hr.MuiDivider-root.MuiDivider-fullWidth
+ margin 0🤖 Prompt for AI Agents
In `@src/components/Calendar/CustomCalendar.styl` around lines 367 - 377, The
global selectors li.MuiButtonBase-root.MuiMenuItem-root and
hr.MuiDivider-root.MuiDivider-fullWidth in CustomCalendar.styl are leaking
styles across the app; scope them by nesting under a Calendar-specific parent
class used by the component (e.g., .customCalendar or the root class on
Calendar.tsx) so they only apply inside the calendar component. Update
CustomCalendar.styl to wrap those rules under that parent selector (e.g.,
.customCalendar li.MuiButtonBase-root.MuiMenuItem-root and .customCalendar
hr.MuiDivider-root.MuiDivider-fullWidth) or increase selector specificity with
the component’s root class to restrict the styles to the Calendar component.
1 participant
Summary by CodeRabbit
Release Notes
Refactor
Style