mokhtar/shellphone.app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

replace fontawesome icons with ionicons 5

Browse Source
This commit is contained in:
m5r
2021-09-08 04:59:38 +08:00
parent 8e856ffb92
commit 9ec73d6cf4
19 changed files with 60 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/messages/components/conversations-list.tsx
View File

@ -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() {
<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>

5
app/messages/components/new-message-area.tsx
View File

@ -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<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>
);

5
app/messages/components/new-message-button.tsx
View File

@ -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<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>
);
};

9
app/messages/pages/messages/[recipient].tsx
View File

@ -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 = () => {
<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} />
<FontAwesomeIcon size="lg" className="h-8 w-8" icon={faInfoCircle} />
<IoCall className="h-8 w-8" />
<IoInformationCircle className="h-8 w-8" />
</span>
</header>
<Suspense fallback={<div className="pt-12">Loading messages with {recipient}</div>}>