diff --git a/frontend/src/component/menu/Header/Header.tsx b/frontend/src/component/menu/Header/Header.tsx index 9157d6c7bf..ff164629ba 100644 --- a/frontend/src/component/menu/Header/Header.tsx +++ b/frontend/src/component/menu/Header/Header.tsx @@ -1,6 +1,6 @@ import { useState } from 'react'; import useMediaQuery from '@mui/material/useMediaQuery'; -import { useTheme } from '@mui/material/styles'; +import { type Theme, useTheme } from '@mui/material/styles'; import { Link } from 'react-router-dom'; import { AppBar, @@ -16,7 +16,6 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit import MenuBookIcon from '@mui/icons-material/MenuBook'; import { ReactComponent as UnleashLogo } from 'assets/img/logoDarkWithText.svg'; import { ReactComponent as UnleashLogoWhite } from 'assets/img/logoWithWhiteText.svg'; -import { ReactComponent as CelebatoryUnleashLogo } from 'assets/img/unleashHoliday.svg'; import { DrawerMenu } from './DrawerMenu/DrawerMenu'; import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig'; @@ -28,6 +27,10 @@ import { Notifications } from 'component/common/Notifications/Notifications'; import InviteLinkButton from './InviteLink/InviteLinkButton/InviteLinkButton'; import { useUiFlag } from 'hooks/useUiFlag'; import { CommandBar } from 'component/commandBar/CommandBar'; +import { ThemeMode } from 'component/common/ThemeMode/ThemeMode'; +import { ReactComponent as CelebratoryUnleashLogo } from 'assets/img/unleashHoliday.svg'; +import { ReactComponent as CelebratoryUnleashLogoWhite } from 'assets/img/unleashHolidayDark.svg'; +import { useNewAdminMenu } from 'hooks/useNewAdminMenu'; const HeaderComponent = styled(AppBar)(({ theme }) => ({ backgroundColor: theme.palette.background.application, @@ -68,11 +71,13 @@ const StyledNav = styled('nav')({ flexGrow: 1, }); -const StyledUnleashLogoWhite = styled(UnleashLogoWhite)({ width: '150px' }); +const StyledCelebratoryLogo = styled(CelebratoryUnleashLogo)({ + height: '50px', +}); -const StyledUnleashLogo = styled(UnleashLogo)({ width: '150px' }); +const StyledUnleashLogoWhite = styled(UnleashLogoWhite)({ height: '50px' }); -const StyledCelebatoryLogo = styled(CelebatoryUnleashLogo)({ width: '150px' }); +const StyledUnleashLogo = styled(UnleashLogo)({ height: '50px' }); const StyledLink = styled(Link)(({ theme }) => focusable(theme)); @@ -99,7 +104,12 @@ const Header = () => { const smallScreen = useMediaQuery(theme.breakpoints.down('lg')); const [openDrawer, setOpenDrawer] = useState(false); const toggleDrawer = () => setOpenDrawer((prev) => !prev); - const celebatoryUnleash = useUiFlag('celebrateUnleash'); + const celebratoryUnleash = useUiFlag('celebrateUnleash'); + const headerLogo = (theme: Theme) => ({ + height: '50px', + marginLeft: theme.spacing(1.5), + }); + const adminMenu = useNewAdminMenu(); if (smallScreen) { return ( @@ -131,6 +141,40 @@ const Header = () => { + + + } + elseShow={ + + } + /> + } + lightmode={ + } + elseShow={ + + } + /> + } + /> + + } + /> +