update header bar

src/components/Calendar/Calendar.styl

@@ -6,7 +6,7 @@
 
 .main-layout
   display flex
-  height calc(100vh - 90px)
+  height calc(100vh - 70px)
   
 .main-layout.calendar-layout
   background-color #fff

src/components/Calendar/CustomCalendar.styl

@@ -244,7 +244,7 @@ tbody > tr.fc-scrollgrid-section:first-of-type .fc-scroller
   overflow hidden !important
 
 .navigation-controls
-  margin-right 40px
+  margin-right 16px
 
 .fc .fc-timegrid-slot-minor 
   border-top-style: none

src/components/Dialog/README.md

@@ -64,7 +64,7 @@ function MyComponent() {
 | `onExpandToggle`          | `() => void`          | -         | Handler for back button click when expanded                 |
 | `normalMaxWidth`          | `string`              | `"570px"` | Max width in normal mode                                    |
 | `expandedContentMaxWidth` | `string`              | `"990px"` | Content container max-width in expanded mode                |
-| `headerHeight`            | `string`              | `"90px"`  | App header height to preserve                               |
+| `headerHeight`            | `string`              | `"70px"`  | App header height to preserve                               |
 | `normalSpacing`           | `number`              | `2`       | Stack spacing in normal mode (MUI spacing units: 1 = 8px)   |
 | `expandedSpacing`         | `number`              | `2`       | Stack spacing in expanded mode (MUI spacing units: 1 = 8px) |
 | `contentSx`               | `SxProps<Theme>`      | -         | Custom styles for DialogContent                             |
@@ -149,7 +149,7 @@ For apps with different header heights:
   open={open}
   onClose={handleClose}
   title="Custom Header Height"
-  headerHeight="80px"
+  headerHeight="70px"
   isExpanded={true}
 >
   <TextField label="Content" />

src/components/Dialog/ResponsiveDialog.tsx

@@ -100,7 +100,7 @@ function ResponsiveDialog({
   onExpandToggle,
   normalMaxWidth = "570px",
   expandedContentMaxWidth = "990px",
-  headerHeight = "90px",
+  headerHeight = "70px",
   normalSpacing = 2,
   expandedSpacing = 2,
   contentSx,

src/components/Menubar/EventSearchBar.tsx

@@ -214,7 +214,7 @@ export default function SearchBar() {
         }}
       >
         {!extended && (
-          <IconButton onClick={() => setExtended(true)}>
+          <IconButton sx={{ mr: 1 }} onClick={() => setExtended(true)}>
             <SearchIcon />
           </IconButton>
         )}

src/components/Menubar/Menubar.styl

@@ -38,20 +38,22 @@
   padding 0.5rem
   width 100%
   z-index 1300
-  height 80px
+  height 60px
   background-color #fff
 
 .menubar-item
   display flex
   align-items center
-  width calc(330px - 0.5rem)
+  margin-right 65px
 
 .tc-home
   cursor pointer
 
 .logo
-  padding 0.5rem 1rem
+  padding 0
   font-size 1.5rem
+  max-width 230px
+  margin-left 1rem
 
 .nav-month
   padding-right 2px
@@ -91,6 +93,14 @@
   justify-content flex-end
   align-items center
 
+.current-date-time
+  font-family Roboto
+  font-size 22px
+  font-style normal
+  font-weight 400
+  line-height 36px
+  color #243B55
+
 body.fullscreen-view .navigation-controls,
 body.fullscreen-view .current-date-time,
 body.fullscreen-view .refresh-button,

src/components/Menubar/Menubar.tsx

@@ -4,6 +4,7 @@ import { Logout } from "@/features/User/oidcAuth";
 import logo from "@/static/header-logo.svg";
 import { getInitials, stringToGradient } from "@/utils/avatarUtils";
 import { getUserDisplayName } from "@/utils/userUtils";
+import { redirectTo } from "@/utils/navigation";
 import { CalendarApi } from "@fullcalendar/core";
 import {
   Avatar,
@@ -19,7 +20,8 @@ import {
   Select,
   Typography,
 } from "@linagora/twake-mui";
-import AppsIcon from "@mui/icons-material/Apps";
+import WidgetsOutlinedIcon from "@mui/icons-material/WidgetsOutlined";
+import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
 import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
 import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 import LogoutIcon from "@mui/icons-material/Logout";
@@ -139,7 +141,7 @@ export function Menubar({
   const handleLogoutClick = async () => {
     const logoutUrl = await Logout();
     sessionStorage.removeItem("tokenSet");
-    window.location.assign(logoutUrl.href);
+    redirectTo(logoutUrl.href);
     handleUserMenuClose();
   };
 
@@ -195,9 +197,9 @@ export function Menubar({
           </div>
           <div className="menu-items">
             <div className="current-date-time">
-              <Typography variant="h3" component="div">
+              <p>
                 {dateLabel}
-              </Typography>
+              </p>
             </div>
           </div>
         </div>
@@ -211,6 +213,7 @@ export function Menubar({
               onClick={onRefresh}
               aria-label={t("menubar.refresh")}
               title={t("menubar.refresh")}
+              sx={{ mr: 1 }}
             >
               <RefreshIcon />
             </IconButton>
@@ -226,7 +229,11 @@ export function Menubar({
                 onChange={(e) => handleViewChange(e.target.value)}
                 variant="outlined"
                 aria-label={t("menubar.viewSelector")}
-                sx={{ height: "43px" }}
+                sx={{
+                  borderRadius: "12px",
+                  marginLeft: 1,
+                  "& fieldset": { borderRadius: "12px" }
+                }}
               >
                 <MenuItem value="dayGridMonth">
                   {t("menubar.views.month")}
@@ -240,6 +247,19 @@ export function Menubar({
               </Select>
             </FormControl>
           </div>
+          <div className="menu-items">
+            <IconButton
+              component="a"
+              href="https://twake.app/support/"
+              target="_blank"
+              rel="noopener noreferrer"
+              style={{ marginRight: 8 }}
+              aria-label={t("menubar.help")}
+              title={t("menubar.help")}
+            >
+              <HelpOutlineIcon />
+            </IconButton>
+          </div>
           <div className="menu-items">
             {applist.length > 0 && (
               <IconButton
@@ -248,7 +268,7 @@ export function Menubar({
                 aria-label={t("menubar.apps")}
                 title={t("menubar.apps")}
               >
-                <AppsIcon />
+                <WidgetsOutlinedIcon />
               </IconButton>
             )}
           </div>

src/features/Settings/SettingsPage.styl

@@ -1,7 +1,7 @@
 .main-layout.settings-layout
   display flex
   flex-direction row
-  height calc(100vh - 90px)
+  height calc(100vh - 70px)
   padding 0 10px 10px 0;
 
 .settings-sidebar

src/utils/navigation.ts

@@ -0,0 +1,3 @@
+export function redirectTo(url: string): void {
+  window.location.assign(url);
+}