diff --git a/ui/package.json b/ui/package.json
index 5bc377c0..c1e90e07 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -13,6 +13,7 @@
"test:watch": "jest --watch"
},
"dependencies": {
+ "@fortawesome/free-regular-svg-icons": "^6.6.0",
"@fortawesome/free-solid-svg-icons": "^6.6.0",
"@fortawesome/react-fontawesome": "^0.2.2",
"@hookform/resolvers": "^3.3.4",
diff --git a/ui/src/app/(home)/_components/after-login.tsx b/ui/src/app/(home)/_components/after-login.tsx
index fd3b8d06..631d15bb 100644
--- a/ui/src/app/(home)/_components/after-login.tsx
+++ b/ui/src/app/(home)/_components/after-login.tsx
@@ -1,6 +1,6 @@
import Role from '@/access/role';
-import Image from 'next/image';
-import { KeyRound } from 'lucide-react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import {faKey, faIdCard, faWrench, faUser} from '@fortawesome/free-solid-svg-icons';
import Link from 'next/link';
import { Button } from '@/components/ui/button';
import { getNumberOfGroupings, getNumberOfMemberships } from '@/lib/fetchers';
@@ -26,40 +26,34 @@ const AfterLogin = async () => {
'Manage the list of Administrators for this service.' +
' Search for and manage any grouping on behalf of the owner.',
href: '/admin',
- icon: {
- alt: 'key-solid',
- src: '/uhgroupings/key-solid.svg',
- width: 48,
- height: 48
- },
- role: Role.ADMIN
+ icon: faKey,
+ width: 48,
+ height: 48,
+ role: Role.ADMIN,
+ ariaLabel: 'key'
},
{
title: 'Memberships',
description: 'View and manage my memberships. Search for new groupings to join as a member.',
href: '/memberships',
- icon: {
- src: '/uhgroupings/id-card-solid.svg',
- alt: 'id-card',
- width: 54,
- height: 48
- },
+ icon: faIdCard,
+ width: 54,
+ height: 48,
number: numberOfMemberships,
- role: Role.UH
+ role: Role.UH,
+ ariaLabel: 'id-card'
},
{
title: 'Groupings',
description:
'Review members, manage Include and Exclude lists, ' + 'configure preferences, and export members.',
href: '/groupings',
- icon: {
- alt: 'wrench-solid',
- src: '/uhgroupings/wrench-solid.svg',
- width: 48,
- height: 48
- },
+ icon: faWrench,
+ width: 48,
+ height: 48,
number: numberOfGroupings,
- role: Role.OWNER
+ role: Role.OWNER,
+ ariaLabel: 'wrench'
}
];
@@ -73,12 +67,12 @@ const AfterLogin = async () => {
className="flex justify-center items-center rounded-full
h-[100px] w-[100px] bg-white mx-auto relative lg:ml-0"
>
-
+
-
+
@@ -104,13 +98,7 @@ const AfterLogin = async () => {
-
+
{pageInfoItem.number !== null && (
{pageInfoItem.number}
)}
diff --git a/ui/src/app/(home)/_components/before-login.tsx b/ui/src/app/(home)/_components/before-login.tsx
index cca2036b..b90183d2 100644
--- a/ui/src/app/(home)/_components/before-login.tsx
+++ b/ui/src/app/(home)/_components/before-login.tsx
@@ -1,5 +1,6 @@
import { Button } from '@/components/ui/button';
-import { ArrowRight } from 'lucide-react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faArrowRight } from '@fortawesome/free-solid-svg-icons';
import UHGroupingsInfo from '@/components/uh-groupings-info';
const BeforeLogin = () => (
@@ -9,7 +10,7 @@ const BeforeLogin = () => (
diff --git a/ui/src/components/layout/navbar/login-button.tsx b/ui/src/components/layout/navbar/login-button.tsx
index fad36e75..508ce91f 100644
--- a/ui/src/components/layout/navbar/login-button.tsx
+++ b/ui/src/components/layout/navbar/login-button.tsx
@@ -4,7 +4,9 @@ import { Button } from '@/components/ui/button';
import Role from '@/access/role';
import User from '@/access/user';
import { login, logout } from '@/access/authentication';
-import { LogInIcon, LogOutIcon } from 'lucide-react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faSignInAlt, faSignOutAlt } from '@fortawesome/free-solid-svg-icons';
+
const LoginButton = ({
currentUser
@@ -16,14 +18,14 @@ const LoginButton = ({
) : (
)}
>
diff --git a/ui/src/components/table/groupings-table.tsx b/ui/src/components/table/groupings-table.tsx
index 82e561cc..71e1a069 100644
--- a/ui/src/components/table/groupings-table.tsx
+++ b/ui/src/components/table/groupings-table.tsx
@@ -17,11 +17,12 @@ import PaginationBar from '@/components/table/table-element/pagination-bar';
import GlobalFilter from '@/components/table/table-element/global-filter';
import SortArrow from '@/components/table/table-element/sort-arrow';
import { useState } from 'react';
-import { SquarePen } from 'lucide-react';
import GroupingPathCell from '@/components/table/table-element/grouping-path-cell';
import Link from 'next/link';
import { useLocalStorage } from 'usehooks-ts';
import { GroupingPath } from '@/lib/types';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faEdit } from '@fortawesome/free-regular-svg-icons';
const pageSize = parseInt(process.env.NEXT_PUBLIC_PAGE_SIZE as string);
@@ -96,11 +97,7 @@ const GroupingsTable = ({ groupingPaths }: { groupingPaths: GroupingPath[] }) =>
{cell.column.id === 'name' && (
-
+
{flexRender(cell.column.columnDef.cell, cell.getContext())}
diff --git a/ui/src/components/table/table-element/grouping-path-cell.tsx b/ui/src/components/table/table-element/grouping-path-cell.tsx
index c08b218c..9afa1a3a 100644
--- a/ui/src/components/table/table-element/grouping-path-cell.tsx
+++ b/ui/src/components/table/table-element/grouping-path-cell.tsx
@@ -1,7 +1,8 @@
-import { ClipboardIcon } from 'lucide-react';
import { Input } from '@/components/ui/input';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
import { useState } from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faClipboard } from '@fortawesome/free-regular-svg-icons';
const GroupingPathCell = ({ path }: { path: string }) => {
const [tooltipContent, setTooltipContent] = useState('copy');
@@ -39,7 +40,7 @@ const GroupingPathCell = ({ path }: { path: string }) => {
justify-center hover:bg-green-blue h-6 p-2 transition ease-in-out duration-150"
data-testid="clipboard-button"
>
-
+
diff --git a/ui/tests/app/(home)/_components/after-login.test.tsx b/ui/tests/app/(home)/_components/after-login.test.tsx
index cfb1b99b..3ebb5ad4 100644
--- a/ui/tests/app/(home)/_components/after-login.test.tsx
+++ b/ui/tests/app/(home)/_components/after-login.test.tsx
@@ -30,7 +30,7 @@ describe('AfterLogin', () => {
};
const expectWelcome = (User: User, role: string) => {
- expect(screen.getByAltText('user-solid')).toHaveAttribute('src', '/uhgroupings/user-solid.svg');
+ expect(screen.getByLabelText('user')).toBeInTheDocument();
expect(screen.getByLabelText('key-round')).toBeInTheDocument();
expect(screen.getByTestId('welcome-message')).toHaveTextContent(`Welcome, ${User.firstName}!`);
expect(screen.getByTestId('role')).toHaveTextContent(`Role: ${role}`);
@@ -38,7 +38,7 @@ describe('AfterLogin', () => {
const expectAdministration = (isAdmin: boolean) => {
if (isAdmin) {
- expect(screen.getByRole('img', { name: 'key-solid' })).toHaveAttribute('src', '/uhgroupings/key-solid.svg');
+ expect(screen.getByLabelText('key')).toBeInTheDocument();
expect(screen.getByRole('heading', { name: 'Admin' })).toBeInTheDocument();
expect(
screen.getByText(
@@ -49,7 +49,7 @@ describe('AfterLogin', () => {
expect(screen.getByRole('link', { name: 'Admin' })).toHaveAttribute('href', '/admin');
expect(screen.getByRole('button', { name: 'Admin' })).toBeInTheDocument();
} else {
- expect(screen.queryByRole('img', { name: 'key-solid' })).not.toBeInTheDocument();
+ expect(screen.queryByLabelText('key')).not.toBeInTheDocument();
expect(screen.queryByRole('heading', { name: 'Admin' })).not.toBeInTheDocument();
expect(
screen.queryByText(
@@ -63,7 +63,7 @@ describe('AfterLogin', () => {
};
const expectMemberships = () => {
- expect(screen.getByRole('img', { name: 'id-card' })).toHaveAttribute('src', '/uhgroupings/id-card-solid.svg');
+ expect(screen.getByLabelText('id-card')).toBeInTheDocument();
expect(screen.getByText(numberOfMemberships)).toBeInTheDocument();
expect(screen.getByRole('heading', { name: 'Memberships' })).toBeInTheDocument();
expect(
@@ -75,10 +75,7 @@ describe('AfterLogin', () => {
const expectGroupings = (isAdmin: boolean, isOwner: boolean) => {
if (isAdmin || isOwner) {
- expect(screen.getByRole('img', { name: 'wrench-solid' })).toHaveAttribute(
- 'src',
- '/uhgroupings/wrench-solid.svg'
- );
+ expect(screen.getByLabelText('wrench')).toBeInTheDocument();
expect(screen.getByText(numberOfGroupings)).toBeInTheDocument();
expect(screen.getByRole('heading', { name: 'Groupings' })).toBeInTheDocument();
expect(
@@ -89,7 +86,7 @@ describe('AfterLogin', () => {
expect(screen.getByRole('link', { name: 'Groupings' })).toHaveAttribute('href', '/groupings');
expect(screen.getByRole('button', { name: 'Groupings' })).toBeInTheDocument();
} else {
- expect(screen.queryByRole('img', { name: 'wrench-solid' })).not.toBeInTheDocument();
+ expect(screen.queryByLabelText('wrench')).not.toBeInTheDocument();
expect(screen.queryByText(numberOfGroupings)).not.toBeInTheDocument();
expect(screen.queryByRole('heading', { name: 'Groupings' })).not.toBeInTheDocument();
expect(
diff --git a/ui/tests/components/table/groupings-table.test.tsx b/ui/tests/components/table/groupings-table.test.tsx
index 164630ba..67d97a1f 100644
--- a/ui/tests/components/table/groupings-table.test.tsx
+++ b/ui/tests/components/table/groupings-table.test.tsx
@@ -30,7 +30,7 @@ describe('GroupingsTable', () => {
const firstPageGroupings = mockData.slice(0, pageSize);
firstPageGroupings.forEach((group) => {
- expect(screen.getAllByTestId('square-pen-icon')[0]).toBeInTheDocument();
+ expect(screen.getAllByTestId('edit-icon')[0]).toBeInTheDocument();
expect(screen.getByText(group.name)).toBeInTheDocument();
expect(screen.getByText(group.description)).toBeInTheDocument();
expect(screen.queryByDisplayValue(group.path)).not.toBeInTheDocument();