Less aggressive language selection (#417)

* Less aggressive language selection * Update LocalizationChangePopup.tsx * Update LocalizationChangePopup.tsx * Add hrefs to header items Set opacity of bottom popup for locale change Fix header visualization on mozilla browsers * Update HeaderMenu.tsx * Update HeaderMenu.tsx * SSR on footer
StudentiUniMi · Jan 1, 2024 · 7a9ecc9 · 7a9ecc9
1 parent 61df465
commit 7a9ecc9
Show file tree

Hide file tree

Showing 6 changed files with 99 additions and 110 deletions.
diff --git a/components/Atoms/LocalizationChangeDialog.tsx b/components/Atoms/LocalizationChangeDialog.tsx
diff --git a/components/Atoms/LocalizationChangePopup.tsx b/components/Atoms/LocalizationChangePopup.tsx
@@ -0,0 +1,64 @@
+import { Text, useTheme, PrimaryButton, DefaultButton } from '@fluentui/react';
+import { 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.neutralLight,
+        borderTop: `1px solid ${theme.palette.neutralQuaternary}`,
+        padding: '20px 15px',
+        opacity: '92%'
+    };
+
+    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={semibold}>You don't speak Italian?</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;
diff --git a/components/Footer/Footer.tsx b/components/Footer/Footer.tsx
@@ -89,7 +89,7 @@ const Footer = () => {
 
     return (
         <>
-            {clientRender && <footer style={{ backgroundColor: appTheme.palette.neutralQuaternaryAlt, borderTop: '1px solid', borderColor: appTheme.palette.neutralLight }} className="pt-5 pb-5">
+            <footer style={{ backgroundColor: appTheme.palette.neutralQuaternaryAlt, borderTop: '1px solid', borderColor: appTheme.palette.neutralLight }} className="pt-5 pb-5">
                 <Container style={{ width: '100%', color: appTheme.palette.neutralSecondary }}>
 
                     <Row className="mb-4">
@@ -134,7 +134,7 @@ const Footer = () => {
                         </Col>
 
                         <Col xl={3} lg={2} md={3} sm={12} xs={12}>
-                            <div className="mb-2">
+                            { clientRender && <div className="mb-2">
                                 <Toggle
                                     label={locale?.settingsPanel.changeTheme}
                                     onText={locale?.settingsPanel.darkTheme}
@@ -143,9 +143,9 @@ const Footer = () => {
                                     onChange={() => changeTheme(theme)}
                                     theme={appTheme}
                                 />
-                            </div>
+                            </div> }
 
-                            <div className="mb-2 language-selector">
+                            { clientRender && <div className="mb-2 language-selector">
                                 <Label>{locale?.settingsPanel.selectLanguage}</Label>
                                 <Text
                                     variant="medium"
@@ -164,14 +164,14 @@ const Footer = () => {
                                 >
                                     ENG
                                 </Text>
-                            </div>
+                            </div> }
                         </Col>
 
                         <Col xl={3} lg={4} md={6} sm={12} xs={12}>
                             <div>
                                 <Text variant="medium" styles={semibold}>{locale?.settingsPanel.selectColor}</Text>
                             </div>
-                            <SwatchColorPicker selectedId={palette} columnCount={7} cellShape={'square'} colorCells={colorCells} onColorChanged={(id) => { changePalette(id!); }} />
+                            { clientRender && <SwatchColorPicker selectedId={palette} columnCount={7} cellShape={'square'} colorCells={colorCells} onColorChanged={(id) => { changePalette(id!); }} /> }
                         </Col>
 
                     </Row>
@@ -211,7 +211,6 @@ const Footer = () => {
 
                 </Container>
             </footer>
-            }
         </>
     );
 };

diff --git a/components/Header/HeaderMenu.tsx b/components/Header/HeaderMenu.tsx
@@ -21,6 +21,7 @@ const HeaderMenu = () => {
     var theme = useTheme();
     const locale = LocalizationService.strings();
     const router = useRouter();
+
     const { isPolicyAccepted, togglePolicyDialog } = useContext(GlobalContext);
     const [isOpen, { setTrue: openPanel, setFalse: dismissPanel }] = useBoolean(false);
 
@@ -43,7 +44,8 @@ const HeaderMenu = () => {
     const pivotStyles: Partial<IPivotStyles> = {
         root: { 
             color: theme.palette.neutralPrimary, 
-            fontSize: FontSizes.size24
+            fontSize: FontSizes.size24,
+            height: 44
         }
     };
 
@@ -93,7 +95,11 @@ const HeaderMenu = () => {
         dismissPanel();
     };
 
-    const dropdownOptions: IDropdownOption[] = Object.values(ItemsKeys).map(x => ({ key: x, text: texts.get(x)! }));
+    const getHref = (item: ItemsKeys) => {
+        return item;
+    };
+
+    const dropdownOptions: Array<IDropdownOption> = Object.values(ItemsKeys).map(x => ({ key: x, text: texts.get(x)! }));
 
     return (
         <div className="header-menu">
@@ -107,7 +113,14 @@ const HeaderMenu = () => {
                     theme={theme}
                     overflowBehavior={'menu'}
                 >
-                    {Object.values(ItemsKeys).map((x, _i) => <PivotItem headerText={texts.get(x)} itemKey={x} key={x} />)}
+                    {Object.values(ItemsKeys).map((x, _i) => ( 
+                        <PivotItem 
+                            headerButtonProps={{ href: x === "home" ? "/" : `/${getHref(x)}` }} 
+                            headerText={texts.get(x)} 
+                            itemKey={x} 
+                            key={x} 
+                        /> 
+                    ) )}
                 </Pivot>
             </div>
 
@@ -136,14 +149,15 @@ const HeaderMenu = () => {
 
                         <div className="mb-3">
                             {dropdownOptions.map((x, i) =>
-                                <div 
-                                    className="menu-item mb-2 pr-4 pl-4 pt-1 pb-2" 
-                                    onClick={() => handleDropdownValueChange(x)}
+                                <a 
+                                    href={`/${x.key === "home" ? "" : getHref(x.key as ItemsKeys)}`}
+                                    className="d-flex text-decoration-none menu-item mb-2 pr-4 pl-4 pt-1 pb-2" 
+                                    onClick={(e) => { preventDefault(e); handleDropdownValueChange(x) }}
                                     key={i}
                                     style={{ backgroundColor: (x.key === selectedKey) || (selectedKey as string === "" && x.key === "home") ? theme.palette.neutralLighter : 'none', borderRadius: 25 }}
                                 >
                                     <Text variant="xLarge">{x.text}</Text>
-                                </div>
+                                </a>
                             )}
                         </div>
 
@@ -155,7 +169,7 @@ const HeaderMenu = () => {
 
                         <div className="mb-3">
                             <div style={cardStyle}>
-                                <Link href={preventVisibleHref(isPolicyAccepted, "https://t.me/unimichat")} onClick={(e) => preventDefault(e, isPolicyAccepted) && togglePolicyDialog()} className="text-decoration-none">
+                                <Link href={preventVisibleHref(isPolicyAccepted, "https://t.me/unimichat")} onClick={(e: any) => preventDefault(e, isPolicyAccepted) && togglePolicyDialog()} className="text-decoration-none">
                                     <Text variant="medium" style={{ color: "#fcfcfc" }}>{locale?.sidebar.mainGroup} <Icon iconName="ChevronRightMed" style={{ fontSize: 10 }} /></Text>
                                 </Link>
                             </div>

diff --git a/pages/_app.tsx b/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';
 
 /**

diff --git a/styles/index.scss b/styles/index.scss
@@ -20,11 +20,6 @@ section {
   flex-grow: 1;
 }
 
-/* Fix the visualization bug on some ugly browsers like Mozilla Night Basalmici Version */
-span {
-  font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif !important;
-}
-
 h1,h2,h3,h4,h5,h6 {
   margin: 0;
   padding: 0;
@@ -329,6 +324,10 @@ svg {
   }
 }
 
+.ms-Pivot-overflowMenuButton {
+  top: -16px; // Fix issue on Fluent UI pivot component with hrefs
+}
+
 /* Fix SearchBox visualization for small height displays */
 @media only screen and (max-height: 900px) {
   #SuggestionContainer .ms-Callout-main {
@@ -430,6 +429,7 @@ footer .ms-Label {
   }
 }
 
+/* Chip shimmers */
 .chip-shimmer {
   position: relative;
   overflow: hidden;
@@ -462,4 +462,4 @@ footer .ms-Label {
       rgba(255, 255, 255, 0.2) 40%,
       transparent 60%,
       transparent 100%);
-}
+}