diff --git a/frontend/src/assets/img/unleashHoliday.svg b/frontend/src/assets/img/unleashHoliday.svg
new file mode 100644
index 0000000000..bd2f5a4d03
--- /dev/null
+++ b/frontend/src/assets/img/unleashHoliday.svg
@@ -0,0 +1,33 @@
+
diff --git a/frontend/src/assets/img/unleashHolidayDark.svg b/frontend/src/assets/img/unleashHolidayDark.svg
new file mode 100644
index 0000000000..b5ec42e3ea
--- /dev/null
+++ b/frontend/src/assets/img/unleashHolidayDark.svg
@@ -0,0 +1,33 @@
+
diff --git a/frontend/src/component/layout/MainLayout/MainLayout.tsx b/frontend/src/component/layout/MainLayout/MainLayout.tsx
index 7d7f5b1578..89a19da569 100644
--- a/frontend/src/component/layout/MainLayout/MainLayout.tsx
+++ b/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(
const { isChangeRequestConfiguredInAnyEnv } = useChangeRequestsEnabled(
projectId || '',
);
+ const increaseUnleashWidth = useUiFlag('increaseUnleashWidth');
+
+ const StyledMainLayoutContent = increaseUnleashWidth
+ ? SpaciousMainLayoutContent
+ : MainLayoutContent;
return (
<>
@@ -102,13 +128,18 @@ export const MainLayout = forwardRef(
/>
}
/>
-
+
{children}
-
+
({
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 (
-
-
+
+
{
-
-
+
+
);
}
return (
-
-
+
+
+ }
+ elseShow={
+
+ }
+ />
}
lightmode={
-
+ }
+ elseShow={
+
+ }
+ />
}
/>
@@ -279,8 +336,8 @@ const Header: VFC = () => {
-
-
+
+
);
};
diff --git a/frontend/src/interfaces/uiConfig.ts b/frontend/src/interfaces/uiConfig.ts
index 94b520f40d..c2a282d257 100644
--- a/frontend/src/interfaces/uiConfig.ts
+++ b/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 {
diff --git a/src/lib/__snapshots__/create-config.test.ts.snap b/src/lib/__snapshots__/create-config.test.ts.snap
index 4830f6ebcd..18d5e5be5e 100644
--- a/src/lib/__snapshots__/create-config.test.ts.snap
+++ b/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,
diff --git a/src/lib/types/experimental.ts b/src/lib/types/experimental.ts
index ef7311829f..dd2e778eeb 100644
--- a/src/lib/types/experimental.ts
+++ b/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 = {
diff --git a/src/server-dev.ts b/src/server-dev.ts
index f41cbdb17d..81190f7db2 100644
--- a/src/server-dev.ts
+++ b/src/server-dev.ts
@@ -46,6 +46,8 @@ process.nextTick(async () => {
stripClientHeadersOn304: true,
newStrategyConfiguration: true,
stripHeadersOnAPI: true,
+ celebrateUnleash: true,
+ increaseUnleashWidth: true,
},
},
authentication: {