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

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 space-x-6 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";