On Login/Signup, for mobile, only show language selector inside the drawer

Author: christiansaavedra

app/web/components/Navigation/Navigation.tsx

@@ -298,7 +298,14 @@ export default function Navigation() {
   };
 
   const drawerItems = (
-    <div>
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        justifyContent: "space-between",
+      }}
+    >
       <List>
         {(isAuthenticated ? loggedInDrawerMenu : loggedOutDrawerMenu)(
           t,
@@ -329,7 +336,11 @@ export default function Navigation() {
           </ListItem>
         ))}
       </List>
-    </div>
+
+      <Box sx={{ marginX: "auto", marginBottom: theme.spacing(2) }}>
+        <LanguagePickerSelect />
+      </Box>
+    </Box>
   );
 
   const loggedInMenuItems = useMemo(

app/web/features/auth/login/Login.tsx

@@ -1,16 +1,14 @@
-import { alpha, Box, styled, Typography, useMediaQuery } from "@mui/material";
+import { alpha, styled, Typography } from "@mui/material";
 import Alert from "components/Alert";
 import HtmlMeta from "components/HtmlMeta";
 import StyledLink from "components/StyledLink";
 import AntibotNote from "features/antibot/AntibotNote";
-import LanguagePickerSelect from "features/translate/LanguagePickerSelect";
 import { Trans, useTranslation } from "i18n";
 import { AUTH, GLOBAL, LANDING } from "i18n/namespaces";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 import CouchersTextLogo from "resources/CouchersTextLogo";
 import { dashboardRoute, signupRoute } from "routes";
-import { theme } from "theme";
 import stringOrFirstString from "utils/stringOrFirstString";
 
 import { useAuthContext } from "../AuthProvider";
@@ -43,7 +41,6 @@ export default function Login() {
   const error = authState.error;
 
   const router = useRouter();
-  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
   const from = stringOrFirstString(router.query.from) ?? dashboardRoute;
   const redirectTo = from === "/" || from === "%2F" ? dashboardRoute : from;
 
@@ -94,17 +91,6 @@ export default function Login() {
             <AntibotNote />
           </Typography>
         </StyledFormWrapper>
-        {isMobile && (
-          <Box
-            sx={{
-              display: "flex",
-              justifyContent: "center",
-              marginTop: theme.spacing(2),
-            }}
-          >
-            <LanguagePickerSelect />
-          </Box>
-        )}
       </StyledContent>
     </>
   );

app/web/features/auth/signup/Signup.tsx

@@ -5,7 +5,6 @@ import {
   Skeleton,
   styled,
   Typography,
-  useMediaQuery,
 } from "@mui/material";
 import { useQuery } from "@tanstack/react-query";
 import Alert from "components/Alert";
@@ -14,7 +13,6 @@ import CenteredSpinner from "components/CenteredSpinner/CenteredSpinner";
 import HtmlMeta from "components/HtmlMeta";
 import Redirect from "components/Redirect";
 import StyledLink from "components/StyledLink";
-import LanguagePickerSelect from "features/translate/LanguagePickerSelect";
 import { RpcError } from "grpc-web";
 import { Trans, useTranslation } from "i18n";
 import { AUTH, GLOBAL } from "i18n/namespaces";
@@ -45,7 +43,6 @@ const StyledFormWrapper = styled("div")(({ theme }) => ({
 export default function Signup() {
   const { t } = useTranslation([AUTH, GLOBAL]);
   const router = useRouter();
-  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
 
   const { authState, authActions } = useAuthContext();
   const authenticated = authState.authenticated;
@@ -194,17 +191,6 @@ export default function Signup() {
             </Trans>
           </Typography>
         </StyledFormWrapper>
-        {isMobile && (
-          <Box
-            sx={{
-              display: "flex",
-              justifyContent: "center",
-              marginTop: theme.spacing(2),
-            }}
-          >
-            <LanguagePickerSelect />
-          </Box>
-        )}
       </Container>
     </>
   );