wcz-layout 6.2.0 → 6.2.2

package/package.json

@@ -2,7 +2,7 @@
   "name": "wcz-layout",
   "license": "MIT",
   "author": "Dalibor Homola",
-  "version": "6.2.0",
+  "version": "6.2.2",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "exports": {

package/src/components/Layout.tsx

@@ -181,7 +181,7 @@ export const Layout: React.FC<LayoutProps> = ({ routes, colors, appVersion, user
                 </Box>
             </Box>
 
-            <DevelopmentBanner user={user} />
+            <DevelopmentBanner user={user} hasNavigationRoutes={hasNavigationRoutes} />
             {(isFetching || isMutating) && <LinearProgress sx={{ position: "fixed", top: { xs: 56, sm: 64 }, left: 0, right: 0 }} />}
         </ThemeProvider>
     );

package/src/components/layout/DevelopmentBanner.tsx

@@ -1,16 +1,18 @@
 import { Close } from "@mui/icons-material";
-import { Fade, Grid, IconButton, Paper, Typography } from "@mui/material";
+import { Fade, Grid2, IconButton, Paper, Typography } from "@mui/material";
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { User } from "../../models/User";
 import { environment } from "../../utils/Helpers";
 import { hasRole } from "../../utils/UserService";
+import { grey } from "@mui/material/colors";
 
 interface DevelopmentBannerProps {
     user: User;
+    hasNavigationRoutes: boolean;
 }
 
-export const DevelopmentBanner: React.FC<DevelopmentBannerProps> = ({ user }) => {
+export const DevelopmentBanner: React.FC<DevelopmentBannerProps> = ({ user, hasNavigationRoutes }) => {
     const { t } = useTranslation();
     const [bannerOpen, setBannerOpen] = useState<boolean>(false);
 
@@ -23,19 +25,29 @@ export const DevelopmentBanner: React.FC<DevelopmentBannerProps> = ({ user }) =>
 
     return (
         <Fade appear={false} in={bannerOpen}>
-            <Paper square variant="outlined" tabIndex={-1} sx={{ position: "fixed", bottom: 0, left: { xs: 0, sm: 67.7 }, right: 0, m: 0, p: 2, borderWidth: 0, borderTopWidth: 1 }} >
-                <Grid container justifyContent="space-between" alignItems="center">
-                    <Grid item xs>
+            <Paper square variant="outlined" tabIndex={-1} sx={theme => ({
+                position: "fixed",
+                bottom: 0,
+                left: { xs: 0, sm: hasNavigationRoutes ? 68.7 : 0 },
+                right: 0,
+                m: 0,
+                p: 2,
+                borderWidth: 0,
+                borderTopWidth: 1,
+                bgcolor: theme.palette.mode === "dark" ? grey[900] : grey[100]
+            })}>
+                <Grid2 container justifyContent="space-between" alignItems="center">
+                    <Grid2 size={10}>
                         <Typography fontWeight="bold">{t("Layout.DevelopmentDialogTitle")}</Typography>
                         <Typography variant="body2">{t("Layout.DevelopmentDialogContent")}</Typography>
-                    </Grid>
+                    </Grid2>
 
-                    <Grid item xs={2} sx={{ p: 1, textAlign: "right" }}>
+                    <Grid2 size={2} sx={{ p: 1, textAlign: "right" }}>
                         <IconButton size="small" onClick={closeBanner}>
                             <Close />
                         </IconButton>
-                    </Grid>
-                </Grid>
+                    </Grid2>
+                </Grid2>
             </Paper>
         </Fade>
     );

package/src/components/layout/TypographyWithIcon.tsx

@@ -1,8 +1,8 @@
 import { Stack, SxProps, Theme, Typography, TypographyProps } from "@mui/material";
 
 const stackSxProps = [
-    "margin", "marginTop", "marginRight", "marginBottom", "marginLeft", "m", "mt", "mr", "mb", "ml",
-    "padding", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "p", "pt", "pr", "pb", "pl",
+    "margin", "marginTop", "marginRight", "marginBottom", "marginLeft", "m", "mt", "mr", "mb", "ml", "mx", "my",
+    "padding", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft", "p", "pt", "pr", "pb", "pl", "px", "py",
     "flexGrow", "flexShrink", "flexBasis", "flexDirection", "alignItems", "justifyContent",
     "position", "zIndex", "top", "right", "bottom", "left",
     "gridGap", "gridColumnGap", "gridRowGap", "gridColumn", "gridRow", "gridAutoFlow",