replace fontawesome icons with ionicons 5

app/core/layouts/layout/footer.tsx

@@ -1,12 +1,6 @@
 import type { ReactNode } from "react";
 import { Link, useRouter } from "blitz";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IoCall, IoKeypad, IoChatbubbles, IoSettings } from "react-icons/io5";
-import {
-	faPhoneAlt as fasPhone,
-	faTh as fasTh,
-	faComments as fasComments,
-	faCog as fasCog,
-} from "@fortawesome/pro-solid-svg-icons";
 import clsx from "clsx";
 
 export default function Footer() {
@@ -15,26 +9,10 @@ export default function Footer() {
 			className="grid grid-cols-4 bg-[#F7F7F7] border-t border-gray-400 border-opacity-25 py-3"
 			style={{ flex: "0 0 50px" }}
 		>
-			<NavLink
+			<NavLink label="Calls" path="/calls" icon={<IoCall className="w-6 h-6" />} />
-				label="Calls"
+			<NavLink label="Keypad" path="/keypad" icon={<IoKeypad className="w-6 h-6" />} />
-				path="/calls"
+			<NavLink label="Messages" path="/messages" icon={<IoChatbubbles className="w-6 h-6" />} />
-				icon={<FontAwesomeIcon size="lg" className="w-6 h-6" icon={fasPhone} />}
+			<NavLink label="Settings" path="/settings" icon={<IoSettings className="w-6 h-6" />} />
-			/>
-			<NavLink
-				label="Keypad"
-				path="/keypad"
-				icon={<FontAwesomeIcon size="lg" className="w-6 h-6" icon={fasTh} />}
-			/>
-			<NavLink
-				label="Messages"
-				path="/messages"
-				icon={<FontAwesomeIcon size="lg" className="w-6 h-6" icon={fasComments} />}
-			/>
-			<NavLink
-				label="Settings"
-				path="/settings"
-				icon={<FontAwesomeIcon size="lg" className="w-6 h-6" icon={fasCog} />}
-			/>
 		</footer>
 	);
 }

app/messages/components/conversations-list.tsx

@@ -1,6 +1,5 @@
 import { Link, useQuery, Routes } from "blitz";
-import { faChevronRight } from "@fortawesome/pro-regular-svg-icons";
+import { IoChevronForward } from "react-icons/io5";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import getConversationsQuery from "../queries/get-conversations";
 import { formatRelativeDate } from "../../core/helpers/date-formatter";
@@ -24,7 +23,7 @@ export default function ConversationsList() {
 									<strong>{formattedPhoneNumber}</strong>
 									<div className="text-gray-700 flex flex-row gap-x-1">
 										{formatRelativeDate(lastMessage.sentAt)}
-										<FontAwesomeIcon className="w-4 h-4 my-auto" icon={faChevronRight} />
+										<IoChevronForward className="w-4 h-4 my-auto" />
 									</div>
 								</div>
 								<div className="line-clamp-2 text-gray-700">{lastMessage.content}</div>

app/messages/components/new-message-area.tsx

@@ -1,7 +1,6 @@
 import type { FunctionComponent } from "react";
 import { useMutation, useQuery } from "blitz";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IoSend } from "react-icons/io5";
-import { faPaperPlane } from "@fortawesome/pro-regular-svg-icons";
 import { useForm } from "react-hook-form";
 
 import sendMessage from "../mutations/send-message";
@@ -99,7 +98,7 @@ const NewMessageArea: FunctionComponent<Props> = ({ recipient, onSend }) => {
 				{...register("content", { required: true })}
 			/>
 			<button type="submit">
-				<FontAwesomeIcon size="2x" className="h-8 w-8 pl-1 pr-2" icon={faPaperPlane} />
+				<IoSend className="h-8 w-8 pl-1 pr-2" />
 			</button>
 		</form>
 	);

app/messages/components/new-message-button.tsx

