From 9ec73d6cf4781615dfc133382dc620a6e9d27b4d Mon Sep 17 00:00:00 2001 From: m5r Date: Wed, 8 Sep 2021 04:59:38 +0800 Subject: [PATCH] replace fontawesome icons with ionicons 5 --- app/core/layouts/layout/footer.tsx | 32 +++---------------- .../components/conversations-list.tsx | 5 ++- app/messages/components/new-message-area.tsx | 5 ++- .../components/new-message-button.tsx | 5 ++- app/messages/pages/messages/[recipient].tsx | 9 +++--- .../components/onboarding-layout.tsx | 8 ++--- app/onboarding/pages/welcome/step-one.tsx | 2 +- app/onboarding/pages/welcome/step-two.tsx | 5 ++- app/phone-calls/pages/keypad.tsx | 7 ++-- .../pages/outgoing-call/[recipient].tsx | 5 ++- app/public-area/components/header.tsx | 4 +-- .../components/referral-banner.tsx | 6 ++-- app/public-area/pages/roadmap.tsx | 10 +++--- app/settings/components/settings-layout.tsx | 5 ++- app/settings/pages/settings.tsx | 7 ++-- app/settings/pages/settings/account.tsx | 28 ++++++++-------- app/settings/pages/settings/billing.tsx | 1 - package-lock.json | 5 +++ package.json | 1 + 19 files changed, 60 insertions(+), 90 deletions(-) diff --git a/app/core/layouts/layout/footer.tsx b/app/core/layouts/layout/footer.tsx index 611c649..555801f 100644 --- a/app/core/layouts/layout/footer.tsx +++ b/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 { - faPhoneAlt as fasPhone, - faTh as fasTh, - faComments as fasComments, - faCog as fasCog, -} from "@fortawesome/pro-solid-svg-icons"; +import { IoCall, IoKeypad, IoChatbubbles, IoSettings } from "react-icons/io5"; 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" }} > - } - /> - } - /> - } - /> - } - /> + } /> + } /> + } /> + } /> ); } diff --git a/app/messages/components/conversations-list.tsx b/app/messages/components/conversations-list.tsx index f5340a6..64c0d3d 100644 --- a/app/messages/components/conversations-list.tsx +++ b/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 { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { IoChevronForward } from "react-icons/io5"; import getConversationsQuery from "../queries/get-conversations"; import { formatRelativeDate } from "../../core/helpers/date-formatter"; @@ -24,7 +23,7 @@ export default function ConversationsList() { {formattedPhoneNumber}
{formatRelativeDate(lastMessage.sentAt)} - +
{lastMessage.content}
diff --git a/app/messages/components/new-message-area.tsx b/app/messages/components/new-message-area.tsx index 27f6ea7..0730a36 100644 --- a/app/messages/components/new-message-area.tsx +++ b/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 { faPaperPlane } from "@fortawesome/pro-regular-svg-icons"; +import { IoSend } from "react-icons/io5"; import { useForm } from "react-hook-form"; import sendMessage from "../mutations/send-message"; @@ -99,7 +98,7 @@ const NewMessageArea: FunctionComponent = ({ recipient, onSend }) => { {...register("content", { required: true })} /> ); diff --git a/app/messages/components/new-message-button.tsx b/app/messages/components/new-message-button.tsx index 1c53cce..5ee5ba2 100644 --- a/app/messages/components/new-message-button.tsx +++ b/app/messages/components/new-message-button.tsx @@ -1,6 +1,5 @@ import type { FunctionComponent, MouseEventHandler } from "react"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faEdit } from "@fortawesome/pro-regular-svg-icons"; +import { IoCreateOutline } from "react-icons/io5"; type Props = { onClick: MouseEventHandler; @@ -13,7 +12,7 @@ const NewMessageButton: FunctionComponent = ({ 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" > - + ); }; diff --git a/app/messages/pages/messages/[recipient].tsx b/app/messages/pages/messages/[recipient].tsx index 98444c3..3d8d2a8 100644 --- a/app/messages/pages/messages/[recipient].tsx +++ b/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 { faLongArrowLeft, faInfoCircle, faPhoneAlt as faPhone } from "@fortawesome/pro-regular-svg-icons"; +import { IoChevronBack, IoInformationCircle, IoCall } from "react-icons/io5"; import Layout from "../../../core/layouts/layout"; import Conversation from "../../components/conversation"; @@ -21,12 +20,12 @@ const ConversationPage: BlitzPage = () => {
- + {conversation?.formattedPhoneNumber ?? recipient} - - + +
Loading messages with {recipient}}> diff --git a/app/onboarding/components/onboarding-layout.tsx b/app/onboarding/components/onboarding-layout.tsx index c34e5c0..02aa848 100644 --- a/app/onboarding/components/onboarding-layout.tsx +++ b/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 = ({ children, currentStep, pre