Skip to content

Update add calendar modal, update menu list style #521

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Eriikah merged 1 commit into from
Feb 9, 2026
Merged

Update add calendar modal, update menu list style #521

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/components/Calendar/CalendarSearch.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,16 +40,16 @@ function CalendarItem({
<Box
key={cal.owner.email + cal.cal["dav:name"]}
display="flex"
alignItems="center"
justifyContent="space-between"
flexDirection="column"
alignItems="flex-start"
style={{
borderRadius: 8,
border: "1px solid #e5e7eb",
padding: 8,
marginBottom: 8,
}}
>
<Box display="flex" alignItems="center" gap={2}>
<Box display="flex" alignItems="center" gap={2} mb={1}>
<Avatar
{...stringAvatar(cal.owner.displayName || cal.owner.email)}
style={{
Expand Down
12 changes: 12 additions & 0 deletions src/components/Calendar/CustomCalendar.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -363,3 +363,15 @@ tbody > tr.fc-scrollgrid-section:first-of-type .fc-scroller
margin: 0
.date-time-group.show-full-field > .MuiBox-root:first-of-type
margin-bottom: 8px

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
Comment on lines +367 to +377
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 6, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

# First, verify the file exists and check the exact code at lines 367-377
fd CustomCalendar.styl

Repository: 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 -B2

Repository: linagora/twake-calendar-frontend

Length of output: 103

🏁 Script executed:

# Count MenuItem usage across the codebase
rg "MenuItem" --type=tsx --type=ts | wc -l

Repository: 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 -30

Repository: linagora/twake-calendar-frontend

Length of output: 58

🏁 Script executed:

# Check imports of CustomCalendar.styl without file type
rg "CustomCalendar.styl" -A2 -B2

Repository: 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 -20

Repository: 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_modules

Repository: 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.styl

Repository: 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.tsx

Repository: 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.

2 changes: 1 addition & 1 deletion src/components/Dialog/ResponsiveDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -187,7 +187,7 @@ function ResponsiveDialog({
aria-label="show less"
sx={{ marginLeft: "-8px" }}
>
<ArrowBackIcon />
<ArrowBackIcon sx={{ color: "#605D62", fontSize: 30 }} />
</IconButton>
) : showHeaderActions ? (
<Box
Expand Down
36 changes: 30 additions & 6 deletions src/components/Menubar/Menubar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
import LogoutIcon from "@mui/icons-material/Logout";
import RefreshIcon from "@mui/icons-material/Refresh";
import SettingsIcon from "@mui/icons-material/Settings";
import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined";
import React, { useEffect, useState } from "react";
import { push } from "redux-first-history";
import { useI18n } from "twake-i18n";
Expand Down Expand Up @@ -343,25 +343,49 @@ export function Menubar({
>
<Avatar
color={stringToGradient(getUserDisplayName(user))}
size="m"
size="l"
sx={{ marginBottom: "8px" }}
>
{getInitials(getUserDisplayName(user))}
</Avatar>
<Typography variant="body1" sx={{ fontWeight: 500 }}>
<Typography
sx={{
color: "#424244",
fontFamily: "Inter",
fontSize: 22,
fontWeight: 600,
}}
>
{getUserDisplayName(user)}
</Typography>
<Typography variant="body2" color="text.secondary">
<Typography
sx={{
fontSize: 14,
fontWeight: 500,
}}
>
{user?.email}
</Typography>
</Box>
<MenuItem onClick={handleSettingsClick} sx={{ py: 1.5 }}>
<SettingsIcon sx={{ mr: 2 }} />
<SettingsOutlinedIcon
sx={{
mr: 2,
color: "rgba(28, 27, 31, 0.48)",
fontSize: 20,
}}
/>
{t("menubar.settings") || "Settings"}
</MenuItem>
<Divider />
<MenuItem onClick={handleLogoutClick} sx={{ py: 1.5 }}>
<LogoutIcon sx={{ mr: 2 }} />
<LogoutIcon
sx={{
mr: 2,
color: "rgba(28, 27, 31, 0.48)",
fontSize: 20,
}}
/>
{t("menubar.logout") || "Logout"}
</MenuItem>
</Menu>
Expand Down
2 changes: 1 addition & 1 deletion src/features/Settings/SettingsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -278,7 +278,7 @@ export default function SettingsPage() {
aria-label={t("settings.back") || "Back to calendar"}
className="back-button"
>
<ArrowBackIcon />
<ArrowBackIcon sx={{ color: "#605D62", fontSize: 30 }} />
</IconButton>
{activeNavItem === "settings" && (
<Tabs
Expand Down