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

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>
   );
 };