fix: "not authorised" page style (#1279)

packages/app-security/src/admin/plugins/secureRouteError.tsx

@@ -1,19 +1,14 @@
 import * as React from "react";
 import { Plugin } from "@webiny/plugins/types";
-import Helmet from "react-helmet";
+import NotAuthorizedError from "@webiny/app-security/components/NotAuthorizedError";
 
 type SecureRouteErrorPlugin = Plugin & { render: () => React.ReactNode };
 
 const plugin: SecureRouteErrorPlugin = {
     type: "secure-route-error",
     name: "secure-route-error",
     render() {
-        return (
-            <>
-                <Helmet title={"Not authorized"} />
-                <span>You are not authorized to access this route.</span>
-            </>
-        );
+        return <NotAuthorizedError />;
     }
 };
 

packages/app-security/src/components/NotAuthorizedError.tsx

@@ -0,0 +1,55 @@
+import * as React from "react";
+import { Link } from "@webiny/react-router";
+import { css } from "emotion";
+import styled from "@emotion/styled";
+import Helmet from "react-helmet";
+import authErrorImg from "../admin/assets/images/SecureRouteError.svg";
+import { Typography } from "@webiny/ui/Typography";
+
+const ContentWrapper = styled("div")({
+    display: "block",
+    paddingTop: "15%",
+    textAlign: "center",
+    margin: "auto"
+});
+
+const styles = {
+    authErrorImgStyle: css({
+        width: "192px",
+        paddingBottom: "24px"
+    }),
+    bodyStyle: css({
+        color: "var(--mdc-theme-text-primary-on-background)",
+        display: "block"
+    }),
+    linkStyle: css({
+        textDecoration: "none",
+        "&:hover": {
+            textDecoration: "none"
+        }
+    })
+};
+
+const NotAuthorizedError = () => {
+    return (
+        <ContentWrapper>
+            <Helmet title={"Not authorized"} />
+
+            <img className={styles.authErrorImgStyle} src={authErrorImg} alt="Not Authorized" />
+
+            <Typography use={"body1"} className={styles.bodyStyle}>
+                You are not authorized to view this route.
+            </Typography>
+
+            <Typography use={"body1"} className={styles.bodyStyle}>
+                Please contact your administrator to request access.
+            </Typography>
+
+            <Link to="/" className={styles.linkStyle}>
+                Take me back.
+            </Link>
+        </ContentWrapper>
+    );
+};
+
+export default NotAuthorizedError;

packages/app-security/src/components/SecureRoute.tsx

@@ -3,6 +3,7 @@ import { hasScopes } from "@webiny/app-security";
 import { getPlugin } from "@webiny/plugins";
 import { ResourcesType } from "../identity";
 import { SecureRouteErrorPlugin } from "@webiny/app-security/types";
+import NotAuthorizedError from "@webiny/app-security/components/NotAuthorizedError";
 
 export default ({
     children,
@@ -19,7 +20,7 @@ export default ({
 
     const plugin = getPlugin<SecureRouteErrorPlugin>("secure-route-error");
     if (!plugin) {
-        return <span>You are not authorized to view this route.</span>;
+        return <NotAuthorizedError />;
     }
     return plugin.render();
 };