diff --git a/app/web/.storybook/main.js b/app/web/.storybook/main.js index 7e5bca283c..da120f594d 100644 --- a/app/web/.storybook/main.js +++ b/app/web/.storybook/main.js @@ -1,3 +1,6 @@ +const path = require("path"); +const toPath = (filePath) => path.join(process.cwd(), filePath); + module.exports = { core: { builder: "webpack5", @@ -13,11 +16,21 @@ module.exports = { "../stories/serviceMocks.ts" ); config.resolve.alias["fs"] = require.resolve("./fsMock.js"); + config.resolve.alias["@emotion/core"] = toPath( + "node_modules/@emotion/react" + ); + config.resolve.alias["emotion-theming"] = toPath( + "node_modules/@emotion/react" + ); config.resolve.modules = [".", ...(config.resolve.modules || [])]; - console.log('⚠️ Note: filtering out CaseSensitivePathsPlugin to avoid issues with libraries that use import paths with wrong case'); + console.log( + "⚠️ Note: filtering out CaseSensitivePathsPlugin to avoid issues with libraries that use import paths with wrong case" + ); // @see https://github.com/Urthen/case-sensitive-paths-webpack-plugin - config.plugins = config.plugins.filter((plugin) => plugin.constructor.name !== 'CaseSensitivePathsPlugin') + config.plugins = config.plugins.filter( + (plugin) => plugin.constructor.name !== "CaseSensitivePathsPlugin" + ); return config; }, diff --git a/app/web/.storybook/preview.js b/app/web/.storybook/preview.js index e80514dd58..ecb7c7f058 100644 --- a/app/web/.storybook/preview.js +++ b/app/web/.storybook/preview.js @@ -1,5 +1,10 @@ -import { ThemeProvider } from "@material-ui/core"; +import { + ThemeProvider, + StyledEngineProvider, + createTheme, +} from "@mui/material/styles"; import { QueryClient, QueryClientProvider } from "react-query"; +import { ThemeProvider as Emotion10ThemeProvider } from "emotion-theming"; import { theme } from "../theme"; import { AuthContext } from "../features/auth/AuthProvider"; @@ -8,6 +13,8 @@ import "./i18n"; import "./reset.css"; import { Suspense } from "react"; +const defaultTheme = createTheme(); + export const parameters = { actions: { argTypesRegex: "^on[A-Z].*" }, options: { @@ -29,11 +36,15 @@ export const decorators = [ - - - - - + + + + + + + + + ); diff --git a/app/web/components/Alert.tsx b/app/web/components/Alert.tsx index 9f4d2076c7..99948df216 100644 --- a/app/web/components/Alert.tsx +++ b/app/web/components/Alert.tsx @@ -1,7 +1,4 @@ -import { - Alert as MuiAlert, - AlertProps as MuiAlertProps, -} from "@material-ui/lab/"; +import { Alert as MuiAlert, AlertProps as MuiAlertProps } from "@mui/material"; import { grpcErrorStrings, ObscureGrpcErrorMessages } from "appConstants"; import classNames from "classnames"; import React from "react"; diff --git a/app/web/components/AppRoute.tsx b/app/web/components/AppRoute.tsx index 87b71c17d9..d18021f566 100644 --- a/app/web/components/AppRoute.tsx +++ b/app/web/components/AppRoute.tsx @@ -1,5 +1,5 @@ -import { Container } from "@material-ui/core"; -import classNames from "classnames"; +import { Container } from "@mui/material"; +import { styled } from "@mui/material/styles"; import CircularProgress from "components/CircularProgress"; import CookieBanner from "components/CookieBanner"; import ErrorBoundary from "components/ErrorBoundary"; @@ -9,56 +9,33 @@ import { useRouter } from "next/router"; import { useIsNativeEmbed } from "platform/nativeLink"; import { ReactNode, useEffect, useState } from "react"; import { jailRoute, loginRoute } from "routes"; -import makeStyles from "utils/makeStyles"; +import { theme } from "theme"; import Navigation from "./Navigation"; -export const useAppRouteStyles = makeStyles((theme) => ({ - fullscreenContainer: { - margin: "0 auto", - padding: 0, - }, - nonFullScreenStyles: { - height: "100%", - }, - standardContainer: { - paddingLeft: theme.spacing(2), - paddingRight: theme.spacing(2), - paddingBottom: theme.spacing(2), - flex: 1, - }, - fullWidthContainer: { - margin: "0 auto", - paddingLeft: 0, - paddingRight: 0, - }, - nativeEmbedContainer: { - margin: "0 auto", - padding: 0, - }, - loader: { - //minimal-effort reduction of layout shifting - minHeight: "50vh", - display: "flex", - justifyContent: "center", - alignItems: "center", - marginBlockStart: theme.spacing(6), - }, - "@global html": { +const StyledLoader = styled("div")(({ theme }) => ({ + minHeight: "50vh", + display: "flex", + justifyContent: "center", + alignItems: "center", + marginBlockStart: theme.spacing(6), +})); + +const GlobalStyles = styled("div")(({ theme }) => ({ + html: { scrollPaddingTop: `calc(${theme.shape.navPaddingXs} + ${theme.spacing(2)})`, height: "100%", - }, - [theme.breakpoints.up("sm")]: { - "@global html": { + + [theme.breakpoints.up("sm")]: { scrollPaddingTop: `calc(${theme.shape.navPaddingSmUp} + ${theme.spacing( 2 )})`, }, }, - "@global body": { + body: { height: "100%", }, - "@global #__next": { + "#__next": { display: "flex", flexDirection: "column", minHeight: "100%", @@ -78,7 +55,6 @@ export default function AppRoute({ noFooter = false, variant = "standard", }: AppRouteProps) { - const classes = useAppRouteStyles(); const router = useRouter(); const { authState, authActions } = useAuthContext(); const isAuthenticated = authState.authenticated; @@ -99,36 +75,50 @@ export default function AppRoute({ if (isAuthenticated && isJailed && router.pathname !== jailRoute) { router.push(jailRoute); } - }); + }, [isAuthenticated, isJailed, isPrivate, authActions, router]); + + const containerSx = { + ...(variant !== "full-screen" && { height: "100%" }), + ...(variant === "standard" && { + paddingLeft: theme.spacing(2), + paddingRight: theme.spacing(2), + paddingBottom: theme.spacing(2), + flex: 1, + }), + ...(variant === "full-width" && { + margin: "0 auto", + paddingLeft: 0, + paddingRight: 0, + }), + ...(isNativeEmbed && { + margin: "0 auto", + padding: 0, + }), + }; return ( {isPrivate && (!isMounted || !isAuthenticated) ? ( -
+ -
+ ) : ( <> + {!isNativeEmbed && } {/* Temporary container injected for marketing to test dynamic "announcements". * Find a better spot to componentise this code once plan is more finalised with this */}
- {/* Have to wrap this in a fragment because of https://github.com/mui-org/material-ui/issues/21711 */} - <>{children} + {children} {!noFooter && !isNativeEmbed &&