feat: updated ui based on feedback

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