@@ -1,6 +1,5 @@
 import type { FunctionComponent, MouseEventHandler } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IoCreateOutline } from "react-icons/io5";
-import { faEdit } from "@fortawesome/pro-regular-svg-icons";
 
 type Props = {
 	onClick: MouseEventHandler<HTMLButtonElement>;
@@ -13,7 +12,7 @@ const NewMessageButton: FunctionComponent<Props> = ({ onClick }) => {
 			className="absolute bottom-20 right-6
 			w-14 h-14 bg-gray-800 rounded-full hover:bg-gray-900 active:shadow-lg shadow transition ease-in duration-200 focus:outline-none"
 		>
-			<FontAwesomeIcon size="lg" className="m-auto pl-1.5 text-white w-8 h-8" icon={faEdit} />
+			<IoCreateOutline className="m-auto pl-1.5 text-white w-8 h-8" />
 		</button>
 	);
 };

app/messages/pages/messages/[recipient].tsx

@@ -1,8 +1,7 @@
 import { Suspense } from "react";
 import type { BlitzPage } from "blitz";
 import { Routes, useRouter } from "blitz";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IoChevronBack, IoInformationCircle, IoCall } from "react-icons/io5";
-import { faLongArrowLeft, faInfoCircle, faPhoneAlt as faPhone } from "@fortawesome/pro-regular-svg-icons";
 
 import Layout from "../../../core/layouts/layout";
 import Conversation from "../../components/conversation";
