feat: updated ui based on feedback

frontend/src/layouts/ProjectLayout/ProjectLayout.tsx

@@ -19,8 +19,8 @@ import {
 } from "@app/hooks/api";
 import { ProjectType } from "@app/hooks/api/workspace/types";
 
-import { ProjectSelect } from "./components/ProjectSelect";
 import { AssumePrivilegeModeBanner } from "./components/AssumePrivilegeModeBanner";
+import { ProjectSelect } from "./components/ProjectSelect";
 
 // This is a generic layout shared by all types of projects.
 // If the product layout differs significantly, create a new layout as needed.
@@ -64,6 +64,7 @@ export const ProjectLayout = () => {
   return (
     <>
       <div className="dark hidden h-screen w-full flex-col overflow-x-hidden md:flex">
+        {impersonation && <AssumePrivilegeModeBanner />}
         <div className="flex flex-grow flex-col overflow-y-hidden md:flex-row">
           <motion.div
             key="menu-project-items"
@@ -269,7 +270,6 @@ export const ProjectLayout = () => {
           </div>
         </div>
       </div>
-      {impersonation && <AssumePrivilegeModeBanner />}
       <div className="z-[200] flex h-screen w-screen flex-col items-center justify-center bg-bunker-800 md:hidden">
         <FontAwesomeIcon icon={faMobile} className="mb-8 text-7xl text-gray-300" />
         <p className="max-w-sm px-6 text-center text-lg text-gray-200">

frontend/src/layouts/ProjectLayout/components/AssumePrivilegeModeBanner/AssumePrivilegeModeBanner.tsx

@@ -1,7 +1,7 @@
-import { faIdCard, faUser } from "@fortawesome/free-solid-svg-icons";
+import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { Button, HoverCard, HoverCardContent, HoverCardTrigger } from "@app/components/v2";
+import { Button } from "@app/components/v2";
 import { useProjectPermission, useWorkspace } from "@app/context";
 import { useRemoveAssumeProjectPrivilege } from "@app/hooks/api";
 import { ActorType } from "@app/hooks/api/auditLogs/enums";
@@ -14,55 +14,36 @@ export const AssumePrivilegeModeBanner = () => {
   if (!impersonation) return null;
 
   return (
-    <div className="fixed bottom-4 right-4 z-50 flex items-center gap-2 rounded border border-mineshaft-600 bg-mineshaft-800 p-2 shadow">
-      <HoverCard openDelay={200}>
-        <HoverCardTrigger asChild>
-          <Button
-            leftIcon={
-              <FontAwesomeIcon
-                icon={impersonation?.actorType === ActorType.USER ? faUser : faIdCard}
-              />
-            }
-            onClick={() => {
-              exitAssumePrivilegeMode.mutate(
-                {
-                  projectId: currentWorkspace.id
-                },
-                {
-                  onSuccess: () => {
-                    window.location.href = `/${currentWorkspace.type}/${currentWorkspace.id}/overview`;
-                  }
+    <div className="z-10 -mx-4 flex items-center justify-center gap-2 rounded border border-mineshaft-600 bg-primary-400 p-2 text-mineshaft-800 shadow">
+      <div>
+        <FontAwesomeIcon icon={faInfoCircle} className="mr-2" />
+        You are currently viewing the project with privileges of{" "}
+        <b>
+          {impersonation?.actorType === ActorType.IDENTITY ? "identity" : "user"}{" "}
+          {impersonation?.actorName}
+        </b>
+      </div>
+      <div>
+        <Button
+          size="xs"
+          variant="outline_bg"
+          className="hover:bg-mineshaft-500"
+          onClick={() => {
+            exitAssumePrivilegeMode.mutate(
+              {
+                projectId: currentWorkspace.id
+              },
+              {
+                onSuccess: () => {
+                  window.location.href = `/${currentWorkspace.type}/${currentWorkspace.id}/overview`;
                 }
-              );
-            }}
-          >
-            Exit Assume Privilege Mode
-          </Button>
-        </HoverCardTrigger>
-        <HoverCardContent
-          className="bg-mineshaft-800 pt-4"
-          sideOffset={10}
-          style={{ width: "360px" }}
+              }
+            );
+          }}
         >
-          <div className="flex gap-2">
-            <div className="flex px-2 pt-2">
-              <FontAwesomeIcon
-                className="text-3xl text-mineshaft-400"
-                icon={impersonation?.actorType === ActorType.USER ? faUser : faIdCard}
-              />
-            </div>
-            <div className="mb-4">
-              <div className="text-lg">{impersonation?.actorName}</div>
-              {impersonation?.actorEmail && (
-                <div className="text-xs">{impersonation?.actorEmail}</div>
-              )}
-              {impersonation?.actorType === ActorType.IDENTITY && (
-                <div className="text-xs">{impersonation?.actorId}</div>
-              )}
-            </div>
-          </div>
-        </HoverCardContent>
-      </HoverCard>
+          Click to exit
+        </Button>
+      </div>
     </div>
   );
 };