Merge pull request #4236 from Infisical/improve-access-denied-banner-design

improvement(frontend): revise access restricted banner and refactor/update relevant locations

frontend/src/components/permissions/OrgPermissionCan.tsx

@@ -1,26 +1,14 @@
 import { FunctionComponent, ReactNode } from "react";
 import { BoundCanProps, Can } from "@casl/react";
-import { faLock } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import { TOrgPermission, useOrgPermission } from "@app/context/OrgPermissionContext";
 
-import { Tooltip } from "../v2";
+import { AccessRestrictedBanner, Tooltip } from "../v2";
 
 export const OrgPermissionGuardBanner = () => {
   return (
     <div className="container mx-auto flex h-full items-center justify-center">
-      <div className="flex items-end space-x-12 rounded-md bg-mineshaft-800 p-16 text-bunker-300">
-        <div>
-          <FontAwesomeIcon icon={faLock} size="6x" />
-        </div>
-        <div>
-          <div className="mb-2 text-4xl font-medium">Access Restricted</div>
-          <div className="text-sm">
-            Your role has limited permissions, please <br /> contact your admin to gain access
-          </div>
-        </div>
-      </div>
+      <AccessRestrictedBanner />
     </div>
   );
 };

frontend/src/components/permissions/PermissionDeniedBanner.tsx

@@ -1,15 +1,12 @@
-import { ReactNode } from "react";
-import { faLock } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { twMerge } from "tailwind-merge";
 
+import { AccessRestrictedBanner } from "@app/components/v2";
+
 type Props = {
   containerClassName?: string;
-  className?: string;
-  children?: ReactNode;
 };
 
-export const PermissionDeniedBanner = ({ containerClassName, className, children }: Props) => {
+export const PermissionDeniedBanner = ({ containerClassName }: Props) => {
   return (
     <div
       className={twMerge(
@@ -17,22 +14,7 @@ export const PermissionDeniedBanner = ({ containerClassName, className, children
         containerClassName
       )}
     >
-      <div className={twMerge("rounded-md bg-mineshaft-800 p-16 text-bunker-300", className)}>
-        <div className="flex items-end space-x-12">
-          <div>
-            <FontAwesomeIcon icon={faLock} size="6x" />
-          </div>
-          <div>
-            <div className="mb-2 text-4xl font-medium">Access Restricted</div>
-            {children || (
-              <div className="text-sm">
-                Your role has limited permissions, please <br /> contact your administrator to gain
-                access
-              </div>
-            )}
-          </div>
-        </div>
-      </div>
+      <AccessRestrictedBanner />
     </div>
   );
 };

frontend/src/components/permissions/ProjectPermissionCan.tsx

@@ -1,9 +1,8 @@
 import { FunctionComponent, ReactNode } from "react";
 import { AbilityTuple, MongoAbility } from "@casl/ability";
 import { Can } from "@casl/react";
-import { faLock } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
+import { AccessRestrictedBanner } from "@app/components/v2";
 import { ProjectPermissionSet, useProjectPermission } from "@app/context/ProjectPermissionContext";
 
 import { Tooltip } from "../v2/Tooltip";
@@ -11,17 +10,7 @@ import { Tooltip } from "../v2/Tooltip";
 export const ProjectPermissionGuardBanner = () => {
   return (
     <div className="container mx-auto flex h-full items-center justify-center">
-      <div className="flex items-end space-x-12 rounded-md bg-mineshaft-800 p-16 text-bunker-300">
-        <div>
-          <FontAwesomeIcon icon={faLock} size="6x" />
-        </div>
-        <div>
-          <div className="mb-2 text-4xl font-medium">Access Restricted</div>
-          <div className="text-sm">
-            Your role has limited permissions, please <br /> contact your admin to gain access
-          </div>
-        </div>
-      </div>
+      <AccessRestrictedBanner />
     </div>
   );
 };

frontend/src/components/v2/AccessRestrictedBanner/AccessRestrictedBanner.tsx

@@ -0,0 +1,26 @@
+import { ReactNode } from "react";
+
+type Props = {
+  title?: string;
+  body?: ReactNode;
+};
+
+export const AccessRestrictedBanner = ({
+  title = "Access Restricted",
+
+  body = (
+    <>
+      Your current role doesn&#39;t provide access to this feature.
+      <br /> Contact your administrator to request access.
+    </>
+  )
+}: Props) => {
+  return (
+    <div className="flex items-center rounded-md border border-mineshaft-500 bg-gradient-to-br from-mineshaft-900 to-mineshaft-600 px-16 py-12 text-center text-bunker-300">
+      <div>
+        <div className="text-4xl font-medium text-bunker-100">{title}</div>
+        <div className="-mt-1 text-sm">{body}</div>
+      </div>
+    </div>
+  );
+};

frontend/src/components/v2/AccessRestrictedBanner/index.ts

@@ -0,0 +1 @@
+export * from "./AccessRestrictedBanner";

frontend/src/components/v2/index.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable react-refresh/only-export-components */
+export * from "./AccessRestrictedBanner";
 export * from "./Accordion";
 export * from "./Alert";
 export * from "./Badge";