Skip to content

Commit 6976079

Browse files
committed
PLU-311: [GSIB-2] reduce font size on gsib browser (#780)
## Problem Plumber looks zoomed in on GSIB ## Solution By using the method in the previous PR. We simulate a zoom out by setting the font-size to a smaller value than 16 (i.e. 14). This works seemingly well since we use `rem` as much as possible. # Conflicts: # packages/frontend/src/hooks/useGovtBrowser.ts
1 parent f08d7de commit 6976079

File tree

2 files changed

+25
-0
lines changed

2 files changed

+25
-0
lines changed

packages/frontend/src/components/ThemeProvider/index.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
} from '@mui/material/styles'
77
import { ThemeProvider as ChakraThemeProvider } from '@opengovsg/design-system-react'
88

9+
import { useDefaultZoom } from '@/hooks/useGovtBrowser'
910
import materialTheme from '@/styles/theme'
1011

1112
import { theme as chakraTheme } from '../../theme'
@@ -19,6 +20,7 @@ const ThemeProvider = ({
1920
}: ThemeProviderProps): React.ReactElement => {
2021
// This is a workaround to fix the issue of toasts appearing behind modal overlays
2122
const ref = useRef<HTMLDivElement>(null)
23+
useDefaultZoom()
2224
return (
2325
<ChakraThemeProvider
2426
theme={chakraTheme}
Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
/**
2+
* Use this hook to check if user is proxied via Menlo Security, if so, prepend the proxy url
3+
* When proxied, the window.name property is set to "JSON:{\"safe_rid\":\"4vnqcfBf\",\"mpa_id\":\"\",\"cid\":\"******\",
4+
* \"cluster_id\":\"od_menlo_2b\",\"tab_id\":1,\"protocol_domain\":\"xhr-asia-southeast1-menlo-view.menlosecurity.com\",
5+
* \"cluster_domain\":\"asia-southeast1-menlo-view.menlosecurity.com\",\"inspect_domain\":\"asia-southeast1-menlo-view.menlosecurity.com\"}"
6+
* We check for existence of "menlo-view.menlosecurity.com" in window.name to determine if we should prepend the proxy url
7+
*/
8+
9+
import { useEffect } from 'react'
10+
11+
const isGovtBrowser = window.name?.includes('menlo-view.menlosecurity.com')
12+
13+
const useDefaultZoom = () => {
14+
useEffect(() => {
15+
if (!isGovtBrowser) {
16+
return
17+
}
18+
// Set html font size to 14px
19+
document.documentElement.style.fontSize = '14px'
20+
}, [])
21+
}
22+
23+
export { useDefaultZoom }

0 commit comments

Comments
 (0)