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

8
app/onboarding/components/onboarding-layout.tsx
View File

@ -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>
</>

2
app/onboarding/pages/welcome/step-one.tsx
View File

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

5
app/onboarding/pages/welcome/step-two.tsx
View File

@ -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 { faQuestionCircle } from "@fortawesome/pro-solid-svg-icons";
import { IoHelpCircle } from "react-icons/io5";
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>