From ce9ad27256f6e48aad19f8c4484c382edec39475 Mon Sep 17 00:00:00 2001
From: lenhanphung <44486647+lenhanphung@users.noreply.github.com>
Date: Mon, 9 Feb 2026 17:06:05 +0700
Subject: [PATCH] Update add calendar modal, update menu list style (#521)

---
 src/components/Calendar/CalendarSearch.tsx  |  6 ++--
 src/components/Calendar/CustomCalendar.styl | 12 +++++++
 src/components/Dialog/ResponsiveDialog.tsx  |  2 +-
 src/components/Menubar/Menubar.tsx          | 36 +++++++++++++++++----
 src/features/Settings/SettingsPage.tsx      |  2 +-
 5 files changed, 47 insertions(+), 11 deletions(-)

diff --git a/src/components/Calendar/CalendarSearch.tsx b/src/components/Calendar/CalendarSearch.tsx
index 02ae17b..4e6cc6b 100644
--- a/src/components/Calendar/CalendarSearch.tsx
+++ b/src/components/Calendar/CalendarSearch.tsx
@@ -40,8 +40,8 @@ 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",
@@ -49,7 +49,7 @@ function CalendarItem({
         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={{
diff --git a/src/components/Calendar/CustomCalendar.styl b/src/components/Calendar/CustomCalendar.styl
index 6165078..e0b0387 100644
--- a/src/components/Calendar/CustomCalendar.styl
+++ b/src/components/Calendar/CustomCalendar.styl
@@ -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
\ No newline at end of file
diff --git a/src/components/Dialog/ResponsiveDialog.tsx b/src/components/Dialog/ResponsiveDialog.tsx
index 03a3ee3..bf9f9bb 100644
--- a/src/components/Dialog/ResponsiveDialog.tsx
+++ b/src/components/Dialog/ResponsiveDialog.tsx
@@ -187,7 +187,7 @@ function ResponsiveDialog({
             aria-label="show less"
             sx={{ marginLeft: "-8px" }}
           >
-            <ArrowBackIcon />
+            <ArrowBackIcon sx={{ color: "#605D62", fontSize: 30 }} />
           </IconButton>
         ) : showHeaderActions ? (
           <Box
diff --git a/src/components/Menubar/Menubar.tsx b/src/components/Menubar/Menubar.tsx
index 0c1d2fd..895100e 100644
--- a/src/components/Menubar/Menubar.tsx
+++ b/src/components/Menubar/Menubar.tsx
@@ -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";
@@ -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>
diff --git a/src/features/Settings/SettingsPage.tsx b/src/features/Settings/SettingsPage.tsx
index aff22f2..d144452 100644
--- a/src/features/Settings/SettingsPage.tsx
+++ b/src/features/Settings/SettingsPage.tsx
@@ -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