filipe/zep
Archived
1
0
Fork 0
Code Issues Pull requests Activity

chore: sort tailwind

Browse source
This commit is contained in:
Filipe Medeiros 2021-11-30 10:50:23 +00:00
parent 1f7841d17a
commit 38641f9b8f
11 changed files with 44 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
components/BottomMenu.tsx
View file

@ -57,7 +57,7 @@ const BottomMenu: FC<Props> = ({ className }) => {
{pathname !== '/dashboard' && ( {pathname !== '/dashboard' && (
<button <button
disabled={isWelcoming} disabled={isWelcoming}
className="bg-purple-400 p-1 h-12 rounded hover:bg-purple-400 disabled:hover:bg-purple-400 shadow-lg disabled:cursor-default" className="h-12 p-1 bg-purple-400 rounded shadow-lg hover:bg-purple-400 disabled:hover:bg-purple-400 disabled:cursor-default"
onClick={() => push('/dashboard')} onClick={() => push('/dashboard')}
> >
<HomeIcon className="h-full text-purple-50 dark:text-gray-900" /> <HomeIcon className="h-full text-purple-50 dark:text-gray-900" />
@ -74,7 +74,7 @@ const BottomMenu: FC<Props> = ({ className }) => {
{'share' in navigator ? ( {'share' in navigator ? (
<button <button
disabled={isWelcoming} disabled={isWelcoming}
className="p-1 h-16 w-10 rounded shadow-lg bg-purple-400 hover:bg-purple-400 disabled:hover:bg-purple-400 disabled:cursor-default" className="w-10 h-16 p-1 bg-purple-400 rounded shadow-lg hover:bg-purple-400 disabled:hover:bg-purple-400 disabled:cursor-default"
onClick={onShare} onClick={onShare}
> >
<ShareIcon className="text-purple-50 dark:text-gray-900" /> <ShareIcon className="text-purple-50 dark:text-gray-900" />
@ -113,7 +113,7 @@ const BottomMenu: FC<Props> = ({ className }) => {
} }
/> />
</button> </button>
<div className="border-purple-400 border-t-2 border-b-2 p-1 h-16 shadow-lg"> <div className="h-16 p-1 border-t-2 border-b-2 border-purple-400 shadow-lg">
<QrcodeIcon className="h-full text-gray-900 dark:text-purple-100" /> <QrcodeIcon className="h-full text-gray-900 dark:text-purple-100" />
</div> </div>
<button <button

6
components/Layout.tsx
View file

@ -20,17 +20,17 @@ const Layout: FC<Props> = ({ children }) => {
useListenToColorMedia() useListenToColorMedia()
return ( return (
<div className="dark:text-purple-50 bg-purple-50 dark:bg-gray-900 relative w-screen h-screen pt-4 pb-4 px-5 flex flex-col gap-4"> <div className="relative flex flex-col w-screen h-screen px-5 pt-4 pb-4 gap-4 dark:text-purple-50 bg-purple-50 dark:bg-gray-900">
<header <header
className={clsx('flex justify-between items-center', { className={clsx('flex justify-between items-center', {
'flex-row-reverse': leftHanded, 'flex-row-reverse': leftHanded,
})} })}
> >
<div className="flex items-start"> <div className="flex items-start">
<h1 className="font-extrabold text-2xl text-gray-900 dark:text-purple-100"> <h1 className="text-2xl font-extrabold text-gray-900 dark:text-purple-100">
zep zep
</h1> </h1>
<LightningBoltIcon className="text-gray-900 dark:text-purple-100 h-4" /> <LightningBoltIcon className="h-4 text-gray-900 dark:text-purple-100" />
</div> </div>
<TopMenu /> <TopMenu />
</header> </header>

2
components/PinPad.tsx
View file

@ -49,7 +49,7 @@ const PinPad: FC<Props> = ({}) => {
} }
return ( return (
<div className="flex flex-col items-center gap-10 w-full h-72 px-16 max-w-sm"> <div className="flex flex-col items-center w-full max-w-sm px-16 gap-10 h-72">
<div <div
ref={pinCirclesWrapRef} ref={pinCirclesWrapRef}
className={clsx({ 'animate-denied': denied })} className={clsx({ 'animate-denied': denied })}

26
components/RecentTransactions.tsx
View file

@ -27,13 +27,13 @@ const RecentTransactions: FC<Props> = ({ className }) => {
return ( return (
<> <>
{hasReceivable && ( {hasReceivable && (
<section className="flex flex-col gap-3 w-full"> <section className="flex flex-col w-full gap-3">
<div className="flex justify-between items-center gap-1"> <div className="flex items-center justify-between gap-1">
<h2 className="text-2xl font-semibold text-purple-50 flex-1"> <h2 className="flex-1 text-2xl font-semibold text-purple-50">
incoming incoming
</h2> </h2>
<span className="rounded-full w-6 text-center dark:bg-purple-50 text-gray-900 text-base"> <span className="w-6 text-base text-center text-gray-900 rounded-full dark:bg-purple-50">
{receivableBlocks.length} {receivableBlocks.length}
</span> </span>
<ChevronUpIcon <ChevronUpIcon
@ -55,7 +55,7 @@ const RecentTransactions: FC<Props> = ({ className }) => {
{receivableBlocks.map(receivable => ( {receivableBlocks.map(receivable => (
<li <li
key={receivable.hash} key={receivable.hash}
className="bg-purple-50 dark:hover:bg-gray-700 dark:bg-gray-800 dark:text-purple-50 shadow rounded px-3 py-3 flex items-center justify-between gap-2 text-black border-r-4 border-blue-400" className="flex items-center justify-between px-3 py-3 text-black border-r-4 border-blue-400 rounded shadow bg-purple-50 dark:hover:bg-gray-700 dark:bg-gray-800 dark:text-purple-50 gap-2"
> >
<button <button
className="contents" className="contents"
@ -64,9 +64,9 @@ const RecentTransactions: FC<Props> = ({ className }) => {
onBlockReceived(receivable.hash) onBlockReceived(receivable.hash)
}} }}
> >
<ClockIcon className="w-6 flex-shrink-0 text-blue-400" /> <ClockIcon className="flex-shrink-0 w-6 text-blue-400" />
<div className="overflow-hidden overflow-ellipsis text-left whitespace-nowrap"> <div className="overflow-hidden text-left overflow-ellipsis whitespace-nowrap">
{Intl.DateTimeFormat([], { {Intl.DateTimeFormat([], {
day: '2-digit', day: '2-digit',
month: '2-digit', month: '2-digit',
@ -94,11 +94,11 @@ const RecentTransactions: FC<Props> = ({ className }) => {
</section> </section>
)} )}
{accountHistory !== undefined && accountHistory.history !== '' && ( {accountHistory !== undefined && accountHistory.history !== '' && (
<section className="flex flex-col gap-3 w-full min-h-0 flex-1"> <section className="flex flex-col flex-1 w-full min-h-0 gap-3">
<h2 className="text-2xl font-semibold text-purple-50"> <h2 className="text-2xl font-semibold text-purple-50">
recent transactions recent transactions
</h2> </h2>
<ol className="flex flex-col gap-3 w-full overflow-auto"> <ol className="flex flex-col w-full overflow-auto gap-3">
{accountHistory.history.map(txn => ( {accountHistory.history.map(txn => (
<li <li
key={txn.hash} key={txn.hash}
@ -109,13 +109,13 @@ const RecentTransactions: FC<Props> = ({ className }) => {
> >
<button className="contents" onClick={() => {}}> <button className="contents" onClick={() => {}}>
{txn.type === 'send' ? ( {txn.type === 'send' ? (
<UploadIcon className="w-6 text-yellow-300 flex-shrink-0" /> <UploadIcon className="flex-shrink-0 w-6 text-yellow-300" />
) : ( ) : (
<DownloadIcon <DownloadIcon
className={clsx('w-6 flex-shrink-0 text-green-300')} className={clsx('w-6 flex-shrink-0 text-green-300')}
/> />
)} )}
<div className="overflow-hidden overflow-ellipsis text-left flex-1 whitespace-nowrap"> <div className="flex-1 overflow-hidden text-left overflow-ellipsis whitespace-nowrap">
{Intl.DateTimeFormat([], { {Intl.DateTimeFormat([], {
day: '2-digit', day: '2-digit',
month: '2-digit', month: '2-digit',
@ -144,7 +144,7 @@ const RecentTransactions: FC<Props> = ({ className }) => {
)} )}
{!hasReceivable && {!hasReceivable &&
(accountHistory === undefined || accountHistory.history === '') && ( (accountHistory === undefined || accountHistory.history === '') && (
<div className="text-center pt-8 text-purple-50"> <div className="pt-8 text-center text-purple-50">
<p className="pb-4">no transactions yet...</p> <p className="pb-4">no transactions yet...</p>
<p> <p>
get your first nano get your first nano
@ -155,7 +155,7 @@ const RecentTransactions: FC<Props> = ({ className }) => {
)} )}
{false && ( {false && (
<button <button
className="bg-purple-200 py-2 px-4 rounded dark:text-gray-900 font-bold shadow" className="px-4 py-2 font-bold bg-purple-200 rounded shadow dark:text-gray-900"
onClick={() => {}} onClick={() => {}}
> >
load more load more

6
lib/hooks/useReadQrFromVideo.ts
View file

@ -48,7 +48,11 @@ const useReadQrFromVideo = (onQrCodeRead: (content: string) => void) => {
start() start()
return () => { return () => {
stream?.getTracks().forEach(track => track.stop()) console.log(stream, video, stream?.getTracks())
if (stream !== undefined) {
stream.getTracks().forEach(track => track.stop())
stream.addEventListener('addtrack', track => track.track.stop())
}
stopTick = true stopTick = true
} }
}, [onQrCodeRead]) }, [onQrCodeRead])

2
pages/index.tsx
View file

@ -21,7 +21,7 @@ const Landing = () => {
}, [push]) }, [push])
return ( return (
<main className="flex flex-col items-center justify-evenly h-full w-full"> <main className="flex flex-col items-center w-full h-full justify-evenly">
<header className="flex flex-col justify-center h-24"> <header className="flex flex-col justify-center h-24">
<h1 className="text-4xl">welcome</h1> <h1 className="text-4xl">welcome</h1>
</header> </header>

2
pages/receive/qr.tsx
View file

@ -8,7 +8,7 @@ const MyQrCode: NextPage = () => {
const canvasRef = useDrawQrCode({ address: account?.address ?? '' }) const canvasRef = useDrawQrCode({ address: account?.address ?? '' })
return ( return (
<div className="grid gap-6 place-content-center h-full w-full"> <div className="w-full h-full grid gap-6 place-content-center">
<h1 className="text-3xl font-extrabold text-center text-purple-100 dark:text-gray-900"> <h1 className="text-3xl font-extrabold text-center text-purple-100 dark:text-gray-900">
get scanned! get scanned!
</h1> </h1>

4
pages/send/qr.tsx
View file

@ -21,7 +21,7 @@ const ReadQrCode: NextPage = () => {
const { videoLive, videoRef } = useReadQrFromVideo(onQrCodeRead) const { videoLive, videoRef } = useReadQrFromVideo(onQrCodeRead)
return ( return (
<div className="flex flex-col gap-4 items-center justify-center w-full h-full"> <div className="flex flex-col items-center justify-center w-full h-full gap-4">
<h1 className="text-3xl font-semibold text-center text-purple-50"> <h1 className="text-3xl font-semibold text-center text-purple-50">
scan! scan!
</h1> </h1>
@ -30,7 +30,7 @@ const ReadQrCode: NextPage = () => {
ref={videoRef} ref={videoRef}
/> />
{!videoLive && ( {!videoLive && (
<div className="w-full h-64 rounded bg-purple-400 animate-pulse"></div> <div className="w-full h-64 bg-purple-400 rounded animate-pulse"></div>
)} )}
</div> </div>
) )

14
pages/welcome/index.tsx
View file

@ -4,15 +4,15 @@ import { useRouter } from 'next/router'
const Welcome: NextPage = () => { const Welcome: NextPage = () => {
const { push } = useRouter() const { push } = useRouter()
return ( return (
<div className="w-full text-center flex flex-col justify-center h-full text-purple-50"> <div className="flex flex-col justify-center w-full h-full text-center text-purple-50">
<h1 className="text-4xl mb-3 font-bold">hey!</h1> <h1 className="mb-3 text-4xl font-bold">hey!</h1>
<p className="text-xl font-medium mb-2"> <p className="mb-2 text-xl font-medium">
do you already have do you already have
<br />a <b>nano</b> passphrase <br />a <b>nano</b> passphrase
<br /> <br />
you wanna use? you wanna use?
</p> </p>
<aside className="text-xs mb-3"> <aside className="mb-3 text-xs">
your passphrase will{' '} your passphrase will{' '}
<b className="font-extrabold"> <b className="font-extrabold">
<em>never</em> <em>never</em>
@ -21,12 +21,12 @@ const Welcome: NextPage = () => {
<br /> <br />
and will only be decrypted for a few moments to send nano and will only be decrypted for a few moments to send nano
</aside> </aside>
<div className="flex flex-col gap-3 justify-center w-full mb-6"> <div className="flex flex-col justify-center w-full mb-6 gap-3">
<button className="dark:bg-gray-900 bg-purple-50 dark:hover:bg-gray-800 py-2 px-5 rounded text-lg font-bold shadow-lg hover:shadow-md active:shadow transition-all duration-100 text-gray-900 dark:text-purple-50"> <button className="px-5 py-2 text-lg font-bold text-gray-900 rounded shadow-lg dark:bg-gray-900 bg-purple-50 dark:hover:bg-gray-800 hover:shadow-md active:shadow transition-all duration-100 dark:text-purple-50">
i have a passphrase/seed i have a passphrase/seed
</button> </button>
<button <button
className="dark:bg-gray-900 bg-purple-50 dark:hover:bg-gray-800 py-2 px-5 rounded text-lg font-bold shadow-lg hover:shadow-md active:shadow transition-all duration-100 text-gray-900 dark:text-purple-50" className="px-5 py-2 text-lg font-bold text-gray-900 rounded shadow-lg dark:bg-gray-900 bg-purple-50 dark:hover:bg-gray-800 hover:shadow-md active:shadow transition-all duration-100 dark:text-purple-50"
onClick={() => push('/welcome/new')} onClick={() => push('/welcome/new')}
> >
what&apos;s a passphrase? what&apos;s a passphrase?

8
pages/welcome/new/done.tsx
View file

@ -4,15 +4,15 @@ import { useRouter } from 'next/router'
const Done: NextPage = () => { const Done: NextPage = () => {
const { push } = useRouter() const { push } = useRouter()
return ( return (
<div className="flex flex-col h-full justify-start items-center text-center px-4 gap-2 text-purple-50"> <div className="flex flex-col items-center justify-start h-full px-4 text-center gap-2 text-purple-50">
<h1 className="text-9xl font-extrabold">3</h1> <h1 className="font-extrabold text-9xl">3</h1>
<p className="text-3xl">you&apos;re done!</p> <p className="text-3xl">you&apos;re done!</p>
<p className="text-xl mb-5"> <p className="mb-5 text-xl">
all the buttons are now enabled and you can start using <b>zep</b> and{' '} all the buttons are now enabled and you can start using <b>zep</b> and{' '}
<b>nano</b>! <b>nano</b>!
</p> </p>
<button <button
className="dark:bg-gray-900 dark:text-purple-100 py-2 px-5 rounded text-xl bg-purple-50 font-bold text-gray-900" className="px-5 py-2 text-xl font-bold text-gray-900 rounded dark:bg-gray-900 dark:text-purple-100 bg-purple-50"
onClick={() => push('/dashboard')} onClick={() => push('/dashboard')}
> >
go! go!

8
pages/welcome/new/index.tsx
View file

@ -24,15 +24,15 @@ const New: NextPage = () => {
} }
return ( return (
<div className="flex flex-col h-full justify-start items-center text-center px-4 gap-2 text-purple-50"> <div className="flex flex-col items-center justify-start h-full px-4 text-center gap-2 text-purple-50">
<h1 className="text-9xl font-extrabold">{!storing ? 1 : 2}</h1> <h1 className="font-extrabold text-9xl">{!storing ? 1 : 2}</h1>
{!storing ? ( {!storing ? (
<> <>
<p className="text-lg"> <p className="text-lg">
generate a <b>passphrase</b> and copy it to your clipboard generate a <b>passphrase</b> and copy it to your clipboard
</p> </p>
<button <button
className="dark:bg-gray-900 dark:text-purple-100 py-2 px-5 rounded text-xl bg-purple-50 font-bold text-gray-900" className="px-5 py-2 text-xl font-bold text-gray-900 rounded dark:bg-gray-900 dark:text-purple-100 bg-purple-50"
onClick={lazy} onClick={lazy}
> >
generate passphrase generate passphrase
@ -50,7 +50,7 @@ const New: NextPage = () => {
store the <b>passphrase</b> securely in zep store the <b>passphrase</b> securely in zep
</p> </p>
<button <button
className="dark:bg-gray-900 dark:text-purple-100 py-2 px-5 rounded text-xl bg-purple-50 font-bold text-gray-900" className="px-5 py-2 text-xl font-bold text-gray-900 rounded dark:bg-gray-900 dark:text-purple-100 bg-purple-50"
onClick={onStoreClick} onClick={onStoreClick}
> >
store passphrase store passphrase