diff --git a/package.json b/package.json
index c5605d5d..0e09566b 100644
--- a/package.json
+++ b/package.json
@@ -42,7 +42,7 @@
"react-beautiful-dnd": "^13.0.0",
"react-color": "^2.17.3",
"react-data-grid": "7.0.0-canary.30",
- "react-div-100vh": "^0.3.8",
+ "react-div-100vh": "^0.6.0",
"react-dnd": "^11.1.3",
"react-dnd-html5-backend": "^11.1.3",
"react-dom": "^17.0.2",
diff --git a/src/components/Auth/AuthLayout.tsx b/src/components/Auth/AuthLayout.tsx
index 90b669d3..fb2cb371 100644
--- a/src/components/Auth/AuthLayout.tsx
+++ b/src/components/Auth/AuthLayout.tsx
@@ -1,95 +1,97 @@
-import Div100vh from "react-div-100vh";
+import { use100vh } from "react-div-100vh";
-import { makeStyles, createStyles } from "@material-ui/styles";
-import { Paper, Typography, LinearProgress } from "@material-ui/core";
+import { Box, Paper, Typography, LinearProgress } from "@material-ui/core";
import { alpha } from "@material-ui/core/styles";
import bgPattern from "assets/bg-pattern.svg";
import Logo from "assets/Logo";
-const useStyles = makeStyles((theme) =>
- createStyles({
- root: {
- backgroundBlendMode: "normal, overlay, normal, normal",
- // backgroundImage: `
- // linear-gradient(to bottom, rgba(255,255,255,0), #fff),
- // linear-gradient(155deg, #303030 -4%, ${theme.palette.primary.main} 92%),
- // url('${bgPattern}'),
- // linear-gradient(161deg, #ecf4ff -31%, #fff4f4 160%)
- // `,
- backgroundImage: `
- linear-gradient(to bottom, ${alpha(
- theme.palette.background.default,
- 0
- )}, ${theme.palette.background.default} 75%),
- linear-gradient(155deg, ${theme.palette.primary.main} 10%, ${
- theme.palette.secondary.main
- } 90%),
- url('${bgPattern}'),
- linear-gradient(161deg, ${alpha(
- theme.palette.background.default,
- 0.95
- )} -31%, ${alpha(theme.palette.background.default, 0.98)} 160%)
- `,
-
- display: "grid",
- placeItems: "center",
- padding: theme.spacing(1),
-
- cursor: "default",
- },
-
- paper: {
- position: "relative",
- overflow: "hidden",
-
- maxWidth: 400,
- width: "100%",
- padding: theme.spacing(4),
- backgroundColor: theme.palette.background.paper,
-
- "--spacing-contents": theme.spacing(4),
- "& > * + *": { marginTop: "var(--spacing-contents)" },
-
- textAlign: "center",
- },
-
- projectName: {
- display: "block",
- marginTop: theme.spacing(1),
-
- color: theme.palette.text.disabled,
- },
-
- progress: {
- position: "absolute",
- left: 0,
- right: 0,
- top: 0,
- marginTop: 0,
- },
- })
-);
-
export interface IAuthLayoutProps {
children: React.ReactNode;
loading?: boolean;
}
export default function AuthLayout({ children, loading }: IAuthLayoutProps) {
- const classes = useStyles();
+ const fullScreenHeight = use100vh() ?? "100vh";
return (
-
-
+ `
+ linear-gradient(to bottom, ${alpha(
+ theme.palette.background.default,
+ 0
+ )}, ${theme.palette.background.default} 75%),
+ linear-gradient(155deg, ${theme.palette.primary.main} 10%, ${
+ theme.palette.secondary.main
+ } 90%),
+ url('${bgPattern}'),
+ linear-gradient(161deg, ${alpha(
+ theme.palette.background.default,
+ 0.95
+ )} -31%, ${alpha(theme.palette.background.default, 0.98)} 160%)
+ `,
+
+ display: "grid",
+ placeItems: "center",
+ p: 1,
+
+ cursor: "default",
+ }}
+ >
+ theme.spacing(4),
+ "& > * + *": { marginTop: "var(--spacing-contents)" },
+
+ textAlign: "center",
+ } as any
+ }
+ >
-
+
Project: {process.env.REACT_APP_FIREBASE_PROJECT_ID}
{children}
- {loading && }
+ {loading && (
+
+ )}
-
+
);
}
diff --git a/src/components/EmptyState.tsx b/src/components/EmptyState.tsx
index 8ae492e5..e2b4594c 100644
--- a/src/components/EmptyState.tsx
+++ b/src/components/EmptyState.tsx
@@ -1,4 +1,4 @@
-import Div100vh from "react-div-100vh";
+import { use100vh } from "react-div-100vh";
import {
Grid,
@@ -36,6 +36,8 @@ export default function EmptyState({
basic = false,
...props
}: IEmptyStateProps) {
+ const fullScreenHeight = use100vh() ?? "100vh";
+
if (basic)
return (
@@ -57,11 +59,10 @@ export default function EmptyState({
direction="column"
justifyContent="center"
alignItems="center"
- component={fullScreen ? Div100vh : "div"}
{...props}
style={{
width: "100%",
- height: fullScreen ? "100rvh" : "100%",
+ height: fullScreen ? fullScreenHeight : "100%",
textAlign: "center",
...props.style,
}}
diff --git a/src/components/Loading.tsx b/src/components/Loading.tsx
index 5333c9f8..e672cac2 100644
--- a/src/components/Loading.tsx
+++ b/src/components/Loading.tsx
@@ -1,6 +1,12 @@
-import Div100vh from "react-div-100vh";
+import { use100vh } from "react-div-100vh";
-import { Stack, StackProps,CircularProgress, Typography } from "@material-ui/core";
+import {
+ Fade,
+ Stack,
+ StackProps,
+ CircularProgress,
+ Typography,
+} from "@material-ui/core";
interface ILoadingProps extends Partial {
message?: string;
fullScreen?: boolean;
@@ -11,23 +17,26 @@ export default function Loading({
fullScreen = false,
...props
}: ILoadingProps) {
+ const fullScreenHeight = use100vh() ?? "100vh";
+
return (
-
-
-
- {message}
-
-
+
+
+
+
+ {message}
+
+
+
);
}
diff --git a/src/components/Navigation/UserMenu.tsx b/src/components/Navigation/UserMenu.tsx
index 0ea75573..f9a5268e 100644
--- a/src/components/Navigation/UserMenu.tsx
+++ b/src/components/Navigation/UserMenu.tsx
@@ -12,6 +12,7 @@ import {
ListItemText,
ListItemSecondaryAction,
Divider,
+ Grow,
} from "@material-ui/core";
import AccountCircleIcon from "@material-ui/icons/AccountCircle";
import ArrowRightIcon from "@material-ui/icons/ArrowRight";
@@ -69,19 +70,21 @@ export default function UserMenu(props: IconButtonProps) {
return (
<>
- setOpen(true)}
- sx={{ "& .MuiAvatar-root": { width: 24, height: 24 } }}
- >
- {avatar}
-
+
+ setOpen(true)}
+ sx={{ "& .MuiAvatar-root": { width: 24, height: 24 } }}
+ >
+ {avatar}
+
+