Install Font Awesome 5

uhawaii-system-its-ti-iam · Sep 20, 2024 · deddc33 · deddc33
1 parent cd24b3f
commit deddc33
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 46 deletions.
diff --git 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"
                             >
-                                <Image src="/uhgroupings/user-solid.svg" alt="user-solid" width={56} height={64} />
+                                <FontAwesomeIcon style={{ width: '56px', height: '64px' }}aria-label="user" icon={faUser} />
                                 <div
                                     className="bg-blue-background rounded-full flex justify-center
                                     items-center h-[30px] w-[30px] absolute left-3 bottom-0 ml-16"
                                 >
-                                    <KeyRound className="fill-white stroke-none p-0.5" aria-label="key-round" />
+                                    <FontAwesomeIcon className="text-white stroke-none p-0.5" aria-label="key-round" icon={faKey} />
                                 </div>
                             </div>
                         </div>
@@ -104,13 +98,7 @@ const AfterLogin = async () => {
                         <div key={index} className="flex flex-col justify-between">
                             <div>
                                 <div className="flex items-center mb-1">
-                                    <Image
-                                        alt={pageInfoItem.icon.alt}
-                                        src={pageInfoItem.icon.src}
-                                        width={pageInfoItem.icon.width}
-                                        height={pageInfoItem.icon.height}
-                                        className={`mr-5 mb-4 max-w-${pageInfoItem.icon.width} h-auto`}
-                                    />
+                                    <FontAwesomeIcon icon={pageInfoItem.icon} style={{ width: `${pageInfoItem.width}px`, height: `${pageInfoItem.height}px` }} className="mr-5 mb-4 max-w-${pageInfoItem.icon.width} h-auto" aria-label={pageInfoItem.ariaLabel} />
                                     {pageInfoItem.number !== null && (
                                         <span className="text-[2.5rem] text-text-color">{pageInfoItem.number}</span>
                                     )}

diff --git 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 = () => (
             <div className="text-center">
                 <a href="https://uhawaii.atlassian.net/wiki/spaces/UHIAM/pages/13403213/UH+Groupings">
                     <Button size="lg" variant="default">
-                            Learn More <ArrowRight className="ml-1"/>
+                            Learn More <FontAwesomeIcon className="ml-1" icon={faArrowRight} />
                     </Button>
                 </a>
             </div>

diff --git 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 = ({
             <Button 
                 variant="default" 
                 onClick={() => login()}>
-                Login <LogInIcon className="ml-1" />
+                Login <FontAwesomeIcon className="ml-1" icon={faSignInAlt} />
             </Button>
         ) : (
             <Button 
                 variant="outline" 
                 onClick={() => logout()}>
                 Logout&nbsp;
-                <span className="sm:inline hidden">({currentUser.uid})</span> <LogOutIcon className="ml-1" />
+                <span className="sm:inline hidden">({currentUser.uid})</span> <FontAwesomeIcon className="ml-1" icon={faSignOutAlt} />
             </Button>
         )}
     </> 

diff --git a/ui/tests/app/(home)/_components/after-login.test.tsx b/ui/tests/app/(home)/_components/after-login.test.tsx
@@ -30,15 +30,15 @@ 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}`);
     };
 
     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(