feat: increase unleash width (#5707)

This PR adds two feature flags:
* One is to add some holiday cheer to the unleash logo
* The other allows us to increase the width of unleash if the screen
allows it

<img width="1837" alt="Skjermbilde 2023-12-20 kl 16 18 16"
src="https://github.com/Unleash/unleash/assets/16081982/a25ccfb0-fd99-470f-8583-3ba9ef9186f9">

frontend/src/component/layout/MainLayout/MainLayout.tsx

@@ -15,6 +15,7 @@ import { useChangeRequestsEnabled } from 'hooks/useChangeRequestsEnabled';
 import { DraftBanner } from './DraftBanner/DraftBanner';
 import { ThemeMode } from 'component/common/ThemeMode/ThemeMode';
 import { Demo } from 'component/demo/Demo';
+import { useUiFlag } from 'hooks/useUiFlag';
 
 interface IMainLayoutProps {
     children: ReactNode;
@@ -53,6 +54,26 @@ const MainLayoutContent = styled(Grid)(({ theme }) => ({
     },
 }));
 
+const SpaciousMainLayoutContent = styled(Grid)(({ theme }) => ({
+    width: '100%',
+    maxWidth: '1500px',
+    margin: '0 auto',
+    paddingLeft: theme.spacing(2),
+    paddingRight: theme.spacing(2),
+    [theme.breakpoints.down('lg')]: {
+        maxWidth: '1250px',
+        paddingLeft: theme.spacing(1),
+        paddingRight: theme.spacing(1),
+    },
+    [theme.breakpoints.down(1024)]: {
+        marginLeft: 0,
+        marginRight: 0,
+    },
+    [theme.breakpoints.down('sm')]: {
+        minWidth: '100%',
+    },
+}));
+
 const StyledImg = styled('img')(() => ({
     display: 'block',
     position: 'fixed',
@@ -81,6 +102,11 @@ export const MainLayout = forwardRef<HTMLDivElement, IMainLayoutProps>(
         const { isChangeRequestConfiguredInAnyEnv } = useChangeRequestsEnabled(
             projectId || '',
         );
+        const increaseUnleashWidth = useUiFlag('increaseUnleashWidth');
+
+        const StyledMainLayoutContent = increaseUnleashWidth
+            ? SpaciousMainLayoutContent
+            : MainLayoutContent;
 
         return (
             <>
@@ -102,13 +128,18 @@ export const MainLayout = forwardRef<HTMLDivElement, IMainLayoutProps>(
                                         />
                                     }
                                 />
-                                <MainLayoutContent item xs={12} sm={12} my={2}>
+                                <StyledMainLayoutContent
+                                    item
+                                    xs={12}
+                                    sm={12}
+                                    my={2}
+                                >
                                     <MainLayoutContentContainer ref={ref}>
                                         <BreadcrumbNav />
                                         <Proclamation toast={uiConfig.toast} />
                                         {children}
                                     </MainLayoutContentContainer>
-                                </MainLayoutContent>
+                                </StyledMainLayoutContent>
                                 <ThemeMode
                                     darkmode={
                                         <StyledImg

frontend/src/component/menu/Header/Header.tsx

@@ -9,6 +9,7 @@ import {
     Tooltip,
     styled,
     Theme,
+    Box,
 } from '@mui/material';
 import MenuIcon from '@mui/icons-material/Menu';
 import SettingsIcon from '@mui/icons-material/Settings';
@@ -17,6 +18,8 @@ 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 { ReactComponent as CelebatoryUnleashLogoWhite } from 'assets/img/unleashHolidayDark.svg';
 
 import { DrawerMenu } from './DrawerMenu/DrawerMenu';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
@@ -45,6 +48,35 @@ const StyledHeader = styled(AppBar)(({ theme }) => ({
     zIndex: 300,
 }));
 
+const StyledSpaciousHeader = styled(AppBar)(({ theme }) => ({
+    backgroundColor: theme.palette.background.paper,
+    padding: theme.spacing(1),
+    boxShadow: 'none',
+    position: 'relative',
+    zIndex: 300,
+    maxWidth: '1580px',
+    [theme.breakpoints.down('lg')]: {
+        maxWidth: '1280px',
+        paddingLeft: theme.spacing(1),
+        paddingRight: theme.spacing(1),
+    },
+    [theme.breakpoints.down(1024)]: {
+        marginLeft: 0,
+        marginRight: 0,
+    },
+    [theme.breakpoints.down('sm')]: {
+        minWidth: '100%',
+    },
+    margin: '0 auto',
+}));
+
+const SpaciousStyledContainer = styled(Box)(() => ({
+    display: 'flex',
+    alignItems: 'center',
+    width: '100%',
+    '&&&': { padding: 0 },
+}));
+
 const StyledContainer = styled(Container)(() => ({
     display: 'flex',
     alignItems: 'center',
@@ -68,6 +100,8 @@ const StyledUnleashLogoWhite = styled(UnleashLogoWhite)({ width: '150px' });
 
 const StyledUnleashLogo = styled(UnleashLogo)({ width: '150px' });
 
+const StyledCelebatoryLogo = styled(CelebatoryUnleashLogo)({ width: '150px' });
+
 const StyledLinks = styled('div')(({ theme }) => ({
     display: 'flex',
     justifyContent: 'center',
@@ -131,6 +165,9 @@ const Header: VFC = () => {
     const onAdminClose = () => setAdminRef(null);
     const onConfigureClose = () => setConfigRef(null);
 
+    const increaseUnleashWidth = useUiFlag('increaseUnleashWidth');
+    const celebatoryUnleash = useUiFlag('celebrateUnleash');
+
     const routes = getRoutes();
     const adminRoutes = useAdminRoutes();
 
@@ -144,10 +181,18 @@ const Header: VFC = () => {
         adminRoutes,
     };
 
+    const HeaderComponent = increaseUnleashWidth
+        ? StyledSpaciousHeader
+        : StyledHeader;
+
+    const ContainerComponent = increaseUnleashWidth
+        ? SpaciousStyledContainer
+        : StyledContainer;
+
     if (smallScreen) {
         return (
-            <StyledHeader position='static'>
-                <StyledContainer>
+            <HeaderComponent position='static'>
+                <ContainerComponent>
                     <Tooltip title='Menu' arrow>
                         <IconButton
                             sx={{
@@ -170,21 +215,33 @@ const Header: VFC = () => {
                     <StyledUserContainer>
                         <UserProfile />
                     </StyledUserContainer>
-                </StyledContainer>
-            </StyledHeader>
+                </ContainerComponent>
+            </HeaderComponent>
         );
     }
 
     return (
-        <StyledHeader position='static'>
-            <StyledContainer>
+        <HeaderComponent position='static'>
+            <ContainerComponent>
                 <StyledLink to='/' sx={flexRow} aria-label='Home'>
                     <ThemeMode
                         darkmode={
-                            <StyledUnleashLogoWhite aria-label='Unleash logo' />
+                            <ConditionallyRender
+                                condition={celebatoryUnleash}
+                                show={<CelebatoryUnleashLogoWhite />}
+                                elseShow={
+                                    <StyledUnleashLogoWhite aria-label='Unleash logo' />
+                                }
+                            />
                         }
                         lightmode={
-                            <StyledUnleashLogo aria-label='Unleash logo' />
+                            <ConditionallyRender
+                                condition={celebatoryUnleash}
+                                show={<StyledCelebatoryLogo />}
+                                elseShow={
+                                    <StyledUnleashLogo aria-label='Unleash logo' />
+                                }
+                            />
                         }
                     />
                 </StyledLink>
@@ -279,8 +336,8 @@ const Header: VFC = () => {
                         <UserProfile />
                     </StyledUserContainer>
                 </StyledNav>
-            </StyledContainer>
-        </StyledHeader>
+            </ContainerComponent>
+        </HeaderComponent>
     );
 };
 

frontend/src/interfaces/uiConfig.ts

@@ -68,6 +68,8 @@ export type UiFlags = {
     featureSearchFrontend?: boolean;
     newStrategyConfiguration?: boolean;
     incomingWebhooks?: boolean;
+    celebrateUnleash?: boolean;
+    increaseUnleashWidth?: boolean;
 };
 
 export interface IVersionInfo {

src/lib/__snapshots__/create-config.test.ts.snap

@@ -73,6 +73,7 @@ exports[`should create default config 1`] = `
     "experiments": {
       "anonymiseEventLog": false,
       "caseInsensitiveInOperators": false,
+      "celebrateUnleash": false,
       "customRootRolesKillSwitch": false,
       "demo": false,
       "detectSegmentUsageInChangeRequests": false,
@@ -87,6 +88,7 @@ exports[`should create default config 1`] = `
       "filterInvalidClientMetrics": false,
       "googleAuthEnabled": false,
       "incomingWebhooks": false,
+      "increaseUnleashWidth": false,
       "maintenanceMode": false,
       "messageBanner": {
         "enabled": false,

src/lib/types/experimental.ts

@@ -32,7 +32,9 @@ export type IFlagKey =
     | 'stripClientHeadersOn304'
     | 'newStrategyConfiguration'
     | 'stripHeadersOnAPI'
-    | 'incomingWebhooks';
+    | 'incomingWebhooks'
+    | 'celebrateUnleash'
+    | 'increaseUnleashWidth';
 
 export type IFlags = Partial<{ [key in IFlagKey]: boolean | Variant }>;
 
@@ -146,6 +148,14 @@ const flags: IFlags = {
         process.env.UNLEASH_EXPERIMENTAL_INCOMING_WEBHOOKS,
         false,
     ),
+    celebrateUnleash: parseEnvVarBoolean(
+        process.env.UNLEASH_EXPERIMENTAL_CELEBRATE_UNLEASH,
+        false,
+    ),
+    increaseUnleashWidth: parseEnvVarBoolean(
+        process.env.UNLEASH_EXPERIMENTAL_INCREASE_UNLEASH_WIDTH,
+        false,
+    ),
 };
 
 export const defaultExperimentalOptions: IExperimentalOptions = {