fix: style issues and test

Author: dcoa

src/authz-module/index.scss

@@ -29,7 +29,7 @@
       font-weight: var(--pgn-typography-font-weight-base);
     }
 
-    svg {
+    .pgn__icon {
       width: var(--pgn-size-icon-xs);
       height: var(--pgn-size-icon-xs);
     }

src/authz-module/libraries-manager/LibrariesTeamManager.test.tsx

@@ -1,4 +1,5 @@
-import { fireEvent, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { renderWrapper } from '@src/setupTest';
 import { initializeMockApp } from '@edx/frontend-platform/testing';
 import { useLibrary } from '@src/authz-module/data/hooks';
@@ -96,11 +97,13 @@ describe('LibrariesTeamManager', () => {
   });
 
   it('renders role cards when "Roles" tab is selected', async () => {
+    const user = userEvent.setup();
+
     renderWrapper(<LibrariesTeamManager />);
 
     // Click on "Roles" tab
     const rolesTab = await screen.findByRole('tab', { name: /roles/i });
-    fireEvent.click(rolesTab);
+    await user.click(rolesTab);
 
     const roleCards = await screen.findAllByTestId('role-card');
 

src/authz-module/libraries-manager/LibrariesTeamManager.tsx

@@ -57,7 +57,7 @@ const LibrariesTeamManager = () => {
               {!libraryRoles ? <Skeleton count={2} height={200} /> : null}
               {libraryRoles && libraryRoles.map(role => (
                 <RoleCard
-                  key={`${role}-description`}
+                  key={`${role.role}-description`}
                   title={role.name}
                   userCounter={role.userCount}
                   description={role.description}