UX error alert banner (#1620)
This commit is contained in:
Prakash Senthil Vel
committed by
GitHub
GitHub
parent
c86f57862d
commit
20ba19affc
68
portal-ui/src/icons/AlertCloseIcon.tsx
Normal file
68
portal-ui/src/icons/AlertCloseIcon.tsx
Normal file
@@ -0,0 +1,68 @@
|
||||
// This file is part of MinIO Console Server
|
||||
// Copyright (c) 2022 MinIO, Inc.
|
||||
//
|
||||
// This program is free software: you can redistribute it and/or modify
|
||||
// it under the terms of the GNU Affero General Public License as published by
|
||||
// the Free Software Foundation, either version 3 of the License, or
|
||||
// (at your option) any later version.
|
||||
//
|
||||
// This program is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU Affero General Public License for more details.
|
||||
//
|
||||
// You should have received a copy of the GNU Affero General Public License
|
||||
// along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import * as React from "react";
|
||||
import { SVGProps } from "react";
|
||||
|
||||
const AlertCloseIcon = (props: SVGProps<SVGSVGElement>) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={`min-icon`}
|
||||
fill={"currentcolor"}
|
||||
width="11"
|
||||
height="11"
|
||||
viewBox="0 0 256 256"
|
||||
{...props}
|
||||
>
|
||||
<defs>
|
||||
<clipPath id="clip-path-alert-close-icon">
|
||||
<rect
|
||||
id="Rectángulo_1612"
|
||||
data-name="Rectángulo 1612"
|
||||
width="256"
|
||||
height="256"
|
||||
fill="none"
|
||||
/>
|
||||
</clipPath>
|
||||
<clipPath id="clip-path-2-alert-close-icon">
|
||||
<rect
|
||||
id="Rectángulo_1611"
|
||||
data-name="Rectángulo 1611"
|
||||
width="256"
|
||||
height="256"
|
||||
/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
<g id="AlertCloseIcon" clipPath="url(#clip-path-alert-close-icon)">
|
||||
<g id="AlertCloseIcon-2" data-name="AlertCloseIcon">
|
||||
<g
|
||||
id="Grupo_2527"
|
||||
data-name="Grupo 2527"
|
||||
clipPath="url(#clip-path-2-alert-close-icon)"
|
||||
>
|
||||
<path
|
||||
id="Trazado_7276"
|
||||
data-name="Trazado 7276"
|
||||
d="M230.082,256.006a25.853,25.853,0,0,1-18.328-7.6l-83.761-83.735L44.259,248.41A25.92,25.92,0,0,1,7.6,211.754l83.735-83.735L7.6,44.259A25.92,25.92,0,0,1,44.259,7.6l83.735,83.735L211.754,7.6A25.92,25.92,0,0,1,248.41,44.259l-83.735,83.761,83.735,83.735a25.924,25.924,0,0,1-18.328,44.252"
|
||||
transform="translate(-0.006 -0.006)"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
|
||||
export default AlertCloseIcon;
|
||||
@@ -174,3 +174,4 @@ export { default as MetadataIcon } from "./MetadataIcon";
|
||||
export { default as LegalHoldIcon } from "./LegalHoldIcon";
|
||||
export { default as RetentionIcon } from "./RetentionIcon";
|
||||
export { default as TagsIcon } from "./TagsIcon";
|
||||
export { default as AlertCloseIcon } from "./AlertCloseIcon";
|
||||
|
||||
@@ -1,243 +0,0 @@
|
||||
// This file is part of MinIO Console Server
|
||||
// Copyright (c) 2021 MinIO, Inc.
|
||||
//
|
||||
// This program is free software: you can redistribute it and/or modify
|
||||
// it under the terms of the GNU Affero General Public License as published by
|
||||
// the Free Software Foundation, either version 3 of the License, or
|
||||
// (at your option) any later version.
|
||||
//
|
||||
// This program is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU Affero General Public License for more details.
|
||||
//
|
||||
// You should have received a copy of the GNU Affero General Public License
|
||||
// along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
// This file is part of MinIO Console Server
|
||||
// Copyright (c) 2021 MinIO, Inc.
|
||||
//
|
||||
// This program is free software: you can redistribute it and/or modify
|
||||
// it under the terms of the GNU Affero General Public License as published by
|
||||
// the Free Software Foundation, either version 3 of the License, or
|
||||
// (at your option) any later version.
|
||||
//
|
||||
// This program is distributed in the hope that it will be useful,
|
||||
// but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
// GNU Affero General Public License for more details.
|
||||
//
|
||||
// You should have received a copy of the GNU Affero General Public License
|
||||
// along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import React, { Fragment, useCallback, useEffect, useState } from "react";
|
||||
import { connect } from "react-redux";
|
||||
import get from "lodash/get";
|
||||
import ArrowRightIcon from "@mui/icons-material/ArrowRight";
|
||||
import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
|
||||
import CloseIcon from "@mui/icons-material/Close";
|
||||
import { Theme } from "@mui/material/styles";
|
||||
import createStyles from "@mui/styles/createStyles";
|
||||
import withStyles from "@mui/styles/withStyles";
|
||||
import { AppState } from "../../../../../store";
|
||||
import {
|
||||
setErrorSnackMessage,
|
||||
setModalErrorSnackMessage,
|
||||
} from "../../../../../actions";
|
||||
import { snackBarMessage } from "../../../../../types";
|
||||
|
||||
interface ImodalErrorProps {
|
||||
customStyle?: any;
|
||||
classes: any;
|
||||
modalSnackMessage: snackBarMessage;
|
||||
displayErrorMessage: typeof setErrorSnackMessage;
|
||||
}
|
||||
|
||||
const styles = (theme: Theme) =>
|
||||
createStyles({
|
||||
modalErrorContainer: {
|
||||
position: "absolute",
|
||||
marginTop: 10,
|
||||
width: "80%",
|
||||
backgroundColor: "#fff",
|
||||
border: "#C72C48 1px solid",
|
||||
borderLeftWidth: 12,
|
||||
borderRadius: 3,
|
||||
zIndex: 1000,
|
||||
padding: "10px 15px",
|
||||
left: "50%",
|
||||
transform: "translateX(-50%)",
|
||||
opacity: 0,
|
||||
transitionDuration: "0.2s",
|
||||
},
|
||||
modalErrorShow: {
|
||||
opacity: 1,
|
||||
},
|
||||
closeButton: {
|
||||
position: "absolute",
|
||||
right: 5,
|
||||
fontSize: "small",
|
||||
border: 0,
|
||||
backgroundColor: "#fff",
|
||||
cursor: "pointer",
|
||||
},
|
||||
errorTitle: {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
},
|
||||
errorLabel: {
|
||||
color: "#000",
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
marginLeft: 5,
|
||||
marginRight: 25,
|
||||
},
|
||||
messageIcon: {
|
||||
color: "#C72C48",
|
||||
display: "flex",
|
||||
"& svg": {
|
||||
width: 32,
|
||||
height: 32,
|
||||
},
|
||||
},
|
||||
detailsButton: {
|
||||
color: "#9C9C9C",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
border: 0,
|
||||
backgroundColor: "transparent",
|
||||
paddingLeft: 5,
|
||||
fontSize: 14,
|
||||
transformDuration: "0.3s",
|
||||
cursor: "pointer",
|
||||
},
|
||||
extraDetailsContainer: {
|
||||
fontStyle: "italic",
|
||||
color: "#9C9C9C",
|
||||
lineHeight: 0,
|
||||
padding: "0 10px",
|
||||
transition: "all .2s ease-in-out",
|
||||
overflow: "hidden",
|
||||
},
|
||||
extraDetailsOpen: {
|
||||
lineHeight: 1,
|
||||
padding: "3px 10px",
|
||||
},
|
||||
arrowElement: {
|
||||
marginLeft: -5,
|
||||
},
|
||||
arrowOpen: {
|
||||
transform: "rotateZ(90deg)",
|
||||
transformDuration: "0.3s",
|
||||
},
|
||||
});
|
||||
|
||||
var timerI: any;
|
||||
|
||||
const startHideTimer = (callbackFunction: () => void) => {
|
||||
timerI = setInterval(callbackFunction, 10000);
|
||||
};
|
||||
|
||||
const stopHideTimer = () => {
|
||||
clearInterval(timerI);
|
||||
};
|
||||
|
||||
const ModalError = ({
|
||||
classes,
|
||||
modalSnackMessage,
|
||||
displayErrorMessage,
|
||||
customStyle,
|
||||
}: ImodalErrorProps) => {
|
||||
const [detailsOpen, setDetailsOpen] = useState<boolean>(false);
|
||||
const [displayErrorMsg, setDisplayErrorMsg] = useState<boolean>(false);
|
||||
|
||||
const closeErrorMessage = useCallback(() => {
|
||||
setDisplayErrorMsg(false);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!displayErrorMsg) {
|
||||
displayErrorMessage({ detailedError: "", errorMessage: "" });
|
||||
setDetailsOpen(false);
|
||||
//clearInterval(timerI);
|
||||
}
|
||||
}, [displayErrorMessage, displayErrorMsg]);
|
||||
|
||||
useEffect(() => {
|
||||
if (
|
||||
modalSnackMessage.message !== "" &&
|
||||
modalSnackMessage.type === "error"
|
||||
) {
|
||||
//Error message received, we trigger the animation
|
||||
setDisplayErrorMsg(true);
|
||||
//startHideTimer(closeErrorMessage);
|
||||
}
|
||||
}, [closeErrorMessage, modalSnackMessage.message, modalSnackMessage.type]);
|
||||
|
||||
const detailsToggle = () => {
|
||||
setDetailsOpen(!detailsOpen);
|
||||
};
|
||||
|
||||
const message = get(modalSnackMessage, "message", "");
|
||||
const messageDetails = get(modalSnackMessage, "detailedErrorMsg", "");
|
||||
|
||||
if (modalSnackMessage.type !== "error" || message === "") {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<div
|
||||
className={`${classes.modalErrorContainer} ${
|
||||
displayErrorMsg ? classes.modalErrorShow : ""
|
||||
}`}
|
||||
style={customStyle}
|
||||
onMouseOver={stopHideTimer}
|
||||
onMouseLeave={() => startHideTimer(closeErrorMessage)}
|
||||
>
|
||||
<button className={classes.closeButton} onClick={closeErrorMessage}>
|
||||
<CloseIcon />
|
||||
</button>
|
||||
<div className={classes.errorTitle}>
|
||||
<span className={classes.messageIcon}>
|
||||
<ErrorOutlineIcon />
|
||||
</span>
|
||||
<span className={classes.errorLabel}>{message}</span>
|
||||
</div>
|
||||
{messageDetails !== "" && (
|
||||
<Fragment>
|
||||
<div className={classes.detailsContainerLink}>
|
||||
<button className={classes.detailsButton} onClick={detailsToggle}>
|
||||
Details
|
||||
<ArrowRightIcon
|
||||
className={`${classes.arrowElement} ${
|
||||
detailsOpen ? classes.arrowOpen : ""
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
className={`${classes.extraDetailsContainer} ${
|
||||
detailsOpen ? classes.extraDetailsOpen : ""
|
||||
}`}
|
||||
>
|
||||
{messageDetails}
|
||||
</div>
|
||||
</Fragment>
|
||||
)}
|
||||
</div>
|
||||
</Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
const mapState = (state: AppState) => ({
|
||||
modalSnackMessage: state.system.modalSnackBar,
|
||||
});
|
||||
|
||||
const mapDispatchToProps = {
|
||||
displayErrorMessage: setModalErrorSnackMessage,
|
||||
};
|
||||
|
||||
const connector = connect(mapState, mapDispatchToProps);
|
||||
|
||||
export default connector(withStyles(styles)(ModalError));
|
||||
@@ -1042,6 +1042,10 @@ const IconsScreen = ({ classes }: IIconsScreenSimple) => {
|
||||
<br />
|
||||
WatchIcon
|
||||
</Grid>
|
||||
<Grid item xs={3} sm={2} md={1}>
|
||||
<cicons.AlertCloseIcon /> <br />
|
||||
AlertCloseIcon
|
||||
</Grid>
|
||||
</Grid>
|
||||
<h1>Menu Icons</h1>
|
||||
<Grid
|
||||
|
||||
@@ -14,112 +14,23 @@
|
||||
// You should have received a copy of the GNU Affero General Public License
|
||||
// along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
|
||||
import React, { Fragment, useState, useEffect, useCallback } from "react";
|
||||
import React, { useState, useEffect, useCallback } from "react";
|
||||
import { connect } from "react-redux";
|
||||
import get from "lodash/get";
|
||||
import ArrowRightIcon from "@mui/icons-material/ArrowRight";
|
||||
import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
|
||||
import CloseIcon from "@mui/icons-material/Close";
|
||||
import { Theme } from "@mui/material/styles";
|
||||
import createStyles from "@mui/styles/createStyles";
|
||||
import withStyles from "@mui/styles/withStyles";
|
||||
import { AppState } from "../../../../store";
|
||||
import { setErrorSnackMessage } from "../../../../actions";
|
||||
import { snackBarMessage } from "../../../../types";
|
||||
import { Box } from "@mui/material";
|
||||
import { AlertCloseIcon } from "../../../../icons";
|
||||
import { Portal } from "@mui/base";
|
||||
|
||||
interface IMainErrorProps {
|
||||
customStyle?: any;
|
||||
classes: any;
|
||||
snackBar: snackBarMessage;
|
||||
displayErrorMessage: typeof setErrorSnackMessage;
|
||||
isModal?: boolean;
|
||||
}
|
||||
|
||||
const styles = (theme: Theme) =>
|
||||
createStyles({
|
||||
mainErrorContainer: {
|
||||
position: "fixed",
|
||||
width: "100%",
|
||||
backgroundColor: "#fff",
|
||||
border: "#C72C48 1px solid",
|
||||
borderLeftWidth: 12,
|
||||
borderRadius: 3,
|
||||
zIndex: 5000,
|
||||
padding: "10px 15px",
|
||||
maxWidth: 600,
|
||||
left: "50%",
|
||||
transform: "translateX(-50%)",
|
||||
marginTop: 15,
|
||||
opacity: 0,
|
||||
transitionDuration: "0.2s",
|
||||
},
|
||||
mainErrorShow: {
|
||||
opacity: 1,
|
||||
},
|
||||
closeButton: {
|
||||
position: "absolute",
|
||||
right: 5,
|
||||
fontSize: "small",
|
||||
border: 0,
|
||||
backgroundColor: "#fff",
|
||||
cursor: "pointer",
|
||||
},
|
||||
errorTitle: {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
},
|
||||
errorLabel: {
|
||||
color: "#000",
|
||||
fontSize: 18,
|
||||
fontWeight: 500,
|
||||
marginLeft: 5,
|
||||
},
|
||||
messageIcon: {
|
||||
color: "#C72C48",
|
||||
display: "flex",
|
||||
"& svg": {
|
||||
width: 32,
|
||||
height: 32,
|
||||
},
|
||||
},
|
||||
simpleError: {
|
||||
marginTop: 5,
|
||||
padding: "2px 5px",
|
||||
fontSize: 16,
|
||||
color: "#000",
|
||||
},
|
||||
detailsButton: {
|
||||
color: "#9C9C9C",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
border: 0,
|
||||
backgroundColor: "transparent",
|
||||
paddingLeft: 5,
|
||||
fontSize: 14,
|
||||
transformDuration: "0.3s",
|
||||
cursor: "pointer",
|
||||
},
|
||||
extraDetailsContainer: {
|
||||
fontStyle: "italic",
|
||||
color: "#9C9C9C",
|
||||
lineHeight: 0,
|
||||
padding: "0 10px",
|
||||
transition: "all .2s ease-in-out",
|
||||
overflow: "hidden",
|
||||
},
|
||||
extraDetailsOpen: {
|
||||
lineHeight: 1,
|
||||
padding: "3px 10px",
|
||||
},
|
||||
arrowElement: {
|
||||
marginLeft: -5,
|
||||
},
|
||||
arrowOpen: {
|
||||
transform: "rotateZ(90deg)",
|
||||
transformDuration: "0.3s",
|
||||
},
|
||||
});
|
||||
|
||||
var timerI: any;
|
||||
let timerI: any;
|
||||
|
||||
const startHideTimer = (callbackFunction: () => void) => {
|
||||
timerI = setInterval(callbackFunction, 10000);
|
||||
@@ -130,12 +41,10 @@ const stopHideTimer = () => {
|
||||
};
|
||||
|
||||
const MainError = ({
|
||||
classes,
|
||||
snackBar,
|
||||
displayErrorMessage,
|
||||
customStyle,
|
||||
isModal = false,
|
||||
}: IMainErrorProps) => {
|
||||
const [detailsOpen, setDetailsOpen] = useState<boolean>(false);
|
||||
const [displayErrorMsg, setDisplayErrorMsg] = useState<boolean>(false);
|
||||
|
||||
const closeErrorMessage = useCallback(() => {
|
||||
@@ -145,7 +54,6 @@ const MainError = ({
|
||||
useEffect(() => {
|
||||
if (!displayErrorMsg) {
|
||||
displayErrorMessage({ detailedError: "", errorMessage: "" });
|
||||
setDetailsOpen(false);
|
||||
clearInterval(timerI);
|
||||
}
|
||||
}, [displayErrorMessage, displayErrorMsg]);
|
||||
@@ -158,10 +66,6 @@ const MainError = ({
|
||||
}
|
||||
}, [closeErrorMessage, snackBar.message, snackBar.type]);
|
||||
|
||||
const detailsToggle = () => {
|
||||
setDetailsOpen(!detailsOpen);
|
||||
};
|
||||
|
||||
const message = get(snackBar, "message", "");
|
||||
const messageDetails = get(snackBar, "detailedErrorMsg", "");
|
||||
|
||||
@@ -170,53 +74,98 @@ const MainError = ({
|
||||
}
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<div
|
||||
className={`${classes.mainErrorContainer} ${
|
||||
displayErrorMsg ? classes.mainErrorShow : ""
|
||||
}`}
|
||||
style={customStyle}
|
||||
<Portal>
|
||||
<Box
|
||||
sx={{
|
||||
"&.alert": {
|
||||
border: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
height: "75px",
|
||||
position: "fixed",
|
||||
color: "#ffffff",
|
||||
padding: "0 30px 0 30px",
|
||||
zIndex: 10000,
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
fontWeight: 600,
|
||||
backgroundColor: "#C72C48",
|
||||
opacity: 0,
|
||||
width: "100%",
|
||||
|
||||
"&.show": {
|
||||
opacity: 1,
|
||||
},
|
||||
},
|
||||
"& .message-text": {
|
||||
flex: 2,
|
||||
fontSize: "14px",
|
||||
textAlign: {
|
||||
md: "center",
|
||||
xs: "left",
|
||||
},
|
||||
},
|
||||
|
||||
"& .close-btn-container": {
|
||||
cursor: "pointer",
|
||||
border: 0,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
height: "100%",
|
||||
marginLeft: {
|
||||
sm: "0px",
|
||||
xs: "10px",
|
||||
},
|
||||
|
||||
"& .close-btn": {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
height: "23px",
|
||||
width: "23px",
|
||||
borderRadius: "50%",
|
||||
|
||||
border: 0,
|
||||
backgroundColor: "transparent",
|
||||
cursor: "pointer",
|
||||
|
||||
"&:hover,&:focus": {
|
||||
border: 0,
|
||||
outline: 0,
|
||||
backgroundColor: "#ba0202",
|
||||
},
|
||||
"& .min-icon": {
|
||||
height: "11px",
|
||||
width: "11px",
|
||||
fill: "#ffffff",
|
||||
},
|
||||
},
|
||||
},
|
||||
}}
|
||||
onMouseOver={stopHideTimer}
|
||||
onMouseLeave={() => startHideTimer(closeErrorMessage)}
|
||||
className={`alert ${displayErrorMsg ? "show" : ""}`}
|
||||
>
|
||||
<button className={classes.closeButton} onClick={closeErrorMessage}>
|
||||
<CloseIcon />
|
||||
</button>
|
||||
<div className={classes.errorTitle}>
|
||||
<span className={classes.messageIcon}>
|
||||
<ErrorOutlineIcon />
|
||||
</span>
|
||||
<span className={classes.errorLabel}>Error</span>
|
||||
<div className="message-text">
|
||||
{messageDetails ? messageDetails : `${message}.`}
|
||||
</div>
|
||||
<div className={classes.simpleError}>{message}</div>
|
||||
{messageDetails !== "" && (
|
||||
<Fragment>
|
||||
<div className={classes.detailsContainerLink}>
|
||||
<button className={classes.detailsButton} onClick={detailsToggle}>
|
||||
Details
|
||||
<ArrowRightIcon
|
||||
className={`${classes.arrowElement} ${
|
||||
detailsOpen ? classes.arrowOpen : ""
|
||||
}`}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
className={`${classes.extraDetailsContainer} ${
|
||||
detailsOpen ? classes.extraDetailsOpen : ""
|
||||
}`}
|
||||
>
|
||||
{messageDetails}
|
||||
</div>
|
||||
</Fragment>
|
||||
)}
|
||||
</div>
|
||||
</Fragment>
|
||||
<div className="close-btn-container">
|
||||
<button className="close-btn" autoFocus onClick={closeErrorMessage}>
|
||||
<AlertCloseIcon />
|
||||
</button>
|
||||
</div>
|
||||
</Box>
|
||||
</Portal>
|
||||
);
|
||||
};
|
||||
|
||||
const mapState = (state: AppState) => ({
|
||||
snackBar: state.system.snackBar,
|
||||
const mapState = (state: AppState, ownProps: any) => ({
|
||||
snackBar: ownProps.isModal
|
||||
? state.system.modalSnackBar
|
||||
: state.system.snackBar,
|
||||
});
|
||||
|
||||
const mapDispatchToProps = {
|
||||
@@ -225,4 +174,4 @@ const mapDispatchToProps = {
|
||||
|
||||
const connector = connect(mapState, mapDispatchToProps);
|
||||
|
||||
export default connector(withStyles(styles)(MainError));
|
||||
export default connector(MainError);
|
||||
|
||||
@@ -28,8 +28,8 @@ import {
|
||||
import { AppState } from "../../../../store";
|
||||
import { snackBarMessage } from "../../../../types";
|
||||
import { setModalSnackMessage } from "../../../../actions";
|
||||
import ModalError from "../FormComponents/ModalError/ModalError";
|
||||
import CloseIcon from "@mui/icons-material/Close";
|
||||
import MainError from "../MainError/MainError";
|
||||
|
||||
interface IModalProps {
|
||||
classes: any;
|
||||
@@ -149,7 +149,7 @@ const ModalWrapper = ({
|
||||
</div>
|
||||
</DialogTitle>
|
||||
|
||||
<ModalError />
|
||||
<MainError isModal={true} />
|
||||
<Snackbar
|
||||
open={openSnackbar}
|
||||
className={classes.snackBarModal}
|
||||
|
||||
@@ -41,6 +41,7 @@ import MainError from "../Console/Common/MainError/MainError";
|
||||
import { encodeFileName } from "../../common/utils";
|
||||
import { LockIcon, LoginMinIOLogo, UsersIcon } from "../../icons";
|
||||
import { spacingUtils } from "../Console/Common/FormComponents/common/styleLibrary";
|
||||
import CssBaseline from "@mui/material/CssBaseline";
|
||||
|
||||
const styles = (theme: Theme) =>
|
||||
createStyles({
|
||||
@@ -556,8 +557,9 @@ const Login = ({
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<CssBaseline />
|
||||
<MainError />
|
||||
<Paper className={classes.loginPage}>
|
||||
<MainError />
|
||||
<div className={classes.shadowBox}>
|
||||
<Grid container className={classes.loginContainer}>
|
||||
<Grid item className="consoleTextBanner">
|
||||
|
||||
Reference in New Issue
Block a user