fix: restyle collaborator remove button (#793)

Author: wilhel1812

src/components/AccessSettingsEditor.test.tsx

@@ -98,6 +98,9 @@ describe("AccessSettingsEditor", () => {
 
     const remove = within(popover).getByRole("button", { name: "Remove Alice" });
     expect(remove).toHaveAttribute("title", "Remove Alice");
+    expect(remove).toHaveClass("btn-icon");
+    expect(remove).not.toHaveClass("inline-action");
+    expect(remove).not.toHaveClass("inline-action-icon");
     await userEvent.click(remove);
     expect(onRemoveCollaborator).toHaveBeenCalledWith("user-1");
 

src/components/AccessSettingsEditor.tsx

@@ -190,16 +190,17 @@ export function AccessSettingsEditor({
                       <option value="viewer">Viewer</option>
                       <option value="editor">Editor</option>
                     </select>
-                    <button
+                    <ActionButton
                       aria-label={`Remove ${label}`}
-                      className="inline-action inline-action-icon access-collaborator-remove"
+                      className="access-collaborator-remove"
                       disabled={disabled}
                       onClick={() => onRemoveCollaborator(user.id)}
+                      size="icon"
                       title={`Remove ${label}`}
                       type="button"
                     >
                       <Trash2 aria-hidden="true" size={14} strokeWidth={2} />
-                    </button>
+                    </ActionButton>
                   </div>
                 );
               })

src/components/ActionButton.tsx

@@ -5,6 +5,7 @@ import { Button } from "./ui/Button";
 type ActionButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
   children: ReactNode;
   variant?: "default" | "danger";
+  size?: "default" | "icon";
 };
 
 export const ActionButton = forwardRef<HTMLButtonElement, ActionButtonProps>(({ variant = "default", ...props }, ref) => (