Less aggressive language selection

components/Atoms/LocalizationChangePopup.tsx

@@ -0,0 +1,67 @@
+import { Text, useTheme, PrimaryButton, DefaultButton } from '@fluentui/react';
+import { bold, semibold } from '../../services/Fonts';
+import { useState, useEffect, useContext, CSSProperties } from 'react';
+import { useCookies } from 'react-cookie';
+import { addDays } from 'services/Utils';
+import GlobalContext from 'services/GlobalContext';
+
+const LocalizationChangePopup = () => {
+    var theme = useTheme();
+    const [cookies, setCookie] = useCookies();
+    const date: Date = addDays(new Date(), 90);
+
+    const localizationPopup: CSSProperties = {
+        zIndex: 2,
+        position: 'fixed',
+        width: '100%',
+        bottom: 0,
+        gap: 20,
+        backgroundColor: theme.palette.white,
+        borderTop: `1px solid ${theme.palette.neutralQuaternary}`,
+        padding: '20px 15px'
+    };
+
+    const [isDialogOpen, setIsDialogOpen] = useState<boolean>(false);
+
+    const { changeLanguage } = useContext(GlobalContext);
+
+    const setEnglishLocale = () => { 
+        changeLanguage("en");
+        setIsDialogOpen(false);
+    };
+
+    useEffect(() => {
+        const acceptLanguage = window.navigator.languages[0] ?? navigator.language;
+
+        if (cookies.isFirstVisit === undefined && acceptLanguage !== "it") {
+            setIsDialogOpen(true);
+        }
+
+        setCookie("isFirstVisit", false, { path: "/", expires: date });
+    }, []);
+
+    return (
+        <>
+        { isDialogOpen &&
+            <div style={localizationPopup}>
+                <div className="d-flex flex-column justify-content-between" style={{ gap: 15 }}>
+                    <div className="d-flex flex-column" style={{ gap: 5 }}>
+                        <Text variant="large" block styles={bold}>You don't speak Italian?</Text>
+
+                        <Text variant="medium" styles={semibold} style={{ color: theme.palette.neutralPrimary }}>
+                            Looks like your browser is not set on italian. Would you like to switch to English language?
+                        </Text>
+                    </div>
+
+                    <div className="d-flex flex-row" style={{ gap: 15 }}>
+                        <DefaultButton onClick={() => setIsDialogOpen(false)} text="Rimani in italiano" style={{ padding: 18 }} />
+                        <PrimaryButton onClick={setEnglishLocale} text="Switch to english" style={{ padding: 18 }} />
+                    </div>
+                </div>
+            </div>
+        }
+        </>
+    );
+};
+
+export default LocalizationChangePopup;

pages/_app.tsx

@@ -17,7 +17,7 @@ import Head from 'next/head';
 import Header from "../components/Header/Header";
 import Footer from "../components/Footer/Footer";
 import PrivacyPolicyDialog from 'components/Atoms/PrivacyPolicyDialog';
-import LocalizationChangeDialog from 'components/Atoms/LocalizationChangeDialog';
+import LocalizationChangeDialog from 'components/Atoms/LocalizationChangePopup';
 import LocalizationService from 'services/LocalizationService';
 
 /**