[#549] filler for small screens (#606)

* [#549] set max-witdh for filler to 925px

src/App.tsx

@@ -1,5 +1,5 @@
 import { TwakeMuiThemeProvider } from "@linagora/twake-mui";
-import { Suspense, useEffect } from "react";
+import { Suspense, useEffect, useState } from "react";
 import { Route, Routes } from "react-router-dom";
 import { push } from "redux-first-history";
 import { HistoryRouter as Router } from "redux-first-history/rr6";
@@ -13,6 +13,7 @@ import { Loading } from "./components/Loading/Loading";
 import { AVAILABLE_LANGUAGES } from "./features/Settings/constants";
 import HandleLogin from "./features/User/HandleLogin";
 import { CallbackResume } from "./features/User/LoginCallback";
+import { ScreenTooSmall } from "./ScreenTooSmall";
 import { WebSocketGate } from "./websocket/WebSocketGate";
 
 import {
@@ -62,6 +63,20 @@ function App() {
     }
   }, [error, dispatch]);
 
+  const SMALL_SCREEN_QUERY = "(max-width: 925px)";
+  const [isTooSmall, setIsTooSmall] = useState(
+    () => window.matchMedia(SMALL_SCREEN_QUERY).matches
+  );
+
+  useEffect(() => {
+    const mediaQuery = window.matchMedia(SMALL_SCREEN_QUERY);
+    const onChange = (event: MediaQueryListEvent) =>
+      setIsTooSmall(event.matches);
+    setIsTooSmall(mediaQuery.matches);
+    mediaQuery.addEventListener("change", onChange);
+    return () => mediaQuery.removeEventListener("change", onChange);
+  }, []);
+
   return (
     <TwakeMuiThemeProvider>
       <I18n
@@ -69,19 +84,25 @@ function App() {
         lang={lang}
         locales={dateLocales}
       >
-        <Suspense fallback={<Loading />}>
+        {isTooSmall ? (
-          <WebSocketGate />
+          <ScreenTooSmall />
-          <Router history={history}>
+        ) : (
-            <Routes>
+          <>
-              <Route path="/" element={<HandleLogin />} />
+            <Suspense fallback={<Loading />}>
-              <Route path="/calendar" element={<CalendarLayout />} />
+              <WebSocketGate />
-              <Route path="/callback" element={<CallbackResume />} />
+              <Router history={history}>
-              <Route path="/error" element={<ErrorPage />} />
+                <Routes>
-            </Routes>
+                  <Route path="/" element={<HandleLogin />} />
-          </Router>
+                  <Route path="/calendar" element={<CalendarLayout />} />
-          <ErrorSnackbar error={error} type="user" />
+                  <Route path="/callback" element={<CallbackResume />} />
-        </Suspense>
+                  <Route path="/error" element={<ErrorPage />} />
-        {appLoading && <Loading />}
+                </Routes>
+              </Router>
+              <ErrorSnackbar error={error} type="user" />
+            </Suspense>
+            {appLoading && <Loading />}
+          </>
+        )}
       </I18n>
     </TwakeMuiThemeProvider>
   );

src/ScreenTooSmall.tsx

@@ -0,0 +1,32 @@
+import calendarImage from "@/static/images/calendar.svg";
+import { Box, Typography } from "@linagora/twake-mui";
+import { useI18n } from "twake-i18n";
+
+export function ScreenTooSmall() {
+  const { t } = useI18n();
+  return (
+    <Box
+      sx={{
+        position: "fixed",
+        inset: 0,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        textAlign: "center",
+        gap: 2,
+      }}
+    >
+      <img src={calendarImage} style={{ width: 80, height: 80 }} alt="logo" />
+
+      <Typography variant="h6">{t("mobile.comingSoon.title")}</Typography>
+      <Typography
+        variant="caption"
+        color="text.secondary"
+        sx={{ maxWidth: "264px" }}
+      >
+        {t("mobile.comingSoon.subtitle")}
+      </Typography>
+    </Box>
+  );
+}

src/locales/en.json

@@ -331,5 +331,11 @@
       "10": "November",
       "11": "December"
     }
+  },
+  "mobile": {
+    "comingSoon": {
+      "subtitle": "Please open Twake Calendar on a desktop to enjoy all features. A fully optimized mobile version is coming soon.",
+      "title": "Mobile version coming soon"
+    }
   }
 }

src/locales/fr.json

@@ -332,5 +332,11 @@
       "10": "Novembre",
       "11": "Décembre"
     }
+  },
+  "mobile": {
+    "comingSoon": {
+      "subtitle": "Veuillez ouvrir Twake Calendar sur un ordinateur pour profiter de toutes les fonctionnalités. Une version mobile optimisée arrive bientôt.",
+      "title": "Version mobile bientôt disponible"
+    }
   }
 }

src/locales/ru.json

@@ -332,5 +332,11 @@
       "10": "Ноябрь",
       "11": "Декабрь"
     }
+  },
+  "mobile": {
+    "comingSoon": {
+      "subtitle": "Пожалуйста, откройте Twake Calendar на компьютере, чтобы воспользоваться всеми функциями. Полностью оптимизированная мобильная версия скоро появится.",
+      "title": "Мобильная версия скоро будет доступна"
+    }
   }
 }

src/locales/vi.json

@@ -330,5 +330,11 @@
       "10": "Tháng 11",
       "11": "Tháng 12"
     }
+  },
+  "mobile": {
+    "comingSoon": {
+      "subtitle": "Vui lòng mở Twake Calendar trên máy tính để sử dụng đầy đủ tính năng. Phiên bản di động được tối ưu hóa hoàn toàn sẽ sớm ra mắt.",
+      "title": "Phiên bản di động sắp ra mắt"
+    }
   }
 }