From f2c3c76c60a63039f9cb36fa2483dc694f176dfa Mon Sep 17 00:00:00 2001
From: Scott Wilson <scottraywilson@gmail.com>
Date: Mon, 30 Jun 2025 09:21:00 -0700
Subject: [PATCH] improvement: address feedback on remove rule policy edit

---
 .../components/GeneralPermissionPolicies.tsx  | 48 +++++++++++--------
 1 file changed, 27 insertions(+), 21 deletions(-)

diff --git a/frontend/src/pages/project/RoleDetailsBySlugPage/components/GeneralPermissionPolicies.tsx b/frontend/src/pages/project/RoleDetailsBySlugPage/components/GeneralPermissionPolicies.tsx
index c05f9fe6c..c657ffd40 100644
--- a/frontend/src/pages/project/RoleDetailsBySlugPage/components/GeneralPermissionPolicies.tsx
+++ b/frontend/src/pages/project/RoleDetailsBySlugPage/components/GeneralPermissionPolicies.tsx
@@ -12,7 +12,7 @@ import {
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { twMerge } from "tailwind-merge";
 
-import { Button, Checkbox, Select, SelectItem, Tag, Tooltip } from "@app/components/v2";
+import { Button, Checkbox, IconButton, Select, SelectItem, Tag, Tooltip } from "@app/components/v2";
 import { ProjectPermissionSub } from "@app/context";
 import { useToggle } from "@app/hooks";
 
@@ -241,16 +241,19 @@ export const GeneralPermissionPolicies = <T extends keyof NonNullable<TFormSchem
                         />
                       </Tooltip>
                       {!isDisabled && (
-                        <Button
-                          leftIcon={<FontAwesomeIcon icon={faTrash} />}
-                          variant="outline_bg"
-                          size="xs"
-                          className="ml-auto mr-3"
-                          onClick={() => remove(rootIndex)}
-                          isDisabled={isDisabled}
-                        >
-                          Remove Rule
-                        </Button>
+                        <Tooltip content="Remove Rule">
+                          <IconButton
+                            ariaLabel="Remove rule"
+                            colorSchema="danger"
+                            variant="plain"
+                            size="xs"
+                            className="ml-auto mr-3 rounded"
+                            onClick={() => remove(rootIndex)}
+                            isDisabled={isDisabled}
+                          >
+                            <FontAwesomeIcon icon={faTrash} />
+                          </IconButton>
+                        </Tooltip>
                       )}
                       {!isDisabled && (
                         <Tooltip position="left" content="Drag to reorder permission">
@@ -271,16 +274,19 @@ export const GeneralPermissionPolicies = <T extends keyof NonNullable<TFormSchem
                   <div className="flex w-full justify-between">
                     <div className="mb-2">Actions</div>
                     {!isDisabled && !isConditionalSubjects(subject) && (
-                      <Button
-                        leftIcon={<FontAwesomeIcon icon={faTrash} />}
-                        variant="outline_bg"
-                        size="xs"
-                        className="ml-auto"
-                        onClick={() => remove(rootIndex)}
-                        isDisabled={isDisabled}
-                      >
-                        Remove Rule
-                      </Button>
+                      <Tooltip content="Remove Rule">
+                        <IconButton
+                          ariaLabel="Remove rule"
+                          colorSchema="danger"
+                          variant="plain"
+                          size="xs"
+                          className="ml-auto rounded"
+                          onClick={() => remove(rootIndex)}
+                          isDisabled={isDisabled}
+                        >
+                          <FontAwesomeIcon icon={faTrash} />
+                        </IconButton>
+                      </Tooltip>
                     )}
                   </div>
                   <div className="flex flex-grow flex-wrap justify-start gap-x-8 gap-y-4">