improvements

This commit is contained in:
Myzel394 2022-11-05 10:53:08 +01:00
parent 8ae24aec8e
commit 964ee90d50
4 changed files with 47 additions and 47 deletions

View File

@ -17,6 +17,7 @@ export interface SimpleFormProps {
titleVariant?: TypographyProps["variant"]
titleComponent?: OverrideProps<any, any>["component"]
nonFieldError?: string
onCancel?: () => void
}
export default function SimpleForm({
@ -26,6 +27,7 @@ export default function SimpleForm({
continueActionLabel,
cancelActionLabel,
nonFieldError,
onCancel,
titleVariant = "h4",
titleComponent = "h1",
isSubmitting = false,
@ -80,12 +82,13 @@ export default function SimpleForm({
)}
<Grid item>
<Grid container justifyContent={cancelActionLabel ? "space-between" : "center"}>
{cancelActionLabel && (
{cancelActionLabel && onCancel && (
<Grid item>
<Button
disabled={isSubmitting}
startIcon={<TiCancel />}
color="secondary"
onClick={onCancel}
>
{cancelActionLabel}
</Button>

View File

@ -2,34 +2,36 @@ import {ReactElement} from "react"
import {useTranslation} from "react-i18next"
import {FaMask} from "react-icons/fa"
import {Grid, Typography} from "@mui/material"
import {Container, Grid, Typography} from "@mui/material"
export default function EmptyStateScreen(): ReactElement {
const {t} = useTranslation()
return (
<Grid
container
spacing={4}
direction="column"
alignItems="center"
maxWidth="60%"
alignSelf="center"
marginX="auto"
>
<Grid item>
<Typography variant="h6" component="h2">
{t("routes.AliasesRoute.emptyState.title")}
</Typography>
<Container maxWidth="xs">
<Grid
container
spacing={4}
direction="column"
alignItems="center"
maxWidth="60%"
alignSelf="center"
marginX="auto"
>
<Grid item>
<Typography variant="h6" component="h2">
{t("routes.AliasesRoute.emptyState.title")}
</Typography>
</Grid>
<Grid item>
<FaMask size={40} />
</Grid>
<Grid item>
<Typography variant="body1">
{t("routes.AliasesRoute.emptyState.description")}
</Typography>
</Grid>
</Grid>
<Grid item>
<FaMask size={40} />
</Grid>
<Grid item>
<Typography variant="body1">
{t("routes.AliasesRoute.emptyState.description")}
</Typography>
</Grid>
</Grid>
</Container>
)
}

View File

@ -1,7 +1,7 @@
import {ReactElement} from "react"
import {useTranslation} from "react-i18next"
import {Grid, Typography} from "@mui/material"
import {Container, Grid, Typography} from "@mui/material"
import {mdiTextBoxMultiple} from "@mdi/js/commonjs/mdi"
import Icon from "@mdi/react"
@ -9,28 +9,22 @@ export default function EmptyStateScreen(): ReactElement {
const {t} = useTranslation()
return (
<Grid
container
spacing={4}
direction="column"
alignItems="center"
maxWidth="60%"
alignSelf="center"
marginX="auto"
>
<Grid item>
<Typography variant="h6" component="h2">
{t("routes.ReportsRoute.emptyState.title")}
</Typography>
<Container maxWidth="xs">
<Grid container spacing={4} direction="column" alignItems="center" alignSelf="center">
<Grid item>
<Typography variant="h6" component="h2">
{t("routes.ReportsRoute.emptyState.title")}
</Typography>
</Grid>
<Grid item>
<Icon path={mdiTextBoxMultiple} size={2.5} />
</Grid>
<Grid item>
<Typography variant="body1">
{t("routes.ReportsRoute.emptyState.description")}
</Typography>
</Grid>
</Grid>
<Grid item>
<Icon path={mdiTextBoxMultiple} size={2.5} />
</Grid>
<Grid item>
<Typography variant="body1">
{t("routes.ReportsRoute.emptyState.description")}
</Typography>
</Grid>
</Grid>
</Container>
)
}

View File

@ -56,6 +56,7 @@ export default function EnterDecryptionPassword(): ReactElement {
cancelActionLabel={t("components.EnterDecryptionPassword.cancelAction")}
continueActionLabel={t("components.EnterDecryptionPassword.continueAction")}
isSubmitting={formik.isSubmitting}
onCancel={navigateToNext}
>
{[
<PasswordField