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' && (
<button
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')}
>
<HomeIcon className="h-full text-purple-50 dark:text-gray-900" />
@ -74,7 +74,7 @@ const BottomMenu: FC<Props> = ({ className }) => {
{'share' in navigator ? (
<button
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}
>
<ShareIcon className="text-purple-50 dark:text-gray-900" />
@ -113,7 +113,7 @@ const BottomMenu: FC<Props> = ({ className }) => {
}
/>
</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" />
</div>
<button

6
components/Layout.tsx
View file

@ -20,17 +20,17 @@ const Layout: FC<Props> = ({ children }) => {
useListenToColorMedia()
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
className={clsx('flex justify-between items-center', {
'flex-row-reverse': leftHanded,
})}
>
<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
</h1>
<LightningBoltIcon className="text-gray-900 dark:text-purple-100 h-4" />
<LightningBoltIcon className="h-4 text-gray-900 dark:text-purple-100" />
</div>
<TopMenu />
</header>

2
components/PinPad.tsx
View file

@ -49,7 +49,7 @@ const PinPad: FC<Props> = ({}) => {
}
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
ref={pinCirclesWrapRef}
className={clsx({ 'animate-denied': denied })}

26
components/RecentTransactions.tsx
View file

@ -27,13 +27,13 @@ const RecentTransactions: FC<Props> = ({ className }) => {
return (
<>
{hasReceivable && (
<section className="flex flex-col gap-3 w-full">
<div className="flex justify-between items-center gap-1">
<h2 className="text-2xl font-semibold text-purple-50 flex-1">
<section className="flex flex-col w-full gap-3">
<div className="flex items-center justify-between gap-1">
<h2 className="flex-1 text-2xl font-semibold text-purple-50">
incoming
</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}
</span>
<ChevronUpIcon
@ -55,7 +55,7 @@ const RecentTransactions: FC<Props> = ({ className }) => {
{receivableBlocks.map(receivable => (
<li
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
className="contents"
@ -64,9 +64,9 @@ const RecentTransactions: FC<Props> = ({ className }) => {
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([], {
day: '2-digit',
month: '2-digit',
@ -94,11 +94,11 @@ const RecentTransactions: FC<Props> = ({ className }) => {
</section>
)}
{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">
recent transactions
</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 => (
<li
key={txn.hash}
@ -109,13 +109,13 @@ const RecentTransactions: FC<Props> = ({ className }) => {
>
<button className="contents" onClick={() => {}}>
{txn.type === 'send' ? (
<UploadIcon className="w-6 text-yellow-300 flex-shrink-0" />
<UploadIcon className="flex-shrink-0 w-6 text-yellow-300" />
) : (
<DownloadIcon
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([], {
day: '2-digit',
month: '2-digit',
@ -144,7 +144,7 @@ const RecentTransactions: FC<Props> = ({ className }) => {
)}
{!hasReceivable &&
(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>
get your first nano
@ -155,7 +155,7 @@ const RecentTransactions: FC<Props> = ({ className }) => {
)}
{false && (
<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={() => {}}
>
load more

6
lib/hooks/useReadQrFromVideo.ts
View file

@ -48,7 +48,11 @@ const useReadQrFromVideo = (onQrCodeRead: (content: string) => void) => {
start()
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
}
}, [onQrCodeRead])

2
pages/index.tsx
View file

@ -21,7 +21,7 @@ const Landing = () => {
}, [push])
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">
<h1 className="text-4xl">welcome</h1>
</header>

2
pages/receive/qr.tsx
View file

@ -8,7 +8,7 @@ const MyQrCode: NextPage = () => {
const canvasRef = useDrawQrCode({ address: account?.address ?? '' })
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">
get scanned!
</h1>

4
pages/send/qr.tsx
View file

@ -21,7 +21,7 @@ const ReadQrCode: NextPage = () => {
const { videoLive, videoRef } = useReadQrFromVideo(onQrCodeRead)
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">
scan!
</h1>
@ -30,7 +30,7 @@ const ReadQrCode: NextPage = () => {
ref={videoRef}
/>
{!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>
)

14
pages/welcome/index.tsx
View file

@ -4,15 +4,15 @@ import { useRouter } from 'next/router'
const Welcome: NextPage = () => {
const { push } = useRouter()
return (
<div className="w-full text-center flex flex-col justify-center h-full text-purple-50">
<h1 className="text-4xl mb-3 font-bold">hey!</h1>
<p className="text-xl font-medium mb-2">
<div className="flex flex-col justify-center w-full h-full text-center text-purple-50">
<h1 className="mb-3 text-4xl font-bold">hey!</h1>
<p className="mb-2 text-xl font-medium">
do you already have
<br />a <b>nano</b> passphrase
<br />
you wanna use?
</p>
<aside className="text-xs mb-3">
<aside className="mb-3 text-xs">
your passphrase will{' '}
<b className="font-extrabold">
<em>never</em>
@ -21,12 +21,12 @@ const Welcome: NextPage = () => {
<br />
and will only be decrypted for a few moments to send nano
</aside>
<div className="flex flex-col gap-3 justify-center w-full mb-6">
<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">
<div className="flex flex-col justify-center w-full mb-6 gap-3">
<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
</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')}
>
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 { push } = useRouter()
return (
<div className="flex flex-col h-full justify-start items-center text-center px-4 gap-2 text-purple-50">
<h1 className="text-9xl font-extrabold">3</h1>
<div className="flex flex-col items-center justify-start h-full px-4 text-center gap-2 text-purple-50">
<h1 className="font-extrabold text-9xl">3</h1>
<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{' '}
<b>nano</b>!
</p>
<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')}
>
go!

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

@ -24,15 +24,15 @@ const New: NextPage = () => {
}
return (
<div className="flex flex-col h-full justify-start items-center text-center px-4 gap-2 text-purple-50">
<h1 className="text-9xl font-extrabold">{!storing ? 1 : 2}</h1>
<div className="flex flex-col items-center justify-start h-full px-4 text-center gap-2 text-purple-50">
<h1 className="font-extrabold text-9xl">{!storing ? 1 : 2}</h1>
{!storing ? (
<>
<p className="text-lg">
generate a <b>passphrase</b> and copy it to your clipboard
</p>
<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}
>
generate passphrase
@ -50,7 +50,7 @@ const New: NextPage = () => {
store the <b>passphrase</b> securely in zep
</p>
<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}
>
store passphrase