chore: remove text resize

frontend/src/features/admin-form/preview/PreviewFormPage.tsx

@@ -1,4 +1,3 @@
-import { useEffect, useState } from 'react'
 import { useParams } from 'react-router-dom'
 import { Flex } from '@chakra-ui/react'
 
@@ -14,38 +13,14 @@ import { FormFooter } from '~features/public-form/components/FormFooter'
 import FormInstructions from '~features/public-form/components/FormInstructions'
 import { PublicFormLogo } from '~features/public-form/components/FormLogo'
 import FormStartPage from '~features/public-form/components/FormStartPage'
+import LanguageControl from '~features/public-form/components/LanguageControl'
 import { PublicFormWrapper } from '~features/public-form/components/PublicFormWrapper'
-import ZoomControl from '~features/public-form/components/ZoomControl'
 
 import { PreviewFormBannerContainer } from '../common/components/PreviewFormBanner'
 
 import { PreviewFormProvider } from './PreviewFormProvider'
 
 export const PreviewFormPage = (): JSX.Element => {
-  const [rootFontSize, setRootFontSize] = useState('16px')
-
-  const setDefaultSize = () => {
-    setRootFontSize('16px')
-  }
-
-  const setLargeSize = () => {
-    setRootFontSize('18px')
-  }
-
-  const setLargestSize = () => {
-    setRootFontSize('24px')
-  }
-
-  useEffect(() => {
-    const root = document.documentElement
-    root.style.setProperty('font-size', rootFontSize)
-
-    // need to reset on unmount
-    return () => {
-      root.style.removeProperty('font-size')
-    }
-  }, [rootFontSize])
-
   const { formId } = useParams()
   if (!formId) throw new Error('No formId provided')
 
@@ -57,11 +32,7 @@ export const PreviewFormPage = (): JSX.Element => {
         <FormSectionsProvider>
           <PublicFormLogo />
           <FormStartPage />
-          <ZoomControl
-            setDefaultSize={setDefaultSize}
-            setLargeSize={setLargeSize}
-            setLargestSize={setLargestSize}
-          />
+          <LanguageControl />
           <PublicFormWrapper>
             <FormInstructions />
             <FormFields />

frontend/src/features/public-form/PublicFormPage.tsx

@@ -1,4 +1,3 @@
-import { useEffect, useState } from 'react'
 import { useParams } from 'react-router-dom'
 import { Flex } from '@chakra-ui/react'
 
@@ -13,35 +12,12 @@ import FormInstructions from './components/FormInstructions'
 import FormIssueFeedback from './components/FormIssueFeedback'
 import { PublicFormLogo } from './components/FormLogo'
 import FormStartPage from './components/FormStartPage'
+import LanguageControl from './components/LanguageControl'
 import { PublicFormWrapper } from './components/PublicFormWrapper'
-import ZoomControl from './components/ZoomControl'
 import { PublicFormProvider } from './PublicFormProvider'
 
 export const PublicFormPage = (): JSX.Element => {
   const { formId, submissionId } = useParams()
-  const [rootFontSize, setRootFontSize] = useState('16px')
-
-  const setDefaultSize = () => {
-    setRootFontSize('16px')
-  }
-
-  const setLargeSize = () => {
-    setRootFontSize('18px')
-  }
-
-  const setLargestSize = () => {
-    setRootFontSize('24px')
-  }
-
-  useEffect(() => {
-    const root = document.documentElement
-    root.style.setProperty('font-size', rootFontSize)
-
-    // need to reset on unmount
-    return () => {
-      root.style.removeProperty('font-size')
-    }
-  }, [rootFontSize])
 
   if (!formId) throw new Error('No formId provided')
 
@@ -59,11 +35,7 @@ export const PublicFormPage = (): JSX.Element => {
           <FormBanner />
           <PublicFormLogo />
           <FormStartPage />
-          <ZoomControl
-            setDefaultSize={setDefaultSize}
-            setLargeSize={setLargeSize}
-            setLargestSize={setLargestSize}
-          />
+          <LanguageControl />
           <PublicFormWrapper>
             <FormInstructions />
             <FormFields />

frontend/src/features/public-form/components/LanguageControl/LanguageControl.tsx

@@ -0,0 +1,101 @@
+import { BiChevronDown } from 'react-icons/bi'
+import {
+  Box,
+  Button,
+  Flex,
+  HStack,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  Text,
+} from '@chakra-ui/react'
+
+import { Language } from '~shared/types'
+
+import { usePublicFormContext } from '~features/public-form/PublicFormContext'
+
+import { useBgColor } from '../PublicFormWrapper'
+
+type LanguageListType = {
+  language: Language
+  title: string
+}
+
+const LANGUAGES: LanguageListType[] = [
+  { language: Language.ENGLISH, title: 'English' },
+  { language: Language.CHINESE, title: '中文' },
+  { language: Language.MALAY, title: 'Melayu' },
+  { language: Language.TAMIL, title: 'தமிழ்' },
+]
+
+export const LanguageControl = (): JSX.Element => {
+  const { form, publicFormLanguage, setPublicFormLanguage } =
+    usePublicFormContext()
+
+  const availableLanguages = new Set(form?.supportedLanguages ?? [])
+
+  const languagesList = LANGUAGES.filter((language) =>
+    availableLanguages.has(language.language),
+  )
+
+  // English language is always supported. Hence if form supports multi-lang
+  // and there is more than one supported language available, show the
+  // language dropdown.
+  const shouldShowLanguageDropdown =
+    form?.hasMultiLang && availableLanguages.size > 1
+
+  const bgColour = useBgColor({
+    colorTheme: form?.startPage.colorTheme,
+  })
+
+  const handleLanguageChange = (language: string) => {
+    if (setPublicFormLanguage) {
+      setPublicFormLanguage(language as Language)
+    }
+  }
+
+  const selectedLanguage = LANGUAGES.find(
+    (language) => language.language === publicFormLanguage,
+  )?.title
+
+  return (
+    <Flex
+      background={bgColour}
+      zIndex={10}
+      px={{ base: '1.5rem', md: 0 }}
+      justifyContent={{ base: 'start', md: 'center' }}
+    >
+      <HStack mt="-32px" bg="white" borderRadius="4px" shadow="md">
+        {shouldShowLanguageDropdown && (
+          <Menu variant="clear">
+            <MenuButton
+              as={Button}
+              rightIcon={<BiChevronDown />}
+              variant="clear"
+              color="secondary.500"
+            >
+              {selectedLanguage}
+            </MenuButton>
+            <MenuList>
+              {languagesList.map((language) => {
+                return (
+                  <MenuItem
+                    onClick={() => {
+                      handleLanguageChange(language.language)
+                    }}
+                    px={4}
+                    h={12}
+                    w="140px"
+                  >
+                    {language.title}
+                  </MenuItem>
+                )
+              })}
+            </MenuList>
+          </Menu>
+        )}
+      </HStack>
+    </Flex>
+  )
+}

frontend/src/features/public-form/components/LanguageControl/index.ts

@@ -0,0 +1 @@
+export { LanguageControl as default } from './LanguageControl'