@@ -21,12 +20,12 @@ const ConversationPage: BlitzPage = () => {
 		<Layout title={pageTitle} hideFooter>
 			<header className="absolute top-0 w-screen h-12 backdrop-filter backdrop-blur-sm bg-white bg-opacity-75 border-b grid grid-cols-3 items-center">
 				<span className="col-start-1 col-span-1 pl-2 cursor-pointer" onClick={router.back}>
-					<FontAwesomeIcon size="lg" className="h-8 w-8" icon={faLongArrowLeft} />
+					<IoChevronBack className="h-8 w-8" />
 				</span>
 				<strong className="col-span-1">{conversation?.formattedPhoneNumber ?? recipient}</strong>
 				<span className="col-span-1 flex justify-end space-x-4 pr-2">
-					<FontAwesomeIcon size="lg" className="h-8 w-8" icon={faPhone} />
+					<IoCall className="h-8 w-8" />
-					<FontAwesomeIcon size="lg" className="h-8 w-8" icon={faInfoCircle} />
+					<IoInformationCircle className="h-8 w-8" />
 				</span>
 			</header>
 			<Suspense fallback={<div className="pt-12">Loading messages with {recipient}</div>}>

app/onboarding/components/onboarding-layout.tsx

@@ -1,6 +1,6 @@
 import type { FunctionComponent } from "react";
 import { Link } from "blitz";
-import { CheckIcon } from "@heroicons/react/solid";
+import { IoCheckmark } from "react-icons/io5";
 import clsx from "clsx";
 
 type StepLink = {
@@ -32,7 +32,7 @@ const OnboardingLayout: FunctionComponent<Props> = ({ children, currentStep, pre
 					<nav className="grid grid-cols-1 gap-y-3 mx-auto">
 						{next ? (
 							<Link href={next.href}>
-								<a className="max-w-[240px] mx-auto w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary-600 text-base font-medium text-white hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:text-sm">
+								<a className="max-w-[240px] text-center mx-auto w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-primary-600 text-base font-medium text-white hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:text-sm">
 									{next.label}
 								</a>
 							</Link>
@@ -40,7 +40,7 @@ const OnboardingLayout: FunctionComponent<Props> = ({ children, currentStep, pre
 
 						{previous ? (
 							<Link href={previous.href}>
-								<a className="max-w-[240px] mx-auto w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:text-sm">
+								<a className="max-w-[240px] text-center mx-auto w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 sm:text-sm">
 									{previous.label}
 								</a>
 							</Link>
@@ -65,7 +65,7 @@ const OnboardingLayout: FunctionComponent<Props> = ({ children, currentStep, pre
 													<div className="h-0.5 w-full bg-primary-600" />
 												</div>
 												<a className="relative w-8 h-8 flex items-center justify-center bg-primary-600 rounded-full">
-													<CheckIcon className="w-5 h-5 text-white" />
+													<IoCheckmark className="w-5 h-5 text-white" />
 													<span className="sr-only">{step}</span>
 												</a>
 											</>

app/onboarding/pages/welcome/step-one.tsx

@@ -11,7 +11,7 @@ const StepOne: BlitzPage = () => {
 	return (
 		<div className="flex flex-col space-y-4 items-center">
 			<h2>Welcome to Shellphone</h2>
-			<span>
+			<span className="text-center">
 				We&#39;ll help you connect your Twilio phone number to our service and set up your virtual phone!
 			</span>
 		</div>

app/onboarding/pages/welcome/step-two.tsx

@@ -4,8 +4,7 @@ import type { BlitzPage, GetServerSideProps } from "blitz";
 import { getSession, Routes, useMutation, useRouter } from "blitz";
 import clsx from "clsx";
 import { useForm } from "react-hook-form";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IoHelpCircle } from "react-icons/io5";
-import { faQuestionCircle } from "@fortawesome/pro-solid-svg-icons";
 
 import db from "db";
 import setTwilioApiFields from "../../mutations/set-twilio-api-fields";
@@ -52,7 +51,7 @@ const StepTwo: BlitzPage = () => {
 		<>
 			<div className="flex flex-col space-y-4 items-center relative">
 				<button onClick={() => setIsHelpModalOpen(true)} className="absolute top-0 right-0">
-					<FontAwesomeIcon size="lg" className="w-6 h-6 text-primary-700" icon={faQuestionCircle} />
+					<IoHelpCircle className="w-6 h-6 text-primary-700" />
 				</button>
 				<form onSubmit={onSubmit} className="flex flex-col gap-6">
 					<article>

app/phone-calls/pages/keypad.tsx

@@ -4,8 +4,7 @@ import { Routes, useRouter } from "blitz";
 import { atom, useAtom } from "jotai";
 import { usePress } from "@react-aria/interactions";
 import { Transition } from "@headlessui/react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IoBackspace, IoCall } from "react-icons/io5";
-import { faBackspace, faPhoneAlt as faPhone } from "@fortawesome/pro-solid-svg-icons";
 
 import { Direction } from "db";
 import Layout from "../../core/layouts/layout";
@@ -99,7 +98,7 @@ const KeypadPage: BlitzPage = () => {
 					}}
 					className="cursor-pointer select-none col-start-2 h-12 w-12 flex justify-center items-center mx-auto bg-green-800 rounded-full"
 				>
-					<FontAwesomeIcon className="w-6 h-6" icon={faPhone} color="white" size="lg" />
+					<IoCall className="w-6 h-6 text-white" />
 				</button>
 
 				<Transition
@@ -113,7 +112,7 @@ const KeypadPage: BlitzPage = () => {
 					leaveTo="transform scale-95 opacity-0"
 				>
 					<div {...onBackspacePress} className="cursor-pointer select-none m-auto">
-						<FontAwesomeIcon className="w-6 h-6" icon={faBackspace} size="lg" />
+						<IoBackspace className="w-6 h-6" />
 					</div>
 				</Transition>
 			</Keypad>

app/phone-calls/pages/outgoing-call/[recipient].tsx

@@ -3,8 +3,7 @@ import { ErrorBoundary, Routes, useRouter, withRouter } from "blitz";
 import { useCallback, useEffect } from "react";
 import type { TwilioError } from "@twilio/voice-sdk";
 import { atom, useAtom } from "jotai";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IoCall } from "react-icons/io5";
-import { faPhoneAlt as faPhone } from "@fortawesome/pro-solid-svg-icons";
 
 import useRequireOnboarding from "../../../core/hooks/use-require-onboarding";
 import useMakeCall from "../../hooks/use-make-call";
@@ -54,7 +53,7 @@ const OutgoingCall: BlitzPage = () => {
 					onClick={call.hangUp}
 					className="cursor-pointer select-none col-start-2 h-12 w-12 flex justify-center items-center mx-auto bg-red-800 rounded-full"
 				>
-					<FontAwesomeIcon className="w-6 h-6" icon={faPhone} color="white" size="lg" />
+					<IoCall className="w-6 h-6 text-white" />
 				</button>
 			</Keypad>
 		</div>

app/public-area/components/header.tsx

@@ -2,7 +2,7 @@ import { Fragment, useState, useRef, useEffect } from "react";
 import type { LinkProps } from "blitz";
 import { Link, Routes } from "blitz";
 import { Dialog, Transition } from "@headlessui/react";
-import { XIcon } from "@heroicons/react/outline";
+import { IoClose } from "react-icons/io5";
 
 function Header() {
 	return (
@@ -198,7 +198,7 @@ function MobileNav() {
 														onClick={() => setMobileNavOpen(false)}
 													>
 														<span className="sr-only">Close panel</span>
-														<XIcon className="h-6 w-6" aria-hidden="true" />
+														<IoClose className="h-6 w-6" aria-hidden="true" />
 													</button>
 												</div>
 											</div>

app/public-area/components/referral-banner.tsx

@@ -1,4 +1,4 @@
-import { XIcon } from "@heroicons/react/outline";
+import { IoClose } from "react-icons/io5";
 
 export default function ReferralBanner() {
 	// TODO
@@ -8,7 +8,7 @@ export default function ReferralBanner() {
 	}
 
 	return (
-		<div className="relative bg-primary-600">
+		<div className="relative bg-primary-600 z-40">
 			<div className="max-w-7xl mx-auto py-3 px-3 sm:px-6 lg:px-8">
 				<div className="pr-16 sm:text-center sm:px-16">
 					<p className="font-medium text-white">
@@ -27,7 +27,7 @@ export default function ReferralBanner() {
 						className="flex p-2 rounded-md hover:bg-primary-500 focus:outline-none focus:ring-2 focus:ring-white"
 					>
 						<span className="sr-only">Dismiss</span>
-						<XIcon className="h-6 w-6 text-white" aria-hidden="true" />
+						<IoClose className="h-6 w-6 text-white" aria-hidden="true" />
 					</button>
 				</div>
 			</div>

app/public-area/pages/roadmap.tsx

@@ -1,8 +1,6 @@
 import type { BlitzPage } from "blitz";
 import clsx from "clsx";
-import { CheckIcon, XIcon, TerminalIcon } from "@heroicons/react/solid";
+import { IoClose, IoCheckmark, IoCodeSlash } from "react-icons/io5";
-
-import { formatDate } from "../../core/helpers/date-formatter";
 
 import Layout from "../components/layout";
 
@@ -30,11 +28,11 @@ const Roadmap: BlitzPage = () => {
 										)}
 									>
 										{isDone ? (
-											<CheckIcon className="h-5 w-5 text-white" aria-hidden="true" />
+											<IoCheckmark className="h-5 w-5 text-white" aria-hidden="true" />
 										) : isInProgress ? (
-											<TerminalIcon className="h-5 w-5 text-white" aria-hidden="true" />
+											<IoCodeSlash className="h-5 w-5 text-white" aria-hidden="true" />
 										) : (
-											<XIcon className="h-5 w-5 text-white" aria-hidden="true" />
+											<IoClose className="h-5 w-5 text-white" aria-hidden="true" />
 										)}
 									</span>
 								</div>

app/settings/components/settings-layout.tsx

@@ -1,7 +1,6 @@
 import type { FunctionComponent } from "react";
 import { useRouter } from "blitz";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IoChevronBack } from "react-icons/io5";
-import { faChevronLeft } from "@fortawesome/pro-regular-svg-icons";
 
 import Layout from "../../core/layouts/layout";
 
@@ -15,7 +14,7 @@ const SettingsLayout: FunctionComponent = ({ children }) => {
 			<header className="px-4 sm:px-6 md:px-0">
 				<header className="flex">
 					<span className="flex items-center cursor-pointer" onClick={router.back}>
-						<FontAwesomeIcon className="h-8 w-8 mr-2" icon={faChevronLeft} /> Back
+						<IoChevronBack className="h-8 w-8 mr-2" /> Back
 					</span>
 				</header>
 			</header>

app/settings/pages/settings.tsx

@@ -1,7 +1,6 @@
 import type { BlitzPage } from "blitz";
 import { Routes, useMutation } from "blitz";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IoCardOutline, IoPersonCircleOutline } from "react-icons/io5";
-import { faCreditCard, faUserCircle } from "@fortawesome/pro-regular-svg-icons";
 
 import Layout from "../../core/layouts/layout";
 
@@ -16,12 +15,12 @@ const navigation = [
 	{
 		name: "Account",
 		href: "/settings/account",
-		icon: ({ className = "w-8 h-8" }) => <FontAwesomeIcon size="lg" className={className} icon={faUserCircle} />,
+		icon: ({ className = "w-8 h-8" }) => <IoPersonCircleOutline className={className} />,
 	},
 	{
 		name: "Billing",
 		href: "/settings/billing",
-		icon: ({ className = "w-8 h-8" }) => <FontAwesomeIcon size="lg" className={className} icon={faCreditCard} />,
+		icon: ({ className = "w-8 h-8" }) => <IoCardOutline className={className} />,
 	},
 ];
 /* eslint-enable react/display-name */

app/settings/pages/settings/account.tsx

@@ -12,7 +12,6 @@ const Account: BlitzPage = () => {
 	useRequireOnboarding();
 
 	return (
-		<SettingsLayout>
 		<div className="flex flex-col space-y-6 p-6">
 			<ProfileInformations />
 
@@ -28,7 +27,6 @@ const Account: BlitzPage = () => {
 
 			<DangerZone />
 		</div>
-		</SettingsLayout>
 	);
 };
 

app/settings/pages/settings/billing.tsx

@@ -1,7 +1,6 @@
 /* TODO
 import type { FunctionComponent, MouseEventHandler } from "react";
 import type { BlitzPage } from "blitz";
-import { ExternalLinkIcon } from "@heroicons/react/outline";
 
 import SettingsLayout from "../../components/settings/settings-layout";
 import SettingsSection from "../../components/settings/settings-section";

package-lock.json

@@ -16788,6 +16788,11 @@
 			"resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.14.0.tgz",
 			"integrity": "sha512-JwnIFedpGwUqxtMLv7lLq8PS6M6snFVeDvAQnG/0lyForn0ucWKMr58j86+9HobUGX6SAFmv7sVIJdLaxxzb8A=="
 		},
+		"react-icons": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.2.0.tgz",
+			"integrity": "sha512-rmzEDFt+AVXRzD7zDE21gcxyBizD/3NqjbX6cmViAgdqfJ2UiLer8927/QhhrXQV7dEj/1EGuOTPp7JnLYVJKQ=="
+		},
 		"react-intersection-observer": {
 			"version": "8.32.1",
 			"resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-8.32.1.tgz",

package.json

@@ -73,6 +73,7 @@
 		"react-datocms": "1.6.3",
 		"react-dom": "18.0.0-alpha-8723e772b-20210826",
 		"react-hook-form": "7.14.0",
+		"react-icons": "4.2.0",
 		"react-spring": "9.2.4",
 		"react-spring-bottom-sheet": "3.4.0",
 		"react-use-gesture": "9.1.3",