From 5c3c0fce79374e1068ef30e1ada6bb05d398ea03 Mon Sep 17 00:00:00 2001
From: Quang Son Le <qle@bluesquarehub.com>
Date: Fri, 6 Dec 2024 11:30:19 +0100
Subject: [PATCH] POLIO-1784: restyle OffLineLangSwitch

---
 .../domains/home/components/LangSwitch.tsx    | 43 ++++++++++++-------
 1 file changed, 27 insertions(+), 16 deletions(-)

diff --git a/hat/assets/js/apps/Iaso/domains/home/components/LangSwitch.tsx b/hat/assets/js/apps/Iaso/domains/home/components/LangSwitch.tsx
index cc3597bc31..6eaa448bf1 100644
--- a/hat/assets/js/apps/Iaso/domains/home/components/LangSwitch.tsx
+++ b/hat/assets/js/apps/Iaso/domains/home/components/LangSwitch.tsx
@@ -1,4 +1,4 @@
-import { Box } from '@mui/material';
+import { Box, Button } from '@mui/material';
 import { makeStyles } from '@mui/styles';
 import classNames from 'classnames';
 import React, { FunctionComponent, useCallback } from 'react';
@@ -17,6 +17,14 @@ const useStyles = makeStyles(theme => ({
     languageSwitchActive: {
         color: theme.palette.primary.main,
     },
+    languageSwitchButton: {
+        backgroundColor: theme.palette.success.main,
+        color: 'white',
+        borderRadius: 0,
+        textTransform: 'none',
+        paddingLeft: theme.spacing(3),
+        paddingRight: theme.spacing(3),
+    },
 }));
 
 export const LangSwitch: FunctionComponent = () => {
@@ -56,9 +64,15 @@ export const LangSwitch: FunctionComponent = () => {
         </>
     );
 };
+
+// We don't need to translate as we show "English" in english etc
+const localeMap = {
+    fr: 'Français',
+    en: 'English',
+};
+
 export const OffLineLangSwitch: FunctionComponent = () => {
     const classes: Record<string, string> = useStyles();
-    const { locale: activeLocale } = useLocale();
     const { setLocale } = useLocale();
     const handleClick = useCallback(
         localeCode => {
@@ -68,21 +82,18 @@ export const OffLineLangSwitch: FunctionComponent = () => {
     );
     return (
         <>
-            {APP_LOCALES.map((locale, index) => (
-                <Box key={locale.code}>
-                    <Box
-                        className={classNames(
-                            classes.languageSwitch,
-                            locale.code === activeLocale &&
-                                classes.languageSwitchActive,
-                        )}
-                        onClick={() => handleClick(locale.code)}
-                    >
-                        {locale.code}
+            {APP_LOCALES.map((locale, index) => {
+                return (
+                    <Box key={locale.code} ml={index === 1 ? 2 : undefined}>
+                        <Button
+                            onClick={() => handleClick(locale.code)}
+                            className={classes.languageSwitchButton}
+                        >
+                            {localeMap[locale.code]}
+                        </Button>
                     </Box>
-                    {index + 1 !== APP_LOCALES.length && '-'}
-                </Box>
-            ))}
+                );
+            })}
         </>
     );
 };