feat: configurable global font size

Unleash · Jan 27, 2025 · 13a00ca · 13a00ca
1 parent 85ae6f3
commit 13a00ca
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 1 deletion.
diff --git a/frontend/src/component/App.tsx b/frontend/src/component/App.tsx
@@ -23,6 +23,7 @@ import { LicenseBanner } from './banners/internalBanners/LicenseBanner';
 import { Demo } from './demo/Demo';
 import { LoginRedirect } from './common/LoginRedirect/LoginRedirect';
 import { SecurityBanner } from './banners/internalBanners/SecurityBanner';
+import { useUiFlag } from 'hooks/useUiFlag';
 
 const StyledContainer = styled('div')(() => ({
     '& ul': {
@@ -33,6 +34,9 @@ const StyledContainer = styled('div')(() => ({
 export const App = () => {
     const { authDetails } = useAuthDetails();
     const { refetch: refetchUiConfig } = useUiConfig();
+    const uiGlobalFontSizeVariant = useUiFlag('uiGlobalFontSize');
+
+    console.log("uiGlobalFontSizeVariant: ", uiGlobalFontSizeVariant);
 
     const { user } = useAuthUser();
     const hasFetchedAuth = Boolean(authDetails || user);
@@ -43,6 +47,35 @@ export const App = () => {
         ? routes.filter((route) => !route.enterprise)
         : routes;
 
+    useEffect(() => {
+        let style: HTMLStyleElement | null = null;
+        if (!uiGlobalFontSizeVariant) return;
+
+        try {
+            // Create a new style element
+            style = document.createElement('style');
+            style.type = 'text/css';
+            style.innerHTML = `
+                html {
+                    font-size: ${uiGlobalFontSizeVariant?.payload?.value}px;
+                    height: 100%;
+                    overflow: auto;
+                    overflow-y: scroll;
+                }
+            `;
+            // Append the style element to the document head
+            document.head.appendChild(style);
+        } catch (err) {
+            console.error('Error setting global font size', err);
+        }
+
+        // Cleanup function to remove the style element when the component unmounts
+        return () => {
+            if (!style) return;
+            document.head.removeChild(style);
+        };
+    }, [uiGlobalFontSizeVariant]);
+
     useEffect(() => {
         if (hasFetchedAuth && Boolean(user?.id)) {
             refetchUiConfig();

diff --git a/frontend/src/interfaces/uiConfig.ts b/frontend/src/interfaces/uiConfig.ts
@@ -95,6 +95,7 @@ export type UiFlags = {
     lifecycleImprovements?: boolean;
     frontendHeaderRedesign?: boolean;
     dataUsageMultiMonthView?: boolean;
+    uiGlobalFontSize?: Variant;
 };
 
 export interface IVersionInfo {

diff --git a/src/lib/types/experimental.ts b/src/lib/types/experimental.ts
@@ -63,7 +63,8 @@ export type IFlagKey =
     | 'sortProjectRoles'
     | 'lifecycleImprovements'
     | 'frontendHeaderRedesign'
-    | 'dataUsageMultiMonthView';
+    | 'dataUsageMultiMonthView'
+    | 'uiGlobalFontSize';
 
 export type IFlags = Partial<{ [key in IFlagKey]: boolean | Variant }>;
 
@@ -304,6 +305,17 @@ const flags: IFlags = {
         process.env.UNLEASH_EXPERIMENTAL_DATA_USAGE_MULTI_MONTH_VIEW,
         false,
     ),
+    uiGlobalFontSize: {
+        name: 'uiGlobalFontSize',
+        enabled: parseEnvVarBoolean(
+            process.env.EXPERIMENTAL_UI_GLOBAL_FONT_SIZE_NAME,
+            false,
+        ),
+        payload: {
+            type: PayloadType.JSON,
+            value: '14',
+        },
+    },
 };
 
 export const defaultExperimentalOptions: IExperimentalOptions = {

diff --git a/src/server-dev.ts b/src/server-dev.ts
@@ -2,6 +2,7 @@ import { start } from './lib/server-impl';
 import { createConfig } from './lib/create-config';
 import { LogLevel } from './lib/logger';
 import { ApiTokenType } from './lib/types/models/api-token';
+import { PayloadType } from 'unleash-client';
 
 process.nextTick(async () => {
     try {